/*-- mypage-------*/
.fixwidth-content{background-color:white;box-sizing:border-box;height:auto;}
#mypage{padding-top:10px;background-color:white;height:100%;}
#mypage.has-menu{padding-top:85px;}
#mypage.no-menu{padding-top:30px;}
.page-title{margin-bottom:10px;}
.page-title.mypage{font-weight:900px;}

 /*-------------------- common page ---------------------------*/
.my-profile-dv{margin-top:0px;margin-bottom: 20px;background-color:var(--back-color);}
.block-dv{width:100%;display:flex; flex-direction: column; justify-content: space-between;
align-content: center;padding:30px 10px 20px 10px; background-color: white;margin-bottom:5px;}
.page-dv{width:100%;display: flex;flex-direction: row;justify-content: space-evenly;flex-wrap:wrap;background-color:var(--back-color);}
#regDate.page-dv{padding-bottom:70px;margin-top:0px;background-color:white;}

.mypost-page.page-dv, .mycmmtpost-page.page-dv{background-color:white;}
.mypost-page.page-dv{margin-top:10px;}
.state-bt:hover{cursor:auto;}
.my-profile-dv .right-i{color:var(--black-color);}
/* ----------------------------------------------- */
#host-reg{padding-top:50px;padding-bottom:60px;background-color:transparent;height:auto;}
#temp-house .modify-dv button{width:48%;}
#holding-house .modify-dv .bs-bt.disabled{color:var(--grey-dark-color);font-weight:500;}
 /*---------------- pageProfile page --------------------------------------------*/
.login-signin, .info-modify, .category, .house-reg-info, .reserv-info, .bt-link-list{background-color:white;margin-bottom:5px}

.login-signin{padding:10px 10px;box-shadow: 0px 2px 2px 0px var(--grey-line-color);}
.login-signin .reg-house-bt{width:100%;display:flex; justify-content: space-between; align-content: center; flex-direction: row;}
/* .login-signin .reg-house-bt button{width:48%;}
 */
 .info-text .stitle{font-weight:700;}
.category span{	color:var(--black-color);font-size:var(--font-medium);}
.category.user, .category.host{padding:10px 20px;margin-top:10px;box-shadow: 0px 2px 2px 0px var(--grey-line-color);}

.bt-serv-center{background-color: white;}
.info-text{margin-bottom: 10px;}
.reserv-state{padding-left: 10px;color:var(--brand-color);}
.state-bt{height:30px; width:5rem;margin-bottom:5px;font-size: var(--font-medium);}
.reserv-text .detail{display:block;color:black;text-align:right;padding-top:10px;}
.members{padding-bottom: 5px;}

.host .state-bt{width:7rem;}

.reserv-info, .house-reg-info{background-color: var(--white-color);padding: 20px 10px 10px 10px;border:1px solid var(--grey-line-color);}
.reserv-infobox{position:relative;width:100%;display:flex; justify-content: space-between; align-content: center; 
background-color:var(--white-color);flex-direction: column;font-size: var(--font-medium);}
.reserv-infobox .htitle{width:100%;padding:0;color:black;font-weight:500;
display: -webkit-box;align-items: center;-webkit-line-clamp: 2;-webkit-box-orient: vertical;  overflow: hidden;}
.reserv-infobox .reserv-text h3{padding:0;display:inline-block;line-height:1.5rem;font-size:var(--font-medium);color:var(--sg-blue-color);background-color:var(--sel-back-color);font-weight:600;}
.reserv-infobox .small-msg{color:black;margin-bottom: 10px;font-size:var(--font-medium);}
.reserv-infobox .reserv-text{width:100%;padding-top:10px;color:black;padding-left:10px;}
.reserv-infobox .reserv-text .msg{text-align:center;}
.reserv-infobox .reserv-text div{margin-bottom:3px;}
.reserv-infobox .shortcut{position: absolute;top:25px;right:0px;font-weight:500;font-size:20px;}
.reserv-infobox:hover{cursor:pointer;}
.reserv-infobox .reg-title-dv{display:flex; width:100%;justify-content: space-between; 
    flex-direction: row;align-content: center;background-color:transparent;
    border-bottom: 1px solid var(--grey-line-color);margin-bottom:10px;font-weight:700;}
.reserv-infobox .reg-title-dv div{width:40%;}
/*.reserv-info .reserv-infobox span{color:var(--grey-dark-color);}
-.shortcut.host{top:15px;}*/
.guide-msg{color:var(--black-color);margin-bottom:10px;}
.category .category-item{padding:5px; font-weight: 700;}
.bt-link-list{background-color: var(--back-color);}
.bt-link-list .block-dv{padding:10px; background-color: white;}
.bt-link-list .my-menu{padding:10px 0 10px 0;}
/*------------ write / look Review page------------*/
#write-review.page-dv, #look-review.page-dv{margin-top:0;padding-bottom:100px;background-color: white;}
.house-info .info-dv{display:flex; width:100%;justify-content: space-between; 
    flex-direction: row;align-content: center;background-color:transparent; margin-bottom:10px;}
