@charset "UTF-8";


#subContent.mypage,
#subContent.members {
    text-align: left;
}
#subContent.mypage .asideBg,
#subContent.members .asideBg,
#subContent.mypage .tab-menu-wrap,
#subContent.members .tab-menu-wrap,
#subContent.mypage .all-depth3-data,
#subContent.members .all-depth3-data {
    display: none;
}
#subContent.mypage aside,
#subContent.members aside {
    z-index: 2;
    position: relative;
}

.boxW900 {
    max-width: 900px;
    margin: var(--space-60) auto 0 auto;
    padding: var(--space-50) var(--space-40);
    background-color: var(--color-beige-ef);
    border-radius: 20px;
}
    @media all and (max-width: 1000px) {
        .boxW900 {
            margin: var(--space-40) auto 0 auto;
            padding: var(--space-35) var(--space-25);
            border-radius: 15px
        }
    }
    @media all and (max-width: 640px) {
        .boxW900 {
            margin: var(--space-30) auto 0 auto;
            padding: var(--space-25) var(--space-15);
        }
    }


/* 회원가입 > 약관동의 */
.joinStep1 .bookHdl {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.joinStep1 .agreeList .list {
    padding: 30px;
    border-radius: 20px;
}
.joinStep1 .agreeList .list:first-of-type {
    padding-bottom: var(--space-30);
    margin-bottom: var(--space-30);
}
.joinStep1 .surf .surfTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-25);
    padding-bottom: var(--space-25);
    border-bottom: var(--border);
}
.joinStep1 .surf .surfTitle .arrow {
    cursor: pointer;
}
.joinStep1 .surf .surfTitle .arrow svg {
    width: 18px;
}
.joinStep1 .surf .surfCon {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.joinStep1 .surf .surfCon .surfTxt {
    font-size: var(--font-17);
    text-align: left;
}
.joinStep1 .privacy {
    border-bottom: var(--border);
    padding-bottom: var(--space-20);
    margin-bottom: var(--space-20);
}
.joinStep1 .privacy h3  {
    font-size: var(--font-17);
    margin: var(--font-20) 0 var(--space-10) 0;
    padding-top: var(--font-10);
    border-top: 0
}
.joinStep1 .privacy h4 {
    font-size: var(--font-16);
    margin: var(--space-30) 0 var(--space-10)
}
.joinStep1 .privacy p,
.joinStep1 .privacy li,
.joinStep1 .privacy td,
.joinStep1 .privacy th {
    font-size: var(--font-16);
}
.joinStep1 .privacy table th,
.joinStep1 .privacy table td {
    padding: var(--space-5) var(--space-10);
}
    /* 회원가입 > 약관동의 미디어쿼리*/
    @media all and (max-width:1000px) {
        .joinStep1 .surf .surfCon {
            flex-direction: column;
            align-items: flex-start;
        }
        .joinStep1 .agreeList .list {
            padding: var(--space-25);
            border-radius: 15px
        }
        .joinStep1 .agreeList .list:first-of-type {
            padding-bottom: var(--space-20);
            margin-bottom: var(--space-20);
        }
        .joinStep1 .surf .surfTitle {
            margin-bottom: var(--space-20);
            padding-bottom: var(--space-20);
        }
        .joinStep1 .surf .surfCon .surfTxt {
            margin-bottom: var(--space-15)
        }
    }
    @media all and (max-width:640px) {
        .joinStep1 .bookHdl {
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: var(--space-20)
        }
        .joinStep1 .bookHdl p {
            margin-bottom: var(--space-10)
        }
        .joinStep1 .agreeList .list {
            padding: var(--space-20);
        }
        .joinStep1 .surf .surfCon .surfTxt {
            font-size: var(--font-15);
            margin-bottom: var(--space-15)
        }
        .joinStep1 .privacy h3  {
            font-size: var(--font-16);
        }
        .joinStep1 .privacy p,
        .joinStep1 .privacy li,
        .joinStep1 .privacy td,
        .joinStep1 .privacy th {
            font-size: var(--font-14);
        }
        .joinStep1 .privacy ul,
        .joinStep1 .privacy ol,
        .joinStep1 .privacy p.column-frst {
            margin-top: var(--space-5)
        }
        .joinStep1 .privacy li>ul,
        .joinStep1 .privacy li>ol {
            margin-bottom: var(--space-5)
        }
        .joinStep1 .privacy li {
            position: relative;
            margin-bottom: var(--space-5)
        }
        
    }


/* 회원가입완료 */
.joinCompleteInfo {
    padding: var(--space-70) 0;
    text-align: center;
}
.joinCompleteInfo .titArea img {
    width: auto;
    margin: 0 auto var(--space-25) auto;
}
.joinCompleteInfo .titArea h4 {
    display: block;
    font-size: var(--font-45);
}
    @media all and (max-width: 1000px) {
        .joinCompleteInfo {
            padding: var(--space-50) 0;
        }
        .joinCompleteInfo .titArea img {
            width: 60px;
            margin: 0 auto var(--space-20) auto;
        }
        .joinCompleteInfo .titArea h4 {
            font-size: var(--font-35);
        }
    }
    @media all and (max-width: 640px) {
        .joinCompleteInfo {
            padding: var(--space-40) 0;
        }
        .joinCompleteInfo .titArea img {
            width: 55px;
            margin: 0 auto var(--space-15) auto;
        }
        .joinCompleteInfo .titArea h4 {
            font-size: var(--font-25);
        }
    }


/*로그인*/
.login .inputArea .inputBtn {
    background-color: var(--color-beige-85);
    border: none;
    color: var(--color-white);
}
.login .inputArea .inputBtn:hover {
    background-color: var(--color-dark);
}
.login .socialLogin {
    max-width: 900px;
    margin: var(--space-40) auto 0 auto;
    padding-top: var(--space-40);
    border-top: var(--border);
}
.login .socialLoginBox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0 var(--space-15);
}
.login .socialLoginBox a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 55px;
    padding: 0 var(--space-35);
    border-radius: 30px;
    color: var(--color-white);
    font-size: var(--font-16);
    font-weight: var(--fw-bold);
}
.login .socialLoginBox a svg {
    width: 10px;
}
.login .socialLoginBox .naver {
    background-color: var(--color-naver);
    border: 1px solid var(--color-naver);
}
.login .socialLoginBox .naver:hover {
    border: 1px solid var(--color-naver);
    background-color: var(--color-white);
    color: var(--color-naver);
}
.login .socialLoginBox .naver:hover svg path {
    stroke: var(--color-naver);
}
.login .socialLoginBox .kakao {
    background-color: var(--color-kakao);
    color: #3C1D1E
}
.login .socialLoginBox .kakao svg path {
    stroke: #3C1D1E;;
}
.login .socialLoginBox .kakao:hover {
    border: 1px solid var(--color-kakao);
    background-color: var(--color-white);
}
.login .socialLoginBox .google {
    background-color: #1A73E8;
}
.login .socialLoginBox .google:hover {
    border: 1px solid #1A73E8;
    background-color: var(--color-white);
    color: #1A73E8;
}
.login .socialLoginBox .google:hover svg path {
    stroke: #1A73E8;
} 
    /* 로그인 미디어쿼리 */
    @media all and (max-width:1000px) {
        .login .socialLogin {
            margin: var(--space-30) auto 0 auto;
            padding-top: var(--space-30);
        }
        .login .socialLoginBox {
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 0 var(--space-10);
        }
        .login .socialLoginBox a {
            height: 50px;
            display: flex;
            align-items: center;
            font-size: var(--font-15);
            font-weight: var(--fw-bold);
            padding: 0 var(--space-20)
        }
        
    }
    @media all and (max-width:640px) {
        .login .socialLogin {
            margin: var(--space-20) auto 0 auto;
            padding-top: var(--space-20);
        }
        .login .socialLoginBox {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: var(--space-5) var(--space-15);
        }
        .login .socialLoginBox a {
            height: 45px;
            padding: 0 var(--space-15);
            font-size: var(--font-14);
        }
        .login .socialLoginBox a svg {
            width: 18px;
        }
    }


