header .defult {position: relative;}
header .defult .logout {position: absolute; display: flex; align-items: center; top: 50%; transform: translateY(-50%); right: 20px; color: #888; gap: 5px;}
header .defult .logout span {width: 20px;}
header .defult .logout p {color: #888;}

.my-profile {padding: 40px 20px;}
.my-profile .my-profile-img {display: flex; align-items: center; gap: 15px;}
.my-profile .my-profile-img p {font-size: 20px; font-weight: 700;}
.my-profile .my-profile-img p b {font-weight: 700;}
.my-profile .edit-btn button {width: 100%; text-align: center; padding: 15px 0; background-color: #F3F3F3; font-family: inherit; font-size: 15px; color: #555; margin-top: 30px; font-weight: 500;}

.my-tab ul {display: flex;}
.my-tab ul li {width: 50%; border-bottom: 1px solid #eee; text-align: center; font-size: 16px; padding: 15px 0; font-weight: 500;}
.my-tab ul li.on {font-weight: 700; color: #2046A1; border-bottom: 2px solid #2046A1;}
.my-consult {display: none;}
.my-consult.active {display: block;}
.my-consult > div {padding: 20px; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 15px;}
.my-consult > div .my-consult-img {width: 118px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;}
.my-consult > div .my-consult-info h3 {font-size: 18px; color: #222; font-weight: 600; margin-bottom: 5px;}
.my-consult > div .my-consult-info span {font-size: 13px; color: #888;}
.my-consult > div .my-consult-info p {font-size: 15px; color: #555; font-weight: 500;}

.my-consult .my-btn-wrap {padding: 0 20px; border: none; text-align: center; margin-top: 20px; margin-bottom: 20px;} 
.my-consult .my-btn-wrap button {padding: 15px 0; border-radius: 5px; border: 1px solid #ddd; color: #555; width: 100%;}
.my-consult > div.sec-con {display: none;}

.profile-edit-wrap {padding: 0 20px;}
.profile-edit-wrap .img-edit {display: flex; flex-direction: column; align-items: center; padding: 30px 0;}
.profile-edit-wrap .img-edit > div:first-child {width: 84px;}
.profile-edit-wrap .img-edit > div.img-edit-btn {width: 100%;}
.profile-edit-wrap .img-edit > div.img-edit-btn button {padding: 12px 0; background-color: #f5f5f5; width: 100%; border-radius: 10px;}

.profile-edit-wrap .que-wrap {gap: 5px; margin-bottom: 20px;}
.profile-edit-wrap .que-wrap.read input {background-color: #f1f1f1;}
.profile-edit-wrap .que-wrap .my-phone {display: flex; gap: 10px;}
.profile-edit-wrap .que-wrap .my-phone select {width: 120px;}

.done-modal {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, .5); z-index: 101; display: none;}
.profile-modal {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, .5); z-index: 101; display: none;}
.finish {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, .5); z-index: 101; display: none;}
.modal-box { border-radius: 15px; position: absolute; top: 50%; left: 50%; width: 75vw; transform: translate(-50%,-50%); overflow: hidden;}
.modal-box .modal-con {padding: 25px 20px; text-align: center; font-size: 17px; font-weight: 700; background-color: white;}
.modal-box .modal-btn {width: 100%; background-color: #2046A1; color: white; text-align: center; padding: 15px 0; font-size: 15px;}

/* --- 상담상세 --- */

.consult-detail {padding: 20px;}
.consult-detail h3 {font-size: 18px; font-weight: 700; margin-bottom: 10px;}
.consult-detail .detail > div {display: flex; align-items: center; padding: 5px 0;}
.consult-detail .detail > div span {font-weight: 500;}
.consult-detail .detail p {font-size: 15px; color: #888; width: 100px;}
.consult-detail .detail div.last {flex-direction: column; align-items: flex-start; gap: 10px;}
.consult-detail .detail div.last > div {position: relative; padding: 15px 0; border-radius: 15px; background-color: #f5f5f5; width: 100%; display: flex; justify-content: space-around; text-align: center;}
.consult-detail .detail div.last > p {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.consult-detail .detail div.last > p span {padding: 5px 10px; border-radius: 20px; background-color: #F6FAFF; color: #2046A1; font-size: 14px; font-weight: 500;}

.consult-detail .detail div.last > div span {position: relative; display: block; border-radius: 50%; z-index: 10;}
.consult-detail .detail div.last > div span.process-done {position: relative; width: 30px; height: 30px;  border: 6px solid #2046A1; background-color: #f5f5f5;}
.consult-detail .detail div.last > div span.process-done::after {content: ""; position: absolute; display: block; width: 24vw; height: 5px; background-color: #2046A1; z-index: 5; top: 50%; transform: translateY(-50%); left: 100%;}

.consult-detail .detail div.last > div span.on {width: 45px; height: 45px; background-color: #2046A1; position: relative;}
.consult-detail .detail div.last > div span.on::after {content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url(../images/process.png) no-repeat; width: 21px; height: 18px; background-size: contain; z-index: 10;}
.consult-detail .detail div.last > div span.on::before {content: ""; display: block; position: absolute; width: 24vw; height: 5px; background-color: #ddd; top: 50%; transform: translateY(-50%); left: 100%;}
.consult-detail .detail div.last > div span.third {width: 30px; height: 30px; background-color: #ddd;}
.consult-detail .detail div.last > div .circle {height: 85px; display: flex; align-items: center; justify-content: center; }
.consult-detail .detail div.last > div p {font-size: 16px; font-weight: 400; width: 100%;}
.consult-detail .detail div.last > div p.process {color: #2046A1; font-weight: 600;}
.consult-detail .detail div.last > div > div {width: calc(100% / 3);}

.consult-detail .detail div.last > div .circle.mid span {position: relative;}
.consult-detail .detail div.last > div .circle.mid span::after {content: ""; display: block; width: 24vw; height: 5px; background-color: #ddd; position: absolute; top: 50%; transform: translateY(-50%); left: 100%;}

.my-consult-detail {display: flex; align-items: center; gap: 15px;}
.my-consult-detail .my-consult-img {width: 80px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;}
.my-consult-detail .my-consult-txt p {font-size: 17px; font-weight: 600; margin-bottom: 5px;}
.my-consult-detail .my-consult-txt span {font-size: 15px; color: #888;}
.consult-detail .memo p {font-size: 16px; font-weight: 600; margin: 15px 0 8px 0;}
.consult-detail .memo span {padding: 15px; border-radius: 15px; background-color: #f5f5f5; height: 100px;}
.detail-con02 {flex-direction: column; gap: 8px; align-items: flex-start !important; margin-top: 10px;}
.detail-con02 span {padding: 10px; border: 1px solid #f1f1f1; border-radius: 5px; width: 100%; background-color: #f5f5f5;}

.my-pay {display: none;}
.my-pay.active {display: block;}
.my-pay > div {padding: 20px; display: flex; align-items: center; border-bottom: 1px solid #eee; gap: 15px;}
.my-pay-img {width: 118px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;}
.my-pay > div h3 {font-size: 18px; color: #222; font-weight: 600; margin-bottom: 5px;}
.my-pay > div span {font-size: 13px; color: #888;}
.my-pay > div p {font-size: 15px; color: #555; font-weight: 500;}

.pay .my-pay-info div {display: flex; width: 100%; align-items: center; justify-content: space-between; margin-bottom: 10px;}
.pay .my-pay-info div p {font-size: 14px; color: #888;}
.pay .my-pay-info div span {font-size:15px; color: #555;}

.done-modal .modal-btn02 {display: flex;}
.done-modal .modal-btn02 div {width: 50%;padding: 15px 0; text-align: center;}
.done-modal .modal-btn02 div:first-child {background-color: #eee; color: #555;}
.done-modal .modal-btn02 div:last-child {background-color: #2046A1; color: white;}

/* --- 상담상세 연관상담 --- */

.modal-con h4 {font-size: 15px; font-weight: 700; padding: 5px 0; border-bottom: 1px solid #ddd;}
.done-modal .modal-box .modal-con.connect-modal {text-align: left;}
.modal-con .connect-con p {font-size: 13px; color: #888;}
.modal-con .connect-con span {font-size: 16px; font-weight: 600;}
.modal-con .connect-con > div {padding: 10px 0;}
.modal-con .connect-con > div:last-child {padding-bottom: 0;}


/* --- 프로필이미지변경 --- */

.img-edit {position: relative;}
.img-edit-slide {position: absolute; padding: 10px 0px; border-radius: 20px; background-color: white; box-shadow: 2px 2px 10px rgba(191 191 191 / 50%); top: 85%; display: none;}
.img-edit-slide  ul {text-align: center;}
.img-edit-slide  ul li {padding: 10px 20px; border-bottom: 1px solid #eee;}
.img-edit-slide  ul li:last-child {border-bottom: none;}