.info-dv img{width:28%;}
.info-dv .info-text{padding-left:10px;width:70%;display:flex;justify-content: space-between; 
    flex-direction: column;align-content: center;}
.info-dv .htitle {font-size: var(--font-medium);padding:0;
display: -webkit-box;align-items: center;-webkit-line-clamp: 3;-webkit-box-orient: vertical;  overflow: hidden;}
.info-dv .price{font-size:var(--font-small);color:var(--black-color);padding-top:10px;}
#write-review .review{font-size:var(--font-medium);color:black;padding:10px 5px;border:1px solid var(--grey-line-color);border-radius:5px;}
div[class^="modify-dv"], div[class^="write-dv"]{width:100%;display:flex;justify-content:space-evenly;margin-top:10px;}
div[class^="write-dv"] .bs-bt{width:40%; border:none;border:1px solid var(--brand-color);
height:35px; background-color:var(--white-color);color:var(--brand-color);font-weight:700;}
div[class^="write-dv"] .delete{margin-right:20px;border:1px solid var(--grey-dark-color);background-color:var(--back-color);color:black;font-weight:400;}
#host-reg div[class^="modify-dv"] .bs-bt{width:32%; border:none;border:1px solid var(--grey-dark-color);
height:35px; background-color:var(--back-color);color:black;font-weight:500;text-align:center;}
#host-reg div[class^="modify-dv"].room .bs-bt{width:24%; border:none;border:1px solid var(--grey-dark-color);font-size:12px;
height:35px; background-color:var(--back-color);color:black;font-weight:500;text-align:center;}
#host-reg div[class^="modify-dv"] .bs-bt{width:50%; border:none;border:1px solid var(--grey-dark-color);font-size:14px;
height:35px; background-color:var(--back-color);color:black;font-weight:500;text-align:center;}

/*------------ sp notice page------------*/
div[id^="sp-notice"].notice-dv{margin-top:10px;}
div[id^="sp-notice"] .block-dv{box-shadow:none; border-bottom: 1px solid var(--grey-line-color);padding:10px 0px; margin:0; }
div[id^="sp-notice"] .nDate{width:100%;display:flex; justify-content: end; align-content: center;}
div[id^="sp-notice"] .nTitle{width:100%;display:flex;flex-direction: row;justify-content: space-between;align-content: center;font-weight:700;font-size:var(--font-medium);}
div[id^="sp-notice"] .nTitle div{width:95%;padding-top:8px;}
div[id^="sp-notice"] .nTitle span{width:5%;padding-bottom:15px;display:inline-block;font-weight:700;font-size:20px}
div[id^="sp-notice"] div[class^="nContent"]{margin-top:10px;color:black;background-color: var(--back-color);padding:10px;}
div[id^="sp-notice"] .block-dv:hover{cursor:pointer;}
div[id^="sp-notice"] .moreView-dv{margin-top:20px;}

/*------------ pick area page---------------------------*/
#pick-area #modal-win-pick-area{width:100%;height:100%;top:150px;padding:0 10px;}
.setArea-dv, .selectArea-dv{width:100%;display:flex; flex-direction: row;justify-content: space-between; align-content: center;padding:0;margin-top:10px;}
.selectArea-dv div{width:40%;height:40px;border:none;}
.selectArea-dv .selarea-dv{width:100%;border:1px solid var(--grey-dark-color);height:35px;padding:7px 10px;
border-radius:20px;text-align: center;background-color: var(--back-color);}
.selectArea-dv select{width:100%;outline:none;border:none;background-color: transparent;text-align: center;}

.setArea-dv button{width:40%;text-align: center;border:1px solid var(--grey-dark-color);
color:black;font-weight:500;background-color: var(--back-color);}

#pick-area .set-area .stitle{margin-bottom:20px;}
#pick-area .set-area .add-area-dv{width:100%;text-align: center;padding-top:10px;}
#pick-area .set-area .add-area{width:8rem;height:35px;margin:10px;background-color: var(--white-color);color:var(--brand-color);font-weight:700;border:1px solid var(--brand-color);}
#pick-area .set-area .added-area{color:var(--sg-purple-color);font-weight:700;}
#pick-area .set-area p{text-align: center;font-size:var(--font-small);margin-top:10px;font-weight:400;
    background-color:transparent; color:var(--grey-dark-color);}

#pick-area .set-area .picked-area-dv{flex-wrap:wrap; width:100%; padding:20px 10px;display:flex; flex-direction: row;justify-content: center; align-content: center;}
#pick-area .set-area .picked-area-dv span{color:var(--black-color);}
#pick-area .set-area .added-area{margin:5px 10px;background-color:var(--brand-low-color);color:var(--black-color);}

