@charset "UTF-8";

:root {
    /* ******************** 공통 컬러 ******************** */
    /* 베이지 -> 연베이지 */
    --beige-color01 : #dda478;
    --beige-color02 : #e4b793;
    --beige-color03 : #ebcbb0;
    --beige-color04 : #f3dfcf;
    --beige-color05 : #faf4f0;
    /* 흰 -> 검 */
    --colorless01 : #ffffff;
    --colorless02 : #f5f5f5;
    --colorless03 : #e0e0e0;
    --colorless04 : #cccccc;
    --colorless05 : #aaaaaa;
    --colorless06 : #909090;
    --colorless07 : #606060;
    --colorless08 : #303030;
    --colorless09 : #151515;

}

/* ******************** 이미지 영역 100% 지정  ******************** */
.cl_imgCon img {width: 100%}

/* ******************** class에 고정으로 font 색상 지정시  ******************** */
.mainColor {color: #dda478;}

/* ******************** 공통적용 상단부 바노바기클리닉 영문 ******************** */
.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(--colorless01);}
.cl_banobagiEng > div {display: flex; margin-right: 5px; box-sizing: border-box; font-family:"NotoSerifKR-Regular";}
.cl_banobagiEng > div:last-child {margin-right: 0;}
.cl_banobagiEng > div span { font-family:"NotoSerifKR-Regular";}



/* ******************** page: index ******************** */
/*
    *** 상단부 공통 레이아웃 메인 텍스트일 경우
*/
.cl_txtCon.layoutTop {text-align: center; margin-bottom: 60px;}
.cl_txtCon.layoutTop .main {margin-top: 100px;  font-size: 40px; color: var(--colorless09); font-family:'Pretendard-Bold';}
.cl_txtCon.layoutTop .sub {font-size: 20px; color: var(--colorless06); font-family:'Pretendard-Light';}


/* ******************** subpage: search ******************** */
/* ********************
 공통적용 class 사용
 클래스명:: .cl_eventDdaylayout
 적용 page:: search > list.php (이벤트 영역)
 ******************** */

.cl_eventDdaylayout img {display: block; width: 100%;}
.cl_eventDdaylayout .sub {border: 1px solid var(--colorless03); box-sizing: border-box}
.cl_eventDdaylayout .eventWrap .m_spotName {display: none;}
.cl_eventDdaylayout .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;}

.cl_eventDdaylayout .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;}
.cl_eventDdaylayout .sub > li:nth-child(n+2):nth-child(-n+5) {padding: 0 20px; margin-bottom: 20px; box-sizing: border-box;}
.cl_eventDdaylayout .sub > li:nth-child(2) {font-family:'Pretendard-Light'; color: var(--colorless07);}
.cl_eventDdaylayout .sub > li:nth-child(3) {font-family:'Pretendard-Light'; color: var(--colorless05);}
.cl_eventDdaylayout .sub .every {text-align: right; color: var(--beige-color01);}
.cl_eventDdaylayout .sub .progressZone { display: flex;  align-items: center; justify-content: space-between;}
.cl_eventDdaylayout .sub .progressZone .progressBg {position: relative; width: 100%; height: 3px; margin-right: 15px; background: var(--colorless03);}

.cl_eventDdaylayout .sub .progressZone .progressBg .graph01 {position: absolute; left: 0; width: 50%; height: 3px; background: var(--beige-color01)};
.cl_eventDdaylayout .sub .dateCount {display: flex; color: var(--beige-color01); white-space: nowrap;}
.cl_eventDdaylayout .sub .progressZone span {color: var(--beige-color01); white-space: nowrap; font-family:'Pretendard-Medium';}

/* ********************
클래스 명: cl_searchArea
적용 페이지: index 검색창. search > list.php 검색창
******************** */
.cl_searchArea {width: 100%; height: 310px; margin-bottom: 60px; background: var(--beige-color01) url("/app/layout/web/images/pc/searchBgImg_wh.png?v=2") 85% center/397px auto no-repeat;)}
.cl_searchArea .searchInner {display: flex; flex-direction: column; justify-content: center; height: inherit; }

.cl_searchArea .searchInner p {font-size: 30px; color: var(--colorless01); text-align: center;
    font-family:'NotoSerifKR-Regular'; margin-bottom : 30px;}