/* 마이페이지 */
/* 마이페이지 공통 */
.mypageTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-30) var(--space-40);
    background-color: var(--color-beige-ef);
}
.mypageTop .leftContent {
    display: flex;
    align-items: center;
}
.mypageTop .leftContent img {
    width: auto;
    margin-right: var(--space-10);
}
.mypageTop .leftContent strong span {
    color: var(--color-gold-b2)
}
.mypageTop .leftContent .memberBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 86px;
    height: 30px;
    margin-left: var(--space-20);
    background-color: var(--color-white);
    border-radius: 15px;
}
.mypageTop .leftContent .memberBtn span {
    color: var(--color-beige-85);
}
.mypageTop .rightContent ul {
    display: flex;
    align-items: center;
}
.mypageTop .rightContent li {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-bottom: 0;
    padding-left: var(--space-15);
}
.mypageTop .rightContent li::before {
    position: absolute;
    top: 12.5px;
    left: 0;
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-primary)
}
.mypageTop .rightContent li strong {
    display: flex;
    align-items: center;
}
.mypageTop .rightContent li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 30px;
    margin-left: var(--space-20);
    background-color: var(--color-white);
    border-radius: 15px;
}

.mypageTitarea {
    text-align: center;
}

.mypage .classifyTab li {
    margin-right: var(--space-40);
}
.mypage .classifyTab li:last-of-type {
    margin-right: 0;
}
.mypage .classifyTab li a {
    position: relative;
    display: flex;
    padding-bottom: var(--space-10);
    color: var(--color-gray-cf);
}
.mypage .classifyTab li.on a,
.mypage .classifyTab li a:hover {
    color: var(--color-primary);
}
.mypage .classifyTab li.on a {
    border-bottom: 2px solid var(--color-primary);
}