/*------------ set notice page---------------------------*/
#set-notice{background-color:var(--back-color);margin-bottom:10px}
#set-notice .setNotice-dv{width:100%;line-height:34px;display:flex; flex-direction: row; justify-content: space-between; align-content: center;
				}
#set-notice .no-title{width:20%;height:100%;display:inline-block; vertical-align:middle;font-weight:700;margin:0 10px;
color:var(--sg-blue-color);}
#set-notice .setNotice-dv .on-off-bt{width:50%;display:flex; flex-direction: row; justify-content: end; align-content: center;}
#set-notice .keyword-block{padding-bottom:20px;}
#set-notice .personCnt-dv{padding-top:20px;}
#set-notice .rbt-list{flex-wrap:wrap;}
#set-notice .rbt-item.clicked{background-color:var(--sub-color);outline:none;}
#set-notice .rbt-item{outline:1px solid var(--grey-dark-color);}

/*------------ edit myinfo page---------------------------*/
#edit-myInfo{background-color:var(--back-color);margin-bottom:10px;font-size:var(--font-bt-size);}
#edit-myInfo .block-dv{width:100%;display:flex; flex-direction: column; justify-content: space-between; 
align-content: center;padding:20px 10px; margin:10px 0px; background-color: white; }
#edit-myInfo .myInfo-dv .email-edit-dv{width:100%;text-align: center;}
#edit-myInfo .myInfo-dv .userNm{display:inline-block;text-align: center;width:100%;}
#edit-myInfo .myInfo-dv{padding:0px 0px 20px 0px;}
#edit-myInfo .myInfo-dv i:hover{cursor:pointer}
#edit-myInfo .myInfo-dv i{color:var(--sg-blue-color);}

#edit-myInfo .line-dv{width:100%;display:flex;justify-content: start; flex-direction: row; align-content: center;
padding:10px 0;background-color:transparent;}
#edit-myInfo span{display:inline-block;}
#edit-myInfo .stitle{width:25%;color:var(--black-color);font-size:var(--font-medium);}
#edit-myInfo .born-year-sp{width:40%;}
#edit-myInfo .value{font-weight:700;}
#edit-myInfo .bankinfo{width:100%; margin:10px 0; color:black;}
#edit-myInfo .first-dv{display:flex;flex-direction: row; align-content: center;justify-content: space-between; width:78%;}
#edit-myInfo .born-year-dv{display:flex;flex-direction: row; align-content: center;justify-content: space-between; width:100%;}
#edit-myInfo .born-year-dv .modify{width:30%;text-align:right;padding-top:15px;}

#edit-myInfo .resign-line{justify-content: space-between;}
#edit-myInfo .resign-link{font-size:var(--font-large);font-weight:500;}
#edit-myInfo .modify{font-size:var(--font-medium);color:var(--sg-blue-color);}
#edit-myInfo .modify:hover, #edit-myInfo .resign-link{cursor:pointer}


.win-modify{position:fixed;width:360px;height:100%;top:0px;margin:auto;background-color: white;z-index:10;text-align:center;}
.win-modify .modal-title-modify-dv{width:100%;display: flex;flex-direction: row;justify-content: space-between;margin-left:40px;}
.win-modify .form-field{margin:20px 0;width:100%;text-align:left;}
.win-modify .form-field label{text-align:left;}
.win-modify .form-field span{display:inline-block;}
/*------------ serviceCenter page---------------------------*/

.Q-icon{color:var(--brand-color);font-weight:900;font-size:16px;}
.service-center{color:var(--black-color);width:100%;height:45px;margin-top:10px;margin-bottom:10px;background-color:white;}
.service-content, .center-info{margin-top:20px;} 
.fa-q{background-color:transparent;color:var(--brand-color);}   
.center-time{display: flex;margin-top: 10px;color:var(--brand-color);}
.contact{margin-bottom: 10px;}
div[class^="answer-"] {padding:20px 10px;border-bottom:1px solid var(--grey-line-color);line-height:2em;color:black;}
div[class^="answer-"] strong{color:var(--sg-blue-color);}
.refund-info{margin:30px 10px;text-align:center;}
.refund-dv{text-align:left;margin-left:20px;}

.bs-sel-dv{
   padding:10px 10px 20px 10px;margin:20px 0px 0px 0px; 
    font-size:var(--font-medium);font-weight:400;
    color:var(--black-color);background-color:transparent;
    position:relative;text-align: left;}
.bs-sel-dv select{height:35px;width:50%;margin-top:10px}
.bs-sel-dv select:focus{border:0;outline:1px solid var(--brand-color); box-shadow: 2px 2px 3px 2px var(--brand-shadow-color);}

/*------------ my-houseList.html(찜한집, 최근본집, 예약한 집) page---------------------------*/
#reserv-house .reservationStatus{color:var(--brand-color);border:1px solid var(--brand-color);}

/*------------ temp-house.html (임시 저장한 집) page---------------------------*/
#temp-house{padding-bottom:60px;}