.cl_searchArea .searchInner p span {font-family:'NotoSerifKR-Bold';}

.cl_searchArea .searchContent {max-width: 743px; width: 100%; margin: 0 auto;}
.cl_searchArea .searchBox {position: relative; width: 100%; height: 60px; padding: 10px; display: flex; align-items: center;
    background: var(--colorless01); border-radius: 5px; overflow: hidden; box-sizing: border-box; -webkit-box-shadow: 4px 3px 9px -3px #e8e8e8; box-shadow: 4px 3px 9px -3px #e8e8e8;}
.cl_searchArea .searchBox > div {cursor: pointer;}
.cl_searchArea .searchBox > div:after {content: ''; display: inline; position: absolute; width: 1px; height: 30px; background-color: var(--colorless03);
    margin: 0 10px; box-sizing: border-box;}
.cl_searchArea .searchBox > div > .searchIcon {display: inline-block; padding: 0 10px; box-sizing: border-box;}
.cl_searchArea .searchBox input[type="text"] {width: 100%; height: inherit; padding-left: 25px; font-size: 18px;}
.cl_searchArea .searchBox input::placeholder {color:#a1a1a1; font-size: 18px;}
.cl_searchArea .hasTagsPakage {display: flex; justify-content: space-evenly; align-items: center; margin-top: 30px; color: var(--colorless01);}
.cl_searchArea .hasTagsPakage a {color:#fff;}

/* ********************
클래스 명: cl_noticeArea
적용 페이지: surgery > list, surgery > view, 회원가입 상단부 텍스트
******************** */
.cl_noticeArea {margin: 60px 0;}
.cl_noticeArea .cl_banobagiEng {margin-bottom: 15px;}
.cl_noticeArea .cl_banobagiEng span {color: var(--colorless05);}
.cl_noticeArea .mainTitList {text-align: center; font-size: 39px; font-family:'Pretendard-Medium'; color: var(--colorless08);}
.cl_noticeArea .mainTitList .main {}
.cl_noticeArea .mainTitList .main > span {color: var(--beige-color01); font-family:'Pretendard-Medium';}
.cl_noticeArea .mainTitList .sub {font-size: 18px; font-family:'Pretendard-Light'; color: var(--colorless06);}

/* ********************
클래스 명: cl_surgeryArea
적용 페이지: surgery > list, search > list
******************** */
.cl_surgeryArea .gridCell .gridInner {display:flex; flex-direction:column; height:100%; border: 1px solid var(--colorless03); box-sizing: border-box;}
.cl_surgeryArea .equipBg {overflow: hidden; position: relative; background: #f7f7f7;}
.cl_surgeryArea .equipBg img {display:block; width: 100%;}
.cl_surgeryArea .sub {display:flex; flex-direction: column; flex:1; padding: 30px; box-sizing: border-box;}
.cl_surgeryArea .sub li {margin-bottom: 25px;}
.cl_surgeryArea .sub > a {flex:1;}
.cl_surgeryArea .sub li:last-child {margin: 0;}
.cl_surgeryArea .sub .equipName {font-size: 25px; font-family:'Pretendard-Medium'; color: var(--colorless09);}
.cl_surgeryArea .sub .equipSub {font-family:'Pretendard-Light'; color: var(--colorless06); margin-bottom:25px !important;}

.cl_surgeryArea .sub .price {display: flex; align-items: center; justify-content: space-between;}
.cl_surgeryArea .sub .price .num {color: var(--colorless09); font-size: 25px; font-family:'Pretendard-SemiBold';}
.cl_surgeryArea .sub .price > span {color: var(--colorless06);}
.cl_surgeryArea .sub .price a {color: var(--colorless06); font-size: 14px;}

/*
    *** hot & NEW 라벨
*/
.cl_gradientBox {position: absolute; bottom: 12px; right: 12px; width: 45px; height: 45px; display: inline-block;  color: var(--colorless01);}
.cl_gradientBox span {display: flex; width: inherit; height: inherit; align-items: center;
    justify-content: center; font-family:'Pretendard-Bold'; font-size: 14px;}
.cl_gradientBox .hot {background: linear-gradient( to right, #fa6a4a, #f6c35f);}
.cl_gradientBox .new {background: linear-gradient( to right, #ff578b, #fe7f68);}

/*
    *** 시그니처 라벨
*/
.cl_signature {position: absolute; top:12px; left: 12px; width: 120px; height: 25px; display: flex; justify-content: center; align-items: center; background-color: #d49e73; color: var(--colorless01);
    font-family:'NotoSerifKR-Bold'; font-size: 12px; border-radius: 12px; box-sizing: border-box;}







/*
    **************************************** 공통요소 *******************************************
*/

/*
    *** 메인 섹션 타이틀
*/
.cl_bnbgMainSectionTitle {display:flex; flex-direction: column; gap:15px; align-items: flex-start; margin-bottom:55px; line-height:1;}
.cl_bnbgMainSectionTitle .decoText {font-size:20px; color:#dda478; font-family:Pretendard-Light;}
.cl_bnbgMainSectionTitle .title {font-size:60px; color:#151515; font-family:TheSeasonsR;}
.cl_bnbgMainSectionTitle .desc {font-size:20px; color:#909090; font-family:Pretendard-Light; line-height:1.2;}

.cl_bnbgMainSectionTitle.alignCenter {align-items: center;}
.cl_bnbgMainSectionTitle.alignCenter .title {text-align:center;}
.cl_bnbgMainSectionTitle.alignCenter .decoText {text-align:center;}
.cl_bnbgMainSectionTitle.alignCenter .desc {text-align:center;}



/*
    *** 메인 화살표 버튼
*/
.cl_arrowButton {
    display:flex;
    align-items: center;
    height: 45px;
    font-size: 20px;
    color: #ffffff !important;
    font-family: Pretendard-Light;
    white-space: nowrap;
    border-radius: 5px;
    border:solid 1px #ce9568;
    padding: 0 30px;
    box-sizing: border-box;
    background-color:#dda478;
}
.cl_arrowButton:after {content:""; width:8px; height:16px; margin-left:25px; background-image:url("/app/layout/web/images/main/icon_buttonArrow.png"); background-size:100% 100%;}
.cl_arrowButton .medium {font-family:Pretendard-Medium;}





/*
    *** 서브페이지 타이틀
*/
.cl_subPageTitle {text-align:center; margin-bottom:60px;}
.cl_subPageTitle .engTitle {font-size:15px; color:var(--colorless05); font-family:NotoSerifKR-Light; margin-bottom:10px; letter-spacing: 5px;}
.cl_subPageTitle .korTitle {font-size:39px; color:var(--colorless08); font-family:Pretendard-Medium; margin-bottom:15px;}
.cl_subPageTitle .korTitle .strong {color:var(--beige-color01);}
.cl_subPageTitle .desc {font-size:18px; color:var(--colorless06); font-family:Pretendard-Light;}


/*
    *** 페이지네이션
*/
.cl_pagination {display:flex; justify-content: center; align-items: center; margin-top:60px;}
.cl_pagination .paginationButton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    font-size: 16px;
    color: var(--colorless07);
    font-family: Pretendard-Light;
    margin-left: 5px;
    margin-right: 5px;
    border:solid 1px transparent;
    cursor:pointer;
}

.cl_pagination .paginationButton:hover {border:solid 1px #e0e0e0;}
.cl_pagination .paginationButton.on {font-family:Pretendard-Medium; color:#ffffff; background-color:var(--beige-color01); pointer-events: none;}



/*
    *** 슬라이드 화살표 버튼
*/
.cl_slideArrow {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);}
.cl_slideArrow.next {right:0; transform:translateX(50%);}
.cl_slideArrow.prev {transform:translateX(-50%);}



/*
    *** 회원가입쪽 공통버튼
*/
.cl_memberButton {
    display:block;
    width: 176px;
    padding: 12px 0 13px;
    font-size: 18px;
    font-family:NotoSansR;
    border: 1px solid #333;
    background-color: transparent;
    color: #333;
    text-align: center;
    border-radius: 26px 26px 26px 26px;
    margin:0 auto;
    margin-top: 30px;
    transition: all 0.5s;
    text-decoration: none;
    cursor: pointer;
}
.cl_memberButton:hover {color:#ffffff; background-color:#333333;}





/*
    ************************************ 예약확인 페이지 25.07.18 new 서브타이틀 *******************************************
*/
.cl_reservationTit { position: relative; font-size: 20px; color: #303030; font-family:'Pretendard-Medium'; margin-bottom: 30px; padding-left: 40px; box-sizing: border-box; }
.cl_reservationTit:before { content: ''; position: absolute; top: 50%; left: 30px; transform: translateY(-50%); width: 3px; height: 3px; background-color: #dda478; border-radius: 100%;}

/*
    ************************************ 아이콘 있는 텍스트 - 윤초운 작업 *******************************************
*/
.cl_iconText { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 30px; }
.cl_iconText .icon { display: inline-flex; font-size: 0; }
.cl_iconText .text { color: #303030; font-size: 18px; font-family:'Pretendard-Medium'; }
.cl_iconText .text .colorText { color: #dda478; }

/*
    ************************************ 공통팝업 딤드 - 윤초운 작업 *******************************************
*/
.cl_popupWrap { width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: none; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.3); z-index: 541; }
.cl_popupWrap .popup { position: relative; display: flex; flex-direction: column; align-items: center; background-color: #fff; padding: 30px; box-sizing: border-box; border-radius: 10px; box-sizing: border-box; }
.cl_popupWrap .popup .mainTit { font-size: 35px; color: #303030; font-family:'Pretendard-Medium'; margin-top: 30px; }
.cl_popupWrap .popup .subTit { font-size: 16px; color: #909090; font-family:'Pretendard-Light'; margin-top: 20px; }
.cl_popupWrap .popup .btnClose { position: absolute; top: 30px; right: 30px; cursor: pointer; }
/*스크롤*/
.cl_popupWrap .popup .scrollBox {box-sizing: border-box;  width: 420px; height: 360px; margin-top: 30px; border: 1px solid #dda478; box-sizing: border-box; border-radius: 10px; padding: 30px; }
.cl_popupWrap .popup .scrollBox .scrollArea {  height: 252px; overflow-y: auto; padding-right: 30px; box-sizing: border-box; }
.cl_popupWrap .popup .scrollBox .scrollArea::-webkit-scrollbar { width: 4px; /* 스크롤바 너비 */ }
.cl_popupWrap .popup .scrollBox .scrollArea::-webkit-scrollbar-track { background: #f5f5f5; /* 트랙 색상 (배경) */ }
.cl_popupWrap .popup .scrollBox .scrollArea::-webkit-scrollbar-thumb { background-color: #e5e5e5; /* 손잡이 색상 */ border-radius: 6px; }
.cl_popupWrap .popup .scrollBox .scrollArea { margin-top: 30px; }
.cl_popupWrap .popup .scrollBox .mainText { font-size: 20px; color: #dda478; font-family:'Pretendard-Medium'; }
.cl_popupWrap .popup .scrollBox .textList .list { display: flex; margin-bottom: 20px; font-size: 18px; font-family:'Pretendard-Regular'; }
.cl_popupWrap .popup .scrollBox .textList .list:nth-last-child(1) { margin-bottom: 0; }
.cl_popupWrap .popup .scrollBox .textList .list .title { width: 110px; color: #909090; }
.cl_popupWrap .popup .scrollBox .textList .list .text { flex: 1; color: #303030; }
.cl_popupWrap .popup .scrollBox .textList .list .text .small { font-size: 14px; color: #909090; font-family:'Pretendard-Light'; }
.cl_popupWrap .popup .subTxt { font-size: 14px; color: #aaaaaa; text-align: center; font-family:'Pretendard-Light'; margin-top: 30px; }
.cl_popupWrap .popup .btnConfirm { width: 140px; height: 45px; display: flex; align-items: center; justify-content: center;
    font-size:20px; font-family:'Pretendard-Medium'; color: #ffffff; cursor: pointer; border-radius: 5px; background-color: #dda478; margin-top: 30px; }

/* ******************** media 진입 ******************** */
@media (max-width: 1480px) {

    /*
        ************************************ 예약확인 페이지 25.07.18 new 서브타이틀 *******************************************
    */
    .cl_reservationTit { font-size: 18px;  margin-bottom: 20px; padding-left: 20px;  }
    .cl_reservationTit:before { top: 50%; left: 10px;}

    /*
        ************************************ 아이콘 있는 텍스트 - 윤초운 작업 *******************************************
    */
    .cl_iconText .text { font-size: 16px; }



}



@media (max-width:1024px){
    /*
        *** 회원가입쪽 공통버튼
    */
    .cl_memberButton {
        width: 176px;
        padding: 12px 0 13px;
        font-size: 18px;
        margin-top: 30px;
    }
    /*
    ************************************ 예약확인 페이지 25.07.18 new 서브타이틀 *******************************************
*/
    .cl_reservationTit { display: none;}

    /*
        ************************************ 공통팝업 딤드 - 윤초운 작업 *******************************************
    */
    .cl_popupWrap .popup .mainTit { font-size: 30px; margin-top: 20px; }
    .cl_popupWrap .popup .subTit { font-size: 14px; margin-top: 20px; }
    .cl_popupWrap .popup .scrollBox { height: 350px; margin-top: 20px; padding: 25px 20px; }
    .cl_popupWrap .popup .scrollBox .scrollArea { height: 250px;}
    .cl_popupWrap .popup .scrollBox .mainText { font-size: 18px; }
    .cl_popupWrap .popup .scrollBox .textList .list { font-size: 15px; }
    .cl_popupWrap .popup .scrollBox .textList .list .text .small { font-size: 13px; }
    .cl_popupWrap .popup .subTxt { font-size: 13px; margin-top: 25px; }
    .cl_popupWrap .popup .btnConfirm { font-size: 18px; margin-top: 25px; }
}




@media (max-width: 900px) {
    /* ******************** page: index ******************** */
    /*
        *** 상단부 공통 레이아웃 메인 텍스트일 경우
    */
    .cl_txtCon.layoutTop {margin-bottom: 30px;}
    .cl_txtCon.layoutTop .main {margin-top: 50px; font-size: 25px;}
    .cl_txtCon.layoutTop .sub {font-size: 15px;}


    /* ******************** subpage: search ******************** */
    .cl_eventDdaylayout .eventWrap {position: relative;}
    .cl_eventDdaylayout .eventWrap .m_spotName {z-index: 2; position: absolute; top: 10px; left: 10px; width: auto;
        display: inline-flex; justify-content: center; padding: 5px; border-radius: 14px; font-size: 13px;
        background-color: var(--beige-color01); color: var(--colorless01); box-sizing: border-box;}


    .cl_eventDdaylayout .sub .spotName {display: none;}

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

    /* ********************
    클래스 명: cl_noticeArea
    적용 페이지: surgery > list, surgery > view, 회원가입 상단부 텍스트
    ******************** */
    .cl_noticeArea {margin: 40px 0;}


    /* ********************
    클래스 명: cl_surgeryArea
    적용 페이지: surgery > list, search > list
    ******************** */
    /*
        *** 시그니처 라벨
    */
    .cl_signature {width: 100px; height: 25px;}


}


@media (max-width: 768px) {

    /* ********************
    클래스 명: cl_searchArea
    적용 페이지: index 검색창. search > list.php 검색창
    ******************** */
    .cl_searchArea {height: auto; background: var(--beige-color01) none 85% center/400px auto no-repeat;)}
    .cl_searchArea .searchInner {align-items: center; padding-top: 40px; padding-bottom: 30px;}
    .cl_searchArea .cl_banobagiEng {margin-bottom: 15px;}
    .cl_searchArea .cl_banobagiEng > div {font-family: 'NotoSansL';}
    .cl_searchArea .searchBox {height: 40px; border-radius: 40px;}
    .cl_searchArea .searchBox > div:after {height: 20px;}
    .cl_searchArea .searchBox > div > .searchIcon {padding: 0; width: 20px; height: 20px;}

    .cl_searchArea .searchBox input[type="text"] {background-color: #fff;}
    .cl_searchArea .searchBox input::placeholder {font-size: 12px;}
    .cl_searchArea .hasTagsPakage {font-size: 12px;}
    /* ********************
    클래스 명: cl_surgeryArea
    적용 페이지: surgery > list, search > list
    ******************** */
    .cl_surgeryArea .sub {padding: 15px;}
    .cl_surgeryArea .sub li {margin-bottom: 15px;}
    .cl_surgeryArea .sub .equipName {font-size: 15px;}
    .cl_surgeryArea .sub .equipSub {font-size: 10px; margin-bottom:15px !important;}
    .cl_surgeryArea .sub .price {align-items: center;}
    .cl_surgeryArea .sub .price .num { font-size: 16px;}
    .cl_surgeryArea .sub .price a {font-size: 10px; white-space: nowrap;}

    /* ********************
    클래스 명: cl_noticeArea
    적용 페이지: surgery > list, surgery > view, 회원가입 상단부 텍스트
    ******************** */
    .cl_noticeArea {margin: 40px 0 30px;}
    .cl_noticeArea .cl_banobagiEng {margin-bottom: 15px;}
    .cl_noticeArea .cl_banobagiEng span {font-size: 10px; color: var(--colorless05);}
    .cl_noticeArea .mainTitList {text-align: center; font-size: 20px; font-family:'Pretendard-Medium'; color: var(--colorless08);}
    .cl_noticeArea .mainTitList .main {}
    .cl_noticeArea .mainTitList .main > span {color: var(--beige-color01); font-family:'Pretendard-Medium';}
    .cl_noticeArea .mainTitList .sub {font-size: 9px; font-family:'Pretendard-Light'; color: var(--colorless06);}



    /* ********************
    클래스 명: cl_surgeryArea
    적용 페이지: surgery > list, search > list
    ******************** */
    /*
        *** hot & NEW 라벨
    */
    .cl_gradientBox {bottom: 6px; right: 6px; width: 30px; height: 30px;}
    .cl_gradientBox span {font-size: 10px;}
    /*
        *** 시그니처 라벨
    */
    .cl_signature {top: 6px; left: 6px; width: 75px; height: 15px; font-size: 10px; }


    /*
        *** 서브페이지 타이틀
    */
    .cl_subPageTitle {margin-bottom:40px;}
    .cl_subPageTitle .engTitle {font-size:12px; margin-bottom:6px; letter-spacing: 3px;}
    .cl_subPageTitle .korTitle {font-size:24px; margin-bottom:10px;}
    .cl_subPageTitle .desc {font-size:14px;}


    /*
        *** 슬라이드 화살표 버튼
    */
    .cl_slideArrow {width:50px; height:50px; font-size:18px; margin-top:-25px;}
    .cl_slideArrow.next {right:0; transform:translateX(15px);}
    .cl_slideArrow.prev {transform:translateX(-15px);}


    /*
        *** 페이지네이션
    */
    .cl_pagination {margin-top:40px;}
    .cl_pagination .paginationButton {
        width: 25px;
        height: 25px;
        font-size: 14px;
        margin-left: 3px;
        margin-right: 3px;
    }


    /*
        *** 회원가입쪽 공통버튼
    */
    .cl_memberButton {
        width: 140px;
        padding: 8px 0 9px;
        font-size: 16px;
        margin-top: 30px;
    }


    /*
        ************************************ 아이콘 있는 텍스트 - 윤초운 작업 *******************************************
    */
    .cl_iconText { gap: 5px; margin-bottom: 15px; }
    .cl_iconText .text { font-size: 14px;}
    .cl_iconText .icon { width: 12px; }
    .cl_iconText .icon img { width: 100%; }

    /*
        ************************************ 공통팝업 딤드 - 윤초운 작업 *******************************************
    */
    .cl_popupWrap .popup { padding: 25px 15px; }
    .cl_popupWrap .popup .logo { width: 100px;}
    .cl_popupWrap .popup .logo img { width: 100%;}
    .cl_popupWrap .popup .mainTit { font-size: 25px; margin-top: 15px; }
    .cl_popupWrap .popup .subTit { font-size: 12px; margin-top: 15px; }
    .cl_popupWrap .popup .scrollBox { width: 310px; height: 270px; margin-top: 15px; padding: 20px 15px; }
    .cl_popupWrap .popup .scrollBox .scrollArea { height: 190px; padding-right: 15px; margin-top: 20px; }
    .cl_popupWrap .popup .scrollBox .mainText { font-size: 16px; }
    .cl_popupWrap .popup .scrollBox .textList .list { font-size: 13px; margin-bottom: 15px; }
    .cl_popupWrap .popup .scrollBox .textList .list .title { width: 90px; }
    .cl_popupWrap .popup .scrollBox .textList .list .text .small { font-size: 11px; }
    .cl_popupWrap .popup .subTxt { font-size: 11px; margin-top: 20px; }
    .cl_popupWrap .popup .btnConfirm { width: 110px; height: 35px; font-size: 16px; margin-top: 20px; }

}