.mypage .boxW900 {
    margin: var(--space-30) auto 0 auto;
    background-color: var(--color-beige-f8);
}

    @media all and (max-width: 1000px) {
        .mypageTop {
            flex-wrap: wrap;
            padding: var(--space-30);
        }
        .mypageTop .leftContent {
            width: 100%;
        }
        .mypageTop .leftContent img {
            margin-right: var(--space-5);
        }
        .mypageTop .leftContent .memberBtn {
            width: 80px;
            height: 25px;
            margin-left: var(--space-15);
        }
        .mypageTop .leftContent .memberBtn span {
            font-size: var(--font-13);
        }
        .mypageTop .rightContent {
            width: 100%;
            margin-top: var(--space-20);
        }
        .mypageTop .rightContent li a {
            width: 40px;
            height: 25px;
            margin-left: var(--space-15);
        }

        .mypage .classifyTab li {
            margin-right: var(--space-30);
        }

        .mypage .boxW900 {
            margin: var(--space-25) auto 0 auto;
        }
    }
    @media all and (max-width: 640px) {
        .mypageTop {
            padding: var(--space-20);
        }
        .mypageTop .leftContent .memberBtn {
            width: 80px;
            height: 25px;
            margin-left: var(--space-15);
        }
        .mypageTop .leftContent .memberBtn span {
            font-size: var(--font-13);
        }
        .mypageTop .rightContent {
            margin-top: var(--space-15);
        }
        .mypageTop .rightContent ul {
            flex-wrap: wrap;
            width: 100%;
        }
        .mypageTop .rightContent li {
            width: 50%;
            margin-right: 0;
        }
        .mypageTop .rightContent li::before {
            top: 7.5px
        }
        .mypageTop .rightContent li a {
            width: 30px;
            height: 20px;
            margin-left: var(--space-10);
        }

        .mypage .classifyTab li {
            margin-right: var(--space-20);
        }

        .mypage .boxW900 {
            margin: var(--space-20) auto 0 auto;
        }
    }


/* 마이페이지 - 상담 내역 */
.qaItem {
    margin-bottom: var(--space-30);
    padding-bottom: var(--space-30);
    border-bottom: 1px solid var(--color-gray-df);
}
.qaItem:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.qaHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.qaHeader .status {
    position: relative;
    margin-right: var(--space-30);
    padding-right: var(--space-30);
    color: var(--color-beige-85);
}
.done .qaHeader .status {
    color: var(--color-gold-b2);
}
.qaHeader .status::after {
    position: absolute;
    top: 3.5px;
    right: 0;
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background-color: var(--color-gray-df);
}
.qaHeader .title {
    flex: 1;
}
.qaWrap {
    padding: var(--space-25) var(--space-30);
    background-color: var(--color-white);
}
.qaQuestion {
    display: flex;
    align-items: center;
}
.done .qaQuestion {
    margin-bottom: var(--space-20);
    padding-bottom: var(--space-20);
    border-bottom: 1px solid var(--color-gray-df);
}
.qaAnswer {
    display: flex;
    align-items: flex-start;
}
.qLabel, 
.aLabel {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-right: var(--space-15);
    border-radius: 50%;
}
.qLabel {
    background-color: var(--color-primary);
}
.aLabel {
    background-color: var(--color-pink-bf);
}
.aContent {
    text-align: left;
}
.qaAnswer .doctor {
    display: block;
    margin-top: 3px;
    margin-bottom: var(--space-25);
}
    @media all and (max-width: 1000px) {
        .qaItem {
            margin-bottom: var(--space-25);
            padding-bottom: var(--space-25);
        }
        .qaHeader .status {
            margin-right: var(--space-25);
            padding-right: var(--space-25);
        }
        .qaHeader .status::after {
            height: 14px;
        }
        .qaWrap {
            padding: var(--space-20) var(--space-25);
        }
        .done .qaQuestion {
            margin-bottom: var(--space-15);
            padding-bottom: var(--space-15);
        }
        .qLabel, 
        .aLabel {
            width: 25px;
            height: 25px;
            margin-right: var(--space-10);
        }
        .qaAnswer .doctor {
            margin-bottom: var(--space-20);
        }
    }
    @media all and (max-width: 640px) {
        .qaItem {
            margin-bottom: var(--space-20);
            padding-bottom: var(--space-20);
        }
        .qaHeader {
            flex-wrap: wrap;
        }
        .qaHeader .status {
            margin-right: 0;
            padding-right: 0;
        }
        .qaHeader .status::after {
            display: none;
        }
        .qaHeader .title {
            width: 100%;
            flex: auto;
            margin: var(--space-10) 0 var(--space-5) 0;
        }
        .qaWrap {
            padding: var(--space-15);
        }
        .qaQuestion {
            flex-wrap: wrap;
        }
        .done .qaQuestion {
            margin-bottom: var(--space-10);
            padding-bottom: var(--space-10);
        }
        .qLabel, 
        .aLabel {
            width: 20px;
            height: 20px;
            margin-right: var(--space-5);
        }
        
        .qaAnswer .doctor {
            margin-top: 0;
            margin-bottom: var(--space-15);
        }
    }

    
