@charset "UTF-8";

/* ******************** layout ******************** */
.pageOutWrap {position: relative;}
.contentWrap {max-width: 1480px; width: 100%; margin: 0 auto;}
.subContentWrap {max-width: 1300px; width: 100%; margin: 0 auto;}
/*
  section 상단부 간격
*/
#section {padding-top: 90px;}

/*
    중간 main article 상하 간격
*/
.pullPageWrap {margin-bottom: 100px;}


/*
    *** 서브페이지 상하단 간격
*/
.subContentTBGap {padding-top:60px; padding-bottom:100px;}




/*
    ***************************** 대문 페이지 **********************************
*/

.gatePageOutWrap {width: 100%; height: 100vh;}

/*
    *** 헤더
*/
.headWrapper {position: fixed; top: 0; left: 0; width: 100%; height: 85px; z-index: 99; background: rgba(21,21,21,.6);}
.gateHeader { display: flex; justify-content: space-between; align-items: center;width: 100%; height: 100%; z-index: 15; box-sizing: border-box; padding: 0 220px; }
.gateHeader .logo img { width: 100%; vertical-align: top;}

/*카카오링크*/
.gateHeader .kakaoLinkWrap {position: relative; top: 0;}
.gateHeader .kakaoLinkWrap.on {top: 104px;}
.gateHeader .kakaoLinkWrap .clickLink { width: 200px; display: flex; align-items: center; justify-content: center; padding: 15px 0; cursor: pointer; }
.gateHeader .kakaoLinkWrap .clickLink .imgArea { width: 24px; height: 22px; background: url(/app/layout/web/images/gate/kakaoIcon.png)no-repeat; background-size:24px 22px;}
.gateHeader .kakaoLinkWrap .clickLink span { font-size: 18px; font-family:'Pretendard-Regular'; vertical-align: middle; color: #ffffff; margin-left: 10px; }

/*카카오링크 hover시 */
.gateHeader .kakaoLinkWrap .clickLink.on {box-sizing: border-box; background: #e7c83d; }
.gateHeader .kakaoLinkWrap > .clickLink.on {height: 85px;}
.gateHeader .kakaoLinkWrap .clickLink.on span { color: #3B1E1E; }
.gateHeader .kakaoLinkWrap .clickLink.on .imgArea { width: 24px; height: 22px; background: url(/app/layout/web/images/gate/kakaoIcon_on.png)no-repeat; background-size:24px 22px;}

/*카카오링크 서브list */
.gateHeader .kakaoLinkWrap .clickSubLink { display: none; }
.gateHeader .kakaoLinkWrap .clickSubLink li {background: rgba(21,21,21,0.4); margin-bottom: 1px;}
.gateHeader .kakaoLinkWrap .clickSubLink li:last-child {margin-bottom: 0px;}
.gateHeader .kakaoLinkWrap .clickSubLink li:hover {background: rgba(21,21,21,0.6); }
.gateHeader .kakaoLinkWrap .clickSubLink li a img { margin-left: 20px; vertical-align: middle;}

/*
    *** 메인비쥬얼
*/
.subVisual , .subVisualBg {position: relative; width: 100%; height: 100%; background: url(/app/layout/web/images/gate/banner.jpg) 50% 50% no-repeat;
    background-size: cover; overflow: hidden; }
.subVisualBg {position: absolute; top: 0; left: 0; animation: bgView 10s ease-in-out .5s forwards;}
.subVisual .contentsWrap { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); padding-top: 40px; }

/*
    *** 메인비주얼 텍스트
*/
.subVisual .contentsWrap .mainText {  padding: 0 220px; margin-bottom: 160px; }
.subVisual .contentsWrap .mainText span { font-family:'NotoSerifKR-Light'; font-size: 75px; color: #f4efeb; }
.subVisual .contentsWrap .mainText .medium {  font-family:'NotoSerifKR-Medium'; }

/*
    *** 지점바로가기 링크
*/

.subVisual .gateLinkWrap { position: absolute; bottom: 10%; width: 100%; }
/*지점바로가기 텍스트*/
.subVisual .gateLinkWrap .mainTitle { font-family:'Pretendard-Light'; font-size: 35px; color: #ffffff; text-align: center; margin-bottom: 40px;}
.subVisual .gateLinkWrap .mainTitle .bold { font-family:'Pretendard-Bold'; }

/*지점바로가기 list*/
.subVisual .gateLink { display: flex; justify-content: center; align-items: center; }
.subVisual .gateLink li { width: 210px; margin: 0 3px; padding: 20px 20px; border: 1px solid #fff;
    cursor: pointer;}
.subVisual .gateLink li a{ display: flex; justify-content: space-between; align-items: center; font-size: 25px; color: #ffffff; font-family:'Pretendard-Regular'; }
.subVisual .gateLink li a img { width: 100%; max-width: 10px; }

.subVisual .gateLink li:hover { background: rgba(221,164,120,0.7); transition: 0.5s; }



/*.footerWrap { width: 100%; height: 200px; background: red;  }*/

@keyframes bgView{
    0% {
        transform: perspective(500px) scale(1.3) rotate(.001deg);
        -webkit-transform: perspective(500px) scale(1.3) rotate(.001deg);
        -moz-transform: perspective(500px) scale(1.3) rotate(.001deg);
        -ms-transform: perspective(500px) scale(1.3) rotate(.001deg);
        -o-transform: perspective(500px) scale(1.3) rotate(.001deg);
    }
    100% {
        transform: perspective(500px) scale(1) rotate(.001deg);
        -webkit-transform: perspective(500px) scale(1) rotate(.001deg);
        -moz-transform: perspective(500px) scale(1) rotate(.001deg);
        -ms-transform: perspective(500px) scale(1) rotate(.001deg);
        -o-transform: perspective(500px) scale(1) rotate(.001deg);
    }
}

/*
    ***************************** 대문 페이지 끝 **********************************
*/





/* ******************** notice ******************** */
.notice {z-index: 600; position: relative; width: 100%; height: 50px; background-color: var(--colorless08);}
.notice .noticeInner {position: relative; display: flex; justify-content: space-between; align-items: center; height: inherit; color: #fff;}
.notice .noticeInner > div {font-size: 16px;}

.notice .noticeInner .networkList {cursor: pointer; font-family:'Pretendard-Light'; font-size: 16px;}
.notice .noticeInner .networkList .color {color: var(--colorless01);}
.notice .noticeInner .networkList:hover .color {color: var(--beige-color01); font-size: inherit;}
.notice .noticeInner .networkList.on .color {color: var(--beige-color01); font-size: inherit;}
.notice .noticeInner .networkList i {color: var(--beige-color01); font-size: inherit;}

.notice .noticeCenter a {color: #fff;}
.notice .noticeCenter a:before {content: ''; display: inline-block; width: 1px; height: 10px; background-color: #fff; margin: 0 20px; box-sizing: border-box;}

.notice .logIn {display: flex; align-items: center;}
.notice .logIn .basket .cl_count {display: inline-block; width: 26px; height: 20px; text-align: center; line-height: 20px; color: var(--colorless01); background-color: var(--beige-color01); border-radius: 10px;}
.notice .logIn .sideBar {display: inline-block; width: 1px; height: 40px; margin: 0 30px; box-sizing: border-box; background-color: #454545;}
.notice .logIn .login {cursor:pointer;}

/* 네트워크 리스트 hover */
.netWorkListHover {display: none; z-index:600; position: absolute; top: 40px; left:3px; /*width:12.23%;*/ width: 235px; border: 1px solid var(--colorless03); box-sizing: border-box;}
.netWorkListHover.on {display: block; z-index: 600;}
.netWorkListHover li {display: flex; justify-content: center; align-items: center; height: 40px; font-size: 16px; font-family:'Pretendard-Light'; border-bottom: 1px solid var(--colorless03); box-sizing: border-box; color: var(--colorless08);
    cursor: pointer; background-color: var(--colorless01);}
.netWorkListHover li:last-child {border-bottom: none;}
.netWorkListHover li:hover {background-color: #f2f2f2;}
.netWorkListHover li > span {font-family:'Pretendard-Medium';}


/* ******************** header ******************** */
.headerWrapper {z-index: 500; position: fixed; top: 0; left: 0; width: 100%; background-color: var(--colorless01); height: 90px; margin-top: 50px; border-bottom: 1px solid var(--colorless03);
    transition: all .2s; box-sizing: border-box;}
.headerWrapper.on {margin-top: 0}

.headerWrapper header {z-index: 50; position:relative; height: inherit; background: var(--colorless01);}
.headerWrapper .headerInner {display: flex; justify-content: space-between; align-items: center; height: inherit;}
.headerWrapper .headerInner .logo {margin:0; padding:0;}
.headerWrapper .headerInner .logo a {display:inline-block; margin:0; padding:0;}
.headerWrapper .headerInner .logo img {display: inline-block; vertical-align: top;}


header .headerInner .menuWrap {display: flex; gap: 10px;}
header .headerInner .menu {display: flex; align-items: center;}
header .headerInner .menu li {color: var(--beige-color06); font-size: 20px; font-family:'Pretendard-Bold'; margin-right: 30px;}
header .headerInner .menu li a {color: var(--beige-color06); font-size: 20px; font-family:'Pretendard-Bold';}
header .headerInner .menu li:last-child {margin-right: 0;}
header .headerInner .menu .color {color: var(--beige-color01);}
header .headerInner .menu .showBlockPc:nth-child(6) {margin-right: 0;}

/* ******************** header hover시 subMenu ******************** */
.subMenu {position: absolute; z-index: 10; top: -800px; left: 50%; transform: translateX(-50%); max-width: 1300px; width: 100%; background-color: rgba(255,255,255,0.98); transition: all .5s;}
.subMenu.on {top: 90px;}
.subMenu .subMenuInner {display: flex; padding: 60px; box-sizing: border-box;}
.subMenu .subMenuInner .menuList {display: flex; flex-direction: column; width: 55%; margin-right: 0px;}
.subMenu .subDepth:after {content: ''; display: block; width: 100%; height: 1px; background-color: var(--colorless03); margin-bottom: 30px;}
.subMenu .subDepth .mainTxt {position: relative; display: inline-block; z-index: 1; margin: 0 0 20px; box-sizing: border-box; font-family:'Pretendard-Medium';
    font-size: 25px; color: var(--colorless08);}

.subMenu .subDepth .noCategory {position: relative;}
.subMenu .subDepth .noCategory a:hover:before {content: ''; z-index: -1; position: absolute; top: 50%; left: 0;background-color: #f3dfcf; width: 100%; height: 11px;}

.subMenu .subDepth ul {display: flex; align-items: center; var(--colorless07); margin-bottom: 30px; font-family:'Pretendard-Light'; font-size: 20px;}
.subMenu .subDepth ul li {cursor: pointer;}
.subMenu .subDepth ul li:after  {content: ''; display: inline-block; width: 1px; height: 20px; margin: 0 10px; box-sizing: border-box; background-color: var(--colorless03);}
.subMenu .subDepth ul li:last-child:after {content: none;}
/* hover시 색상 변경 */
.subMenu .subDepth ul li a:hover {color: var(--beige-color01); font-family:'Pretendard-Medium';}
.subMenu .subDepth .mainTxt.on:before {content: ''; z-index: -1; position: absolute; top: 50%; left: 0;background-color: #f3dfcf; width: 100%; height: 11px;}

/* ******************** header hover시 우측 슬라이드 ******************** */
.subMenu .swiperInner {position: relative; width: 45%; margin-left: 30px;}
.subMenu .swiperInner .mainTxt {display: flex; justify-content: space-between; font-family:'Pretendard-Medium'; font-size: 25px; margin-bottom: 20px;}
.subMenu .swiperInner .mainTxt > span {margin-right: auto; font-family:'Pretendard-Bold'; color: var(--beige-color01);}
.subMenu .swiperInner .mainTxt a {display: inline-block; width: 80px; height: 22px; line-height: 22px; text-align: center; font-size: 14px; color: var(--colorless06); border: 1px solid var(--colorless06); box-sizing: border-box;}

.subMenu .swiperInner .swiper-slide img {width:100%; height:auto;}
.subMenu .swiperInner .swiper-pagination {position: relative; top: 20px; left: 50%; transform: translateX(-50%);}

.subMenu .swiperInner .swiper-pagination-bullet {width:11px !important; height:11px !important; opacity:1 !important; margin-left:10px !important; margin-right: 10px;
    background:#fff !important; border: 1px solid var(--beige-color01);}
.subMenu .swiperInner .swiper-pagination-bullet-active {background-color: var(--beige-color01) !important;}

/*헤더 국가별*/
header .headerInner .languageArea {position: relative; display: flex; align-items: center; cursor: pointer;}
header .headerInner .languageArea .btnGlobal {width: 30px; height: 30px;}
header .headerInner .languageArea .btnGlobal svg{width: 100%; height: 100%; display: block;}
header .headerInner .languageArea .languageList {position: absolute; top: 40px; left: -10px; min-width: 86px; display: none;}
header .headerInner .languageArea.on .languageList{display: block;}
header .headerInner .languageArea .languageList ul {padding: 10px; box-sizing: border-box; border-radius: 5px; background-color: #fff;box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.5);}
header .headerInner .languageArea .languageList li a {color: #909090; display: flex; align-items: center; gap: 10px; padding: 5px 0 5px 10px; box-sizing: border-box;}
header .headerInner .languageArea .languageList li a .txt{color: #909090; font-size: 16px;font-family: 'Roboto'; font-weight: 700;}
header .headerInner .languageArea .languageList li a .txt:hover {color: rgb(221, 164, 120);}




/* ******************** mobile:: gnbMenu ******************** */
.gnbWrapper {color: var(--colorless01);}
.gnbWrapper .gnbMenu { overflow-y: auto; z-index: 600; position: fixed; top: 0; right: -80%;width: 80%; height: 100%; padding: 30px 0; box-sizing: border-box; background: #161616; transition: right 0.6s cubic-bezier(0.7, 0.7, 0.7, 0.7);}
.gnbWrapper .gnbMenu.on {right: 0;}
.gnbWrapper .gnbMenu .gnbMenuInner {padding: 0 30px; box-sizing: border-box;}
.gnbWrapper .gnbMenu .gnbMenuInner a {color:#fff;}
.gnbWrapper .gnbBg {display: none; z-index: 501; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.3);} /*z-index 280에서 501로 수정 25.10.10*/
/* gnb배경 활성화 */
.gnbWrapper .gnbBg.on {display: block;}

.gnbWrapper .gnbTop {display: flex; justify-content: space-between; margin-bottom: 30px;}
.gnbWrapper .gnbTop img {display: block; width: 150px;}
.gnbWrapper .gnbTop i {font-size: 20px; color: var(--colorless01); cursor: pointer;}

.gnbWrapper .gnbAllMenuWrap {border-top: 2px solid var(--colorless08); box-sizing: border-box;}
.gnbWrapper .gnbAllMenuWrap .gnbAllMenu {}
/* 메뉴 클릭시 span 활성화 */
.gnbWrapper .gnbAllMenuWrap .gnbAllMenu .mainMenu.on > span {color: var(--beige-color01);}
.gnbWrapper .gnbAllMenuWrap .gnbAllMenu .mainMenu.on i {color: var(--beige-color01);}
.gnbWrapper .gnbAllMenuWrap .gnbAllMenu:last-child {border-bottom: none;}

.gnbWrapper .mainMenu {display: flex; justify-content: space-between; align-items: center; font-family:'Pretendard-Medium'; font-size: 18px; color:#ffffff;
    border-bottom:2px solid var(--colorless08); box-sizing: border-box; cursor: pointer;}
.gnbWrapper .mainMenu span {font-size: 18px;}

.gnbWrapper .depthMenu li {display: flex; align-items: center; padding-left: 15px; border-bottom: 1px solid var(--colorless08); box-sizing: border-box;
    color: var(--colorless05); font-size: 14px; font-family:'Pretendard-Light';}
.gnbWrapper .depthMenu li a {display: flex; align-items: center; color: inherit; width: 100%; height: 100%;}
.gnbWrapper .depthMenu li:last-child {border-bottom: none;}

.gnbWrapper .mainMenu,
.gnbAllMenu .depthMenu li {height: 50px;}

.gnbWrapper .package {display: flex; flex-wrap: wrap; justify-content: center; margin: 15px; box-sizing: border-box;}
.gnbWrapper .package .packageCell {width: calc(100% /2); border-width: 0 15px 15px 0; border: 15px solid transparent;  box-sizing: border-box;}
.gnbWrapper .package .packageCell .cellInner {display: flex; flex-direction: column; justify-content: center; align-items: center;
    border: 1px solid #2f2e2d; padding: 15px 0; box-sizing: border-box;}
.gnbWrapper .package .packageCell img {display: inline-block; width: 35px; margin-bottom: 13px;}
.gnbWrapper .package .packageCell span {font-size: 14px; font-family:'Pretendard-Light'; color: var(--colorless05);}


/* ******************** page: index :: 역삼점 추천시술 (proposalSurgery) ******************** */
.yeoksamSurgery .swiper-wrapper {}
.yeoksamSurgery .swiper-container {/*height: 350px;*/}
.yeoksamSurgery .swiper-slide {overflow: hidden; display: flex; justify-content: space-evenly; align-items: center;
    padding: 0 30px; width: 850px;  box-sizing: border-box; background-color: var(--colorless02);}
.yeoksamSurgery .swiper-slide.first {background-color: var(--beige-color05);}
.yeoksamSurgery .swiper-slide .pdItem.bottom {position: relative; top: 20px;}
.yeoksamSurgery .swiper-slide .pdItem img {display: block;}
.yeoksamSurgery .explan {position: relative; color: var(--colorless08);}
.yeoksamSurgery .explan li {margin-bottom: 30px;}
.yeoksamSurgery .explan li:last-child {margin-bottom: 0;}
.yeoksamSurgery .explan .pdSub {font-family:'Pretendard-Medium'; font-size: 25px; color: var(--colorless08);}
.yeoksamSurgery .explan .pdSub > span {font-family:'Pretendard-ExtraBold';}
.yeoksamSurgery .explan .pdName {font-size: 45px; font-family:'Pretendard-Bold';}
.yeoksamSurgery .explan .viewBtn {display: inline-flex; justify-content: center; align-items: center; padding: 13px; cursor: pointer;
    font-family:'Pretendard-Light'; font-size: 14px; border: 1px solid var(--colorless08); box-sizing: border-box;}


/* ******************** page: index :: 바슐랭 가이드 In 역삼 (yeoksamEvent) ******************** */

/*
    ***바슐랭가이드, 바노바기 프로모션 레이아웃 공통 적용중
*/
.cl_displayRow {position: relative; display: flex;}
.cl_displayRow .description {width: 30%;}

.yeoksamEvent .mVer {display: none;}
.yeoksamEvent .cl_banobagiEng {margin: 0; max-width: auto;}
.yeoksamEvent .cl_banobagiEng > div {color: var(--colorless08);}

.yeoksamEvent .headline {margin-bottom: 60px; font-size: 45px; font-family:'NotoSerifKR-Light'; letter-spacing: 5px;}
.yeoksamEvent .headline > span {font-family:'NotoSerifKR-Light';}

.yeoksamEvent .cl_txtCon .main {font-size: 40px; color: var(--colorless09); font-family:'Pretendard-Bold';}
.yeoksamEvent .cl_txtCon .sub {font-size: 20px; color: var(--colorless07); font-family:'Pretendard-Light';}
.yeoksamEvent .cl_txtCon div {margin-bottom: 30px;}


.yeoksamEvent .dateInfo {display: flex; align-items: center; margin-bottom: 60px;}
.yeoksamEvent .dateInfo .count {display: inline-block; padding: 2px; margin-right: 3px; font-size: 14px; box-sizing: border-box; border-radius: 2px;
    background: var(--beige-color01); color: var(--colorless01); font-family:'Pretendard-Medium';}
.yeoksamEvent .dateInfo .period {font-size: 16px; color: var(--colorless05);}
.yeoksamEvent .allTimeEvent {color: var(--beige-color01);}

.yeoksamEvent .eventSwiper {width: 100%;}
.yeoksamEvent .eventSwiper img {width: 100%;}

/*
   *** 바슐랭 가이드 swiper 커스텀
*/
.yeoksamEvent .paginationBox {position: absolute; left: 0; bottom: 45px; width: 150px;  display: flex; justify-content: space-between;}
.yeoksamEvent .paginationBox span {font-size: 14px;}
.yeoksamEvent .paginationBox span i {color: #000;}
.yeoksamEvent .paginationBox .first {font-family:'Pretendard-Medium'; color: var(--beige-color01);}
.yeoksamEvent .paginationBox .last:after {content: ''; position: absolute; top: 50%; left: 50%; transform: translateX(-50%);  display: inline-block; width: 45px; height: 1px; background: var(--colorless03);}
.yeoksamEvent .paginationBox .last {font-family:'Pretendard-Light'; color: var(--colorless05);}

/* ******************** page: index :: 프로모션 (promotion) ******************** */
.promotion .cl_banobagiEng {max-width:183px;}
.promotion .cl_banobagiEng .brand {display: none;}

.promotion {position: relative; width: 100%; background: var(--colorless08);}
.promotion .cl_displayRow {padding: 100px 0; align-items: center;}
.promotion .promotionRotate {position: absolute; top: 60px; left: 125px;}
.promotion .promotionRotate > img {animation: rotate_image 12s linear infinite;transform-origin: 50% 50%; width: 100%;}
@keyframes rotate_image{ 100% {transform: rotate(-360deg);} }

.promotion .cl_banobagiEng {margin: 0; max-width: auto;}
.promotion .cl_banobagiEng > div {color: var(--colorless01);}

.promotion .cl_txtCon .main {font-size: 40px; color: var(--colorless01); font-family:'Pretendard-Bold';}
.promotion .cl_txtCon .sub {font-size: 20px; color: var(--colorless01); font-family:'Pretendard-Light';}
.promotion .cl_txtCon div {margin-bottom: 30px;}

.promotion .viewBtn {display: inline-flex; justify-content: center; align-items: center; padding: 13px; cursor: pointer;
    font-family:'Pretendard-Light'; color: var(--colorless01); font-size: 14px; border: 1px solid var(--colorless01); box-sizing: border-box;}
.promotion .promotionWrapper {position: relative; width: 70%;}
.promotion .promotionSwiper {}
.promotion .promotionSwiper .swiper-slide {height:auto; background: var(--colorless01);}
.promotion .promotionSwiper .swiper-slide img {width: 100%;}
.promotion .promotionSwiper a {}
.promotion .promotionSwiper .sub {}
.promotion .promotionSwiper .sub .spotName {display: inline-flex; justify-content: center; padding: 5px; margin-right: 10px; border-radius: 14px;
    font-size: 13px; border: 2px solid var(--beige-color01); color: var(--beige-color01); box-sizing: border-box;}

.promotion .promotionSwiper .sub > li:nth-child(1) {display: flex; align-items: center; padding: 30px 20px 15px; margin-bottom: 20px; border-bottom: 1px solid var(--colorless03); font-size: 20px; font-family:'Pretendard-Medium'; color: var(--colorless08); box-sizing: border-box;}
.promotion .promotionSwiper .sub > li:nth-child(n+2):nth-child(-n+5) {padding: 0 20px; margin-bottom: 20px; box-sizing: border-box;}
.promotion .promotionSwiper .sub > li:nth-child(2) {font-family:'Pretendard-Light'; color: var(--colorless07);}
.promotion .promotionSwiper .sub > li:nth-child(3) {font-family:'Pretendard-Light'; color: var(--colorless05);}
.promotion .promotionSwiper .sub .every {text-align: right; color: var(--beige-color01);}
.promotion .promotionSwiper .sub .progressZone { display: flex;  align-items: center; justify-content: space-between;}
.promotion .promotionSwiper .sub .progressZone .progressBg {position: relative; width: 100%; height: 3px; margin-right: 15px; background: var(--colorless03);}
/*천천히 차오르게 할 경우 주석 해제*/
/*
.promotion .promotionSwiper .sub .progressZone .progressBg .ani {
    animation-name: graph;
    display: block;
    height: inherit;
    background: var(--beige-color01);
    animation-duration: 3s;
    animation-duration: normal;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
@keyframes graph {
    0% { width: 0; }
    100% { width: 100%; }
}
*/
.promotion .promotionSwiper .sub .progressZone .progressBg .graph01 {position: absolute; left: 0; width: 50%; height: 3px; background: var(--beige-color01)};
.promotion .promotionSwiper .sub .dateCount {display: flex; color: var(--beige-color01); white-space: nowrap;}
.promotion .promotionSwiper .sub .progressZone span {color: var(--beige-color01); white-space: nowrap; font-family:'Pretendard-Medium';}

/* promotion 화살표 위치 및 색상 수정 */
.promotion .swiper-button-prev,
.promotion .swiper-button-next {position: absolute; color: var(--colorless01);}
/* 이전버튼 */
.promotion .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: -5%;}
/* 다음버튼 */
.promotion .swiper-button-next, .swiper-container-rtl .swiper-button-prev {right: -5%;}


/* ******************** page: index :: youtube (banoShorts) ******************** */

.banoShorts {position: relative; background: url("/app/layout/web/images/pc/shortsBg.png") 0 center no-repeat; background-position-y: 34px;}
.banoShorts .cl_txtCon.layoutTop .main:before {content: ''; display: inline-block;
    background: url("/app/layout/web/images/common/icon_short.png") center/38px no-repeat;
    width: 38px; height: 46px; }
.banoShorts .cl_txtCon.layoutTop .main {display: flex; justify-content: center; align-items: center;}
.banoShorts .cl_txtCon.layoutTop .main > span {font-family:'Pretendard-Bold'; color: #f40407;}

.banoShorts .banoShortsWrapper {overflow: hidden; max-width: 88.4375%; width: 100%; height: 100%; margin-left: auto; }
.banoShorts .banoShortsSwiper {padding-bottom: 30px;}
.banoShorts .videoWrap {overflow: hidden; position: relative; height: 0; padding-bottom:177.5%; mask-image: radial-gradient(white, black);}
.banoShorts .videoWrap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.banoShorts .videoWrap img {width:100%; max-width:277px; cursor:pointer; border-radius:8px;}
.banoShortsSwiper .swiper-container-horizontal > .swiper-scrollbar {left: 222px; bottom: -27px; background-color: var(--colorless02) !important;}
.banoShortsSwiper .swiper-scrollbar-drag {background-color: var(--beige-color01) !important;}

/* ******************** page: index :: 아카데미TV (academyTv) ******************** */
/*
    *** iframe 공통 너비
 */
.academyTv iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


.academyTv {}
.academyTv .videoContainer {display: flex;}
.academyTv .mainVideo {width: 67%; margin-right: 30px; box-sizing: border-box;}
.academyTv .mainVideo .videoWrap {position: relative; width: 100%; height: 0; padding-bottom: 56.25%; display: flex;}

/*
    오른쪽 동영상
*/
.academyTv .subVideo {overflow-x: hidden; width: 33%; height: 560px; padding: 0 10px; box-sizing: border-box;}

.academyTv .subVideo::-webkit-scrollbar { width: 5px; }
.academyTv .subVideo::-webkit-scrollbar-track { background-color:#fff; }
.academyTv .subVideo::-webkit-scrollbar-thumb { background: var(--beige-color01); border-radius: 10px; }
.academyTv .subVideo::-webkit-scrollbar-button { display: none; }

.academyTv .subVideo .subVideoInner {display: flex; border-bottom: 1px solid var(--colorless03); padding-top: 15px; padding-bottom: 15px;
    cursor: pointer; box-sizing: border-box;}
.academyTv .subVideo .subVideoInner:first-child {padding-top: 0;}
.academyTv .subVideo .subVideoInner:last-child {border: none;}
.academyTv .subVideo .subVideoInner:hover {background: var(--beige-color05);}
/*.academyTv .subVideo .subVideoInner .videoWrap {position: relative; width: 39.26%; height: 0; padding-bottom:21%; margin-right: 20px;}*/
.academyTv .subVideo .subVideoInner .videoWrap {display: flex; justify-content: center; align-items: center; margin-right: 20px; box-sizing: border-box;}
.academyTv .subVideo .subVideoInner .videoWrap img {width:100%; max-width:180px;}


.academyTv ul {display: flex; flex-direction: column; justify-content: space-evenly; width: 100%;}
.academyTv ul .mainTxt {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 80%; margin-bottom: 15px; font-size: 25px; font-family:'Pretendard-Medium'; color: var(--colorless08);}
.academyTv ul .subTxt {font-size: 16px; font-family:'Pretendard-Light'; color: var(--colorless06);}

/* ******************** page: index :: 바노바기 연혁( petitHistory ) ******************** */
.petitHistory {position: relative; height: 600px; overflow: hidden;}
.petitHistory .historySwiper {}
.petitHistory .swiper-slide > div {position: absolute; top: 0; left: 0; width: 100%;}
.petitHistory .historyContainer {z-index: 10; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-around;}

.petitHistory .innerTxtWrap {display: flex; justify-content: center; align-items: center; width: calc(100% / 4); color: var(--colorless01);
    border-right: 1px solid #5c5d5c; box-sizing: border-box;}
.petitHistory .innerTxtWrap:last-child {border-right: none;}
.petitHistory .innerTxtWrap li {text-align: center;}
.petitHistory .numWrap {overflow: hidden; display: inline-block; margin-bottom: 48px; }

/* 연혁 background Img */
.petitHistory .historyBg {width: 100%; height: 600px;  background-repeat: no-repeat; background-size: cover; background-position: center center;}

.petitHistory .historyBg.img01 {background-image: url("/app/layout/web/images/common/historySlide01.jpg")} /*since*/
.petitHistory .historyBg.img02 {background-image: url("/app/layout/web/images/common/historySlide02-1.jpg")} /*누적시술*/
.petitHistory .historyBg.img03 {background-image: url("/app/layout/web/images/common/historySlide03.jpg")} /*지점수*/
.petitHistory .historyBg.img04 {background-image: url("/app/layout/web/images/common/historySlide04.jpg")} /*보유장비수*/

/* 상단부 숫자 */
.petitHistory .numWrap .num {display: inline-block; font-size: 120px; font-family:'NotoSerifKR-Light';
    transition-property: transform; transition-duration: .6s; transform: translateY(-100%);  -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%);}
.petitHistory .numWrap .num.surgery {font-size: 80px; letter-spacing: -0.8px;}
/* 하단부 연혁 설명 */
.petitHistory .subTxtWrap  li {display: flex; flex-direction: column;  justify-content: center;
    font-size: 30px; font-family:'NotoSerifKR-Regular'; color: rgba(255,255,255,0.3); transition: all .6s;}
.petitHistory .subTxtWrap .smailTxt {margin-bottom: 36px; font-family:'Pretendard-Light'; font-size: 16px; color:rgba(255,255,255,0.6); letter-spacing: 4px;}
.petitHistory .subTxtWrap .bold {font-family:'NotoSerifKR-Bold' !important; font-size: 16px;}

/* 상단부 숫자 slide active 됐을 때 */
.petitHistory .numWrap .num.active {transform: translateY(0);  -webkit-transform: translateY(0);
    -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); }
.petitHistory .subTxtWrap.active li {color: var(--colorless01);}
.petitHistory .subTxtWrap.active .smailTxt {color:rgba(255,255,255,0.6);}

/* ******************** page: index :: 하단부맵영역 ******************** */
/* 지도 */
.map__wrap {position: relative; height: 610px; /*margin-top: 100px;*/}
.map__wrap .mapCell {position:relative; height:100%; background-color:#f5f5f5;}
.map__wrap .dh__inner {display:flex; justify-content: center; align-items: center; position: absolute; top:0; left:0; width:40%; height:100%; background-color:rgba(224, 165, 122, 0.9); z-index:100;}
.map__wrap .map {height: 100%; background-repeat: no-repeat; background-size: cover; position: relative; box-sizing: border-box; width: 100%}
.map__wrap .map__info {z-index: 3; padding-left: 50px; box-sizing: border-box;}
.map__wrap .map__info .map__param01 { color: #fff; font-size: 22px; font-weight: 400; margin-bottom: 8px;}
.map__wrap .map__info .map__param01 span { font-size: 14px; font-weight: 300; opacity: 0.5;}
.map__wrap .map__info .map__param02 { font-size: 16px; color: #fff; font-weight: 300; line-height: 1.4em; margin-bottom: 30px; position: relative;}
.map__wrap .map__info .map__param02 span {margin-top: 8px;display: block;}
.map__wrap .map__info .map__param02.map__address::before { content: ""; width: 30px; height: 36px; background-image: url("/app/layout/web/images/common/map_icon01.png"); background-repeat: no-repeat; background-size: cover; position: absolute; left: -50px; top: 0px;}
.map__wrap .map__info .map__param02.map__time::before { content: ""; width: 30px; height: 30px; background-image: url("/app/layout/web/images/common/map_icon02.png"); background-repeat: no-repeat; background-size: cover; position: absolute; left: -50px; top: 0px;}
.map__wrap .map__info .map__param03 { font-size: 34px; color: #fff; position: relative; font-weight: 800;}
.map__wrap .map__info .map__param03::before { content: ""; width: 26px; height: 27px; background-image: url("/app/layout/web/images/common/map_icon03.png"); background-repeat: no-repeat; background-size: cover; position: absolute; left: -45px; top: 10px; color: #fff;}
.marker__box { position: relative; top: -80px; padding: 10px; background: #fff; border: 1px solid #7681a8; box-sizing: border-box;}
.marker__txt { margin: 0; font-size: 16px; line-height: 1.4;}
.map__wrap .map__bg {background-color: #e0a57a;opacity: .95;position: absolute;width: 40%;height: 100%;top: 0;left: 50%;margin-left: -50%;z-index: 2;}
.popup__layer{ position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index: 200; background-color: rgba(0, 0, 0, .7);}

footer .footerSub {margin-top: 100px;}
footer .footerSub p {color: var(--colorless08); text-align: center; font-size: 18px; font-family:'Pretendard-Light'; border-top: 1px solid var(--colorless03); border-bottom: 1px solid var(--colorless03);
    padding: 20px 0; box-sizing: border-box; }




/*
    *** 2025.10 푸터 리뉴얼
*/

footer .footerTail .top {padding:23px 0; border-bottom:solid 1px #f0f0f0;}
footer .footerTail .top .contentWrap {display:flex; align-items: center;}
footer .footerTail .top a {display:flex; align-items: center; font-size:16px; color: var(--colorless06); font-family:'Pretendard-Light';}
footer .footerTail .top a:after {content: ''; display: block; width: 1px; height: 15px; margin: 0 15px; background: var(--colorless03); box-sizing: border-box;}
footer .footerTail .top a:last-child:after {content: none;}

/*footer .footerTail .mid .pcVer {display: inline-block;}
footer .footerTail .mid .mVer {display: none;}*/
footer .footerTail .mid .companyInfo {display: flex; align-items: center; gap:30px; margin: 30px 0;}
footer .footerTail .mid .companyInfo .footerLogo .introLogo {display:block;}
footer .footerTail .mid .companyInfo ul {display: flex;}
footer .footerTail .mid .companyInfo ul li {margin-right: 30px; font-size: 14px; color: var(--colorless07); font-family:'Pretendard-Light';}
/*footer .footerTail .mid ul li:last-child {margin-right: 0;}*/

footer .footerTail .copy {font-size: 14px; color:var(--colorless05); font-family:'Pretendard-Light'; text-align:center;}






/* ******************** quick버튼 ******************** */
#quick {z-index: 50; position: fixed; right: 0; top: 50%; transform: translateY(-50%);}
#quick .quickWrap {display: flex; flex-direction: column; border: 1px solid var(--colorless03); box-sizing: border-box;}
#quick .quickBox {display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 20px; background: var(--colorless01); border-bottom: 1px solid var(--colorless03); box-sizing: border-box;}
#quick .quickBox:last-child {border: 0;}
#quick .quickBox img {display: block; margin-bottom: 13px;}
#quick .quickBox a { display: flex;}
#quick .quickBox span {color: var(--colorless07); font-size: 14px;}
/*
    *** 상담예약 단독
*/
#quick .quickBox.reserve {background: linear-gradient( to right, #fa6a4a, #f6c35f); border-bottom: none;}
#quick .quickBox.reserve span {color: var(--colorless01); }





/*
    *** 2025.10 퀵메뉴 리뉴얼
*/
#quickMenu {position:fixed; bottom:65px; right:130px; z-index:250; --transitionTime: 0.2s;}

#quickMenu .dotButtonWrap {position:relative;}
#quickMenu .dotButtonWrap .btnDot {display:flex; align-items: center; justify-content: center; gap:5px; width:50px; height:50px; border-radius:50%; cursor:pointer; background-color:#dda478;}
#quickMenu .dotButtonWrap .btnDot span {width:8px; height:8px; border-radius:50%; background-color:#ffffff;}
#quickMenu .dotButtonWrap .btnDot span:nth-of-type(1) {animation-name: dotWave; animation-duration: 1.5s; animation-delay: 0s; animation-iteration-count: infinite;}
#quickMenu .dotButtonWrap .btnDot span:nth-of-type(2) {animation-name: dotWave; animation-duration: 1.5s; animation-delay: 0.2s; animation-iteration-count: infinite;}
#quickMenu .dotButtonWrap .btnDot span:nth-of-type(3) {animation-name: dotWave; animation-duration: 1.5s; animation-delay: 0.4s; animation-iteration-count: infinite;}
@keyframes dotWave {
    0% {transform:scale(100%, 100%)}
    50% {transform:scale(0, 0)}
    100% {transform:scale(100%, 100%)}
}
#quickMenu .dotButtonWrap:after {content:""; position:absolute; bottom:45px; right:-9px; opacity:1; width:218px; height:114px; pointer-events: none; background-image:url("../images/quick_balloon.png"); transition: all var(--transitionTime) ease-out;}
#quickMenu .dotButtonWrap .btnGoTop {position:absolute; display:flex; align-items: center; justify-content: center; width:50px; height:50px; margin-top:10px; border-radius:50%; cursor:pointer; background-color:#f0f0f0;}
#quickMenu .dotButtonWrap .btnGoTop > img {height:42%;}

#quickMenu .extendedButtonWrap {position:absolute; top:-224px; right:0; display:flex; flex-direction: column; align-items: flex-end; pointer-events: none;}
#quickMenu .extendedButtonWrap .subButton {
    position:relative;
    top:20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 135px;
    height: 45px;
    font-size: 16px;
    color: #1a1a1a;
    font-family: Pretendard-Light;
    border-radius: 30px;
    border: solid 1px #e2e2e2;
    box-sizing: border-box;
    margin-bottom:10px;
    opacity:0;
    pointer-events: none;
    background-color: #ffffff;
    transition: top var(--transitionTime) ease-out, opacity var(--transitionTime) ease-out;;
}
#quickMenu .extendedButtonWrap .subButton:hover {color:#ffffff; border-color:#dda478; background-color:#dda478;}
#quickMenu .extendedButtonWrap .subButton .icon {width:22px; height:22px; background-size:contain; background-repeat: no-repeat; background-position:center center;}
#quickMenu .extendedButtonWrap .subButton.event {letter-spacing: 2px;}
#quickMenu .extendedButtonWrap .subButton.event .icon {background-image:url("/app/layout/web/images/icon_quick1.png");}
#quickMenu .extendedButtonWrap .subButton.kakao .icon {background-image:url("/app/layout/web/images/icon_quick2.png");}
#quickMenu .extendedButtonWrap .subButton.counsel .icon {background-image:url("/app/layout/web/images/icon_quick3.png");}
#quickMenu .extendedButtonWrap .subButton.location .icon {background-image:url("/app/layout/web/images/icon_quick4.png");}
#quickMenu .extendedButtonWrap .circleButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}
#quickMenu .extendedButtonWrap .btnClose {margin-top:4px; margin-bottom:10px; transform:scale(0.2); background-color:#151515;}
#quickMenu .extendedButtonWrap .btnClose i {font-size:15px; color:#ffffff; transform: rotate(-180deg); transition: all var(--transitionTime) ease-out;}
/*#quickMenu .extendedButtonWrap .btnGoTop {position: relative; top: -20px; background-color:#f0f0f0; transition: all var(--transitionTime) ease-out;}
#quickMenu .extendedButtonWrap .btnGoTop i {font-size:22px; color:#000000;}*/

#quickMenu.on .dotButtonWrap:after {opacity:0; bottom:0; transition: all var(--transitionTime) ease-out;}
#quickMenu.on .extendedButtonWrap .subButton {top:0; opacity:1; pointer-events: auto; transition: top var(--transitionTime) ease-out, opacity var(--transitionTime) ease-out;}
#quickMenu.on .extendedButtonWrap .subButton.event {transition-delay:0.15s;}
#quickMenu.on .extendedButtonWrap .subButton.kakao {transition-delay:0.1s;}
#quickMenu.on .extendedButtonWrap .subButton.counsel {transition-delay:0.05s;}
#quickMenu.on .extendedButtonWrap .subButton.location {transition-delay:0s;}
#quickMenu.on .extendedButtonWrap .circleButton {top:0; opacity:1; pointer-events: auto; transition: all var(--transitionTime) ease-out;}
#quickMenu.on .extendedButtonWrap .btnClose {transform:scale(1);}
#quickMenu.on .extendedButtonWrap .btnClose i {transform: rotate(0deg); transition: all 0.3s ease-out;}














/* ******************** 하단부 빠른 상담신청 ******************** */
#qCounselOutWrap {z-index: 200; position: fixed; left: 0; bottom: 0; width: 100%;}

.qCounselInner {display: none; position: relative; width: 100%; height: 220px; background: var(--beige-color01);}
.qCounselInner.show {display: block;}
#qCounselCon {display: flex; align-items: center; height: inherit; padding: 40px 0; box-sizing: border-box;}
#qCounselCon .contentWrap {max-width: 700px; width: 100%; margin: 0 auto;}
#qCounselCon .formTop {display: flex; overflow: hidden;}
#qCounselCon ul {display: flex; flex-wrap: wrap; width: 100%; padding:10px 0 0 10px; margin:-10px;}
#qCounselCon ul li {height: 50px; border-radius: 8px; box-sizing:border-box; width:calc(100% / 2); border:0 solid transparent; border-width:0 10px 10px 0;}
#qCounselCon ul input::placeholder {color: var(--colorless06); font-family:'Pretendard-Light';}
#qCounselCon ul input[type='text'],
#qCounselCon ul select {width: 100%; height: 100%; padding-left: 5px; border-radius: 8px;
    /*box-shadow: 4px 8px 15px 1px; rgb(240 240 240 / 50%);
    mask-image: radial-gradient(white, black);*/
    box-sizing: border-box; color: var(--colorless06); font-family:'Pretendard-Light'; background: #fff;}

#qCounselCon ul .selBox {position: relative;}
#qCounselCon ul .selBox select {width: 100%; height: 100%; -webkit-appearance: none; -moz-appearance: none;}
#qCounselCon ul .selBox:after {position: absolute; display: block; width: 15px; height: 8px; content: '';
    top: 50%; right: 10px; transform: translateY(-50%);
    background: url("/app/layout/web/images/common/icon_chevronDown.png") no-repeat 0 0;}


#qCounselCon .formBottom {display: flex; margin-top: 10px;}
#qCounselCon .formBottom > .chkForm {color: #fff;font-family:'Pretendard-Light';}
#qCounselCon .formTop .btn {display: flex; justify-content: center; align-items: center; width: 140px;
    color: var(--colorless01); font-family:'Pretendard-Bold'; margin-left: 10px; border-radius: 8px; background: var(--colorless08); font-size: 28px; cursor: pointer;}
#qCounselCon .formBottom:nth-child(1) {margin-right: 10px;}
#qCounselCon .formBottom label a {color: inherit; font-family:'Pretendard-Medium';}


#qCounselCon .formBottom .chkForm {margin-right: 8px;}
#qCounselCon .formBottom .chkForm input {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; opacity: 0;}
#qCounselCon .formBottom .chkForm label:before {display: inline-block; content: ''; width: 20px; height: 20px; vertical-align: -4px;
    margin-right: 5px; background: url("/app/layout/web/images/common/icon_unchk.png") no-repeat 0 0; box-sizing: border-box;}
#qCounselCon .formBottom .chkForm input:checked + label:before {background-image: url("/app/layout/web/images/common/icon_chked.png")}

/*
    빠른상담신청 상단부
*/
.qCounselPost {position: relative; top: 0; left: 50%; transform: translateX(-50%); display: inline-flex; justify-content: center; align-items: center; width: 320px; height: 80px;
    border-radius: 8px 8px 0 0; background: var(--beige-color01); cursor: pointer; }
.qCounselPost > div {display: flex; align-items: center; color: var(--colorless01); margin-right: 10px; font-size: 32px; font-family:'Pretendard-Medium';}
.qCounselPost > div:nth-child(1):before {content: ''; display: inline-block; width: 30px; height: 30px; margin-right: 5px; background: url("/app/layout/web/images/common/icon_petit.png") center/30px auto no-repeat;}

.qCounselPost .iconScroll {position: relative; top: -35%; right: 0%; display: flex; justify-content: center;}
.qCounselPost .iconScroll img {position: absolute; top: 0; left: 0; height: 25px;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-animation: scroll 0.8s ease-in-out infinite;
    animation: scroll 0.8s ease-in-out infinite;}
@keyframes scroll {
    100% {
        top: 10px;
    }
    50% {
        top: 15px;
    }
    0% {
        top: 10px;
    }
}


/* ******************** mainVisual ******************** */
.mainVisualSwiper .swiper-wrapper {position: relative;}
.mainVisualSwiper .swiper-slide { width: 100%; height: 810px; background-size: cover; background-repeat: no-repeat; background-position: center;}

.mainVisualSwiper .slide01 {background-image: url("/app/layout/web/images/pc/slide04.jpg");}
.mainVisualSwiper .slide02 {background-image: url("/app/layout/web/images/pc/slide05.jpg");}
.mainVisualSwiper .slide03 {background-image: url("/app/layout/web/images/pc/slide06.jpg");}

/*
    *** 페이지네이션 수정
*/
.mainVisualSwiper .swiper-pagination {position:absolute; bottom: 85px; left:50%; transform: translatex(-50%); z-index:200; width:auto;}
.mainVisualSwiper .swiper-pagination-bullet {position:relative; width:auto; height:auto; margin-right:22px; border-radius:0; background:transparent; opacity:1;}
.mainVisualSwiper .swiper-pagination .num {font-family:'Pretendard-Medium'; font-size:18px; color:var(--colorless01); transition:color 0.4s;}
.mainVisualSwiper .swiper-pagination .progress {display:none; position:absolute; top:50%; right:0; width:110px; height:3px; margin-top:-3px; background-color:var(--colorless01);}
.mainVisualSwiper .swiper-pagination .progress span {display:block; width: 0; height:3px; background-color:var(--beige-color01);}
.mainVisualSwiper .swiper-pagination-bullet-active {padding-right:130px;}
.mainVisualSwiper .swiper-pagination-bullet-active .num {color:var(--beige-color01);}
.mainVisualSwiper .swiper-pagination-bullet-active .progress {display:block;}
/*
    ***스와이퍼 내부 텍스트
*/
.mainVisualSwiper .slideInner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; max-width: 1420px; width: 100%;}
.mainVisualSwiper .slideInnerTxtWrap {display: flex; flex-direction:column; width: 632px;}
.mainVisualSwiper .slideInnerTxtWrap .innerTxt  {overflow: hidden; display: inline-block; font-size: 55px;}
.mainVisualSwiper .slideInnerTxtWrap .innerTxt span {display: inline-block; font-family:'NotoSerifKR-Regular';
    transition-property: transform; transition-duration: .8s; transform: translateY(-100%);  -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transition-delay: inherit;}

/* 슬라이드  active 됐을 때 */
.mainVisualSwiper .swiper-slide-active .innerTxt span{ transform: translateY(0); -webkit-transform: translateY(0);
    -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); }

.delay300 {transition-delay: .3s;}
.delay500 {transition-delay: .5s;}
.delay700 {transition-delay: .7s;}

.mainVisualSwiper .slideInnerTxtWrap .innerTxt span .mainColor {font-family:'NotoSerifKR-Bold';}
.mainVisualSwiper .slideInnerTxtWrap .innerTxt img {display: block; width: 442px;}
.mainVisualSwiper .lft .slideInner {justify-content: flex-start;}
.mainVisualSwiper .lft .slideInner .slideInnerTxtWrap {}
.mainVisualSwiper .lft .slideInnerTxtWrap .innerTxt  {color: var(--colorless08);}
.mainVisualSwiper .slide03.lft .slideInnerTxtWrap .innerTxt  {color: var(--colorless01);}
.mainVisualSwiper .rgt .slideInner {justify-content: flex-end;}
.mainVisualSwiper .rgt .slideInnerTxtWrap .innerTxt {color: var(--colorless08);}


/* ******************** popUp ******************** */
.popUpBg {display: none; z-index: 280; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3);}
#popUpCon {display: none; z-index: 300; position: fixed; top: 0; left: 0;  justify-content: center; align-items: center; width: 100%; height: 100%;}

#popUpCon .popUpInner .tabCon{display: none;}
#popUpCon .popUpInner .tabCon.show {display: block;}

#popUpCon .popUpInner .list{display: flex; border-top: 1px solid var(--colorless03); border-left: 1px solid var(--colorless03); background: var(--colorless01); box-sizing: border-box;}
#popUpCon .popUpInner .list .tabBtn {display: flex; align-items: center; width: calc(100% / 5); height: 40px; justify-content: center; border-right: 1px solid var(--colorless03);
    background: var(--colorless01); box-sizing: border-box; cursor: pointer; color: var(--colorless07); font-family: 'NotoSansM';}
#popUpCon .popUpInner .list .tabBtn.active {color: var(--beige-color01); font-family:'Pretendard-Medium';}
#popUpCon .popBottom {padding: 0 10px; height: 40px; line-height: 40px; display: flex; align-items: center; justify-content: space-between;
    background: #343434; color: var(--colorless01); font-family:'Pretendard-Light'; box-sizing: border-box;}
#popUpCon .popBottom i {cursor: pointer;}


/* ******************** subpage: search :: searchArea ******************** */
/*
    *** main title
*/
.search .cl_mainTit { color: var(--colorless08); font-size: 30px; font-family:'Pretendard-Medium';}
.search .cl_mainTit:after {content: ''; display: block; width: 100%; height: 2px; background: var(--colorless08); margin-top: 15px;}

.search .cl_searchArea {width: 100%; height: 310px; background: var(--colorless02) url("/app/layout/web/images/pc/searchBgImg.png") 85% center/400px auto no-repeat;)}
.search .cl_searchArea .cl_banobagiEng {display: flex; justify-content: space-around; max-width: 150px; margin: 0 auto; margin-bottom: 30px; font-family: 'NotoSansL';
    font-size: 15px; color: var(--colorless05);}
.search .cl_searchArea .searchBox {-webkit-box-shadow: 4px 3px 9px -3px #ddd; box-shadow: 4px 3px 9px -3px #ddd;}
.search .hasTagsPakage {display: flex; justify-content: space-evenly; align-items: center; margin-top: 30px; color: var(--beige-color01);}
.search .hasTagsPakage span a { color: var(--beige-color01);}

/*
    이벤트
*/
.search .gridWrapper {overflow: hidden;}
.search .gridWrapper .grid {display: flex; flex-wrap: wrap; padding: 40px 0 0 40px; margin: 0 -30px;}
.search .gridWrapper .grid .gridCell {width: calc(100% / 3); box-sizing: border-box; border: 0 solid transparent; border-width: 0 30px 30px 0;}

.search .bnaWrapper {position: relative;}
.search .bnaArea .bnaInner {display: flex;}
.search .bnaArea .bnaInner span {display: inline-block;}
.search .bnaArea .bnaInner span img {display: block; width: 100%;}
.search .bnaArea .bnaInner .bnaDim {z-index: 2; position: absolute; width: 50%; height: 100%; display: flex; align-items: center; justify-content: center;
    top: 0; right: 0; background: rgba(0, 0, 0, 0.7); color: var(--colorless01)}

/*
    시술
*/
.search .youTubeArea .gridWrapper .grid {padding: 0 0 0 40px; margin: 0 -30px;}

/*
    전후사진, 바노바기 아카데미 하단부 txt 공통
*/
.search .cl_oneRowLayOut .sub {padding: 15px; text-align: center; border: 1px solid var(--colorless03); font-size: 20px; color: var(--colorless08); font-family:'Pretendard-Light'; box-sizing: border-box;}
.search .cl_oneRowLayOut .sub li { overflow: hidden;text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;}
.search .cl_oneRowLayOut img {display: block; width: 100%;}


/*
    바노바기TV
*/
.search .youTubeArea .shortsWrap {padding: 30px 0; box-sizing: border-box;}
.search .youTubeArea .shortsWrap span { font-size: 25px;}
.search .youTubeArea .shortsWrap .shorts {font-family:'Pretendard-Bold'; color: #f40407;}
.search .youTubeArea .shortsWrap .shorts:before {content: ''; display: inline-block;
    background: url("/app/layout/web/images/common/icon_short.png") center/20px no-repeat;
    width: 20px; height: 25px; margin-right: 5px;}

.search .youTubeArea .gridWrapper .grid {flex-wrap: unset;}
.search .youTubeArea .gridWrapper .grid .gridCell {width: calc(100% / 6);}
.search .youTubeArea .videoWrap {overflow: hidden; position: relative; height: 0; padding-bottom: 177.5%; border-radius: 8px; mask-image: radial-gradient(white, black);}
.search .youTubeArea .videoWrap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/*
    바노바기 아카데미
*/
.search .academyArea .cl_mainTit {color: var(--beige-color01);font-family:'Pretendard-Bold'; }
.search .academyArea .cl_mainTit span {color: var(--colorless08);}

/* ******************** 지점연결 intro ******************** */

.intro {max-width: 1920px; width: 100%; height: 940px; margin: 0 auto;}
.intro .videoWrap {overflow: hidden; position: relative; max-width: 1920px; width: 100%; left: 50%; transform: translateX(-50%); /*height: 0; padding-bottom: 48.958%;*/}
.intro .videoWrap video {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: auto; /*padding-bottom: 48.958%;*/}
.intro .introContainer {position: relative; top: 0; left: 0; width: 100%; height: 940px; box-sizing: border-box;}
/*임시이미지*/
.intro .videoBg {/*background: url("/app/layout/web/images/common/pc_introTemp.jpg") center center no-repeat;*/ width: 100%; height: 940px;
    background-size: auto 100%;}


.intro header {display: flex; align-items: center; justify-content: space-between; height: 50px;}
.intro .etcCon {}
.intro .etcCon a {display: inline-flex; justify-content: center; align-items: center; height: 50px;
    border-radius: 25px; padding: 0 25px; border: 1px solid var(--colorless01); box-sizing: border-box;}

.intro .etcCon a {margin-right: 15px; transition: all .3s;}
.intro .etcCon a:last-child {margin-right: 0;}
.intro .etcCon a:before { content: attr(data-name); padding-left: 34px; display: flex; color: #fff; align-items: center; pointer-events: none;}
/*
    *** hover진행시
*/
.intro .etcCon a:hover {border: 1px solid transparent;}
.intro .etcCon .youtube {background: transparent url('/app/layout/web/images/common/intro_youtube.png') 15px center/34px auto no-repeat;}
.intro .etcCon .youtube:hover {background-color: var(--beige-color01); color: var(--colorless01);}
.intro .etcCon .kakao {background: transparent url('/app/layout/web/images/common/intro_kakao.png') 15px center/34px auto no-repeat;}
.intro .etcCon .kakao:hover {background: #fad000 url('/app/layout/web/images/common/intro_hover_kakao.png') 15px center/34px auto no-repeat;}
.intro .etcCon a:last-child:hover:before {color: #3b1e1e;}
.intro .introContainer {padding-top: 40px;}
/*
    ** 지점 바로가기 하단부
*/
.intro .centerDirect {position: absolute; width: 100%; left: 0; bottom: 119px;}
.intro .centerDirect .mainTxt {margin-bottom: 40px; text-align: center; font-size: 35px; font-family:'Pretendard-Light'; color: var(--colorless01); }
.intro .centerDirect .mainTxt > span {font-family:'Pretendard-Bold';}


.intro .centerDirect .centerWrapper {max-width: 1017px; width: 100%; margin: 0 auto;}
.intro .centerDirect .centerList {display: flex; width: 100%; justify-content: space-between; align-items: center; height: 65px;
    border-top: 1px solid var(--colorless01);border-left: 1px solid var(--colorless01); border-bottom: 1px solid var(--colorless01); box-sizing: border-box;}
.intro .centerDirect .centerList a {display: flex; justify-content: space-between; width: 100%; height: inherit; padding: 0 10px; font-size: 25px;
    box-sizing: border-box; align-items: center; font-family:'Pretendard-Medium'; color: var(--colorless01); border-right: 1px solid var(--colorless01);}
.intro .centerDirect .centerList span {display: block;}
.intro .centerDirect .centerList i {color : #a3a3a3;}
.intro .centerDirect .centerList a:hover span{color: var(--beige-color01);font-family:'Pretendard-Medium';}
.intro .centerDirect .centerList a:hover i {color: var(--beige-color01);}


.intro footer {margin: 100px auto; border: 1px solid transparent; box-sizing: border-box;}

/* ******************** subpage: surgery > list.php ******************** */
.equipmentList .list {display: flex; flex-wrap: wrap; /*height: 40px;*/ align-items: center;}
.equipmentList .list li {position:relative; display: inline-block; text-align: center; width: calc(100% / 6); height: inherit; line-height: 40px;
    font-size: 20px; color: var(--colorless07); cursor: pointer; transition: all .3s;}
.equipmentList .list:after {content: ''; display: block; width: 100%; height: 3px; background-color: var(--colorless03);}
.equipmentList .list li.active {color: var(--beige-color01); font-family:'Pretendard-Bold';}

.equipmentList .list li.active:after {content: ''; position:absolute; bottom: -3px; display: block; width: 100%; height: 3px; background-color: var(--beige-color01);}

.equipmentList .gridWrapper {overflow: hidden;}
.equipmentList .gridWrapper .grid {display: none; flex-wrap: wrap; padding: 40px 0 0 40px; margin: 0 -30px;}
.equipmentList .gridWrapper .grid.show {display: flex;}
.equipmentList .gridWrapper .grid .gridCell {width: calc(100% / 3); box-sizing: border-box; border: 0 solid transparent; border-width: 0 30px 30px 0;}
.equipmentList .gridWrapper .grid .gridCell .gridInner {height:100%;}


.equipmentList .gridWrapper .grid {padding: 60px 0 0 30px; margin: 0 -30px;}

.equipmentList .gridInner:hover .equipName,
.equipmentList .gridInner:hover .price .num,
.equipmentList .gridInner:hover .price > a
{color: var(--beige-color01);font-family:'Pretendard-SemiBold';}

.equipmentList .cl_surgeryArea .sub .equipName,
.equipmentList .gridInner:hover .price .num{font-family:'Pretendard-Medium';}

/* ******************** subpage: surgery > view.php ******************** */

/*
    *** 상단 리스트
*/
.equipmentDetail .surgeryMenu {width: 100%; height: 60px; border-top: 1px solid var(--colorless03); box-sizing: border-box;}
.equipmentDetail .surgeryMenu .menuWrap {max-width: 720px; width: 100%; height: inherit; margin: 0 auto; display: flex;
    border-left: 1px solid var(--colorless03); border-right: 1px solid var(--colorless03); box-sizing: border-box;}
.equipmentDetail .surgeryMenu .menuWrap > li {display: flex; justify-content: space-between; align-items: center; width: calc(100% / 3); /*height: 100%;*/
    padding: 0 20px; border-right: 1px solid var(--colorless03);}
.equipmentDetail .surgeryMenu .menuWrap > li span {cursor: pointer;}
.equipmentDetail .surgeryMenu .menuWrap > li:last-child {border: none;}
.equipmentDetail .surgeryMenu li .squareArrow {display: inline-block; width: 20px; height: 20px; background-size: 20px;
    background: url("/app/layout/web/images/common/icon_squareArrow.png") no-repeat;}

.equipmentDetail .surgeryMenu .menuWrap .surgerySubMenu {position: relative;}
.equipmentDetail .surgeryMenu .menuWrap .depth01,
.equipmentDetail .surgeryMenu .menuWrap .depth02 {position: relative;}

.equipmentDetail .surgeryMenu .menuWrap .depth01 > ul,
.equipmentDetail .surgeryMenu .menuWrap .depth02 > ul {display: none; z-index: 2; position: absolute; left: 0; top: 60px; width: 100%;
    background-color: var(--colorless01); border: 1px solid var(--colorless03); border-top: none;}

.equipmentDetail .surgeryMenu .menuWrap .depth01 > ul.show,
.equipmentDetail .surgeryMenu .menuWrap .depth02 > ul.show {display: block;}

.equipmentDetail .surgeryMenu .menuWrap .surgerySubMenu > ul > li {display: flex; align-items: center;  height: 60px;
    padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid var(--colorless03); cursor: pointer;}
.equipmentDetail .surgeryMenu .menuWrap .surgerySubMenu > ul > li:last-child {border: none;}



/*
    *** 장바구니 영역
*/
.equipmentDetail .shoppingBasket {padding: 60px 0; box-sizing: border-box; background-color: var(--colorless02);
    border-top: 1px solid var(--colorless03);border-bottom: 1px solid var(--colorless03);}

/* 수정 */
.equipmentDetail .shoppingBasket #mainProductCon {/*display: flex; justify-content: center;*/}
/*.equipmentDetail .shoppingBasket #mainProductCon > div {margin-right: 60px; box-sizing: border-box;}*/
.equipmentDetail .shoppingBasket #mainProductCon > div:first-child {}
.equipmentDetail .shoppingBasket #mainProductCon > div:last-child {flex:1; margin-right: 0;}
.equipmentDetail .shoppingBasket #mainProductCon .imgArea { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 40px; }/* 추가 */
.equipmentDetail .shoppingBasket #mainProductCon .imgArea img { width: 50%}
.equipmentDetail .basketList { display: flex; justify-content: center; gap: 50px; }
.equipmentDetail .basketList .productText { width: 50%; }
.equipmentDetail .btnWrap { flex: 1; }
.equipmentDetail .basketList > div {margin-bottom: 35px;}
.equipmentDetail .basketList > div:nth-child(5) {margin-bottom: 0;}
.equipmentDetail .basketList > div:last-child {margin-bottom: 0;}
.equipmentDetail .basketList .productName {font-size: 30px; font-family:'Pretendard-Medium'; color: var(--colorless09);}
.equipmentDetail .basketList .productSub {font-size: 18px; font-family:'Pretendard-Light';color: var(--colorless09);}
.equipmentDetail .basketList .productPrice {font-size: 25px; font-family:'Pretendard-Medium';}
.equipmentDetail .basketList .productPrice > span {font-size: 30px; font-family:'Pretendard-Bold';}



/*
    ***시술선택 박스
 */
.equipmentDetail .selBoxWrap {position: relative;}
.equipmentDetail .cl_selBoxShape { width: 100%; padding: 20px; background-color: var(--colorless01);  color: var(--colorless07);  box-sizing: border-box; cursor: pointer;}
.equipmentDetail .selBoxWrap .selectBox {display: flex; justify-content: space-between; align-items: center;
    font-size: 16px; border: 1px solid var(--colorless05);}

.equipmentDetail .selBoxListWrapper {display: none; overflow-y: scroll; position: absolute; width: 100%; max-height: 500px; border: 1px solid var(--colorless05);
    border-top: none; box-sizing: border-box; transition: all 1s; z-index:100;}
.equipmentDetail .selBoxListWrapper.on {display: block;}
.equipmentDetail .selBoxListWrapper .selBoxListTitle {font-size:20px; padding:15px; background-color:#e2e2e2;}
.equipmentDetail .selBoxWrap .selBoxList {position: relative; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--colorless05);}
.equipmentDetail .selBoxWrap .selBoxList:last-child {border: none;}
.equipmentDetail .selBoxWrap .selBoxList input {position:absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; opacity: 0;}
.equipmentDetail .selBoxWrap .selBoxList label {font-size: 20px; color: var(--colorless09); }
.equipmentDetail .selBoxWrap .selBoxList label:before {display: inline-block; width: 25px; height: 25px; margin-right: 5px;
    background: url("/app/layout/web/images/common/icon_noneChecked.png") no-repeat; background-size: 25px; content: ''; vertical-align: middle;}
.equipmentDetail .selBoxWrap .selBoxList input:checked + label:before {background: url("/app/layout/web/images/common/icon_checked.png");}
.equipmentDetail .selBoxWrap .selBoxList .chkForm { flex: 1; }
.equipmentDetail .selBoxWrap .selBoxList .priceWrap .originalPrice {margin-right: 10px; text-decoration: line-through; color: var(--colorless05);}
.equipmentDetail .selBoxWrap .selBoxList .priceWrap .discount {font-size: 20px; color: var(--beige-color01); font-family:'Pretendard-Bold';}
.equipmentDetail .selBoxWrap .selBoxList .priceWrap .discount > span {color: var(--colorless09);}
.equipmentDetail .selBoxWrap .selBoxList .priceWrap { max-width: 600px; text-align: right; }

/*
    ***최종 시술 담기
 */
.equipmentDetail .totalsurgeryBox {/*display: none;*/}
.equipmentDetail .totalsurgeryBox.show {display: block;}
.equipmentDetail .totalsurgeryBox .name {font-size: 20px; color: var(--colorless09); font-family:'Pretendard-Light';}
.equipmentDetail .totalsurgeryBox .selBoxList {display: flex; justify-content: space-between; border-top: 1px solid var(--colorless05);}
.equipmentDetail .totalsurgeryBox .cl_selBoxShape:first-child {border:none;}
.equipmentDetail .totalsurgeryBox .selBoxList .rgt span {color: var(--beige-color01); font-size: 17px; font-family:'Pretendard-Medium';}
.equipmentDetail .totalsurgeryBox .selBoxList .rgt span>span {color: var(--colorless08); font-size: inherit;}

.equipmentDetail .totalCashZone {background-color: #eee; padding: 20px; box-sizing: border-box;}
.equipmentDetail .totalCashZone .cash {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
.equipmentDetail .totalCashZone .cash > span {font-size: 18px; color: var(--colorless07);}
.equipmentDetail .totalCashZone .cash .totalCash {font-size: 30px; font-family:'Pretendard-Bold'; color: var(--beige-color01);}
.equipmentDetail .totalCashZone .cash .totalCash span {font-size: 25px; color: var(--colorless08);}
.equipmentDetail .totalCashZone .vat {text-align: right; color: var(--colorless05);}

.equipmentDetail .btnWrap {display: flex;}
.equipmentDetail .btnWrap a {display: inline-flex; justify-content: center; align-items: center; width: calc(100% / 2); height: 60px;
    margin-right: 20px; border-radius: 5px;}
.equipmentDetail .btnWrap a:last-child {margin-right: 0;}
.equipmentDetail .btnWrap a:before {content: attr(data-btn); font-size: 20px; color: var(--colorless01); font-family:'Pretendard-Bold';}
.equipmentDetail .btnWrap .done {background-color: var(--beige-color01);}
.equipmentDetail .btnWrap .reservation {background-color: var(--colorless08)}


.equipmentDetail .basketList p {font-size: 16px; font-family:'Pretendard-Light';}

.equipmentDetail .cl_imgCon.pc {display:block;}
.equipmentDetail .cl_imgCon.mobile {display:none;}

/* ******************** subpage: member > joinTerms.php ******************** */
.joinTerms .cl_noticeArea .mainTitList .main {margin-bottom: 15px;}








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

/*
    *** 이벤트 리스트
*/
.eventListPage .listArea .gridWrapper {overflow:hidden;}
.eventListPage .listArea .grid {display:flex; flex-wrap:wrap; padding:30px 0 0 30px; margin:-30px}
.eventListPage .listArea .grid .gridCell {
    box-sizing:border-box;
    width:calc(100% / 3);
    border:0 solid transparent;
    border-width:0 30px 30px 0;
}
.eventListPage .listArea .eventList {display:block; position:relative; height:100%; border:solid 1px #e0e0e0; box-sizing: border-box; cursor:pointer;}
.eventListPage .listArea .eventList .imgCell {position:relative; font-size:0;}
.eventListPage .listArea .eventList .imgCell img {width:100%;}
.eventListPage .listArea .eventList .listContent {border-top:solid 1px #e0e0e0; box-sizing: border-box; padding-top:25px; padding-bottom:25px;}
.eventListPage .listArea .eventList .listContent > div {box-sizing: border-box;}
.eventListPage .listArea .eventList .listContent .every {padding:10px; margin-top:10px; text-align: right; color: var(--beige-color01);}
.eventListPage .listArea .eventList .listTitle {font-size:20px; color:var(--colorless08); font-family:Pretendard-Medium; padding:20px; padding-top:0; margin-bottom:15px; border-bottom:solid 1px #e0e0e0;}
.eventListPage .listArea .eventList .listTitle .allBranchMark {display:inline-block; font-size:16px; color:var(--beige-color01); font-family:Pretendard-Medium; border-radius:40px; padding:5px 10px; border:solid 2px var(--beige-color01); margin-right:10px;}
.eventListPage .listArea .eventList .listInfo {font-size:16px; color:var(--colorless07); font-family:Pretendard-Light; padding:0 20px; margin-bottom:15px;}
.eventListPage .listArea .eventList .date {font-size:14px; color:var(--colorless05); font-family:Pretendard-Light; padding:0 20px; margin-bottom:25px;}
.eventListPage .listArea .eventList .dDay {display:flex; justify-content: flex-end; align-items: center; padding:0 20px;}
.eventListPage .listArea .eventList .dDay .gauge {flex:1; height:3px; background-color:#f5f5f5;}
.eventListPage .listArea .eventList .dDay .gauge span {display:block; height:100%; background-color:#dda478;}
.eventListPage .listArea .eventList .dDay .day {font-size:15px; color:var(--beige-color01); font-family:Pretendard-Medium; margin-left:15px;}
.eventListPage .listArea .eventList .dDay .period {font-size:15px; color:var(--beige-color01); font-family:Pretendard-Medium;}

.eventListPage .listArea .eventList:hover:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:solid 5px #e4b793; box-sizing: border-box;}


/*이벤트 종료 설정*/
.eventListPage .listArea .eventList.finish {pointer-events: none;}
.eventListPage .listArea .eventList.finish .imgCell:after {
    content: "See you again :) \A 이벤트가 종료되었습니다.";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.4);
    font-family: Pretendard-Medium;
    text-align:center;
    white-space:pre;
    background-color:rgba(0,0,0,0.8);
}
.eventListPage .listArea .eventList.finish .listTitle {color:#cccccc;}
.eventListPage .listArea .eventList.finish .listTitle .allBranchMark {color:#cccccc; border-color:#cccccc;}
.eventListPage .listArea .eventList.finish .listInfo {color:#cccccc;}
.eventListPage .listArea .eventList.finish .date {color:#cccccc;}
.eventListPage .listArea .eventList.finish .dDay .day {color:#cccccc;}
.eventListPage .listArea .eventList.finish .dDay .period {color:#cccccc;}



/*신청팝업*/
.eventDetailPopup {/*display:flex;*/ display:none; justify-content: center; align-items: center; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.3); z-index:1000;}
.eventDetailPopup .popupWin {position:relative; width:95%; max-width:1000px; background-color:#ffffff; padding:0;}
.eventDetailPopup .popupWin .titleBar {display:flex; justify-content:center; align-items:center; height:78px; font-size:30px; color:var(--colorless08); font-family:Pretendard-Medium; border:solid 1px #e0e0e0;}
.eventDetailPopup .popupWin .btnClosePopup {position:absolute; top:20px; right:20px; font-size:40px; color:#b1b1b1; cursor:pointer;}
.eventDetailPopup .popupWin .popupContent {height:70vh; max-height:800px; overflow-y: auto; border-left:solid 1px #e0e0e0; border-right:solid 1px #e0e0e0;}
.eventDetailPopup .popupWin .popupContent > img {width:100%; vertical-align:top;}

.eventDetailPopup .popupWin .popupContent::-webkit-scrollbar {
    width: 8px;  /* 스크롤바의 너비 */
}

.eventDetailPopup .popupWin .popupContent::-webkit-scrollbar-thumb {
    background: #3f3f3f; /* 스크롤바의 색상 */
    border-radius: 10px;
}

.eventDetailPopup .popupWin .popupContent::-webkit-scrollbar-track {
    background: #f5f5f5;  /*스크롤바 뒷 배경 색상*/
}


.eventDetailPopup .popupWin .btnApply {display:flex; justify-content:center; align-items:center; height:80px; font-size:30px; color:#ffffff; font-family:Pretendard-Medium; background-color:#303030; cursor:pointer;}




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

.bnaPage .categoryTabArea {display:flex; flex-wrap:wrap; width:auto; margin-bottom:40px; /*border-top:solid 1px #e0e0e0;*/ border-left:solid 1px #e0e0e0;}
.bnaPage .categoryTabArea .tab {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width:16.66666666666667%;
    font-size: 20px;
    color: #666666;
    font-family: Pretendard_Regular;
    box-sizing: border-box;
    border-right: solid 1px #e0e0e0;
    border-bottom: solid 1px #e0e0e0;
    cursor: pointer;
}
.bnaPage .categoryTabArea .tab:nth-of-type(-n+6) {border-top:solid 1px #e0e0e0;}
.bnaPage .categoryTabArea .tab.on {color:#ffffff; font-family:Pretendard-Bold; background-color:var(--beige-color01);}

.bnaPage .bnaSearchArea {display:flex; align-items: center; width:100%; max-width:1000px; height:55px; border:solid 1px #e0e0e0; border-radius:30px; margin:0 auto; margin-bottom:40px; background-color:#f5f5f5;}
.bnaPage .bnaSearchArea .iconCell {display:flex; justify-content:center; align-items:center; width:90px; height:30px; border-right:solid 1px #e0e0e0; margin-right:25px;}
.bnaPage .bnaSearchArea .iconCell .off {display:block;}
.bnaPage .bnaSearchArea .iconCell .on {display:none;}
.bnaPage .bnaSearchArea .iconCell.on .off {display:none;}
.bnaPage .bnaSearchArea .iconCell.on .on {display:block;}
.bnaPage .bnaSearchArea .inputCell {flex:1;}
.bnaPage .bnaSearchArea .inputCell input {width:100%; height:30px; font-size:18px; font-family:Pretendard-Light; background-color:transparent;}
.bnaPage .bnaSearchArea .inputCell input::placeholder {font-size:18px; font-family:Pretendard-Light;}
.bnaPage .bnaSearchArea .btnSearch {width:80px; height:30px; font-size:30px; color:#606060; text-align:center; cursor:pointer;}

.bnaPage .listArea {padding-left:60px; padding-right:60px; box-sizing: border-box;}

.bnaPage .bnaMainPhoto {width:100%; margin-bottom:60px;}
.bnaPage .bnaMainPhoto .photoWrap {position:relative; width:100%; height:auto; font-size:0;}
.bnaPage .bnaMainPhoto .photoWrap > div.photoCell {display: inline-block; width:50%; height:100%; vertical-align: top;}
.bnaPage .bnaMainPhoto .photoWrap > div.photoCell > img {width:100%;}
.bnaPage .bnaMainPhoto .photoWrap .termText {position:absolute; top:0; left:0; display:flex; justify-content: center; align-items: center; width:150px; height:40px; font-size:18px; color:#ffffff; font-family:Pretendard-Medium; background-color:#3c3c3a;}
.bnaPage .bnaMainPhoto .photoWrap .beforeCell {position:relative;}
.bnaPage .bnaMainPhoto .photoWrap .beforeCell .loginCover {position: absolute; display:flex; top:0; left:0; width:100%; height:100%; justify-content: center; align-items: center; text-align:center; z-index:10; background-color:rgba(0,0,0,0.6);}
.bnaPage .bnaMainPhoto .photoWrap .beforeCell .loginCover .innerWrap {width:65%; padding:90px 20px; box-sizing: border-box; background-color:rgba(0,0,0,0.8);}
.bnaPage .bnaMainPhoto .photoWrap .beforeCell .loginCover p {color:#ffffff; font-family:Pretendard-Light; margin-bottom:45px;}
.bnaPage .bnaMainPhoto .photoWrap .beforeCell .loginCover p span {color:#dda478; font-family: Pretendard_Medium;}
.bnaPage .bnaMainPhoto .photoWrap .beforeCell .loginCover p.line1 {font-size:18px;}
.bnaPage .bnaMainPhoto .photoWrap .beforeCell .loginCover p.line2 {font-size:22px;}
.bnaPage .bnaMainPhoto .photoWrap .afterCell {position:relative;}
.bnaPage .bnaMainPhoto .photoWrap .arrowBtn {display:flex; justify-content: center; align-items: center; position:absolute; width:60px; height:60px; font-size:20px; color:#ffffff; top:50%; margin-top:-30px; z-index:100; cursor:pointer; background-color:rgba(0,0,0,0.3);}
.bnaPage .bnaMainPhoto .photoWrap .arrowBtn.btnPrev {transform:translateX(-50%);}
.bnaPage .bnaMainPhoto .photoWrap .arrowBtn.btnNext {right:0; transform:translateX(50%);}
.bnaPage .bnaMainPhoto .photoWrap .dirBtnCell {position: absolute; font-size:0; bottom:5px; left:50%; transform: translateX(-50%); z-index:10;}
.bnaPage .bnaMainPhoto .photoWrap .dirBtnCell > span {display:inline-block; width:60px; height:60px; line-height:60px; font-size:18px; color:#ffffff; font-family:Pretendard-Medium; text-align:center; vertical-align: top; margin:0 2px; cursor:pointer; background-color:rgba(48,48,48,0.9);}
.bnaPage .bnaMainPhoto .photoWrap .dirBtnCell > span.on {background-color:#dda478;}
.bnaPage .bnaMainPhoto .textCell {font-size:18px; color:var(--colorless08); text-align:center; border:solid 1px #e0e0e0; padding:20px 0;}

.bnaPage .btnBnaGoLogin {display:inline-block; font-size:22px; color:#ffffff; font-family:Pretendard-Medium; border:solid 1px #ffffff; border-radius:25px; padding:10px 55px; cursor:pointer;}

.bnaPage .bnaThumbArea.gridWrapper {overflow:hidden; margin-bottom:60px;}
.bnaPage .bnaThumbArea.gridWrapper .grid {display:flex; flex-wrap:wrap; padding:30px 0 0 30px; margin:-30px}
.bnaPage .bnaThumbArea.gridWrapper .grid .gridCell {
    font-size:0;
    box-sizing:border-box;
    width:calc(100% / 3);
    border:0 solid transparent;
    border-width:0 30px 30px 0;
    cursor:pointer;
}
.bnaPage .bnaThumbArea.gridWrapper .grid .gridCell .photoWrap {position:relative;}
.bnaPage .bnaThumbArea.gridWrapper .grid .gridCell .photoWrap:hover:after,
.bnaPage .bnaThumbArea.gridWrapper .grid .gridCell .photoWrap.on:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:solid 5px #e4b793; box-sizing: border-box; z-index:100;}
.bnaPage .bnaThumbArea.gridWrapper .grid .gridCell .photoCell {display: inline-block; width:50%; height:auto; vertical-align: top;}
.bnaPage .bnaThumbArea.gridWrapper .grid .gridCell .photoCell img {width:100%;}
.bnaPage .bnaThumbArea.gridWrapper .grid .gridCell .beforeCell {position:relative;}
.bnaPage .bnaThumbArea.gridWrapper .grid .gridCell .beforeCell .loginCover {position: absolute; display:flex; top:0; left:0; width:100%; height:100%; justify-content: center; align-items: center; font-size:22px; color:#ffffff; font-family:Pretendard-Medium; text-align:center; background-color:rgba(0,0,0,0.8);}
.bnaPage .bnaThumbArea.gridWrapper .grid .gridCell .afterCell {float:right;}
.bnaPage .bnaThumbArea.gridWrapper .grid .gridCell .textCell {width:100%; font-size:18px; color:var(--colorless08); font-family:Pretendard-Light; text-align:center; letter-spacing: -1px; border:solid 1px #e0e0e0; padding:15px 5px; box-sizing: border-box; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}



/*
    ************************************ 바노바기 TV *******************************************
*/
.mediaPage .sectionTitle {display:flex; align-items: center; margin-bottom:30px;}
.mediaPage .sectionTitle .iconCell {font-size:0; margin-right:10px;}
.mediaPage .sectionTitle .titleText {font-size:30px; font-family:Pretendard-Bold;}

.mediaPage .youtubeShortsArea .sectionTitle .titleText {color:#f40407;}
.mediaPage .youtubeShortsArea .slideArea {position:relative; margin:0 30px; box-sizing: border-box;}
.mediaPage .youtubeShortsArea .slideArea .swiper-slide img {width:100%; max-width:277px; border-radius:7px;}
.mediaPage .youtubeShortsArea .slideArea .cl_slideArrow.swiper-button-disabled {display:none;}

.mediaPage .divider {height:1px; margin:40px auto; background-color:#e0e0e0;}

.mediaPage .academyTVArea .sectionTitle .titleText {color:#dda478;}
.mediaPage .academyTVArea .gridWrapper {overflow:hidden;}
.mediaPage .academyTVArea .grid {display:flex; flex-wrap:wrap; padding:30px 0 0 30px; margin:-30px}
.mediaPage .academyTVArea .grid .gridCell {
    box-sizing:border-box;
    width:calc(100% / 3);
    border:0 solid transparent;
    border-width:0 30px 30px 0;
}
.mediaPage .academyTVArea .academyTVList .imgCell {font-size:0;}
.mediaPage .academyTVArea .academyTVList .imgCell img {width:100%;}
.mediaPage .academyTVArea .academyTVList .listText {
    font-size: 20px;
    color: #303030;
    font-family: Pretendard-Light;
    text-align: center;
    padding: 15px 5px;
    border: solid 1px #e0e0e0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mediaPage .btnViewMore {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 415px;
    height: 60px;
    font-size: 22px;
    color: #303030;
    font-family: Pretendared-Medium;
    border:solid 1px #303030;
    margin:0 auto;
    margin-top:30px;
    cursor:pointer;
}
.mediaPage .btnViewMore:hover {background-color:#faf4f0;}
.mediaPage .btnViewMore i {margin-right:5px; color:#303030; font-size:25px;}




/*
    ************************************ 연구하는 바노바기 *******************************************
*/

/*
     리스트 페이지
*/
.labPage .listArea .gridWrapper {overflow:hidden;}
.labPage .listArea .grid {display:flex; flex-wrap:wrap; padding:60px 0 0 60px; margin:-60px}
.labPage .listArea .grid .gridCell {
    box-sizing:border-box;
    width:calc(100% / 2);
    border:0 solid transparent;
    border-width:0 60px 60px 0;
}
.labPage .listArea .labList .imgCell {position:relative;}
.labPage .listArea .labList .imgCell img {width:100%;}
.labPage .listArea .labList .listTitle {display:flex; align-items: center; padding:20px 10px; box-sizing: border-box; border-bottom:solid 1px #e0e0e0;}
.labPage .listArea .labList .listTitle .title {flex:1; font-size:20px; color:#303030; font-family:Pretendard-Medium; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.labPage .listArea .labList .listTitle .date {width:80px; font-size:14px; color:#aaaaaa; font-family:Pretendard-Light; text-align:right;}
.labPage .listArea .labList .detail {font-size:16px; color:#909090; font-family:Pretendard-Light; padding:10px; padding-bottom:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}


.labPage .listArea .labList:hover .imgCell:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; border:solid 5px var(--beige-color02); box-sizing: border-box;}
.labPage .listArea .labList:hover .listTitle .title {color:var(--beige-color01);}



/*
    *** 상세보기 페이지
*/
.labDetailPage .detailArea {border:solid 1px #e0e0e0; padding:0 60px; padding-bottom:60px; box-sizing: border-box;}
.labDetailPage .detailArea .titleCell {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90px;
    font-size: 25px;
    color: #303030;
    font-family: Pretendard-Medium;
    text-align: center;
    border-bottom: solid 1px #e0e0e0;
}
.labDetailPage .detailArea .listInfoCell {display:flex; justify-content: space-between; align-items: center; height:60px; font-size:14px; color:#aaaaaa; font-family:Pretendard-Light; padding:0 25px; box-sizing: border-box;}
.labDetailPage .detailArea .labContent {padding:25px; box-sizing: border-box;}
.labDetailPage .detailArea .labContent .detailImgCell {margin-bottom:20px;}
.labDetailPage .detailArea .labContent .detailImgCell img {width:100%;}
.labDetailPage .detailArea .labContent .detailTextCell {font-size:20px; color:#909090; font-family:Pretendard-Light; text-align:center; margin-bottom:50px;}

.labDetailPage .detailArea .logoCell {text-align:center; font-size:0;}




/*
    ************************************ 전지점 소개 *******************************************
*/
/*
    *** 지점소개 비주얼
*/
.branchIntro .visualArea {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 810px;
    background-image: url("/app/layout/web/images/group_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.branchIntro .visualArea .logoCell {margin-bottom:25px;}
.branchIntro .visualArea .lineTextCell {margin-bottom:20px;}
.branchIntro .visualArea .textCell {font-size:55px; color:#303030; font-family:NotoSerifKR-Regular; letter-spacing: -1px;}
.branchIntro .visualArea .textCell .strong {color:#dda478; font-family:NotoSerifKR-Bold;}


/*
    *** 탭
*/
.branchIntro .tabArea {position:relative; display:flex; align-items: center; top:-60px; margin-bottom:40px;}
.branchIntro .tabArea .tab {position:relative; display:flex; justify-content: center; align-items: center; flex:1; height:60px; font-size:20px; color:#606060; font-family:Pretendard-Regular; cursor:pointer; background-color:#ffffff;}
.branchIntro .tabArea .tab:after {content:""; position:absolute; top:50%; transform: translateY(-50%); right:0; width:1px; height:25px; background-color:#e0e0e0;}
.branchIntro .tabArea .tab:last-child:after {display:none;}
.branchIntro .tabArea .tab.on {color:#ffffff; font-family:Pretendard-Bold; background-color:#dda478;}
.branchIntro .tabArea .tab.on:after {display:none;}


/*
    *** 탭 내용
*/

.branchIntro .tabContent {display:none;}
.branchIntro .tabContent.on {display:block;}

.branchIntro .diagramArea {display:flex; justify-content: space-between; align-items: flex-start; margin-bottom:250px;}
.branchIntro .diagramArea .diagram {width:30%;}
.branchIntro .diagramArea .diagram .circleWrap {position:relative; height:0; width:100%; padding-bottom:100%; margin-bottom:25px;}
.branchIntro .diagramArea .diagram .circle {
    position:absolute;
    top:0;
    left:0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 45px;
    color: #303030;
    font-family: NotoSerifKR-Bold;
    text-align: center;
    border-radius: 50%;
}
.branchIntro .diagramArea .diagram .circle1 {background-color:#f3dfcf;}
.branchIntro .diagramArea .diagram .circle2 {color:#606060; background-color:#f5f5f5;}
.branchIntro .diagramArea .diagram .circle3 {color:#e4b793; background-color:#303030;}
.branchIntro .diagramArea .diagram .circleText {font-size:25px; color:#151515; font-family:Pretendard-Light; text-align:center;}
.branchIntro .diagramArea .diagram .circleText .strong {font-family:Pretendard-Medium;}
.branchIntro .diagramArea .plus {font-size:30px; color:#e0e0e0; margin-top:170px;}

.branchIntro .tabContentTitle {margin-bottom:75px; text-align:center;}
.branchIntro .tabContentTitle .engText {font-size:17px; color:#151515; font-family:Pretendard-Lignt; margin-bottom:10px; letter-spacing: 2px;}
.branchIntro .tabContentTitle .engText .strong {font-family:Pretendard-Bold;}
.branchIntro .tabContentTitle .korText {font-size:55px; color:#151515; font-family:Pretendard-Light;}
.branchIntro .tabContentTitle .korText .strong {color:#dda478; font-family:Pretendard-Bold;}

.branchIntro .photoContentBox {display: flex; align-items: center; margin-bottom:100px;}
.branchIntro .photoContentBox .imgCell {width:50%; margin-right:60px;}
.branchIntro .photoContentBox .imgCell img {width:100%;}
.branchIntro .photoContentBox .textCell {display:flex; flex-direction: column; justify-content: center;}
.branchIntro .photoContentBox .textCell .eng {font-size:20px; color:#dda478; font-family:NotoSerifKR-Bold; margin-bottom:20px;}
.branchIntro .photoContentBox .textCell .mainText {font-size:45px; color:#151515; font-family:Pretendard-Light; margin-bottom:50px;}
.branchIntro .photoContentBox .textCell .mainText .strong {font-family:Pretendard-Bold;}
.branchIntro .photoContentBox .textCell .detailText {font-size:25px; color:#151515; font-family:Pretendard-Light;}
.branchIntro .photoContentBox .textCell .detailText .strong {font-family:Pretendard-Medium; text-decoration: underline;}

.branchIntro .photoContentBox.type2 {justify-content: space-between;}
.branchIntro .photoContentBox.type2 .imgCell {margin-right:0;}



/*
    ************************************ 의료진 소개 *******************************************
*/
.doctorIntroPage .doctorListArea .gridWrapper {overflow:hidden;}
.doctorIntroPage .doctorListArea .grid {display:flex; flex-wrap:wrap; padding:60px 0 0 60px; margin:-60px}
.doctorIntroPage .doctorListArea .grid .gridCell {
    box-sizing:border-box;
    width:calc(100% / 2);
    border:0 solid transparent;
    border-width:0 60px 60px 0;
}

.doctorIntroPage .doctorList .imgCell img {width:100%;}
.doctorIntroPage .doctorList .hBar {width:20px; height:2px; margin-top:40px; margin-bottom:25px; background-color:#000000;}
.doctorIntroPage .doctorList .doctorContent .nameCell {font-size:25px; color:#151515; font-family:NotoSansB; margin-bottom:30px;}
.doctorIntroPage .doctorList .doctorContent .nameCell .position {font-size:16px; color:#e0a57a; font-family:NotoSansL; margin-left:5px;}
.doctorIntroPage .doctorList .doctorContent .history {font-size:16px; color:#666666; font-family:NotoSansL; line-height:2;}



/*
    ************************************ 오시는길 *******************************************
*/
.locationPage .contentArea .strong {color:#dda478; font-family:Pretendard-Medium;}
.locationPage .contentArea .strong2 {color:#00c54a; font-family:Pretendard-Medium;}

.locationPage .contentArea {text-align:center;}
.locationPage .contentArea .headText {font-size:30px; color:#151515; font-family:Pretendard-Medium; margin-bottom:20px;}
.locationPage .contentArea .address {font-size:22px; color:#303030; font-family:Pretendard-Light; margin-bottom:20px;}
.locationPage .contentArea .subway {font-size:20px; color:#909090; font-family:Pretendard-Light; margin-bottom:20px;}
.locationPage .contentArea .parkingGuide {font-size:20px; color:#909090; font-family:Pretendard-Light; margin-bottom:50px;}
.locationPage .contentArea .mapImage img {width:100%; max-width:1300px;}



/*
    ************************************ 로그인팝업 *******************************************
*/
.loginPopup {/*display:flex;*/ display:none; justify-content: center; align-items: center; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000; background-color:rgba(0,0,0,0.3);}
.loginPopup .loginWin {position:relative; width:100%; max-width:780px; padding:80px 100px; box-sizing: border-box; background-color:#ffffff;}
.loginPopup .loginWin .btnClosePopup {position:absolute; top:0; right:-50px; display:flex; justify-content: center; align-items: center; width:50px; height:50px; font-size:40px; color:#ffffff; cursor:pointer; background-color:#d9a176;}

.loginPopup .loginWin .logoCell {text-align:center; font-size:0; margin-bottom:25px;}
.loginPopup .loginWin .infoMessage {font-size:18px; color:#303030; font-family:Pretendard-Light; text-align:center; margin-bottom:35px;}
.loginPopup .loginWin .infoMessage .strong {color:#dda478; font-family:Pretendard-Medium;}

.loginPopup .loginWin .formArea {display:flex; align-items:center; margin-bottom:40px;}
.loginPopup .loginWin .formArea .inputArea {flex:1;}
.loginPopup .loginWin .formArea .inputArea .inputLine {display:flex; align-items: center; border:solid 1px #e0e0e0; box-sizing: border-box; padding:10px;}
.loginPopup .loginWin .formArea .inputArea .inputLine:first-child {margin-bottom:10px;}
.loginPopup .loginWin .formArea .inputArea .inputLine span:first-child {width:60px; font-size:16px; color:#aaaaaa; font-family:Pretendard-Medium; text-align:center; border-right:solid 1px #e0e0e0;}
.loginPopup .loginWin .formArea .inputArea .inputLine span:last-child {flex:1;}
.loginPopup .loginWin .formArea .inputArea .inputLine input {width:100%; font-size:16px; color:#606060; font-family:Pretendard-Light; padding:0 5px; box-sizing: border-box;}
.loginPopup .loginWin .formArea .btnDoLogin {display:flex; justify-content: center; align-items: center; width:200px; height:90px; font-size:25px; color:#ffffff; font-family:Pretendard-Bold; border-radius:5px; margin-left:30px; background-color:#dda478;}

.loginPopup .loginWin .snsButtons {display:flex; justify-content: space-between; align-items: center;}
.loginPopup .loginWin .snsButtons > div {cursor:pointer;}

.loginPopup .loginWin .divider {height:1px; margin-top:40px; margin-bottom:60px; background-color:#e0e0e0;}

.loginPopup .loginWin .suggestJoin {display:flex; justify-content: space-between; align-items: center;}
.loginPopup .loginWin .suggestJoin .messageCell .mainText {font-size:25px; color:#303030; font-family:Pretendard-Medium; margin-bottom:5px;}
.loginPopup .loginWin .suggestJoin .messageCell .subText {font-size:18px; color:#aaaaaa; font-family:Pretendard-Light;}
.loginPopup .loginWin .suggestJoin .btnGoJoin {display:flex; justify-content: space-between; align-items: center; width:200px; height:60px; font-size:18px; color:#151515; font-family:Pretendard-Light; padding:15px; box-sizing: border-box; border:solid 1px #151515;}



/*
    ************************************ 회원가입 - 가입동의 *******************************************
*/
.joinTermsPage .joinStep {text-align:center; margin-bottom:60px;}

.joinTermsPage .agreeContentArea {border:solid 1px #dddddd; padding:100px; box-sizing:border-box; background-color:#f9f9f9;}

.joinTermsPage .agreeContentArea .joinMessage {font-size:18px; color:#333333; font-family:NotoSansR; text-align:center; margin-bottom:35px;}

.joinTermsPage .agreeContentArea .joinPolicy {max-width:700px; width:95%; padding:55px; box-sizing: border-box; margin:0 auto; margin-bottom:35px; background-color:#ffffff;}
.joinTermsPage .agreeContentArea .joinPolicy .listBox {display:flex; align-items: flex-start; margin-bottom:25px;}
.joinTermsPage .agreeContentArea .joinPolicy .listBox .num {display:flex; justify-content:center; align-items:center; width:30px; height:30px; font-size:15px; color:#ffffff; margin-right:10px; border-radius:50%; background-color:#000000;}
.joinTermsPage .agreeContentArea .joinPolicy .listBox .listContent {flex:1;}
.joinTermsPage .agreeContentArea .joinPolicy .listBox .listContent .mainText {min-height:30px; line-height:30px; font-size:18px; color:#333333; font-family:NotoSansR;}
.joinTermsPage .agreeContentArea .joinPolicy .listBox .listContent .subText {font-size:15px; color:#666666; margin-top:5px;}
.joinTermsPage .agreeContentArea .joinPolicy .listBox .listContent .subText .strong {color:#9a478e; text-decoration: underline;}

.joinTermsPage .agreeContentArea .joinExcuseMsg {font-size:15px; color:#666666; font-family:NotoSansR; text-align:center; margin-bottom:45px;}

.joinTermsPage .agreeContentArea .agreeCheckArea {display:flex; justify-content: space-between; align-items: center; width:95%; max-width:700px; margin:0 auto; margin-bottom:30px; padding:30px 20px; box-sizing: border-box; border-top:solid 1px #999999; border-bottom:solid 1px #999999;}
.joinTermsPage .agreeContentArea .agreeCheckArea .agreeText {font-size:18px; color:#333333; font-family:NotoSansR;}
.joinTermsPage .agreeContentArea .agreeCheckArea .agreeText .strong {color:#e0a57a;}
.joinTermsPage .agreeContentArea .agreeCheckArea .agreeText .smallText {font-size:12px; color:#8a8a8a; }

.joinTermsPage .agreeContentArea input[type=checkbox] {display:none !important;}
.joinTermsPage .agreeContentArea input[type=checkbox] + label {display: inline-block; height:25px; font-weight:normal; cursor: pointer; line-height: 25px; padding-left: 25px; background: url('/app/layout/web/images/check_off.gif') left/25px no-repeat !important;}
.joinTermsPage .agreeContentArea input[type=checkbox]:checked + label { background-image: url('/app/layout/web/images/check_on.gif') !important; }

.joinTermsPage .agreeContentArea input[type=checkbox] + label.checkStyle2 {display: inline-block; height:17px; font-weight:normal; cursor: pointer; line-height: 18px; padding-left: 25px; background: url('/app/layout/web/images/check2_off.gif') left/18px no-repeat !important;}
.joinTermsPage .agreeContentArea input[type=checkbox]:checked + label.checkStyle2 { background-image: url('/app/layout/web/images/check2_on.gif') !important; }

.joinTermsPage .agreeContentArea .policyBox {width:95%; max-width:700px; margin:0 auto; padding:0 20px; box-sizing: border-box;}
.joinTermsPage .agreeContentArea .policyBox .policyTitle {font-size:18px; color:#333333; font-family:NotoSansR; margin-bottom:10px;}
.joinTermsPage .agreeContentArea .policyBox textarea {width:100%; height:120px; font-size:14px; color:#4b4b4b; font-family:NotoSansR; border:solid 1px #dcdcdc; margin-bottom:10px; padding:5px; box-sizing: border-box; resize:none; background-color:transparent;}

.joinTermsPage .agreeContentArea .divider {width:95%; max-width:700px; height:1px; margin:30px auto; background-color:#dcdcdc;}
.joinTermsPage .agreeContentArea .divider.strong {background-color:#999999;}






/*
    ************************************ 회원가입 - 가입폼 *******************************************
*/
.joinFormPage .joinStep {text-align:center; margin-bottom:60px;}

.joinFormPage .joinContentArea {border:solid 1px #dddddd; padding:100px; box-sizing:border-box; background-color:#f9f9f9;}
.joinFormPage .joinContentArea .joinFormTable {width:100%; max-width:700px; margin:0 auto; border-top:solid 1px #999999; border-bottom:solid 1px #999999; }
.joinFormPage .joinContentArea .joinFormTable th {width:180px; height:85px; font-weight:normal; font-size:22px; color:#666666; border-bottom:solid 1px #e7e7e7; background-color:#f8f8f8;}
.joinFormPage .joinContentArea .joinFormTable td {height:85px; border-bottom:solid 1px #e7e7e7; padding-right:10px; box-sizing: border-box; background-color:transparent;}
.joinFormPage .joinContentArea .joinFormTable td .wrap {display:flex; align-items: center;}
.joinFormPage .joinContentArea .joinFormTable td .btnIdCheck {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 40px;
    font-size: 16px;
    color: #ffffff;
    font-family: NotoSansR;
    border-radius: 30px;
    margin-left:10px;
    cursor:pointer;
    background-color: #666666;
}
.joinFormPage .joinContentArea .joinFormTable td input {width:100%; font-size:16px; background-color:transparent;}



/*
    ************************************ 회원가입 - 가입완료 *******************************************
*/
.joinCompletePage .joinStep {text-align:center; margin-bottom:60px;}

.joinCompletePage .joinContentArea {border:solid 1px #dddddd; padding:100px; box-sizing:border-box; background-color:#f9f9f9;}
.joinCompletePage .joinContentArea .completeMessage {font-size:28px; color:#666666; font-family:NotoSansR; text-align:center; margin-bottom:50px;}
.joinCompletePage .joinContentArea .completeMessage .strong {color:#e0a57a;}
.joinCompletePage .joinContentArea .buttonArea {display:flex; justify-content: center; align-items: center;}
.joinCompletePage .joinContentArea .buttonArea .cl_memberButton {margin:0 5px;}
.joinCompletePage .joinContentArea .buttonArea .btnGoLogin:hover {background-color:#e0a57b; border:solid 1px #e0a57b;}



/*
    ************************************ 약관페이지 *******************************************
*/
.termsPage .policyBox {font-size:16px; color:#666666; font-family:NotoSansR; padding:50px; box-sizing: border-box; border:solid 1px #e1e1e1;}



/*
    ************************************ 예약확인 페이지 25.07.18 new *******************************************
*/

.reservationWrap { background-color: #f5f5f5; ;}
.shadowBox { box-shadow:  0 0 10px rgba(0,0,0,0.1); border: 2px solid #eeeeee; border-radius: 10px; box-sizing: border-box;}
.reservationWrap .reservation { display: flex; gap: 30px; padding: 60px 0; box-sizing: border-box;}


.reservationWrap .reservation .listArea { position: relative; width: 30.4054%;}
.reservationWrap .reservation .listArea.m { display: none;}
.reservationWrap .reservation .viewArea { position: relative; width: 67.5675%;}
.reservationWrap .reservation .listArea .listBox,
.reservationWrap .reservation .viewArea .viewBox { position: relative; height: 900px; background-color: #fff; border-radius: 10px; box-sizing: border-box;}

.reservationWrap .reservation .listArea .listBox  {  padding: 30px; }

.reservationWrap .reservation .listArea .eventArea { display: none; justify-content: center; align-items: center; gap: 5px; width: 100%; background-color: #303030; color: #fff; font-size: 18px; font-family:'Pretendard-Regular'; padding: 15px 0; box-sizing: border-box; border-radius: 10px; margin-bottom: 10px; cursor: pointer;}
.reservationWrap .reservation .listArea .eventArea.active { display: flex;}

.reservationWrap .reservation .listArea .searchArea { position: relative; width: 100%; padding: 15px; box-sizing: border-box; border: 1px solid #eeeeee; border-radius: 10px; margin-bottom: 30px;}
.reservationWrap .reservation .listArea .searchArea .searchButton { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; }
/*.reservationWrap .reservation .listArea .searchArea:before { content: ''; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: url("/app/layout/web/images/searchIcon.png") no-repeat; width: 20px; height: 20px; cursor: pointer;}*/
.reservationWrap .reservation .listArea .searchArea input { width: 100%; font-size: 18px; color: #606060; font-family:'Pretendard-Regular'; padding-right: 25px; box-sizing: border-box;}
.reservationWrap .reservation .listArea .searchArea input::placeholder { font-size: 18px; color: #ccc;}

.reservationWrap .reservation .listArea .listBtnArea { display: flex; align-items: stretch ; gap: 10px; flex-wrap: wrap;}
.reservationWrap .reservation .listArea .listBtnArea .list { display: flex; justify-content: center; align-items: center; width: calc( 50% - 5px); text-align: center;  background-color: #f5f5f5; border-radius: 10px; padding: 20px 0; box-sizing: border-box; cursor: pointer;}
.reservationWrap .reservation .listArea .listBtnArea .list .text { font-size: 18px; color: #606060 ;font-family:'Pretendard-Regular';}
.reservationWrap .reservation .listArea .listBtnArea .list.active { background-color: #dda478; }
.reservationWrap .reservation .listArea .listBtnArea .list.active .text { color: #fff;font-family:'Pretendard-SemiBold';}

.reservationWrap .reservation .viewArea .viewBox { padding: 60px 30px 15px 60px;}
.reservationWrap .reservation .viewArea .viewBox .viewScrollArea { height: 100%; overflow-y: auto; box-sizing: border-box;; padding-right: 30px; padding-bottom: 60px;}
.viewScrollArea::-webkit-scrollbar {
    width: 4px; /* 스크롤바 너비 */
}

.viewScrollArea::-webkit-scrollbar-track {
    background: #f5f5f5; /* 트랙 색상 (배경) */
}

.viewScrollArea::-webkit-scrollbar-thumb {
    background-color: #e5e5e5; /* 손잡이 색상 */
    border-radius: 6px;
    /*    border-radius: 6px;
        border: 2px solid #f0f0f0; !* 트랙과의 간격 *!*/
}

.reservation .viewArea .titleArea{ text-align: center; margin-bottom: 30px;}
.reservation .viewArea .titleArea .eventTit { font-size: 15px; color: #aaaaaa; font-family:'NotoSerifKR-Light'; letter-spacing: 4px; margin-bottom: 15px;}
.reservation .viewArea .titleArea .mainTit { font-size: 35px;  color: #151515; font-family:'Pretendard-Medium'; margin-bottom: 30px; }
.reservation .viewArea .titleArea .eventTime { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 18px; color: #dda478; font-family:'Pretendard-Regular'; margin-bottom: 30px;}
.reservation .viewArea .titleArea .eventTime .text { position: relative; padding-right: 10px; box-sizing: border-box;}
.reservation .viewArea .titleArea .eventTime .text:before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 70%; background-color: #dda478;}
.reservation .viewArea .titleArea .infoArea { display: flex; align-items: center;justify-content: center; gap: 10px;}
.reservation .viewArea .titleArea .infoArea .infoText { display: flex; justify-content: center; gap:5px ; padding: 8px 20px; box-sizing: border-box; font-size:16px; color: #606060; font-family:'Pretendard-Light'; background-color: #f5f5f5; border-radius: 20px; }

.reservation .viewArea .bnaWrap { margin-bottom: 30px; padding: 20px; }
.reservation .viewArea .bnaWrap .bnaSwiper { margin-bottom: 20px;}
.reservation .viewArea .bnaWrap .bnaSwiper .mySwiper { width: 100%; overflow: hidden;}
.reservation .viewArea .bnaWrap .bnaSwiper .imgArea { display: flex;}
.reservation .viewArea .bnaWrap .bnaSwiper .imgArea .bnaImg { position: relative; width: 50%;}
.reservation .viewArea .bnaWrap .bnaSwiper .imgArea .bnaImg img { width: 100%; display: block;}
.reservation .viewArea .bnaWrap .bnaSwiper .imgArea .bnaImg .text { position: absolute; bottom: 0; right: 0; font-size: 14px; color: #ffffff; font-family:'Pretendard-Regular'; padding: 10px; box-sizing: border-box;}
.reservation .viewArea .bnaWrap .bnaSwiper .imgArea .bnaImg.beforeImg .text{ background-color: #b0a9a3;}
.reservation .viewArea .bnaWrap .bnaSwiper .imgArea .bnaImg.afterImg .text{ background-color: #d6a178; }

.reservation .viewArea .bnaWrap .bnaTextArea { text-align: center; font-size: 14px;  color: #aaa;font-family: 'NotoSansL';}


.reservation .viewArea .viewListWrap .viewListArea{ margin-bottom: 60px;}
.reservation .viewArea .viewListWrap .sutTitle { position: relative; display: none; font-size: 23px; color: #dda478; font-family:'Pretendard-Medium'; margin-bottom: 30px; padding-left: 30px; box-sizing: border-box;}
.reservation .viewArea .viewListWrap .sutTitle.active { display: block;}
.reservation .viewArea .viewListWrap .sutTitle:before { content: ''; position: absolute; top: 5px; left: 0; background: url("/app/layout/web/images/subTitleIcon.png")no-repeat; width: 20px; height: 17px;}

/*25.07.25 justify flex-start로 변경해줌 - 초운*/
.reservation .viewArea .viewListWrap .viewList { display: flex; justify-content: flex-start; align-items: stretch; gap: 30px; flex-wrap: wrap;}
.reservation .viewArea .viewListWrap .viewList .viewListBox { display: flex; flex-direction: column; justify-content: space-between; position: relative; width: calc( 50% - 15px); padding: 34px 29px; box-sizing: border-box;  }
.reservation .viewArea .viewListWrap .viewList .viewListBox.active { border-color: #dda478; }
.reservation .viewArea .viewListWrap .viewList .viewListBox:before { content: ''; position: absolute; top: -13px; left: 30px; padding: 5px 10px; border-radius: 4px; box-sizing: border-box; font-size: 14px; color: #ffffff; }
.reservation .viewArea .viewListWrap .viewList .viewListBox.new:before { content: 'NEW'; background-color: #a36633;}
.reservation .viewArea .viewListWrap .viewList .viewListBox.best:before { content: 'BEST'; background-color: #dda478; }
.reservation .viewArea .viewListWrap .viewList .viewListBox.hit:before { content: 'HIT'; background-color: #ac2f08;}

.reservation .viewArea .viewListWrap .viewList .viewListBox .listTit { font-size: 25px; color: #151515; font-family:'Pretendard-Medium'; margin-bottom: 10px;}
.reservation .viewArea .viewListWrap .viewList .viewListBox .subTit { font-size: 18px; color: #909090; font-family:'Pretendard-Light'; margin-bottom: 10px;}
.reservation .viewArea .viewListWrap .viewList .viewListBox .amountArea { display: flex; justify-content: flex-end; align-items: flex-end; gap: 15px;}
.reservation .viewArea .viewListWrap .viewList .viewListBox .amountArea .amount { text-decoration: line-through; font-size: 18px; color: #aaaa; font-family:'Pretendard-Light'; margin-bottom: 5px;}
.reservation .viewArea .viewListWrap .viewList .viewListBox .amountArea .won { font-size: 18px; color: #909090; font-family:'Pretendard-Regular';}
.reservation .viewArea .viewListWrap .viewList .viewListBox .amountArea .discount { font-size: 30px; color: #a00000; font-family:'Pretendard-SemiBold';}


.reservation .viewArea .reservationBtn { display: flex; justify-content: space-between; align-items: center; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 88%;
    background-color: #dda478; border-radius:  40px; padding: 10px 60px; box-sizing: border-box; font-size: 20px; color: #fff;  z-index: 503;}

.reservation .viewArea .reservationBtn .textArea,
.reservation .viewArea .reservationBtn .btnArea { padding: 13px 0; font-family:'Pretendard-Medium';}
.reservation .viewArea .reservationBtn .textArea { display: flex; align-items: center; gap: 30px;}
.reservation .viewArea .reservationBtn .textArea > span { display: flex; align-items: center; gap: 5px;}
.reservation .viewArea .reservationBtn .textArea .number { display: inline-flex; justify-content: center; align-items: center; width: 31px; height: 31px; background-color: #fff; border-radius: 5px; font-size: 25px; color: #dda478;font-family:'Pretendard-SemiBold';}

.reservation .viewArea .reservationBtn .btnArea { position: relative; display: flex; gap: 20px; align-items: center;}
.reservation .viewArea .reservationBtn .btnArea:before { content: ''; position: absolute; top: 0; left: -60px; width: 1px; height: 100%; background-color: #eed2bc}
.reservation .viewArea .reservationBtn a { display: flex; align-items: center; gap: 20px; color: #fff; font-family:'Pretendard-Medium'; }

.reservation .viewArea .reservationBtn .rightArea { display: flex; align-items: center; justify-content: center; gap: 140px; }
.reservation .viewArea .reservationBtn .drawer.contained { position: relative; cursor: pointer }
.reservation .viewArea .reservationBtn .drawer.contained:after { position: absolute; content: ''; top: -5px; right: -10px; width: 7px; height: 7px; background-color: #a00000; border-radius: 50%; }

.reservation .viewArea .viewBox .viewBoxBg {  position: absolute; bottom: 0; left: 0; width: 96%; height: 125px;   background: url("/app/layout/web/images/reservationBg.png")no-repeat; background-size: cover; border-radius: 10px;}

/*slidePoppup추가 선택한 시술 담아놓은 서랍 25.09.04 - 초운*/
.reservation .viewArea .slidePopup { display: none; position: absolute; left:50%; transform: translateX(-50%); bottom: 70px; width: 88%;
    padding: 20px 20px 70px 20px; box-sizing: border-box; border-radius: 10px; background-color: #fff; z-index: 502; }
.reservation .viewArea .slidePopup .popup { max-height: 380px; overflow-y: auto; padding-right: 20px; }
.reservation .viewArea .slidePopup .popup::-webkit-scrollbar { width: 4px; /* 스크롤바 너비 */ }
.reservation .viewArea .slidePopup .popup::-webkit-scrollbar-track { background: #f5f5f5; /* 트랙 색상 (배경) */ }
.reservation .viewArea .slidePopup .popup::-webkit-scrollbar-thumb { background-color: #e5e5e5; /* 손잡이 색상 */ border-radius: 6px; }

.reservation .viewArea .slidePopup .popup .list { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding: 18px 30px; box-sizing: border-box;}
.reservation .viewArea .slidePopup .popup .list:nth-last-child(1) { border-bottom: 0; }
.reservation .viewArea .slidePopup .popup .list .rightArea { display: flex; align-items: center; gap: 20px; }
.reservation .viewArea .slidePopup .popup .list .rightArea .deleteBtn { cursor: pointer; }
.reservation .viewArea .slidePopup .popup .list .amountArea { display: flex; align-items: center; gap: 30px; }
.reservation .viewArea .slidePopup .popup .list .amountArea .amount { text-decoration: line-through; font-size: 18px; color: #aaaa; font-family: 'Pretendard-Light'; }
.reservation .viewArea .slidePopup .popup .list .amountArea .won { display: flex; align-items: center; font-size: 18px; color: #909090; font-family: 'Pretendard-Regular'; }
.reservation .viewArea .slidePopup .popup .list .amountArea .won .discount { font-size: 26px; color: #a00000; font-family:'Pretendard-SemiBold'; }
.reservation .viewArea .slidePopup .popup .list .listTit { font-size: 20px; color: #151515; font-family:'Pretendard-Medium'; }


.reservationWrap .popupWrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 501; }

.reservationWrap .cl_popupWrap .popup .subTit {text-align: center;}



/*
    ********************************************* 2025.10 공통 하단부분 ********************************************
*/
.commonBottom {position:relative; border-top:solid 1px #f0f0f0; border-bottom:solid 1px #f0f0f0;}
.commonBottom:before {content:""; position:absolute; top:0; left:0; z-index:0; width:70%; height:100%; background-image:url("/app/layout/web/images/main/commonBottomBg.png");}
.commonBottom .mainContentWrap {position:relative; z-index:1; display:flex; align-items: flex-start; height:540px;}

.commonBottom .mainContentWrap .bulletContent {display:flex; align-items: flex-start; gap:20px; color:#909090; white-space: nowrap;}
.commonBottom .mainContentWrap .bulletContent .bullet {font-size:30px; font-family:TheSeasonsR;}
.commonBottom .mainContentWrap .bulletContent .bullet img {display:block; margin-top:7px;}
.commonBottom .mainContentWrap .bulletContent .contentBody .title {font-size:20px; font-family:Pretendard-Light; margin-bottom:15px;}
.commonBottom .mainContentWrap .bulletContent .contentBody .address {font-size:20px; color:#303030; font-family:Pretendard-Light; margin-bottom:15px;}
.commonBottom .mainContentWrap .bulletContent .contentBody .subway {font-size:18px; font-family:Pretendard-Light; letter-spacing: -1px; margin-bottom:40px;}
.commonBottom .mainContentWrap .bulletContent .contentBody .cl_arrowButton {display:inline-flex;}

.commonBottom .mainContentWrap .locationArea {display:flex; align-items:flex-start; gap:80px; width:64%; padding-top:100px; padding-right:65px; box-sizing: border-box;}
.commonBottom .mainContentWrap .locationArea .mapCell {width:450px; height:310px; border:solid 1px #e0e0e0; border-radius:25px;}
.commonBottom .mainContentWrap .locationArea .bulletContent .contentBody .cl_arrowButton {display:inline-flex;}
.commonBottom .mainContentWrap .locationArea > .cl_arrowButton {display:none;}



.commonBottom .mainContentWrap .contactInfoArea {position:relative; flex:1; height:100%; padding-top:100px; padding-left:65px; border-left:solid 1px #f0f0f0; box-sizing: border-box; background-color:#ffffff;}
.commonBottom .mainContentWrap .contactInfoArea .cl_bnbgMainSectionTitle .title {width:100%; text-align:right;}
.commonBottom .mainContentWrap .contactInfoArea .hGridWrap {display:flex; align-items: flex-start; gap:50px; margin-bottom:30px;}
.commonBottom .mainContentWrap .contactInfoArea .telCell a {font-size:48px; color:#dda478; font-family:Pretendard-Bold; line-height:0.8;}
.commonBottom .mainContentWrap .contactInfoArea .treatTime table {width:100%; font-size:20px; color:#303030; margin-bottom:15px;}
.commonBottom .mainContentWrap .contactInfoArea .treatTime table th {width:185px; font-weight:normal; font-family:Pretendard-Light; text-align:left;}
.commonBottom .mainContentWrap .contactInfoArea .treatTime table td {font-family:Pretendard-Medium;}
.commonBottom .mainContentWrap .contactInfoArea .treatTime .treatInfo {font-size:18px; color:#909090; font-family:Pretendard-Light; line-height:1.4;}














/* ******************** media 진입 ******************** */

@media (max-width: 1600px) {

    .contentWrap {max-width: 100%; padding: 0 15px; box-sizing: border-box;}

    /*헤더*/
    header .headerInner .languageArea .languageList {left: auto; right: 0;}

    /* ******************** page: index :: 프로모션 (promotion) ******************** */
    .promotion .promotionRotate {top: 60px; left: 10px;}
    .promotion .promotionRotate > img {width: 80%;}

    .promotion .cl_txtCon .main {font-size: 35px;}
    .promotion .cl_txtCon .sub {font-size: 15px;}
    .promotion .cl_txtCon div {margin-bottom: 30px;}
    .promotion .cl_displayRow {justify-content: space-evenly;}
    .promotion .cl_displayRow .description {width: 22vw;}

    /* 이전버튼 */
    .promotion .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: -4%;}
    /* 다음버튼 */
    .promotion .swiper-button-next, .swiper-container-rtl .swiper-button-prev {right: -4%;}

    /* ******************** page: index :: 하단부맵영역 ******************** */



    /* ******************** page: index :: 바노바기 연혁( petitHistory ) ******************** */
    /* 상단부 숫자 */
    .petitHistory .numWrap .num {font-size: 4.8vw;}
    .petitHistory .numWrap .num.surgery {font-size: 4.8vw;}

    /* 하단부 연혁 설명 */
    .petitHistory .subTxtWrap >  li {font-size: 25px;}
    .petitHistory .subTxtWrap .smailTxt {margin-bottom: 30px; font-size: 16px;}
    .petitHistory .subTxtWrap .bold {font-size: 16px;}

    /* ******************** subpage: search :: searchArea ******************** */
    /*
        search 페이지 좌우 간격 조정
    */
    .search .subContentWrap .pullPageWrap {padding: 0 15px; box-sizing: border-box;}


    /* ******************** 지점연결 intro ******************** */

    .intro .videoWrap video {width: auto; height: 100%;}

    /* ******************** subpage: surgery > list.php ******************** */
    .equipmentList .subContentWrap {padding: 0 15px; box-sizing: border-box;}



    /*
        ************************************ 예약확인 페이지 25.07.18 new *******************************************
    */

    .reservationWrap .reservation { padding: 60px 15px; }



    /*
        *** 2025.10 퀵메뉴 리뉴얼
    */
    #quickMenu {bottom:65px; right:30px;}


}

@media (max-width: 1480px) {
    .subContentWrap {padding-left:15px; padding-right:15px; box-sizing: border-box;}

    header .headerInner .menu li {font-size: 18px; white-space: nowrap;}
    /* ******************** mainVisual ******************** */
    .mainVisualSwiper .swiper-slide {height: 770px;}
    /*
        ***스와이퍼 내부 텍스트
    */
    /*.mainVisualSwiper .slideInner {max-width: 100%; width: 100%;}*/
    .mainVisualSwiper .slideInnerTxtWrap {width: 100%; padding: 0 15px; box-sizing: border-box;}
    .mainVisualSwiper .rgt .slideInnerTxtWrap {align-items: flex-end;}
    .mainVisualSwiper .slideInnerTxtWrap .innerTxt  {font-size: 45px;}
    .mainVisualSwiper .slideInnerTxtWrap .innerTxt img {width: 29.8649vw}


    /* ******************** page: index :: youtube (banoShorts) ******************** */
    .banoShorts .banoShortsWrapper {max-width: 100%; width: 100%; margin-left: 0; padding: 0 0 0 15px; box-sizing: border-box;}

    /* ******************** page: index :: 하단부맵영역 ******************** */
    .map__wrap .map__info {left: 30px;}




    /*
        *** 2025.10 푸터 리뉴얼
    */
    footer .footerTail .top {padding:15px 0;}
    footer .footerTail .top a {font-size:14px;}
    footer .footerTail .top a:after {height: 14px; margin: 0 15px;}

    footer .footerTail .mid .companyInfo {flex-direction:column; gap:30px; margin: 30px 0;}
    footer .footerTail .mid .companyInfo ul li {margin-right: 15px; font-size: 13px;}

    footer .footerTail .copy {font-size: 13px;}





    /* ******************** subpage: surgery > list.php ******************** */
    .equipmentList .list li {font-size: 18px;}



    /*
        ************************************ 예약확인 페이지 25.07.18 new *******************************************
    */

    .reservationWrap .reservation { padding: 40px 15px; }

    .reservationWrap .reservation .listArea .listBox  {  padding: 20px; }

    .reservationWrap .reservation .listArea .eventArea { font-size: 16px; }
    .reservationWrap .reservation .listArea .searchArea input {font-size: 16px; }
    .reservationWrap .reservation .listArea .searchArea input::placeholder { font-size: 16px; }

    .reservationWrap .reservation .listArea .listBtnArea .list .text { font-size: 15px; }

    .reservationWrap .reservation .viewArea .viewBox { padding: 40px 10px 15px 20px; }
    .reservationWrap .reservation .viewArea .viewBox .viewScrollArea { padding-right: 10px; padding-bottom: 90px; }

    .reservationWrap .reservation .viewArea .titleArea .mainTit { /*font-size: 30px;*/ margin-bottom: 20px; }
    .reservationWrap .reservation .viewArea .titleArea .eventTime { margin-bottom: 20px;}

    .reservationWrap .reservation .viewArea .viewListWrap .viewListArea{ margin-bottom: 40px; }

    .reservationWrap .reservation .viewArea .viewListWrap .sutTitle { font-size: 20px; margin-bottom: 20px; }
    .reservationWrap .reservation .viewArea .viewListWrap .sutTitle:before { top: 3px; }

    .reservationWrap .reservation .viewArea .viewListWrap .viewList { gap: 20px; }
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox { padding: 25px 20px; }
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox:before { left: 16px;}
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox .listTit { font-size: 22px; }
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox .subTit { font-size: 16px; }

    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox .amountArea .amount { font-size: 16px; }
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox .amountArea .won { font-size: 16px; }
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox .amountArea .discount { font-size: 25px; }

    .reservationWrap .reservation .viewArea .reservationBtn { width: 92%; font-size: 18px; }

    .reservationWrap .reservation .viewArea .viewBox .viewBoxBg {  position: absolute; bottom: 0; left: 0; width: 96%; height: 125px;   background: url("/app/layout/web/images/reservationBg.png")no-repeat; background-size: cover; border-radius: 10px;}

    .reservation .viewArea .slidePopup { width: 92%; }





    /*
        ********************************************* 2025.10 공통 하단부분 ********************************************
    */
    .commonBottom .mainContentWrap {align-items: flex-start; height:420px;}

    .commonBottom .mainContentWrap .bulletContent {gap:10px;}
    .commonBottom .mainContentWrap .bulletContent .bullet img {margin-top:7px;}
    .commonBottom .mainContentWrap .bulletContent .contentBody .title {font-size:18px; margin-bottom:10px;}
    .commonBottom .mainContentWrap .bulletContent .contentBody .address {font-size:18px; margin-bottom:10px;}
    .commonBottom .mainContentWrap .bulletContent .contentBody .subway {font-size:16px; letter-spacing: -1px; margin-bottom:30px;}

    .commonBottom .mainContentWrap .locationArea {gap:30px; width:64%; padding-top:60px; padding-right:30px;}
    .commonBottom .mainContentWrap .locationArea .mapCell {width:50%; height:270px; border:solid 1px #e0e0e0; border-radius:25px;}


    .commonBottom .mainContentWrap .contactInfoArea {flex:1; height:100%; padding-top:60px; padding-left:30px;}
    .commonBottom .mainContentWrap .contactInfoArea .hGridWrap {gap:30px; margin-bottom:30px;}
    .commonBottom .mainContentWrap .contactInfoArea .telCell {font-size:34px; line-height:0.8;}
    .commonBottom .mainContentWrap .contactInfoArea .treatTime table {font-size:18px; margin-bottom:15px;}
    .commonBottom .mainContentWrap .contactInfoArea .treatTime table th {width:130px;}
    .commonBottom .mainContentWrap .contactInfoArea .treatTime .treatInfo {font-size:16px; line-height:1.4;}

}


@media (max-width: 1100px) {

    .notice .noticeInner > div {font-size: 13px;}

    header .headerInner .logo img {width: 28vw;}
    header .headerInner .menu li {font-size: 16px; margin-right: 10px;}

    /* ******************** header hover시 subMenu ******************** */
    .subMenu .subMenuInner {padding: 5vw;}
    .subMenu .subMenuInner .menuList {justify-content: space-around; margin-right: 15px;}
    .subMenu .subDepth:after {margin-bottom: 15px;}
    .subMenu .subDepth .mainTxt {font-size: 20px;}

    .subMenu .subDepth ul {margin-bottom: 15px; font-size: 20px;}
    .subMenu .subDepth ul li:after  {margin: 0 5px;}

    /* ******************** header hover시 우측 슬라이드 ******************** */
    .subMenu .swiperInner {margin-left: 15px;}
    .subMenu .swiperInner .mainTxt {font-size: 20px; margin-bottom: 10px;}
    .subMenu .swiperInner .mainTxt a {width: 80px; height: 22px; line-height: 22px;font-size: 14px;}
    .subMenu .swiperInner .swiper-slide img {width: 100%;}
    .subMenu .swiperInner .swiper-pagination {position: relative; top: 20px; left: 50%; transform: translateX(-50%);}

    /* ******************** 하단부 빠른 상담신청 ******************** */
    .qCounselPost .iconScroll {top: -58%;}
    .qCounselPost {width: 320px; height: 40px;}
    .qCounselPost > div:nth-child(1):before {background: url("/app/layout/web/images/common/icon_petit.png") center/24px auto no-repeat}
    .qCounselPost > div {font-size: 26px;}


    /* ******************** popUp ******************** */
    #popUpCon .popUpInner {width: 100vw; padding: 0 30px; box-sizing: border-box;}
    #popUpCon .popUpInner img {width: 100%;}

    /* ******************** subpage: surgery > list.php ******************** */
    .equipmentList .list {}
    .equipmentList .list:after {content: none;}
    .equipmentList .list li {width: calc(100% / 3); font-size: 18px; border-bottom: 3px solid var(--colorless03); box-sizing: border-box;}



    /*
        ************************************ 전지점 소개 *******************************************
    */
    /*
        *** 지점소개 비주얼
    */
    .branchIntro .visualArea {
        height: 650px;
    }

    .branchIntro .visualArea .logoCell {width:250px; margin-bottom:20px;}
    .branchIntro .visualArea .logoCell img {width:100%;}
    .branchIntro .visualArea .lineTextCell {width:550px; margin-bottom:15px;}
    .branchIntro .visualArea .lineTextCell img {width:100%}
    .branchIntro .visualArea .textCell {font-size:40px;}


    /*
        *** 탭
    */
    .branchIntro .tabArea {position:relative; display:flex; align-items: center; top:-60px; margin-bottom:40px;}
    .branchIntro .tabArea .tab {display:flex; justify-content: center; align-items: center; flex:1; height:60px; font-size:20px; color:#606060; font-family:Pretendard-Regular; background-color:#ffffff;}
    .branchIntro .tabArea .tab.on {color:#ffffff; font-family:Pretendard-Bold; background-color:#dda478;}


    /*
        *** 탭 내용
    */
    .branchIntro .diagramArea {display:flex; justify-content: space-between; align-items: flex-start; margin-bottom:180px;}
    .branchIntro .diagramArea .diagram {width:30%;}
    .branchIntro .diagramArea .diagram .circleWrap {margin-bottom:25px;}
    .branchIntro .diagramArea .diagram .circle {
        font-size: 35px;
    }
    .branchIntro .diagramArea .diagram .circleText {font-size:18px;}
    .branchIntro .diagramArea .plus {font-size:25px; margin-top:13vw;}

    .branchIntro .tabContentTitle {margin-bottom:50px;}
    .branchIntro .tabContentTitle .engText {font-size:15px;}
    .branchIntro .tabContentTitle .korText {font-size:40px;}

    .branchIntro .photoContentBox {display: flex; align-items: center; margin-bottom:70px;}
    .branchIntro .photoContentBox .imgCell {margin-right:40px;}
    .branchIntro .photoContentBox .textCell .eng {font-size:18px; margin-bottom:15px;}
    .branchIntro .photoContentBox .textCell .mainText {font-size:35px; margin-bottom:40px;}
    .branchIntro .photoContentBox .textCell .detailText {font-size:18px;}



    /*
        ************************************ 로그인팝업 *******************************************
    */
    .loginPopup .loginWin {max-width:680px; padding:80px 60px;}


    /*25.09.05 추가*/
    .reservation .viewArea .reservationBtn .rightArea { gap: 100px; }





    /*
        ********************************************* 2025.10 공통 하단부분 ********************************************
    */
    .commonBottom .mainContentWrap {flex-direction:column; align-items: center; height:auto; padding:0;}
    .commonBottom:before {width:100%; height:100%;}

    .commonBottom .mainContentWrap .bulletContent {gap:10px;}
    .commonBottom .mainContentWrap .bulletContent .bullet img {margin-top:7px;}
    .commonBottom .mainContentWrap .bulletContent .contentBody .title {font-size:18px; margin-bottom:10px;}
    .commonBottom .mainContentWrap .bulletContent .contentBody .address {font-size:18px; margin-bottom:10px;}
    .commonBottom .mainContentWrap .bulletContent .contentBody .subway {font-size:16px; letter-spacing: -1px; margin-bottom:30px;}

    .commonBottom .mainContentWrap .locationArea {justify-content:center; gap:30px; width:100%; padding-top:60px; padding-bottom:60px; padding-right:0;}
    .commonBottom .mainContentWrap .locationArea .mapCell {width:50%; height:270px;}


    .commonBottom .mainContentWrap .contactInfoArea {display:flex; flex-direction: column; align-items:flex-end; width:100%; height:100%; padding-top:60px; padding-bottom:60px; padding-left:0;}
    .commonBottom .mainContentWrap .contactInfoArea .hGridWrap {width:400px; gap:30px; margin-bottom:30px;}
    .commonBottom .mainContentWrap .contactInfoArea .telCell {font-size:34px; line-height:0.8;}
    .commonBottom .mainContentWrap .contactInfoArea .treatTime table {wdith:auto; font-size:18px; margin-bottom:15px;}
    .commonBottom .mainContentWrap .contactInfoArea .treatTime table th {width:130px;}
    .commonBottom .mainContentWrap .contactInfoArea .treatTime .treatInfo {font-size:16px; line-height:1.4;}


}

@media (max-width: 1024px) {

    /*
           ******************************* 대문페이지 ************************
       */

    /*
        *** 헤더
    */

    .gateHeader { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; z-index: 15; box-sizing: border-box; padding: 0 20px; }


    /*카카오링크*/

    .header .kakaoLinkWrap .clickLink { width: 180px; padding: 10px 0; cursor: pointer; }
    .header .kakaoLinkWrap .clickLink span { font-size: 16px; }


    /*
        *** 메인비주얼 텍스트
    */
    .subVisual .contentsWrap .mainText {  padding: 0 20px; margin-bottom: 170px; }
    .subVisual .contentsWrap .mainText span {  font-size: 55px; }


    /*
        *** 지점바로가기 링크
    */

    /*지점바로가기 텍스트*/
    .subVisual .gateLinkWrap .mainTitle { font-family:'Pretendard-Light'; font-size: 28px; color: #ffffff; text-align: center; margin-bottom: 30px;}

    /*지점바로가기 list*/
    .subVisual .gateLink li { width: 180px; margin: 0 3px; padding: 15px 15px; }
    .subVisual .gateLink li a{ display: flex; justify-content: space-between; align-items: center; font-size: 22px; color: #ffffff; font-family:'Pretendard-Regular'; }
    .subVisual .gateLink li a img { width: 100%; max-width: 10px; }

    .subVisual .gateLink li:hover { background: rgba(221,164,120,0.7); transition: 0.5s; }


    /*
        ******************************* 대문페이지 끝 ************************
    */






    /* ******************** page: index :: 하단부맵영역 ******************** */
    /* 지도 */
    .map__wrap {height: auto; /*margin-top: 60px;*/}
    .map__wrap .map {display: block;height: 400px;position: relative;top: auto;left: auto;}
    .map__wrap .dh__inner {margin-left: 0;margin-right: 0;background-color: #e0a57a;padding: 50px 3.90625%;}
    .map__wrap .map__info {position: relative;top: auto;left: auto;}
    .map__bg {display: none;}
    footer .pullPageWrap {margin-bottom: 0}
    footer .footerSub { margin-top: 50px; }

    /*footer .footerTail .top {display: flex; justify-content: center; margin-bottom: 35px; font-size: 14px; }
    footer .footerTail .top:after {content: none; margin: 0;}
    footer .footerTail .top a {display: inline-block; color: var(--colorless06); font-family:'Pretendard-Light';}
    footer .footerTail .top a:after {content: ''; display: inline-block; width: 1px; height: 10px; margin: 0 15px; background: var(--colorless03); box-sizing: border-box;}


    footer .footerTail .mid {background: var(--colorless08); padding: 30px 20px 60px; margin-bottom: 0; box-sizing: border-box;}
    footer .footerTail .mid ul {flex-wrap: wrap; justify-content: center; align-items: center; margin-bottom: 30px;  box-sizing: border-box;}
    footer .footerTail .mid ul li {color: var(--colorless07);}
    footer .footerTail .mid ul .footerLogo {width: 100%; margin-bottom: 0;}
    footer .footerTail .mid ul .footerLogo img {width: calc(100% /2); margin: 0 auto;}
    footer .footerTail .mid .pcVer {display: none;}
    footer .footerTail .mid .mVer {display: block; width: 100%;}*/

    /*
        *** 2025.10 푸터 리뉴얼
    */

    footer .footerTail .top {padding:15px 0;}
    footer .footerTail .top .contentWrap {justify-content: center;}
    footer .footerTail .top a {font-size:12px;}
    footer .footerTail .top a:after {height: 12px; margin: 0 15px;}

    footer .footerTail .mid .companyInfo {flex-direction:column; gap:30px; margin: 30px 0;}
    footer .footerTail .mid .companyInfo ul {display:block; text-align:center;}
    footer .footerTail .mid .companyInfo ul li {display:inline-block; margin-right: 15px; font-size: 12px;}

    footer .footerTail .copy {font-size: 12px; margin-bottom:50px;}


    /* ******************** subpage: search :: searchArea ******************** */
    /*
        *** main title
    */
    .search .cl_searchArea {height: 280px;}

    /* ******************** 지점연결 intro ******************** */
    .intro .centerDirect .centerWrapper {padding: 0 15px; box-sizing: border-box;}

    .intro header {height: auto;}
    .intro .etcCon {display: flex; flex-direction: column;}
    .intro .etcCon a {height: 35px; padding: 0 25px;}
    .intro .etcCon a {margin-bottom: 10px; margin-right: 0;}
    .intro .etcCon a:last-child {margin-bottom: 0}

    /*
        *** 하단부 intro 별도 적용 INC_CopyRight (색상 등)
    */
    .intro footer {margin: 50px auto;}
    .intro footer .footerTail .contentWrap {padding: 0 15px; box-sizing: border-box;}
    .intro footer .footerTail .top {display: block; text-align: center;}
    .intro footer .footerTail .top:after {content: ''; display: block; width: 100%; height: 3px; margin: 35px 0 0; background-color: var(--colorless08); box-sizing: border-box;}
    .intro footer .footerTail .mid {margin-bottom: 0; background-color: var(--colorless01);}
    .intro footer .footerTail .mid ul .footerLogo img {display: block; width: 100%;}
    .intro footer .footerTail .mid ul .footerLogo .mVer {display: none;}

    .intro footer .footerTail .mid ul:nth-child(2) {padding: 10px; background-color: var(--colorless02); border-radius: 8px; box-sizing: border-box;}
    .intro footer .footerTail .mid ul:nth-child(2) li {height: 23px; line-height: 23px;}


    /* ******************** subpage: surgery > view.php ******************** */
    /*
        *** 상단 리스트
    */
    .equipmentDetail .surgeryMenu {height: 40px;}
    .equipmentDetail .surgeryMenu .menuWrap {justify-content: center;}
    .equipmentDetail .surgeryMenu .menuWrap > li:first-child {display: none;}
    .equipmentDetail .surgeryMenu .menuWrap .depth01 > ul, .equipmentDetail .surgeryMenu .menuWrap .depth02 > ul {top:40px;}
    .equipmentDetail .surgeryMenu .menuWrap .surgerySubMenu > ul > li {height: 40px;}
    /*
        *** 장바구니 영역
    */
    .equipmentDetail .shoppingBasket {padding: 30px 0;}
    .equipmentDetail .shoppingBasket #mainProductCon {flex-direction: column; padding: 0 15px; box-sizing: border-box;}
    .equipmentDetail .shoppingBasket #mainProductCon img {width: 100%;}
    .equipmentDetail .shoppingBasket #mainProductCon > div {margin-right: 0;margin-bottom: 15px;}
    .equipmentDetail .shoppingBasket #mainProductCon .imgArea { flex-direction: column; }
    .equipmentDetail .shoppingBasket #mainProductCon .imgArea img { width: 100%}
    .equipmentDetail .basketList { flex-direction: column; gap: 0; }
    .equipmentDetail .basketList > div {margin-bottom: 15px;}
    .equipmentDetail .basketList > div:nth-child(5) {margin-bottom: 0;}
    .equipmentDetail .basketList > div:last-child {margin-bottom: 0;}
    .equipmentDetail .basketList .productText { width: 100%; }
    .equipmentDetail .basketList .productName {font-size: 22px;}
    .equipmentDetail .basketList .productSub {font-size: 15px; color: var(--colorless09);}
    .equipmentDetail .basketList .productPrice {font-size: 17px;}
    .equipmentDetail .basketList .productPrice > span {font-size: 20px;}


    .equipmentDetail .cl_imgCon.pc {display:none;}
    .equipmentDetail .cl_imgCon.mobile {display:block;}


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

    /*
        *** 이벤트 리스트
    */
    .eventListPage .listArea .grid .gridCell {
        box-sizing:border-box;
        width:calc(100% / 2);
        border:0 solid transparent;
        border-width:0 30px 30px 0;
    }



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

    .bnaPage .categoryTabArea .tab {
        height: 50px;
        font-size: 18px;
    }

    .bnaPage .bnaSearchArea {height:45px; margin-bottom:40px;}

    .bnaPage .listArea {padding-left:60px; padding-right:60px; box-sizing: border-box;}

    .bnaPage .bnaMainPhoto .photoWrap .termText {width:120px; height:35px; font-size:16px;}
    .bnaPage .bnaMainPhoto .photoWrap .beforeCell .loginCover .innerWrap {width:85%; padding:40px 15px;}
    .bnaPage .bnaMainPhoto .photoWrap .beforeCell .loginCover p.line1 {font-size:14px;}
    .bnaPage .bnaMainPhoto .photoWrap .beforeCell .loginCover p.line2 {font-size:17px;}
    .bnaPage .bnaMainPhoto .textCell {font-size:16px; padding:15px 0;}

    .bnaPage .btnBnaGoLogin {font-size:18px; padding:10px 45px;}

    .bnaPage .bnaThumbArea.gridWrapper {overflow:hidden; margin-bottom:60px;}
    .bnaPage .bnaThumbArea.gridWrapper .grid {display:flex; flex-wrap:wrap; padding:20px 0 0 20px; margin:-20px}
    .bnaPage .bnaThumbArea.gridWrapper .grid .gridCell {
        font-size:0;
        box-sizing:border-box;
        width:calc(100% / 3);
        border:0 solid transparent;
        border-width:0 20px 20px 0;
        cursor:pointer;
    }

    .bnaPage .bnaThumbArea.gridWrapper .grid .gridCell .beforeCell .loginCover {font-size:14px;}
    .bnaPage .bnaThumbArea.gridWrapper .grid .gridCell .textCell {font-size:16px; padding:10px 5px;}



    /*
        ************************************ 바노바기 TV *******************************************
    */
    .mediaPage .academyTVArea .academyTVList .listText {
        font-size: 16px;
    }

    .mediaPage .btnViewMore {
        width: 300px;
        height: 50px;
        font-size: 20px;
        margin-top:30px;
    }
    .mediaPage .btnViewMore i {font-size:22px;}


    /*
        ************************************ 연구하는 바노바기 *******************************************
    */

    /*
        *** 리스트
    */
    .labPage .listArea .gridWrapper {overflow:hidden;}
    .labPage .listArea .grid {display:flex; flex-wrap:wrap; padding:30px 0 0 30px; margin:-30px}
    .labPage .listArea .grid .gridCell {
        box-sizing:border-box;
        width:calc(100% / 2);
        border:0 solid transparent;
        border-width:0 30px 30px 0;
    }

    .labPage .listArea .labList .listTitle {padding:15px 10px;}
    .labPage .listArea .labList .listTitle .title {font-size:18px;}
    .labPage .listArea .labList .listTitle .date {width:70px; font-size:12px;}
    .labPage .listArea .labList .detail {font-size:15px; padding:10px;}


    /*
        *** 상세보기 페이지
    */
    .labDetailPage .detailArea {padding:0 40px; padding-bottom:40px;}
    .labDetailPage .detailArea .titleCell {
        min-height: 70px;
        font-size: 22px;
    }
    .labDetailPage .detailArea .listInfoCell {height:50px; font-size:14px; padding:0 20px;}
    .labDetailPage .detailArea .labContent {padding:20px;}
    .labDetailPage .detailArea .labContent .detailImgCell {margin-bottom:20px;}
    .labDetailPage .detailArea .labContent .detailTextCell {font-size:18px; margin-bottom:40px;}

    .labDetailPage .detailArea .logoCell img {width:300px;}



    /*
        ************************************ 회원가입 - 가입동의 *******************************************
    */
    .joinTermsPage .joinStep {margin-bottom:40px;}

    .joinTermsPage .agreeContentArea {padding:80px;}

    .joinTermsPage .agreeContentArea .joinMessage {font-size:16px; margin-bottom:35px;}

    .joinTermsPage .agreeContentArea .joinPolicy {padding:35px; margin-bottom:35px;}
    .joinTermsPage .agreeContentArea .joinPolicy .listBox {margin-bottom:25px;}
    .joinTermsPage .agreeContentArea .joinPolicy .listBox .num {width:25px; height:25px; font-size:14px; margin-right:10px;}
    .joinTermsPage .agreeContentArea .joinPolicy .listBox .listContent .mainText {min-height:25px; line-height:25px; font-size:17px;}
    .joinTermsPage .agreeContentArea .joinPolicy .listBox .listContent .subText {font-size:14px; margin-top:5px;}

    .joinTermsPage .agreeContentArea .joinExcuseMsg {font-size:14px; margin-bottom:45px;}

    .joinTermsPage .agreeContentArea .agreeCheckArea {margin-bottom:30px; padding:30px 20px;}
    .joinTermsPage .agreeContentArea .agreeCheckArea .agreeText {font-size:17px;}
    .joinTermsPage .agreeContentArea .agreeCheckArea .agreeText .smallText {font-size:12px;}

    .joinTermsPage .agreeContentArea .policyBox {padding:0 20px;}
    .joinTermsPage .agreeContentArea .policyBox .policyTitle {font-size:17px; margin-bottom:10px;}
    .joinTermsPage .agreeContentArea .policyBox textarea {height:120px; font-size:14px; margin-bottom:10px; padding:5px;}

    .joinTermsPage .agreeContentArea .divider {margin:30px auto;}



    /*
        ************************************ 회원가입 - 가입폼 *******************************************
    */
    .joinFormPage .joinStep {margin-bottom:40px;}


    /*
        ************************************ 회원가입 - 가입완료 *******************************************
    */
    .joinCompletePage .joinStep {margin-bottom:40px;}



    /*
        ************************************ 예약확인 페이지 25.07.18 new *******************************************
    */

    .reservationWrap { background-color: #fff;}
    .reservationWrap .reservation { padding:0; flex-direction: column; justify-content: center; align-items: center; gap: 50px;}
    .reservationWrap .reservation .listArea { position: relative; width: 100%;}
    .reservationWrap .reservation .listArea.pc { display: none;}
    .reservationWrap .reservation .listArea.m { display: block;}
    .reservationWrap .reservation .viewArea { width: 100%; }
    .reservationWrap .reservation .listArea .listBox,
    .reservationWrap .reservation .viewArea .viewBox { height: auto;  border-radius: 0; }

    .reservationWrap .reservation .listArea.m {  position: sticky; top: -10px; z-index: 2; }
    .reservationWrap .reservation .listArea.m .topArea { background-color: #f5f5f5; padding: 20px; box-sizing: border-box;}

    .reservationWrap .reservation .listArea.m .listBox  { padding: 0; }
    .reservationWrap .reservation .listArea.m .eventArea { margin-bottom: 15px; }
    .reservationWrap .reservation .listArea.m .searchArea { background-color: #fff; margin-bottom: 0;}

    .reservationWrap .reservation .listArea.m .listBtnWrap { padding: 0 20px; box-sizing: border-box;}

    .reservationWrap .reservation .listArea.m .listBtnArea {position: relative; gap: 0; padding:0; box-sizing: border-box;}
    .reservationWrap .reservation .listArea.m .listBtnArea:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: #e0e0e0;}
    .reservationWrap .reservation .listArea.m .listBtnArea .list { position: relative; width: calc(100%/3); height: 42px; text-align: center;  background-color: #fff; border-radius: 0; padding: 0px 0; border-bottom: 4px solid #e0e0e0; box-sizing: border-box;}
    .reservationWrap .reservation .listArea.m .listBtnArea .list:before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 50%; background-color: #e0e0e0; }
    .reservationWrap .reservation .listArea.m .listBtnArea .list .text { font-size: 18px; color: #606060 ;}

    .reservationWrap .reservation .listArea.m .listBtnArea .list:nth-child(3n)::before{ display: none;}
    .reservationWrap .reservation .listArea.m .listBtnArea .list.active { border-color: #dda478; z-index: 2;}
    .reservationWrap .reservation .listArea.m .listBtnArea .list.active .text { color: #dda478;}

    .reservationWrap .reservation .viewArea .viewBox { padding: 0 20px; }
    .reservationWrap .reservation .viewArea .viewBox .viewScrollArea { padding-right: 0; padding-bottom: 90px; }

    .reservationWrap .reservation .viewArea .reservationBtn {position: fixed; width: 100%; bottom: 0; left: 0; transform: translateX(0); border-radius: 0; padding: 10px 30px;}

    .reservationWrap .reservation .viewArea .viewBox .viewBoxBg {  display: none;}
    /*추가*/
    .reservation .viewArea .slidePopup { width: 100%; position: fixed; bottom: 50px; padding: 20px 20px 40px 20px; }
    .reservation .viewArea .slidePopup .popup .list .amountArea .won { font-size: 16px; }
    .reservation .viewArea .slidePopup .popup .list .amountArea .won .discount { font-size: 25px; }


}




@media (max-width: 900px) {
    /*
        중간 main article 상하 간격
    */
    .pullPageWrap { margin-bottom: 50px;}


    /* ******************** notice ******************** */
    .notice .noticeCenter a:before {margin: 0 10px;}
    .notice .logIn .sideBar {margin: 0 15px;}

    /* ******************** header hover시 subMenu ******************** */
    .subMenu .subDepth ul {margin-bottom: 15px; font-size: 2.2222vw;}

    /* ******************** page: index :: 역삼점 추천시술 (proposalSurgery) ******************** */
    /*
        *** 상단부 공통 레이아웃 메인 텍스트일 경우
    */
    .cl_txtCon.layoutTop {margin-bottom: 30px;}
    .cl_txtCon.layoutTop .main {font-size: 25px;}
    .cl_txtCon.layoutTop .sub {font-size: 15px;}

    /* ******************** subpage: search :: searchArea ******************** */
    /*
        *** main title
    */
    .search .cl_mainTit {font-size: 25px; }
    .search .cl_mainTit:after {margin-top: 10px;}
    /*
        이벤트 세부 조정
    */
    .search .gridWrapper .grid {padding: 20px 0 0 20px; margin: 0 -20px;}
    .search .gridWrapper .grid .gridCell {border-width: 0 20px 20px 0;}
    /*
        전후사진, 바노바기 아카데미 하단부 txt 공통
    */
    .search .cl_oneRowLayOut .sub {padding: 15px 0; font-size: 18px;}



    /* ******************** 지점연결 intro ******************** */
    .intro .centerDirect .centerList {flex-wrap: wrap; justify-content: flex-start; border-left: 0; border-bottom: 0;}
    .intro .centerDirect .centerList a {width: calc(100% / 3); border-left: 1px solid var(--colorless01); border-bottom: 1px solid var(--colorless01);}





}


@media (max-width: 768px) {

    /*
        ********************************* 대문페이지 ******************************
    */


    /*
         *** 헤더
    */
    .gatePageOutWrap {height: auto;}
    .gateHeader .logo img {width: 85%; }
    .headWrapper {height: 60px;}

    /*카카오링크*/
    .gateHeader .kakaoLinkWrap.on {top: 69px;}
    .gateHeader .kakaoLinkWrap .clickLink { width: 150px; display: flex; align-items: center; justify-content: center;  padding: 7px 0; cursor: pointer; }
    .gateHeader .kakaoLinkWrap .clickLink .imgArea { width: 24px; height: 22px; background: url(/app/layout/web/images/gate/kakaoIcon.png)no-repeat; background-size:24px 22px;}
    .gateHeader .kakaoLinkWrap .clickLink span { font-size: 14px; font-family:'Pretendard-Regular'; color: #ffffff; margin-left: 7px; }

    .gateHeader .kakaoLinkWrap > .clickLink.on {height:60px;}



    /*
        *** 메인비쥬얼
    */
    .subVisual , .subVisualBg {position: relative; width: 100%; height: 810px; background: url(/app/layout/web/images/gate/banner_m.jpg) 50% 50% no-repeat;
        background-size: cover; overflow: hidden; }

    /*
        *** 메인비주얼 텍스트
    */
    .subVisual .contentsWrap .mainText { display: none; }




    /*
        *** 지점바로가기 링크
    */
    .subVisual .gateLinkWrap { bottom: 200px; margin: 0; padding: 20px 0 0;}

    /*지점바로가기 텍스트*/
    .subVisual .gateLinkWrap .mainTitle { font-family:'Pretendard-Light'; font-size: 20px; color: #ffffff; text-align: center; margin-bottom: 20px;}
    .subVisual .gateLinkWrap .mainTitle .bold { font-family:'Pretendard-Bold'; }

    /*지점바로가기 list*/

    .subVisual .gateLink { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; padding: 0 20px; box-sizing: border-box;}
    .subVisual .gateLink li { width:calc(50% - 6px); margin: 3px 2px; padding: 13px 10px; cursor: pointer; box-sizing: border-box;}
    .subVisual .gateLink li a{ font-size: 16px; color: #fff; font-family:'Pretendard-Medium'; }
    .subVisual .gateLink li i {color: #d6d6d6;}
    .subVisual .gateLink li a img { width: 100%; max-width: 10px; }


    /*
       *** 가맹점 모집
   */
    .subVisual .bottomTxt {display: none; /*display: flex;*/ justify-content: space-between; align-items: center; width: 100%; height: 75px; padding: 0 20px; box-sizing: border-box; background: url("/app/layout/web/images/gate/bottomBg.png"); background-size: cover;}
    .subVisual .bottomTxt .left p {font-family:'Pretendard-Light'; color: #fff; font-size: 12px; }
    .subVisual .bottomTxt .left span {display: block; font-family:'Pretendard-Bold'; font-size: 17px; margin-bottom: 5px;}
    .subVisual .bottomTxt .right img {zoom: 70%;}


    /*
        ********************************* 대문페이지 끝 ******************************
    */







    /*
        *** 서브페이지 상하단 간격
    */
    .subContentTBGap {padding-top:30px !important; padding-bottom:50px;}

    /* ******************** header ******************** */
    .headerWrapper {height: 70px;}
    .headerWrapper header {border-bottom:1px solid #e0e0e0 !important;}
    header .headerInner .logo img {max-width: 57vw; width: auto;}
    header .headerInner .menuWrap {flex-direction: row-reverse;}

    header .showInlineBlockM {position: relative; height: inherit;}
    header .showInlineBlockM img {display: inline-block; width: 35px;}
    header .menuM img {width:35px;}
    header .cart {position: relative;}
    header .cart .cl_count {position: absolute; left: 0; bottom: 5px; display: inline-block; width: 26px; height: 20px; text-align: center; line-height: 20px; font-size: 12px;
        color: var(--colorless01); background-color: var(--beige-color01); border-radius: 10px;}

    /* 네트워크 리스트 hover */
    .netWorkListHover {width:46.66%; left: 20px;}
    /* ******************** mainVisual ******************** */
    #section {padding-top: 51px;}
    .mainVisualSwiper .swiper-slide {height: 0; padding-bottom: 118.666%; background-size: 100% auto; background-position: center;}

    .mainVisualSwiper .slide01 {background-image: url("/app/layout/web/images/m/m_slide04.jpg");}
    .mainVisualSwiper .slide02 {background-image: url("/app/layout/web/images/m/m_slide05.jpg");}
    .mainVisualSwiper .slide03 {background-image: url("/app/layout/web/images/m/m_slide06.jpg");}

    .mainVisualSwiper .slideInner {top: 72.266%;}
    .mainVisualSwiper .rgt .slideInnerTxtWrap {align-items: center;}
    .mainVisualSwiper .slideInnerTxtWrap .innerTxt {font-size: 30px; text-align: center;}

    .mainVisualSwiper .swiper-pagination {bottom: 30px;}
    .mainVisualSwiper .slideInnerTxtWrap .innerTxt img {margin: 0 auto; width: 190px;}
    .mainVisualSwiper .slide01.lft .slideInnerTxtWrap .innerTxt  {color: var(--colorless01);}
    .mainVisualSwiper .slide02.lft .slideInnerTxtWrap .innerTxt  {color: var(--colorless08);}
    .mainVisualSwiper .slide03.lft .slideInnerTxtWrap .innerTxt  {color: var(--colorless01);}
    .mainVisualSwiper .swiper-pagination .progress {top:50%; right:0; width:55px; margin-top:0;}
    .mainVisualSwiper .swiper-pagination-bullet-active {padding-right:60px;}
    .mainVisualSwiper .swiper-pagination .num {font-size: 13px;}

    /* ******************** page: index :: 역삼점 추천시술 (proposalSurgery) ******************** */
    .yeoksamSurgery .swiper-container {height: auto;}
    .yeoksamSurgery .swiper-slide {flex-direction: column; width: calc(100% - 30px); height: 100%; padding: 30px;
        justify-content: space-between; align-items: flex-start;}
    .yeoksamSurgery .pdItem {width: 100%;}
    .yeoksamSurgery .pdItem img {width: 100%;}
    .yeoksamSurgery .explan li {margin-bottom: 15px;}
    .yeoksamSurgery .explan .pdSub {font-size: 18px;}
    .yeoksamSurgery .explan .pdName {font-size: 23px;}
    .yeoksamSurgery .explan .viewBtn {padding: 7px; font-size: 14px; }

    /* ******************** page: index :: youtube (banoShorts) ******************** */
    .banoShorts {background: none 0 center no-repeat; background-position-y: 34px;}
    .banoShorts .cl_txtCon.layoutTop .main:before {background: url("/app/layout/web/images/common/icon_short.png") center/25px no-repeat}

    /* ******************** page: index :: 아카데미TV (academyTv) ******************** */
    .academyTv .videoContainer {flex-direction: column; align-items: center;}
    .academyTv .mainVideo {width: 100%; margin-right: 0; margin-bottom: 35px;}
    .academyTv .subVideo {width: calc(100% - 5vw); height: 348px;}

    .academyTv .subVideo .subVideoInner .videoWrap {width: 50%;}
    .academyTv .subVideo .subVideoInner .videoWrap img {width: 100%;}

    .academyTv ul {max-width: 50%;}
    .academyTv ul .mainTxt {font-size: 16px; margin-bottom: 7px; width: 100%;}
    .academyTv ul .subTxt {font-size: 15px;}

    /* ******************** page: index :: 바슐랭 가이드 In 역삼 (yeoksamEvent) ******************** */
    .cl_displayRow {flex-direction: column-reverse;}
    .cl_displayRow .description {display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 50px;}
    .yeoksamEvent .description .cl_banobagiEng,
    .yeoksamEvent .description .headline {display: none;}
    .yeoksamEvent .cl_txtCon div {margin-bottom: 15px;}
    .yeoksamEvent .cl_txtCon .main {font-size: 20px; text-align: center;}
    .yeoksamEvent .cl_txtCon .sub {font-size: 12px;}
    .yeoksamEvent .eventSwiper img {width: 100%;}
    .yeoksamEvent .paginationBox {width: 100px; left: 50%; transform: translateX(-50%); bottom: 22%;}
    .yeoksamEvent .paginationBox .last:after {width: 25px;}
    .yeoksamEvent .dateInfo {margin-bottom: 10px;}
    .yeoksamEvent .dateInfo .count {font-size: 12px;}
    .yeoksamEvent .dateInfo .period {font-size: 14px;}
    .yeoksamEvent .allTimeEvent {font-size:14px;}
    /*
        ***mobile 상단부
    */
    .yeoksamEvent .mVer {order: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .yeoksamEvent .mVer .headline {font-size: 23px; margin-bottom: 23px; color: var(--colorless05);}

    /* ******************** page: index :: 프로모션 (promotion) ******************** */
    .promotion .cl_banobagiEng {max-width:155px;}
    .promotion .cl_banobagiEng .hide {display: none;}
    .promotion .cl_banobagiEng .brand {display: flex;}
    .promotion .cl_displayRow {padding: 50px 0;}
    .promotion .cl_displayRow .description {display: flex; flex-direction: row; justify-content: space-between; margin-top: 0; margin-bottom: 20px; order: 1; width: 100%;}
    .promotion .viewBtn {font-size: 10px; padding: 6px;}
    .promotion .cl_displayRow .description .mVerDisplay {}
    .promotion .promotionWrapper {width: 100%;}

    .promotion .cl_txtCon .main {font-size: 20px; margin: 0;}

    .promotion .promotionSwiper .sub .spotName {padding: 2.5px; margin-right: 5px; font-size: 8px;}

    .promotion .promotionSwiper .sub > li:nth-child(1) {padding: 15px 10px 15px; margin-bottom: 10px; font-size: 15px;}
    .promotion .promotionSwiper .sub > li:nth-child(n+2):nth-child(-n+5) {padding: 0 10px; margin-bottom: 10px; font-size: 12px;}
    .promotion .promotionSwiper .sub .every {font-size: 13px;}
    .promotion .promotionSwiper .sub .progressZone .progressBg {margin-right: 7px;}
    .promotion .promotionSwiper .sub .progressZone span {font-size: 13px;}

    .promotion .swiper-button-prev,
    .promotion .swiper-button-next {display: none;}


    /* ******************** page: index :: 하단부맵영역 ******************** */
    /* 지도 */
    .map__wrap {display:flex; flex-direction: column; height:auto;}
    .map__wrap .map {height:auto;}
    .map__wrap .mapCell {height:300px;}
    .map__wrap .dh__inner {position:static; width:100%; padding: 25px 15px; box-sizing: border-box;}
    .map__wrap .map__info {padding-left: 50px;}
    .map__wrap .map__info .map__param01 {font-size: 1.2em;}
    .map__wrap .map__info .map__param01 span {font-size: 0.9em;}
    .map__wrap .map__info .map__param02.address::before {width: 25px;height: 30px;left: -35px;}
    .map__wrap .map__info .map__param02 {font-size: 1em;margin-bottom: 20px;}
    .map__wrap .map__info .map__param02 span {margin-top: 5px;}
    .map__wrap .map__info .map__param02.time::before {width: 25px;height: 25px;left: -35px;}
    .map__wrap .map__info .map__param03 {font-size: 1.6em;}
    .map__wrap .map__info .map__param03 a {color: #fff;}
    .map__wrap .map__info .map__param03::before {width: 20px;height: 21px;left: -32px;top: 5px;}
    .map__wrap .map__info .map__param02.map__address::before {left: -40px;width: 25px;height: 30px;}
    .map__wrap .map__info .map__param02.map__time::before {left: -40px;width: 25px;height: 25px;}
    footer .footerSub {margin-top: 35px;}
    footer .footerSub p {padding: 10px 15px; font-size:14px; letter-spacing:-0.5px ;}



    /* ******************** 하단부 빠른 상담신청 ******************** */

    .qCounselInner {display: none; position: relative; height: auto; width: 100%;  padding: 20px 0;}
    .qCounselInner.show {display: block;}
    #qCounselCon .contentWrap {max-width: 100%; width: auto;}

    .qCounselPost > div {font-size: 18px;}
    .qCounselPost > div:nth-child(1):before {  background: url(/app/layout/web/images/common/icon_petit.png) center/20px auto no-repeat;}

    .qCounselPost .iconScroll {top: -58%;}
    .qCounselPost {width: 50%;}

    #qCounselCon .formTop {justify-content: space-between;}
    #qCounselCon ul {justify-content: center; align-items: center; width: 100%; padding: 10px 0 0 10px; margin: -10px; box-sizing: border-box;}
    #qCounselCon .formTop .btn {width: 70px; font-size: 14px;}

    #qCounselCon .formBottom {flex-direction: column; align-items: flex-start;}
    #qCounselCon .formBottom .chkForm {margin-bottom: 10px;}
    #qCounselCon .formBottom .chkForm:last-child {margin-bottom: 0;}
    #qCounselCon .formBottom > .chkForm {font-size: 13px;}


    /* ******************** popUp ******************** */
    #popUpCon .popUpInner { top: 80px; padding: 0 15px;}

    #popUpCon .popUpInner .list {flex-wrap: wrap;  font-size: 14px;}
    #popUpCon .popUpInner .list .tabBtn {height: 40px; width: calc(100% / 3); border-bottom: 1px solid var(--colorless03); font-size: 14px;}
    #popUpCon .popUpInner .list .tabBtn.active {font-size: 14px;}
    #popUpCon .popBottom {font-size: 14px;  padding: 0 10px; height: 40px; line-height: 40px;}

    /* ******************** page: index :: 바노바기 연혁( petitHistory ) ******************** */
    .petitHistory,
    .petitHistory .historyBg {height: 300px;}

    .petitHistory .historyContainer {position: relative; display: inline-block;}
    .petitHistory .innerTxtWrap { position: absolute; width: 100%; height: 100%; border-right: 0;}
    .petitHistory .innerTxtWrap:before {content:""; position:absolute; top:0; left:25px; width:1px; height:100%; background-color:rgba(255,255,255,0.15);}
    .petitHistory .innerTxtWrap:after {content:""; position:absolute; top:0; right:25px; width:1px; height:100%; background-color:rgba(255,255,255,0.15);}

    .petitHistory .numWrap {margin-bottom: 24px;}
    .petitHistory .numWrap .num,
    .petitHistory .numWrap .num.surgery {font-size: 50px;}



    /* 숫자, 하단 연혁 숨김 */
    .petitHistory .numWrap .num {display: inline-block; -webkit-transform: translateY(-100%);}
    .petitHistory .subTxtWrap li {opacity: 0; font-size: 30px;}

    .petitHistory .subTxtWrap li {font-size: 18px;}
    .petitHistory .subTxtWrap .smailTxt {font-size: 14px; margin-bottom: 15px;}
    .petitHistory .subTxtWrap .mainHistory {font-size: 20px;}

    /* active시 활성화 */
    .petitHistory .numWrap .num.active {display: inline-block;-webkit-transform: translateY(0);}
    .petitHistory .subTxtWrap.active li  {display: flex; flex-direction: column; opacity: 1;}

    .petitHistory .subTxtWrap.active li {font-size: 18px;}
    .petitHistory .subTxtWrap.active .smailTxt {font-size: 14px; margin-bottom: 15px;}
    .petitHistory .subTxtWrap.active .mainHistory {font-size: 22px; font-family:NotoSerifKR-Light;}

    /* ******************** subpage: search :: searchArea ******************** */
    .search .cl_searchArea { height: auto; margin-bottom: 30px; background: var(--colorless02) none 85% center/400px auto no-repeat; }

    /*
        *** main title
    */
    .search .cl_mainTit {font-size: 20px; }
    .search .cl_mainTit:after {margin-top: 10px;}
    /*
        이벤트
    */
    .search .gridWrapper .grid {padding: 20px 0 0 20px; margin: 0 -15px;}
    .search .gridWrapper .grid .gridCell {width: calc(100% / 2); border-width: 0 15px 15px 0;}


    /*
        전후사진, 바노바기 아카데미 하단부 txt 공통
    */
    .search .cl_oneRowLayOut .sub {padding: 7px; font-size: 14px;}
    .search .cl_oneRowLayOut .sub li {
        max-height: 40px;
        display: -webkit-box;
        white-space: unset;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
    }

    /*
        바노바기TV
    */
    .search .youTubeArea.pullPageWrap {padding: 0 0 0 15px;}
    .search .youTubeArea .shortsWrap {padding: 30px 0; box-sizing: border-box;}
    .search .youTubeArea .shortsWrap span { font-size: 20px;}
    .search .youTubeArea .shortsWrap .shorts:before {content: ''; display: inline-block;
        background: url("/app/layout/web/images/common/icon_short.png") center/17px no-repeat;
        width: 22px; height: 20px; margin-right: 5px;}

    /* ******************** 지점연결 intro ******************** */
    .intro img {width: 100%;}
    .intro footer .footerTail .mid {padding: 30px 0 30px;}
    .intro .videoBg {background: none; height: auto;}
    .intro {height: 100%;}
    .intro .logo {max-width: 160px;}
    .intro .etcCon {width: 38%;}
    .intro .etcCon a {padding: 0 9px; font-size: 12px; justify-content: flex-end;}
    .intro .etcCon a:before {padding-left: 0;}
    .intro .etcCon .youtube {background: transparent url(/app/layout/web/images/common/intro_youtube.png) 15px center/28px auto no-repeat;}
    .intro .etcCon .kakao {background: transparent url(/app/layout/web/images/common/intro_kakao.png) 15px center/28px auto no-repeat;}
    .intro .etcCon .youtube:hover {background-color: var(--beige-color01); color: var(--colorless01);}
    .intro .etcCon .kakao:hover {background: #fad000 url('/app/layout/web/images/common/intro_hover_kakao.png') 15px center/28px auto no-repeat;}

    .intro .introContainer {height: 100%; padding-top: 15px; position: absolute;  top: 0; left: 0;}

    .intro .centerDirect {bottom: 170px;}
    .intro .centerDirect .centerList {height: 35px; border-bottom: 0;}
    .intro .centerDirect .centerList a {height: inherit; border-right: 0; font-size: 14px;}
    .intro .centerDirect .centerList a:last-child,
    .intro .centerDirect .centerList a:nth-child(3) {border-right: 1px solid var(--colorless01); box-sizing: border-box;}

    .intro .centerDirect .mainTxt {font-size: 18px; margin-bottom: 20px;}


    /* ******************** subpage: surgery > list.php ******************** */
    .equipmentList .cl_banobagiEng > div {margin-right: 0;}
    .equipmentList .cl_banobagiEng > div:nth-child(2) {display: none;}
    .equipmentList .cl_banobagiEng span {font-size: 15px;}
    .equipmentList .gridWrapper .grid {padding: 60px 0 0 15px; margin: 0 -15px;}
    .equipmentList .gridWrapper .grid .gridCell {width: calc(100% / 2); border-width: 0 15px 15px 0;}
    .equipmentList .list {}
    .equipmentList .list li {font-size: 14px; border-bottom: 2px solid var(--colorless03); box-sizing: border-box;}
    .equipmentList .list li.active:after {bottom: -2px; height: 2px;}

    .equipmentList .cl_surgeryArea .sub .price {display: flex; flex-wrap: wrap;}
    .equipmentList .cl_surgeryArea .sub .price > span {display: block; width: 100%; margin-bottom: 15px;}
    .equipmentList .cl_surgeryArea .sub .price a {display: block;}









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

    /*
        *** 이벤트 리스트
    */
    .eventListPage .listArea .grid .gridCell {
        box-sizing:border-box;
        width:calc(100% / 1);
        border:0 solid transparent;
        border-width:0 30px 30px 0;
    }

    .eventListPage .listArea .eventList .listContent {padding-top:15px; padding-bottom:15px;}
    .eventListPage .listArea .eventList .listTitle {font-size:17px; padding:10px; padding-top:0; margin-bottom:10px;}
    .eventListPage .listArea .eventList .listTitle .allBranchMark {font-size:14px; padding:3px 7px; margin-right:5px;}
    .eventListPage .listArea .eventList .listInfo {font-size:14px; padding:0 10px; margin-bottom:10px;}
    .eventListPage .listArea .eventList .date {font-size:12px; padding:0 10px; margin-bottom:15px;}
    .eventListPage .listArea .eventList .dDay {padding:0 10px;}
    .eventListPage .listArea .eventList .dDay .day {font-size:13px; margin-left:10px;}
    .eventListPage .listArea .eventList .dDay .period {font-size:13px;}


    /*이벤트 종료 설정*/
    .eventListPage .listArea .eventList.finish .imgCell:after {
        font-size: 15px;
    }


    /*신청팝업*/
    .eventDetailPopup .popupWin .titleBar {height:50px; font-size:18px;}
    .eventDetailPopup .popupWin .btnClosePopup {top:10px; right:10px; font-size:30px;}
    .eventDetailPopup .popupWin .btnApply {height:50px; font-size:18px;}



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

    .bnaPage .categoryTabArea {margin-bottom:20px;}
    .bnaPage .categoryTabArea .tab {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        width:33.333333333%;
        font-size: 14px;
        color: #666666;
        font-family: Pretendard_Regular;
        box-sizing: border-box;
        border-right: solid 1px #e0e0e0;
        cursor: pointer;
    }
    .bnaPage .categoryTabArea .tab:nth-of-type(-n+3) {border-top:solid 1px #e0e0e0;}
    .bnaPage .categoryTabArea .tab:nth-of-type(4) {border-top:0;}
    .bnaPage .categoryTabArea .tab:nth-of-type(5) {border-top:0;}
    .bnaPage .categoryTabArea .tab:nth-of-type(6) {border-top:0;}

    .bnaPage .bnaSearchArea {height:45px; margin-bottom:20px;}
    .bnaPage .bnaSearchArea .iconCell {width:50px; height:25px; margin-right:10px;}
    .bnaPage .bnaSearchArea .iconCell img {height:20px;}
    .bnaPage .bnaSearchArea .inputCell input {height:25px; font-size:15px;}
    .bnaPage .bnaSearchArea .inputCell input::placeholder {font-size:15px;}
    .bnaPage .bnaSearchArea .btnSearch {width:40px; height:25px; font-size:25px; text-align:left;}

    .bnaPage .listArea {padding-left:0; padding-right:0;}

    .bnaPage .bnaMainPhoto {margin-bottom:70px;}
    .bnaPage .bnaMainPhoto .photoWrap > div.photoCell {width:100%; height:100%;}
    .bnaPage .bnaMainPhoto .photoWrap .termText {width:100px; height:30px; font-size:14px;}
    .bnaPage .bnaMainPhoto .photoWrap .beforeCell .loginCover .innerWrap {display:flex; justify-content:center; align-items:center; flex-direction: column; width:100%; height:100%;}
    .bnaPage .bnaMainPhoto .photoWrap .beforeCell .loginCover p {margin-bottom:20px;}
    .bnaPage .bnaMainPhoto .photoWrap .beforeCell .loginCover p.line1 {font-size:12px;}
    .bnaPage .bnaMainPhoto .photoWrap .beforeCell .loginCover p.line2 {font-size:14px;}
    .bnaPage .bnaMainPhoto .photoWrap .arrowBtn {width:50px; height:50px; font-size:18px; margin-top:-25px;}
    .bnaPage .bnaMainPhoto .photoWrap .arrowBtn.btnPrev {transform:translateX(-15px);}
    .bnaPage .bnaMainPhoto .photoWrap .arrowBtn.btnNext {right:0; transform:translateX(15px);}
    .bnaPage .bnaMainPhoto .photoWrap .dirBtnCell {bottom:-90px;}
    .bnaPage .bnaMainPhoto .photoWrap .dirBtnCell > span {width:40px; height:40px; line-height:40px; font-size:14px;}
    .bnaPage .bnaMainPhoto .textCell {font-size:14px; padding:10px 0;}

    .bnaPage .btnBnaGoLogin {font-size:16px; padding:10px 55px;}

    .bnaPage .bnaThumbArea.gridWrapper {overflow:hidden; margin-bottom:60px;}
    .bnaPage .bnaThumbArea.gridWrapper .grid {display:flex; flex-wrap:wrap; padding:10px 0 0 10px; margin:-10px}
    .bnaPage .bnaThumbArea.gridWrapper .grid .gridCell {
        font-size:0;
        box-sizing:border-box;
        width:calc(100% / 1);
        border:0 solid transparent;
        border-width:0 10px 10px 0;
        cursor:pointer;
    }
    .bnaPage .bnaThumbArea.gridWrapper .grid .gridCell .beforeCell .loginCover {font-size:16px;}
    .bnaPage .bnaThumbArea.gridWrapper .grid .gridCell .textCell {font-size:14px;}



    /*
        ************************************ 바노바기 TV *******************************************
    */
    .mediaPage .sectionTitle {margin-bottom:20px;}
    .mediaPage .sectionTitle .iconCell {margin-right:7px;}
    .mediaPage .sectionTitle .iconCell .icon {height:20px;}
    .mediaPage .sectionTitle .titleText {font-size:20px;}

    .mediaPage .youtubeShortsArea .slideArea {margin:0 0;}
    .mediaPage .youtubeShortsArea .slideArea .swiper-slide img {border-radius:7px;}

    .mediaPage .divider {margin:30px auto;}

    .mediaPage .academyTVArea .gridWrapper {overflow:hidden;}
    .mediaPage .academyTVArea .grid {display:flex; flex-wrap:wrap; padding:10px 0 0 10px; margin:-10px}
    .mediaPage .academyTVArea .grid .gridCell {
        box-sizing:border-box;
        width:calc(100% / 1);
        border:0 solid transparent;
        border-width:0 10px 10px 0;
    }
    .mediaPage .academyTVArea .academyTVList .listText {
        font-size: 14px;
        padding: 10px 5px;
    }

    .mediaPage .btnViewMore {
        width: 220px;
        height: 40px;
        font-size: 16px;
        margin-top:30px;
    }
    .mediaPage .btnViewMore i {font-size:18px;}


    /*
        ************************************ 연구하는 바노바기 *******************************************
    */

    /*
        *** 리스트
    */
    .labPage .listArea .gridWrapper {overflow:hidden;}
    .labPage .listArea .grid {display:flex; flex-wrap:wrap; padding:10px 0 0 10px; margin:-10px}
    .labPage .listArea .grid .gridCell {
        box-sizing:border-box;
        width:calc(100% / 1);
        border:0 solid transparent;
        border-width:0 10px 10px 0;
    }

    .labPage .listArea .labList .listTitle {padding:10px 10px;}
    .labPage .listArea .labList .listTitle .title {font-size:16px;}
    .labPage .listArea .labList .listTitle .date {width:70px; font-size:12px;}
    .labPage .listArea .labList .detail {font-size:14px; padding:10px;}


    /*
        *** 상세보기 페이지
    */
    .labDetailPage .detailArea {padding:10px; padding-bottom:30px;}
    .labDetailPage .detailArea .titleCell {
        min-height: 50px;
        font-size: 18px;
    }
    .labDetailPage .detailArea .listInfoCell {flex-direction:column; align-items: flex-end; height:auto; font-size:12px; padding:10px;}
    .labDetailPage .detailArea .labContent {padding:0px;}
    .labDetailPage .detailArea .labContent .detailImgCell {margin-bottom:10px;}
    .labDetailPage .detailArea .labContent .detailTextCell {font-size:14px; margin-bottom:30px;}

    .labDetailPage .detailArea .logoCell img {width:200px;}



    /*
        ************************************ 전지점 소개 *******************************************
    */
    /*
        *** 지점소개 비주얼
    */
    .branchIntro .visualArea {
        height: 500px;
    }

    .branchIntro .visualArea .logoCell {width:50%; margin-bottom:20px;}
    .branchIntro .visualArea .lineTextCell {width:80%; margin-bottom:15px;}
    .branchIntro .visualArea .textCell {font-size:8vw; text-align:center; margin-bottom:50px;}


    /*
        *** 탭
    */
    .branchIntro .tabArea {top:-40px; margin-bottom:20px;}
    .branchIntro .tabArea .tab {height:40px; font-size:16px;}


    /*
        *** 탭 내용
    */
    .branchIntro .diagramArea {display:flex; flex-direction: column; justify-content: space-between; align-items: flex-start; margin-bottom:50px;}
    .branchIntro .diagramArea .diagram {display:flex; align-items: center; width:100%;}
    .branchIntro .diagramArea .diagram .circleWrap {width:50%; padding-bottom:50%; margin-bottom:25px; margin-right:20px;}
    .branchIntro .diagramArea .diagram .circle {
        font-size: 25px;
    }
    .branchIntro .diagramArea .diagram .circleText {font-size:16px; text-align:left;}
    .branchIntro .diagramArea .diagram2 .circleWrap {order:2; margin-left:20px; margin-right:0;}
    .branchIntro .diagramArea .diagram2 .circleText {text-align:right;}
    .branchIntro .diagramArea .plus {display:none;}

    .branchIntro .tabContentTitle {margin-bottom:30px;}
    .branchIntro .tabContentTitle .engText {font-size:14px;}
    .branchIntro .tabContentTitle .korText {font-size:30px;}

    .branchIntro .photoContentBox {display: flex; flex-direction: column; align-items: flex-start; margin-bottom:30px;}
    .branchIntro .photoContentBox .imgCell {width:100%; margin-right:0; margin-bottom:0; font-size:0;}
    .branchIntro .photoContentBox .textCell {width:100%; padding:10px; border:solid 1px #e0e0e0; box-sizing: border-box;}
    .branchIntro .photoContentBox .textCell .eng {font-size:16px; margin-bottom:10px;}
    .branchIntro .photoContentBox .textCell .mainText {font-size:28px; margin-bottom:20px;}
    .branchIntro .photoContentBox .textCell .detailText {font-size:16px;}

    .branchIntro .photoContentBox.type2 {flex-direction: column-reverse;}



    /*
        ************************************ 의료진 소개 *******************************************
    */
    .doctorIntroPage .doctorListArea .gridWrapper {overflow:hidden;}
    .doctorIntroPage .doctorListArea .grid {display:flex; flex-wrap:wrap; padding:30px 0 0 30px; margin:-30px}
    .doctorIntroPage .doctorListArea .grid .gridCell {
        box-sizing:border-box;
        width:calc(100% / 1);
        border:0 solid transparent;
        border-width:0 30px 30px 0;
    }

    .doctorIntroPage .doctorList .hBar {width:20px; height:2px; margin-top:20px; margin-bottom:15px;}
    .doctorIntroPage .doctorList .doctorContent .nameCell {font-size:18px; margin-bottom:10px;}
    .doctorIntroPage .doctorList .doctorContent .nameCell .position {font-size:14px; margin-left:5px;}
    .doctorIntroPage .doctorList .doctorContent .history {font-size:14px; line-height:2;}



    /*
        ************************************ 오시는길 *******************************************
    */
    .locationPage .contentArea .headText {font-size:18px; margin-bottom:20px;}
    .locationPage .contentArea .address {font-size:14px; margin-bottom:20px;}
    .locationPage .contentArea .subway {font-size:13px; margin-bottom:20px;}
    .locationPage .contentArea .parkingGuide {font-size:13px; margin-bottom:50px;}

    .locationPage .contentArea .buttonCell img {width:180px;}



    /*
        ************************************ 로그인팝업 *******************************************
    */
    .loginPopup .loginWin {width:95%; padding:40px 10px; padding-bottom:0;}
    .loginPopup .loginWin .btnClosePopup {position:absolute; top:auto; bottom:-40px; left:0; right:0; width:100%; height:40px; font-size:16px; background-color:rgba(48,48,48,0.9);}
    .loginPopup .loginWin .btnClosePopup i {display:none;}
    .loginPopup .loginWin .btnClosePopup:after {content:"닫기"; font-size:16px; color:#ffffff; font-family:Pretendard-Light;}

    .loginPopup .loginWin .logoCell {margin-bottom:15px;}
    .loginPopup .loginWin .logoCell img {width:200px;}
    .loginPopup .loginWin .infoMessage {font-size:14px; margin-bottom:25px;}

    .loginPopup .loginWin .formArea {flex-direction:column; margin-bottom:20px;}
    .loginPopup .loginWin .formArea .inputArea {width:100%; margin-bottom:10px;}
    .loginPopup .loginWin .formArea .inputArea .inputLine:first-child {margin-bottom:10px;}
    .loginPopup .loginWin .formArea .inputArea .inputLine span:first-child {width:40px; font-size:14px;}
    .loginPopup .loginWin .formArea .inputArea .inputLine input {font-size:15px; padding:0 5px;}
    .loginPopup .loginWin .formArea .btnDoLogin {width:100%; height:50px; font-size:16px; border-radius:0; margin-left:0;}

    .loginPopup .loginWin .snsButtonTitle {font-size:14px; color:#151515; font-family:Pretendard-Regular; text-align:center; margin-bottom:10px;}
    .loginPopup .loginWin .snsButtons {justify-content: center;}
    .loginPopup .loginWin .snsButtons > div {margin-left:5px; margin-right:5px;}
    .loginPopup .loginWin .snsButtons > div > img {width:50px;}

    .loginPopup .loginWin .divider {margin-top:20px; margin-bottom:0px;}

    .loginPopup .loginWin .suggestJoin {display:flex; justify-content: center; align-items: center;}
    .loginPopup .loginWin .suggestJoin .messageCell {display:none;}
    .loginPopup .loginWin .suggestJoin .btnGoJoin {display:flex; justify-content: center; align-items: center; width:100%; height:50px; font-size:16px; padding:0 15px; border:0;}
    .loginPopup .loginWin .suggestJoin .btnGoJoin i {display:none;}


    /*
        ************************************ 회원가입 - 가입동의 *******************************************
    */
    .joinTermsPage .joinStep {margin-bottom:30px;}
    .joinTermsPage .joinStep img {width:80%;}

    .joinTermsPage .agreeContentArea {padding:50px 0; border:0; background-color:#ffffff;}

    .joinTermsPage .agreeContentArea .joinMessage {font-size:14px; margin-bottom:20px;}

    .joinTermsPage .agreeContentArea .joinPolicy {width:100%; padding:20px; margin-bottom:20px; background-color:#f3f3f3;}
    .joinTermsPage .agreeContentArea .joinPolicy .listBox {margin-bottom:20px;}
    .joinTermsPage .agreeContentArea .joinPolicy .listBox .num {width:25px; height:25px; font-size:14px; margin-right:7px;}
    .joinTermsPage .agreeContentArea .joinPolicy .listBox .listContent .mainText {min-height:25px; line-height:25px; font-size:15px;}
    .joinTermsPage .agreeContentArea .joinPolicy .listBox .listContent .subText {font-size:13px; margin-top:5px;}

    .joinTermsPage .agreeContentArea .joinExcuseMsg {font-size:14px; margin-bottom:35px;}

    .joinTermsPage .agreeContentArea .agreeCheckArea {width:100%; margin-bottom:20px; padding:20px 0;}
    .joinTermsPage .agreeContentArea .agreeCheckArea .agreeText {font-size:17px;}
    .joinTermsPage .agreeContentArea .agreeCheckArea .agreeText .smallText {font-size:12px;}
    .joinTermsPage .agreeContentArea .agreeCheckArea .checkInput {margin-left:30px;}

    .joinTermsPage .agreeContentArea .policyBox {width:100%; padding:0;}
    .joinTermsPage .agreeContentArea .policyBox .policyTitle {font-size:16px; margin-bottom:10px;}
    .joinTermsPage .agreeContentArea .policyBox textarea {height:120px; font-size:14px; margin-bottom:10px; padding:5px;}
    .joinTermsPage .agreeContentArea .policyBox .agreeCheckCell {font-size:14px;}

    .joinTermsPage .agreeContentArea .divider {width:100%; margin:20px auto;}



    /*
        ************************************ 회원가입 - 가입폼 *******************************************
    */
    .joinFormPage .joinStep {margin-bottom:30px;}
    .joinFormPage .joinStep img {width:80%;}

    .joinFormPage .joinContentArea {border:0; padding:0; background-color:transparent;}
    .joinFormPage .joinContentArea .joinFormTable th {width:100px; height:55px; font-size:16px;}
    .joinFormPage .joinContentArea .joinFormTable td {height:55px; padding-right:10px; padding-left:10px;}
    .joinFormPage .joinContentArea .joinFormTable td .btnIdCheck {
        width: 80px;
        height: 35px;
        font-size: 12px;
        margin-left:10px;
    }
    .joinFormPage .joinContentArea .joinFormTable td input {font-size:14px;}



    /*
        ************************************ 회원가입 - 가입완료 *******************************************
    */
    .joinCompletePage .joinStep {margin-bottom:30px;}
    .joinCompletePage .joinStep img {width:80%;}

    .joinCompletePage .joinContentArea {border:0; padding:0; background-color:transparent;}
    .joinCompletePage .joinContentArea .completeMessage {font-size:20px; margin-bottom:30px;}
    .joinCompletePage .joinContentArea .completeMessage .strong {color:#e0a57a;}



    /*
        ************************************ 약관페이지 *******************************************
    */
    .termsPage .policyBox {font-size:14px; padding:15px;}


    /*
    ***시술선택 박스
     */
    .equipmentDetail .selBoxWrap .selBoxList {flex-direction: column; justify-content: space-between; border-bottom: 1px solid var(--colorless05);}
    .equipmentDetail .selBoxWrap .selBoxList label {font-size: 14px; }
    .equipmentDetail .selBoxWrap .selBoxList .priceWrap {text-align:right;}
    .equipmentDetail .selBoxWrap .selBoxList .priceWrap .discount {font-size: 16px;}



    /*
        ************************************ 예약확인 페이지 25.07.18 new *******************************************
    */


    .reservationWrap .reservation { padding: 20px 0 0; gap: 25px;}

    .reservationWrap .reservation .listArea.m .topArea { padding: 15px; }
    .reservationWrap .reservation .listArea.m .topArea .eventArea .icon { width: 15px;}

    .reservationWrap .reservation .listArea.m .listBtnWrap { padding: 0 15px; }

    .reservationWrap .reservation .listArea.m .listBtnArea:before {  height: 2px; }
    .reservationWrap .reservation .listArea.m .listBtnArea .list {  border-bottom: 2px solid #e0e0e0; }
    .reservationWrap .reservation .listArea.m .listBtnArea .list:before { height: 55%;  }
    .reservationWrap .reservation .listArea.m .listBtnArea .list .text { font-size: 14px;}
    .reservationWrap .reservation .listArea.m .listBtnArea .list .text .icon { width: 15px; }

    /*  .reservationWrap   .reservation .viewArea .viewBox { padding: 0 15px; }
        .reservationWrap .reservation .viewArea .viewBox .viewScrollArea { padding-right: 0; padding-bottom: 90px; }*/

    .reservationWrap .reservation .viewArea .titleArea{ margin-bottom: 20px;}
    .reservationWrap .reservation .viewArea .titleArea .eventTit { /*font-size: 13px;*/ font-size: 12px; margin-bottom: 10px;}
    .reservationWrap .reservation .viewArea .titleArea .mainTit {/* font-size: 23px;*/  font-size: 26px; margin-bottom: 10px; }
    .reservationWrap .reservation .viewArea .titleArea .eventTime { gap:8px; font-size: 14px; margin-bottom: 10px;}
    .reservationWrap .reservation .viewArea .titleArea .eventTime .text {  padding-right: 8px;}
    .reservationWrap .reservation .viewArea .titleArea .eventTime .text:before { height: 60%; right: 0;}
    .reservationWrap .reservation .viewArea .titleArea .infoArea {  gap: 5px;}
    .reservationWrap .reservation .viewArea .titleArea .infoArea .infoText { gap:3px ; padding: 5px 10px;font-size:12px; }

    .reservationWrap .reservation .viewArea .viewBox { padding: 0 5px;}
    .reservationWrap .reservation .viewArea .bnaWrap { margin-bottom: 20px; padding: 2px;}
    .reservationWrap .reservation .viewArea .bnaWrap .bnaSwiper { margin-bottom: 0px;}
    .reservationWrap .reservation .viewArea .bnaWrap .bnaSwiper .imgArea .beforeImg img { border-top-left-radius: 5px;}
    .reservationWrap .reservation .viewArea .bnaWrap .bnaSwiper .imgArea .afterImg img { border-top-right-radius: 5px;}

    .reservationWrap .reservation .viewArea .bnaWrap .bnaSwiper .imgArea .bnaImg .text { font-size: 12px; padding: 5px; }
    .reservationWrap .reservation .viewArea .bnaWrap .bnaTextArea { /*font-size: 12px;*/  font-size: 8px;}

    .reservationWrap .reservation .viewArea .viewListWrap .sutTitle { font-size: 18px; margin-bottom: 15px; }
    .reservationWrap .reservation .viewArea .viewListWrap .sutTitle:before { top: 5px; left: 7px; width: 15px; background-size: 15px 12px; }

    .reservationWrap .reservation .viewArea .viewBox .viewScrollArea { padding-bottom: 50px;}
    .reservationWrap .reservation .viewArea .viewListWrap .viewListArea{ margin-bottom: 20px; }
    .reservationWrap .reservation .viewArea .viewListWrap .viewList { flex-direction: column; gap: 15px;}
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox {  width: 100%; padding: 15px;  }

    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox:before { top: -13px; left: 10px; padding: 5px 10px; border-radius: 4px;font-size: 11px; }
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox.new:before { content: 'NEW'; background-color: #a36633;}
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox.best:before { content: 'BEST'; background-color: #dda478; }
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox.hit:before { content: 'HIT'; background-color: #ac2f08;}

    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox .listTit { font-size: 20px; margin-bottom: 5px;}
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox .subTit { font-size: 14px; }
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox .amountArea { gap: 7px;}
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox .amountArea .amount { font-size: 14px; margin-bottom: 2px;}
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox .amountArea .won { font-size: 16px; }
    .reservationWrap .reservation .viewArea .viewListWrap .viewList .viewListBox .amountArea .discount { font-size: 20px; }

    .reservationWrap .reservation .viewArea .reservationBtn .textArea,
    .reservationWrap .reservation .viewArea .reservationBtn .btnArea { padding: 10px 0;}
    .reservationWrap .reservation .viewArea .reservationBtn {border-radius: 0;padding: 10px 30px; font-size: 16px;}
    .reservationWrap .reservation .viewArea .reservationBtn .textArea { gap: 10px;}
    .reservationWrap .reservation .viewArea .reservationBtn .textArea > span { gap: 3px;}
    .reservationWrap .reservation .viewArea .reservationBtn .textArea .number { width: 20px;height: 20px;font-size: 18px;}
    .reservationWrap .reservation .viewArea .reservationBtn .btnArea { gap: 10px;}
    .reservationWrap .reservation .viewArea .reservationBtn a { gap: 10px;}
    .reservationWrap .reservation .viewArea .reservationBtn .btnArea img { width: 7px;}
    .reservationWrap .reservation .viewArea .reservationBtn .btnArea:before { left: -30px}

    /*추가*/

    .reservation .viewArea .reservationBtn .rightArea { gap: 50px; }
    /*.reservation .viewArea .reservationBtn .drawer.contained { width: 16px; }*/
    .reservation .viewArea .reservationBtn .drawer > img { width: 20px; }

    .reservation .viewArea .slidePopup { bottom: 50px; padding: 15px 15px 20px 15px; }
    .reservation .viewArea .slidePopup .popup { max-height: 250px; padding-right: 10px; }
    .reservation .viewArea .slidePopup .popup .list { padding: 15px; }
    .reservation .viewArea .slidePopup .popup .list .listTit { font-size: 16px; }
    .reservation .viewArea .slidePopup .popup .list .rightArea {gap: 10px;}
    .reservation .viewArea .slidePopup .popup .list .amountArea { gap: 10px; }
    .reservation .viewArea .slidePopup .popup .list .amountArea .amount { font-size: 12px; }
    .reservation .viewArea .slidePopup .popup .list .amountArea .won { font-size: 12px; }
    .reservation .viewArea .slidePopup .popup .list .amountArea .won .discount { font-size: 21px; }



    .headerWrapper.reservationHeader .headerInner { align-items: center; justify-content: center;}
    .reservationHeader .mobileHeaderWrap { width: 100%; display: flex; align-items: center; justify-content: space-between; }
    .reservationHeader .mobileHeaderWrap .pageTitle { font-size: 18px; color: #303030; font-family:'Pretendard-Medium';}
    .reservationHeader .mobileHeaderWrap .pageBackBtn,
    .reservationHeader .mobileHeaderWrap .homeBtn { cursor: pointer;}
    .reservationHeader .mobileHeaderWrap .pageBackBtn { width: 20px;}
    .reservationHeader .mobileHeaderWrap .homeBtn { width: 17px;}
    .reservationHeader .mobileHeaderWrap  img { width: 100%;}









    /*
        ********************************************* 2025.10 공통 하단부분 ********************************************
    */
    .commonBottom .mainContentWrap {flex-direction:column; align-items: center; height:auto; padding:0;}
    .commonBottom:before {width:100%; height:100%;}

    .commonBottom .mainContentWrap .bulletContent {gap:10px;}
    .commonBottom .mainContentWrap .bulletContent .bullet img {margin-top:4px;}
    .commonBottom .mainContentWrap .bulletContent .contentBody .title {font-size:16px; margin-bottom:10px;}
    .commonBottom .mainContentWrap .bulletContent .contentBody .address {font-size:16px; margin-bottom:10px;}
    .commonBottom .mainContentWrap .bulletContent .contentBody .subway {font-size:14px; letter-spacing: -1px; margin-bottom:30px;}

    .commonBottom .mainContentWrap .locationArea {justify-content:center; flex-direction: column; gap:0; width:100%; padding:60px 15px;}
    .commonBottom .mainContentWrap .locationArea .mapCell {width:100%; height:200px;}
    .commonBottom .mainContentWrap .locationArea .bulletContent .contentBody .cl_arrowButton {display:none;}
    .commonBottom .mainContentWrap .locationArea > .cl_arrowButton {display:inline-flex; margin:0 auto; margin-top:30px;}


    .commonBottom .mainContentWrap .contactInfoArea {display:flex; flex-direction: column; align-items:flex-end; width:100%; height:100%; padding:60px 15px;}
    .commonBottom .mainContentWrap .contactInfoArea .hGridWrap {width:330px; gap:20px; margin-bottom:30px;}
    .commonBottom .mainContentWrap .contactInfoArea .telCell a {font-size:34px; line-height:0.8;}
    .commonBottom .mainContentWrap .contactInfoArea .treatTime table {wdith:auto; font-size:16px; margin-bottom:15px;}
    .commonBottom .mainContentWrap .contactInfoArea .treatTime table th {width:130px;}
    .commonBottom .mainContentWrap .contactInfoArea .treatTime .treatInfo {font-size:14px; line-height:1.4;}



    /*
        *** 2025.10 퀵메뉴 리뉴얼
    */
    #quickMenu {bottom:65px; right:15px;}

    #quickMenu .dotButtonWrap .btnDot {gap:3px; width:40px; height:40px;}
    #quickMenu .dotButtonWrap .btnDot span {width:6px; height:6px;}

    #quickMenu .dotButtonWrap:after {bottom:35px; right:-9px; width:150px; height:78px; background-size:contain;}
    #quickMenu .dotButtonWrap .btnGoTop {width:40px; height:40px; margin-top:5px;}

    #quickMenu .extendedButtonWrap {top:-164px;}
    #quickMenu .extendedButtonWrap .subButton {
        top:20px;
        gap: 8px;
        width: 110px;
        height: 35px;
        font-size: 14px;
        margin-bottom:5px;
    }
    #quickMenu .extendedButtonWrap .subButton .icon {width:15px; height:15px;}
    #quickMenu .extendedButtonWrap .subButton.event {letter-spacing: 2px;}
    #quickMenu .extendedButtonWrap .circleButton {
        width: 40px;
        height: 40px;
    }
    #quickMenu .extendedButtonWrap .btnClose {margin-top:4px; margin-bottom:5px;}
    #quickMenu .extendedButtonWrap .btnClose i {font-size:12px;}

}