/* 마이페이지 - 회원정보 - 비밀번호 확인 */


/* 마이페이지 - 회원정보 - 회원정보 변경 */
.memberInfoModify2 .inputBox input[type="text"]:disabled {
    background-color: #EFDFD9;
}
.memberInfoModify2 .inputBox:nth-of-type(3) input.tel{
    margin-bottom: var(--space-10);
}
.memberInfoModify2 .inputBoxAddress input.address {
    margin-bottom: var(--space-10);
}
.memberInfoModify2 .btnArea svg {
    margin-left: var(--space-10);
}
.memberInfoModify2 .btnArea .btn.line svg line {
    transition: var(--transtion);
}
.memberInfoModify2 .btnArea .btn.line:hover svg line {
    stroke: var(--color-white);
}
.memberInfoModify2 .btnArea .btn.gray {
    background-color: var(--color-gray-e9);
}
.memberInfoModify2 .btnArea .btn.gray:hover {
    background-color: var(--color-primary);
}
.memberInfoModify2 .btnArea .btn.gray svg path {
    stroke: var(--color-basic);
    transition: var(--transtion);
}
.memberInfoModify2 .btnArea .btn.gray:hover svg path {
    stroke: var(--color-white);
}
.memberInfoModify2 .btnArea .btn.gray span {
    color: var(--color-basic);
}
.memberInfoModify2 .btnArea .btn.gray:hover span {
    color: var(--color-white);
}
    @media all and (max-width: 1000px) {
        .memberInfoModify2 .btnArea svg {
            margin-left: var(--space-5);
        }
    }


/* 마이페이지 - 회원 탈퇴 */
.withdrawal .boxW900 {
    background-color: var(--color-beige-ef);
}
.withdrawalComplete {
    padding: var(--space-70) var(--space-60);
}
.withdrawalComplete .titArea {
    text-align: center;
}
.withdrawalComplete .titArea img {
    width: auto;
    margin: 0 auto var(--space-25) auto;
}
.withdrawalComplete .titArea h4 {
    font-size: var(--font-45);
}
.withdrawalComplete .titArea h4 span {
    color: var(--color-gold-b2);
}
.withdrawalComplete .selectArea {
    max-width: 510px;
    margin: var(--space-40) auto 0 auto;
}
.withdrawalComplete .dotList {
    margin-top: var(--space-40);
    padding-top: var(--space-40);
    border-top: 1px solid var(--color-beige-d8);
}
.withdrawalComplete .dotList li {
    margin-bottom: var(--space-5);
}
.withdrawalComplete .dotList li::before {
    top: var(--space-8);
}
.withdrawal .btnArea .btn svg line {
    transition: var(--transtion);
}
.withdrawal .btnArea .btn:hover svg line {
    stroke: var(--color-white);
}
    @media all and (max-width: 1000px) {
        .withdrawalComplete {
            padding: var(--space-50) var(--space-40);
        }
        .withdrawalComplete .titArea img {
            width: 60px;
            margin: 0 auto var(--space-20) auto;
        }
        .withdrawalComplete .titArea h4 {
            font-size: var(--font-35);
        }
        .withdrawalComplete .selectArea {
            margin: var(--space-30) auto 0 auto;
        }
        .withdrawalComplete .dotList {
            margin-top: var(--space-30);
            padding-top: var(--space-30);
        }
    }
    @media all and (max-width: 640px) {
        .withdrawalComplete {
            padding: var(--space-40) var(--space-30);
        }
        .withdrawalComplete .titArea img {
            width: 55px;
            margin: 0 auto var(--space-15) auto;
        }
        .withdrawalComplete .titArea h4 {
            font-size: var(--font-25);
        }
        .withdrawalComplete .selectArea {
            margin: var(--space-20) auto 0 auto;
        }
        .withdrawalComplete .dotList {
            margin-top: var(--space-20);
            padding-top: var(--space-20);
        }
        .withdrawalComplete .dotList li::before {
            top: var(--space-7);
        }
    }