@charset "utf-8";

/* member */
.sub-contents .member {padding: 85px 0; margin-top: var(--header-height); background: #f9f9f9;
    & .member-tit {text-align: center; margin-bottom: 60px;
        & p {font-family: var(--key-font); font-size: 22px;}
    }
    & .member-con {
        & .login {
            & .login-box {width: 100%; max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; padding: 40px 80px;
                & .cate {position: relative; display: flex; border-radius: 999px; background: #EAEDF4;
                    &::before {content: ''; position: absolute; top: 0; left: 50%; width: calc(100% / 2); height: 100%; background: #000; border-radius: 999px; transition: all 0.2s;}
                    &.on::before {left: 0;} 
                    & button {position: relative; width: calc(100% / 2); text-align: center; z-index: 2;}
                    & button p {font-size: 16px; font-weight: 600; color: #fff; padding: 15px 0; transition: all 0.2s;}
                    & button:first-child p {color: #697385;} 
                    &.on button:first-child p {color: #fff;}
                    &.on button:last-child p {color: #697385;}
                }
                & .con {display: flex; justify-content: space-between; margin: 40px 0 15px;
                    & .write {width: calc(100% - 145px);
                        & input {display: block; width: 100%; font-size: 16px; line-height: 1; padding: 15px; border-radius: 5px; border: 1px solid #e1e5ed;}
                        & input[type="text"] {margin-bottom: 15px;}
                        & input[type="password"] {}
                    }
                    & .bt {width: 130px;
                        & input[type="submit"] {width: 100%; height: 100%; font-size: 16px; font-weight: 600; border: 0; background: #292E41; border-radius: 5px; color: #fff; cursor: pointer;}
                    }
                }
                & .util {display: flex; justify-content: space-between; align-items: center;
                    & .save {
                        & input[type="checkbox"] {display: none;}
                        & label {display: flex; align-items: center;
                            & span {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border: 1px solid #e1e5ed; border-radius: 5px;
                                & i {opacity: 0; transition: all 0.2s;}
                            }
                            & p {font-size: 14px; color: #697385; margin-left: 6px;}
                        }
                        input[type="checkbox"]:checked + label span i {opacity: 1;}
                    }
                    & .find {display: flex; align-items: center;
                        & a {position: relative; display: block; font-size: 14px; line-height: 1; color: #697385; padding: 0 8px;}
                        & a:first-child {padding-left: 0;}
                        & a:last-child {padding-right: 0;}
                        & a:hover {color: #222;}
                        & a::after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 80%; background: #D4D8E1;}
                    }
                }
                & .sns {margin-top: 40px; padding-top: 40px; border-top: 1px solid #e1e5ed;
                    > ul {display: flex; justify-content: space-between;
                        > li {width: calc(100% / 2 - 7.5px); border-radius: 5px; text-align: center;
                            & a {display: flex; justify-content: center; align-items: center; padding: 15px 0;
                                & img {height: 14px;}
                                & span {font-weight: 500; margin-left: 10px;}
                            }
                        }
                        > li.naver {background: #03C75A; color: #fff;}
                        > li.kakao {background: #FFE300; color: #000;}
                    }
                }
                & .none {display: none;}
            }
        }
        & .find {
            & .find-box {width: 100%; max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; padding: 40px 80px;
                & .cate {position: relative; display: flex; border-radius: 999px; background: #EAEDF4;
                    &::before {content: ''; position: absolute; top: 0; left: 50%; width: calc(100% / 2); height: 100%; background: #000; border-radius: 999px; transition: all 0.2s;}
                    &.on::before {left: 0;} 
                    & button {position: relative; width: calc(100% / 2); text-align: center; z-index: 2;}
                    & button p {font-size: 16px; font-weight: 600; color: #fff; padding: 15px 0; transition: all 0.2s;}
                    & button:first-child p {color: #697385;} 
                    &.on button:first-child p {color: #fff;}
                    &.on button:last-child p {color: #697385;}
                }
                & .con {
                    & .write {margin: 40px 0;
                        > ul {
                            > li {display: flex; align-items: center; margin-bottom: 15px;
                                & p {width: 80px; font-size: 14px; font-weight: 500; color: #222;}
                                & input {display: block; width: calc(100% - 80px); font-size: 16px; line-height: 1; padding: 15px; border-radius: 5px; border: 1px solid #e1e5ed;}
                            }
                            > li:last-child {margin-bottom: 0;}
                            &.none {display: none;}
                        }
                    }
                    & .desc {text-align: center; margin-bottom: 40px;
                        & p {font-size: 20px; font-weight: 600;}
                        & span {display: block; font-size: 15px; color: #666; margin: 20px 0;}
                        & strong {display: inline-block; font-size: 15px; font-weight: 500; background: #F2F7FF; padding: 5px 20px;}
                    }
                    & .bt {display: flex; justify-content: center;
                        & input[type="submit"] {width: 160px; height: 44px; font-size: 16px; color: #222; border-radius: 5px; border: 1px solid #E1E5ED;}
                        & input[type="submit"]:first-child {background: #292E41; color: #fff; border: 1px solid #292E41; margin-right: 5px;}
                        & a {display: flex; justify-content: center; align-items: center; width: 160px; height: 44px; font-size: 16px; color: #222; border-radius: 5px; border: 1px solid #E1E5ED;}
                        & a:first-child {background: #292E41; color: #fff; border: 1px solid #292E41; margin-right: 5px;}
                    }
                }
            }
        }
        & .select {
            & .select-box {width: 100%; max-width: 640px; margin: 0 auto;
                > ul {display: flex; justify-content: space-between;
                    > li {width: calc(100% / 2 - 15px); background: #fff; border: 1px solid #E8E8E8; border-radius: 10px; padding: 40px 20px;
                        &:first-child {
                            & p {}
                            & a {display: flex; justify-content: center; align-items: center; padding: 15px 30px; border-radius: 5px; gap: 8px;
                                &.kakao {background: #FFE300; margin: 25px 0 0; color: #000;}
                                &.naver {background: #03C75A; margin: 20px 0 0; color: #fff;}
                                & img {}
                                & span {font-size: 16px; font-weight: 600;}
                            }
                        }
                        &:last-child {
                            & a {display: block; text-align: center; margin: 15px 0 0;
                                & img {}
                            }
                        }
                        > p {font-size: 20px; font-weight: 600; text-align: center;}
                        > span {display: block; font-size: 15px; color: #666; text-align: center; margin: 25px 0 0;}
                    }
                }
            }
        }
        & .agree {
            & .agree-box {width: 100%; max-width: 925px; margin: 0 auto 40px;
                & .agree-tit {margin-bottom: 20px;
                    & h3 {font-size: 20px; font-weight: 600;}
                }
                & .agree-con {padding: 25px; background: #fff; border: 1px solid #E8E8E8; border-radius: 10px;
                    & .con_text {height: 250px; overflow-y: scroll; background: #F9F9F9; border-radius: 7px; padding: 25px;
                        > .top {margin-bottom: 30px;}
                        & .con {
                            > ul {
                                > li {margin-bottom: 30px;
                                    &:last-child {margin-bottom: 0;}
                                    & h4 {font-weight: 600;}
                                    & p {margin-top: 10px;}
                                    & span {position: relative; display: block; padding-left: 22px; margin-top: 10px;
                                        & strong {position: absolute; top: 0; left: 0;}
                                        & b {}
                                    }
                                    & table {width: 100%; table-layout: fixed; border-top: 1px solid #eee; margin: 10px 0; background: #fff;
                                        & tr {border-bottom: 1px solid #eee;
                                            & td {font-size: 14px; padding: 5px; text-align: center; border-right: 1px solid #eee; vertical-align: middle;
                                                &.brn {border-right: 0;}
                                            }
                                        }
                                        & thead {background: #f9f9f9;
                                            & tr {
                                                & td {font-weight: 600;}
                                            }
                                        }
                                        & tbody {
                                            & tr {
                                                & td {}
                                            }
                                        }
                                        &:last-child {margin: 10px 0 0;}
                                    }
                                }
                            }
                        }
                    }
                    & .agree-check {margin-top: 20px;
                        > ul {display: flex; justify-content: flex-end; align-items: center;
                            > li {display: flex; align-items: center; margin-right: 15px;
                                & input[type="radio"] {display: none;}
                                & label {display: flex; align-items: center;
                                    & span {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border: 1px solid #E1E5ED; border-radius: 5px; margin-right: 6px;
                                        & i {opacity: 0; transition: all 0.2s;}
                                    }
                                    & p {font-size: 14px; font-weight: 600;}
                                }
                                & input[type="radio"]:checked + label span i {opacity: 1;} 
                            }
                            > li:last-child {margin-right: 0;}
                        }
                    }
                }
            }
            & .agree-box:last-child {margin-bottom: 0;}
            & .agree-bt {display: flex; justify-content: center;
                & button {width: 160px; height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px; margin-right: 5px;}
                & button:last-child {background: #fff; border: 1px solid #E1E5ED; color: #222; margin-right: 0;}
            }
        }
        & .join {
            & .join-box {width: 100%; max-width: 925px; margin: 0 auto;
                & .join-desc {text-align: right;
                    & p {position: relative; display: inline-block; font-size: 14px; padding-left: 15px;}
                    & p::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 5px; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--basic-color);}
                }
                & .join-form {padding: 25px; background: #fff; border: 1px solid #E8E8E8; border-radius: 10px; margin: 20px 0 70px;
                    > ul {
                        > li {display: flex; justify-content: flex-end; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px dotted #E1E5ED;
                            & .cate {width: 120px; height: 40px; margin-right: 20px;
                                & p {position: relative; display: inline-block; font-size: 16px; line-height: 40px; color: #222; padding-right: 15px;}
                                & p::before {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 5px; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--basic-color);}
                                & p.none::before {content: none;}
                            }
                            & .con {display: flex; align-items: center; width: calc(100% - 140px); margin-bottom: 10px;
                                > * {margin: 0 5px;}
                                > *:first-child {margin-left: 0;}
                                > *:last-child {margin-right: 0;}
                                & input[type="text"], & input[type="password"] {width: 100%; max-width: 390px; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 12px;}
                                & input[type="submit"] {width: 100px; height: 40px; border-radius: 5px; background: #292E41; color: #fff;}
                                > button {width: 100px; height: 40px; font-size: 16px; border-radius: 5px; background: #292E41; color: #fff;}
                                & textarea {width: 100%; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 12px;}
                                & select {position: relative; width: 100%; max-width: 155px; height: 40px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 28px 0 12px; background: url("/assets/site/img/common/ico-angle-down.png") no-repeat; background-position: center right 12px; background-size: 16px;}
                                & select.mail {max-width: 280px;}
                                & .invalid-feedback {white-space: nowrap;}
                            }
                            & .con:last-child {margin-bottom: 0;}
                            & .desc {width: calc(100% - 140px); padding: 0 10px;
                                & p {position: relative; font-size: 14px; color: #697385; padding: 0 10px;}
                                & p.bold {font-weight: 700;}
                                & p::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: #697385;}
                            }
                            & .thumbs {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: calc(100% - 140px); margin-bottom: 10px;
                                & label {position: relative; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; aspect-ratio: 1.25 / 1; border: 1px solid #E1E5ED; border-radius: 5px;
                                    & img {}
                                    & p {width: 100%; line-height: 1; text-align: center; margin-top: 10px;}
                                    & input[type="file"] {display: none;}
                                    & .img_preview, .img_preview1 {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 5px; overflow: hidden;
                                        & img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
                                        & button {position: absolute; z-index: 2; top: 6px; right: 6px; font-size: 12px; border-radius: 4px; background: #fff; color: #A3A3A3; padding: 4px 8px; border: 1px solid #eee;}
                                    }
                                }
                            }
                            & .file {display: flex; align-items: center; width: calc(100% - 140px); margin-bottom: 10px;
                                & label {display: flex; justify-content: center; align-items: center; width: 100px; height: 40px; font-size: 16px; border: 1px solid #292E41; border-radius: 5px;}
                                & input[type="file"] {display: none;}
                                & p {font-size: 14px; color: #697385; margin-left: 10px;}
                            }
                            & .dvs {display: flex; align-items: center; flex-wrap: wrap; width: calc(100% - 140px); gap: 10px 5px;
                                & select {position: relative; width: calc(100% / 3 - 4px); height: 40px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 28px 0 12px; background: url("/assets/site/img/common/ico-angle-down.png") no-repeat; background-position: center right 12px; background-size: 16px;}
                                & input[type="text"] {width: 100%; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 12px;}
                            }
                        }
                        > li:first-child {padding-top: 0;}
                        > li:last-child {padding-bottom: 0; border-bottom: 0;}
                    }
                }
                & .join-bt {display: flex; justify-content: center;
                    & button {width: 160px; height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px; margin-right: 5px;}
                    & button:last-child {background: #fff; border: 1px solid #E1E5ED; color: #222; margin-right: 0;}
                }
            }
        }
        & .result {
            & .result-box {width: 100%; max-width: 640px; margin: 0 auto;
                & .result-txt {background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; padding: 40px 80px; text-align: center; margin-bottom: 70px;
                    & p {font-size: 20px; font-weight: 600; margin-bottom: 20px;}
                    & span {font-size: 15px; color: #666;}
                }
                & .result-bt {display: flex; justify-content: center;
                    & a {width: 160px; line-height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px; margin-right: 5px; text-align: center;}
                    & a:last-child {background: #fff; border: 1px solid #E1E5ED; color: #222; margin-right: 0;}
                }
            }
        }
    }
    @media (width <= 860px) {padding: 50px 0;
        &.mb {padding: 30px 0;
            & .member-tit {display: none;}
        }
        & .member-tit {margin-bottom: 25px;
            &.mb {display: none;}
            & p {font-size: 18px;}
        }
        & .member-con {
            & .login {
                & .login-box {padding: 30px;
                    & .cate {
                        & button {
                            & p {font-size: 14px; padding: 12px 0;}
                        }
                    }
                    & .con {margin: 25px 0 10px;
                        & .write {width: calc(100% - 92px);
                            & input {font-size: 14px; padding: 10px 15px;}
                            & input[type="text"] {margin-bottom: 8px;}
                        }
                        & .bt {width: 84px;
                            & input[type="submit"] {font-size: 14px;}
                        }
                    }
                    & .util {
                        & .save {
                            & label {
                                & span {width: 24px; height: 24px;
                                    & i {font-size: 14px;}
                                }
                                & p {font-size: 13px;}
                            }
                        }
                        & .find {
                            & a {font-size: 13px;}
                        }
                    }
                    & .sns {margin-top: 25px; padding-top: 25px;
                        > ul {
                            > li {
                                & a {padding: 12px 0;
                                    & span {font-size: 14px;}
                                }
                            }
                        }
                    }
                }
            }
            & .find {
                & .find-box {padding: 30px;
                    & .cate {
                        & button {
                            & p {font-size: 14px; padding: 12px 0;}
                        }
                    }
                    & .con {margin: 25px 0 0;
                        & .write {margin: 0 0 25px;
                            > ul {
                                > li {flex-wrap: wrap; margin-bottom: 8px;
                                    & p {width: 60px;}
                                    & input {width: calc(100% - 60px); font-size: 14px; padding: 10px 15px;}
                                    & label {width: 100%; margin: 8px 0 0; font-size: 13px;}
                                }
                            }
                        }
                        & .bt {justify-content: space-between;
                            & input[type="submit"] {width: calc(100% / 2 - 7.5px); font-size: 14px; margin: 0;}
                        }
                    }
                }
            }
            & .agree {
                & .agree-box {
                    & .agree-tit {
                        & h3 {font-size: 16px;}
                    }
                    & .agree-con {
                        & .con_text {height: 200px;
                            > ol {
                                > li {margin-top: 20px;
                                    & .tit {font-size: 15px;}
                                    & p {font-size: 14px;}
                                    & .depth {
                                        > li {font-size: 13px;}
                                    }
                                }
                            }
                        }
                        & .agree-check {
                            > ul {
                                > li {
                                    & label {
                                        & span {width: 24px; height: 24px;
                                            & i {font-size: 14px;}
                                        }
                                        & p {font-size: 13px;}
                                    }
                                }
                            }
                        }
                    }
                }
                & .agree-bt {
                    & button {font-size: 14px;}
                }
            }
            & .join {
                & .join-box {
                    & .join-form {margin: 5px 0 20px; padding: 20px 30px;
                        > ul {
                            > li {flex-wrap: wrap; padding: 12px 0;
                                & .cate {width: 100%; height: unset; margin-right: 0;
                                    & p {font-size: 15px; font-weight: 600; line-height: 1;}
                                }
                                & .con {width: 100%; flex-wrap: wrap;
                                    > * {margin: 0;}
                                    &:nth-child(2) {margin-top: 10px;}
                                    & input[type="text"], & input[type="password"] {width: 100%; max-width: unset; height: 38px; font-size: 13px; padding: 0 15px; margin-right: 0;}
                                    & input[type="submit"] {font-size: 14px; height: 38px; margin-left: 5px;}
                                    & button {font-size: 14px; height: 38px; margin-left: 5px;}
                                    & #brand {display: none;}
                                    & #company {width: calc(100% - 155px); margin-left: 5px;}
                                    & #biz_no {width: calc(100% - 105px); margin-right: 0;}
                                    & #phone {width: calc(100% - 105px); margin-right: 0;}
                                    & #phone_verify {width: calc(100% - 105px); margin-right: 0;}
                                    & #email {width: calc(100% - 285px); margin-right: 0;}
                                    & #zipcode {width: calc(100% - 105px); margin-right: 0;}
                                    & #address {margin-right: 0;}
                                    & #address_detail {margin: 10px 0 0 0;}
                                    & select.mail {height: 38px; font-size: 14px; margin: 0 0 0 5px;}
                                    & .select2 {width: 150px !important; margin: 0;}
                                    & .select2-container--bootstrap4 .select2-selection {border-color: #e1e5ed;}
                                    & .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {padding-left: 12px;}
                                    & .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {font-size: 14px;}
                                }
                                & .desc {width: 100%; padding: 0;
                                    & p {padding: 0;
                                        &::before {content: none;}
                                    }
                                }
                                & .file {width: 100%;
                                    & label {height: 38px; font-size: 14px;}
                                }
                                & .thumbs {width: 100%; margin-top: 10px;
                                    & label {
                                        & p {font-size: 13px;}
                                    }
                                }
                                & .dvs {width: 100%; margin-top: 10px;
                                    & input[type="text"] {width: 100%; max-width: unset; height: 38px; font-size: 13px; padding: 0 15px; margin-right: 0;}
                                    & select {height: 38px; font-size: 14px;}
                                }
                                & .invalid-feedback {width: 100%; font-size: 14px; margin: 6px 0 0 0;}
                            }
                        }
                    }
                    & .join-bt {
                        & button {font-size: 14px;}
                    }
                }
            }
            & .result {
                & .result-box {
                    & .result-txt {margin-bottom: 20px;
                        & p {font-size: 18px;}
                        & span {font-size: 14px;}
                    }
                    & .result-bt {
                        & a {font-size: 14px;}
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .member-con {
            & .select {
                & .select-box {
                    > ul {flex-wrap: wrap; gap: 20px;
                        > li {width: 100%;}
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .member-con {
            & .login {
                & .login-box {padding: 25px;
                    & .cate {
                        & button {
                            & p {font-size: 12px; padding: 10px 0;}
                        }
                    }
                    & .con {flex-wrap: wrap; margin: 20px 0 10px;
                        & .write {width: 100%;
                            & input {font-size: 13px;}
                        }
                        & .bt {width: 100%; margin-top: 8px;
                            & input[type="submit"] {padding: 10px;}
                        }
                    }
                    & .util {
                        & .save {
                            & label {
                                & span {width: 20px; height: 20px;
                                    & i {font-size: 12px;}
                                }
                                & p {font-size: 12px;}
                            }
                        }
                        & .find {
                            & a {font-size: 12px;}
                        }
                    }
                    & .sns {margin-top: 20px; padding-top: 20px;
                        > ul {flex-wrap: wrap; gap: 8px;
                            > li {width: 100%;
                                & a {padding: 10px 0;
                                    & img {height: 12px;}
                                    & span {font-size: 13px;}
                                }
                            }
                        }
                    }
                }
            }
            & .find {
                & .find-box {padding: 25px;
                    & .cate {
                        & button {
                            & p {font-size: 12px; padding: 10px 0;}
                        }
                    }
                    & .con {flex-wrap: wrap; margin: 20px 0 0;
                        & .write {margin: 0 0 8px;
                            > ul {
                                > li {
                                    & p {width: 50px; font-size: 13px;}
                                    & input {width: calc(100% - 50px); font-size: 13px;}
                                }
                            }
                            & input {font-size: 13px;}
                        }
                        & .bt {flex-wrap: wrap; gap: 8px;
                            & input[type="submit"] {width: 100%; height: unset; line-height: 1; font-weight: 600; padding: 10px;
                                &:first-child {margin-right: 0;}
                            }
                        }
                    }
                }
            }
            & .select {
                & .select-box {
                    > ul {
                        > li {padding: 20px;}
                    }
                }
            }
            & .agree {
                & .agree-box {margin: 0 auto 30px;
                    & .agree-tit {margin-bottom: 15px;}
                    & .agree-con {padding: 20px;
                        & .con_text {padding: 20px;}
                        & .agree-check {margin-top: 15px;
                            > ul {
                                > li {
                                    & label {
                                        & span {width: 20px; height: 20px;
                                            & i {font-size: 12px;}
                                        }
                                        & p {font-size: 12px;}
                                    }
                                }
                            }
                        }
                    }
                }
                & .agree-bt {flex-wrap: wrap; gap: 8px;
                    & button {width: 100%; height: unset; line-height: 1; font-weight: 600; padding: 10px;
                        &:first-child {margin-right: 0;}
                    }
                }
            }
            & .join {
                & .join-box {
                    & .join-desc {
                        & p {font-size: 13px;}
                    }
                    & .join-form {padding: 15px 20px;
                        > ul {
                            > li {
                                & .cate {}
                                & .con {margin-bottom: 6px;
                                    &:nth-child(2) {margin-top: 6px;}
                                    & .select2 {width: 100% !important; margin-bottom: 6px;}
                                    & #company {width: 100%; margin-left: 0;}
                                    & #email {width: 100%; margin-bottom: 6px;}
                                    & select.mail {width: 100%; max-width: unset; margin: 0;}
                                }
                                & .file {flex-wrap: wrap;
                                    & label {width: 100%;}
                                    & p {width: 100%; margin: 6px 0 0 0;}
                                }
                                & .thumbs {grid-template-columns: repeat(3, minmax(0, 1fr));}
                                & .desc {
                                    & p {font-size: 13px;}
                                }
                                & .dvs {gap: 6px 5px;}
                            }
                        }
                    }
                    & .join-bt {flex-wrap: wrap; gap: 8px;
                        & button {width: 100%; height: unset; line-height: 1; font-weight: 600; padding: 10px; margin: 0;}
                    }
                }
            }
            & .result {
                & .result-box {
                    & .result-txt {padding: 25px 50px;
                        & p {font-size: 16px;}
                        & span {font-size: 13px;}
                    }
                    & .result-bt {flex-wrap: wrap; gap: 8px;
                        & a {width: 100%; margin: 0; line-height: 1; padding: 10px 0;}
                    }
                }
            }
        }
    }
}

.sub-contents .mypage {padding: 85px 0; margin-top: var(--header-height);
    & .mypage-tit {text-align: center;
        & p {font-family: var(--key-font); font-size: 22px; font-weight: 500; line-height: 1;}
    }
    & .mypage-depth {margin: 10px 0 20px;
        > ul {display: flex; justify-content: center; align-items: center;
            > li {position: relative; margin: 0 5px; padding: 0 10px;
                &::after {content: '>'; position: absolute; top: 50%; right: -10px; transform: translateY(-50%); font-size: 14px;}
                & i {}
                & p {font-size: 14px; line-height: 1;}
            }
            > li:first-child {margin-left: 0; padding-left: 0;}
            > li:last-child {margin-right: 0; padding-right: 0;
                &::after {content: none;}
                & p {font-weight: 700;}
            }
        }
    }
    & .mypage-nav {position: relative; border: 1px solid #E8E8E8; border-radius: 10px; margin-bottom: 80px;
        & .depth01 {display: flex; justify-content: center; align-items: center; background: #f9f9f9;
            > ul {display: flex; justify-content: center; align-items: center; width: 100%; max-width: 900px;
                > li {width: calc(100% / 5); text-align: center;
                    & a {display: block; font-size: 17px; font-weight: 600; line-height: 45px;}
                    & a.on {color: #fff; background: #292E41;}
                }
            }
            > ul.cp {max-width: 1440px;
                > li {width: calc(100% / 8);}
            }
        }
        & .depth02 {display: flex; justify-content: center; align-items: center;
            > ul {display: flex; justify-content: center; width: 100%; max-width: 900px; padding: 15px 0;
                > li {width: calc(100% / 5); text-align: center; border-right: 1px solid #E8E8E8;
                    & a {display: block; font-size: 14px; line-height: 1; margin-bottom: 10px;
                        &:hover {font-weight: 700;}
                        &.on {font-weight: 700;}
                    }
                    & a:last-child {margin-bottom: 0;}
                }
                > li:last-child {border-right: 0;}
            }
            > ul.cp {max-width: 1440px;
                > li {width: calc(100% / 8);}
            }
        }
        & .bt {position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; width: 40px; height: 20px; border-radius: 0 0 5px 5px; border: 1px solid #e8e8e8; cursor: pointer;
            & i {}
        }
    }
    & .mypage-info {display: flex; justify-content: space-between; align-items: center; padding: 40px; background: #F9F9F9; margin-bottom: 40px;
        & .info {display: flex; align-items: center; width: calc(100% - 1000px);
            & .profile {position: relative; width: 100px; aspect-ratio: 1 / 1; background: #fff; border-radius: 10px; overflow: hidden;
                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
            }
            & .text {padding: 20px;
                & p {font-family: var(--key-font); font-size: 22px; line-height: 1; font-weight: 500; margin-bottom: 10px;}
                & span {font-size: 14px; color: #697385;}
            }
        }
        & .desc {width: 100%; max-width: 1000px;
            > ul {display: flex;
                > li {width: calc(100% / 4); text-align: center; line-height: 1;
                    & p {font-size: 18px; font-weight: 600; margin-bottom: 15px;}
                    & span {font-size: 14px; line-height: 35px;
                        &.pr {font-size: 20px;}
                        & strong {font-size: 35px; font-weight: 500;}
                    }
                }
            }
        }
    }
    & .mypage-con {
        & .tit {text-align: center; margin-bottom: 40px;
            & p {font-family: var(--key-font); font-size: 22px; line-height: 1; margin-bottom: 10px;}
            & span {font-size: 14px; line-height: 1; color: #697385;}
        }
        & .util {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
            & .left {
                & .util-text {
                    & p {font-size: 18px; font-weight: 600;}
                }
                & .util-total {
                    & p {color: #666;}
                }
            }
            & .right {display: flex; align-items: center;
                > div {margin-right: 10px;}
                > div:last-child {margin-right: 0;}
                & .util-select {width: 280px;
                    & select {position: relative; width: 100%; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 28px 0 12px; background: url("/assets/site/img/common/ico-angle-down.png") no-repeat; background-position: center right 12px; background-size: 16px;}
                }
                & .util-bt {
                    & a {display: flex; justify-content: center; align-items: center; width: 160px; height: 44px; font-weight: 600; background: #292E41; color: #fff; border-radius: 5px;}
                }
                & .util-array {margin-right: 8px;
                    & .bar {position: relative; display: flex; border: 1px solid #8491A7; border-radius: 999px; background: #8491A7;
                        &::before {content: ''; position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width: 50%; height: 100%; background: #fff; border-radius: 999px; transition: all 0.2s;}
                        &.on::before {left: 50%;}
                        & button {position: relative; font-size: 14px; line-height: 1; padding: 4px 8px; z-index: 2;}
                        & button:first-child {color: #8491A7;}
                        &.on button:first-child {color: #fff;}
                        & button:last-child {color: #fff;}
                        &.on button:last-child {color: #8491A7;}
                    }
                    & .con {
                        & button {display: flex; align-items: center; gap: 5px;
                            & .ball {position: relative; width: 28px; height: 18px; border-radius: 999px; background: #CBCBCB;
                                & span {position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: all 0.2s ease-out;}
                            }
                            & .txt {
                                & p {font-size: 16px; font-weight: 500; color: #697385;}
                            }
                            &.on {
                                & .ball {background: #8491A7;
                                    & span {left: 12px;}
                                }
                            }
                        }
                    }
                }
                & .util-grid {
                    & button {width: 34px; height: 34px; border-radius: 10px; border: 1px solid #e1e5ed; margin-right: 4px;}
                    & button:last-child {margin-right: 0;}
                    & button i {font-size: 20px; color: #e1e5ed;}
                    & button.on i {color: #697385;}
                }
            }
        }
        & .portfolio {
            & .portfolio-form {width: 100%; max-width: 925px; padding: 25px; background: #fff; border: 1px solid #E8E8E8; border-radius: 10px; margin: 20px auto 70px;
                > ul {
                    > li {display: flex; justify-content: flex-end; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px dotted #E1E5ED;
                        & .cate {width: 120px; height: 40px; margin-right: 20px;
                            & p {position: relative; display: inline-block; font-size: 16px; line-height: 40px; color: #222; padding-right: 15px;}
                            & p::before {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 5px; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--basic-color);}
                            & p.none::before {content: none;}
                        }
                        & .con {display: flex; align-items: center; width: calc(100% - 140px); margin-bottom: 10px;
                            > * {margin: 0 5px;}
                            > *:first-child {margin-left: 0;}
                            > *:last-child {margin-right: 0;}
                            & input[type="text"], & input[type="password"], & input[type="number"] {width: 100%; max-width: 390px; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 12px;}
                            & input[type="button"] {width: 100px; height: 40px; border-radius: 5px; background: #292E41; color: #fff;}
                            & textarea {width: 100%; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 12px;}
                            & select {position: relative; width: 100%; max-width: 155px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 28px 0 12px; background: url("/assets/site/img/common/ico-angle-down.png") no-repeat; background-position: center right 12px; background-size: 16px;}
                            & select.mail {max-width: 280px;}
                            & .invalid-feedback {white-space: nowrap;}
                            & .ck {display: flex; align-items: center; margin-right: 60px;
                                &:last-child {margin-right: 0;}
                                & input[type="radio"] {display: none;}
                                & label {position: relative; padding-left: 46px;
                                    &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 26px; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid #E1E5ED; transition: all 0.2s;}
                                    &::after {content: ''; position: absolute; top: 50%; left: 8px; transform: translateY(-50%); width: 13px; aspect-ratio: 1 / 1; border-radius: 50%; background: #6A6A6A; opacity: 0; transition: all 0.2s;}
                                }
                                & input[type="radio"]:checked + label::after {opacity: 1;}
                            }
                        }
                        & .con:last-child {margin-bottom: 0;}
                        & .desc {width: calc(100% - 140px); padding: 0 10px;
                            & p {position: relative; font-size: 14px; color: #697385; padding: 0 10px;}
                            & p.bold {font-weight: 700;}
                            & p::before {content: ''; position: absolute; top: 9px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #697385;}
                        }
                        & .thumbs {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: calc(100% - 140px); margin-bottom: 10px;
                            & label {position: relative; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; aspect-ratio: 1.25 / 1; border: 1px solid #E1E5ED; border-radius: 5px;
                                & img {}
                                & p {width: 100%; font-size: 14px; line-height: 1; text-align: center; margin-top: 10px;}
                                & input[type="file"] {display: none;}
                                & .img_preview, .img_preview1 {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 5px; overflow: hidden;
                                    & img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
                                    & button {position: absolute; z-index: 2; top: 6px; right: 6px; font-size: 12px; border-radius: 4px; background: #fff; color: #A3A3A3; padding: 4px 8px; border: 1px solid #eee;}
                                }
                            }
                        }
                        & .file {display: flex; align-items: center; width: calc(100% - 140px); margin-bottom: 10px;
                            & label {display: flex; justify-content: center; align-items: center; width: 100px; height: 40px; font-size: 16px; border: 1px solid #292E41; border-radius: 5px;}
                            & input[type="file"] {display: none;}
                            & p {font-size: 14px; color: #697385; margin-left: 10px;}
                        }
                    }
                    > li:first-child {padding-top: 0;}
                    > li:last-child {padding-bottom: 0; border-bottom: 0;}
                }
            }
            & .portfolio-complete {width: 100%; max-width: 925px; padding: 40px; border: 1px solid #E8E8E8; border-radius: 10px; margin: 0 auto 70px; text-align: center;
                & p {font-size: 20px; font-weight: 600; margin-bottom: 20px;}
                & span {font-size: 15px; color: #666;}
            }
            & .portfolio-list {
                & table {width: 100%; border-top: 1px solid #0F162A; table-layout: fixed;
                    & tr {
                        & td {text-align: center; padding: 18px 10px;
                            & p {font-size: 16px; line-height: 1; color: #222;}
                        }
                        & td.num {width: 80px;}
                        & td.cate {width: 8%;}
                        & td.detail {width: 8%;}
                        & td.subject {width: calc(100% - 64% - 80px);}
                        & td.date {width: 10%;}
                        & td.like {width: 5%;}
                        & td.scrab {width: 5%;}
                        & td.views {width: 5%;}
                        & td.status {width: 5%;}
                        & td.promotion {width: 8%;}
                        & td.edit {width: 5%;}
                        & td.del {width: 5%;}
                        & td.none {width: 100%; padding: 40px;}
                    }
                    & thead {background: #F9F9F9;
                        & tr {
                            & td {
                                & p {font-weight: 600;}
                            }
                        }
                    }
                    & tbody {
                        & tr {border-top: 1px solid #CBCBCB;
                            &:last-child {border-bottom: 1px solid #CBCBCB;}
                            & td {}
                            & td.cate {
                                & p {display: inline-block; font-size: 14px; line-height: 1; padding: 5px 10px; color: #16A775; background: #36BE8F20; border: 1px solid #36BE8F; border-radius: 999px;}
                            }
                            & td.detail {
                                & p {display: inline-block; font-size: 14px; line-height: 1; padding: 5px 10px; color: #16A775; background: #36BE8F10; border: 1px solid #36BE8F; border-radius: 999px;}
                            }
                            & td.subject {text-align: left;
                                & a {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                            }
                            & td.promotion {
                                & button {font-size: 14px; line-height: 1; color: #aaa; padding: 5px 15px; border-radius: 5px; border: 1px solid #ddd; background: #fff;
                                    &.on {border: 1px solid #292E41; color: #222;}
                                }
                            }
                            & td.edit {
                                & button {font-size: 14px; line-height: 1; color: #222; padding: 5px 15px; border-radius: 5px; border: 1px solid #292E41; background: #fff;}
                            }
                            & td.del {
                                & button {font-size: 14px; line-height: 1; color: #fff; padding: 5px 15px; border-radius: 5px; border: 1px solid #292E41; background: #292E41;}
                            }
                        }
                    }
                }
            }
            & .portfolio-scrab {
                > ul.list {border-top: 1px solid #0F162A;
                    > li {display: flex; align-items: center; padding: 10px 20px; border-bottom: 1px solid #CBCBCB;
                        & .thumbs {position: relative; width: 100%; max-width: 120px; aspect-ratio: 120 / 80;
                            & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                        }
                        & .subject {width: calc(100% - 40% - 140px); padding: 0 30px;
                            & p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
                        }
                        & .cate {display: flex; justify-content: center; width: 15%;
                            & p {font-size: 14px; line-height: 1; font-weight: 600; color: #0782da; padding: 5px 10px; border-radius: 999px; border: 1px solid #6FC9FA; background: #fff; margin: 0 2px;}
                            & p:nth-child(1) {background: #6FC9FA35;}
                            & p:nth-child(2) {background: #6FC9FA10;}
                            &.type02 {
                                p {color: #16A775; border: 1px solid #36BE8F;
                                    &:nth-child(1) {background: #36BE8F20;}
                                    &:nth-child(2) {background: #36BE8F10;}
                                }
                            }
                            &.type03 {
                                p {color: #FFCD42; border: 1px solid #FFCD42;
                                    &:nth-child(1) {background: #FEDE5E10;}
                                    &:nth-child(2) {background: #FEDE5E10;}
                                }
                            }
                        }
                        & .place {width: 10%; text-align: center;
                            & p {font-size: 15px; font-weight: 600; color: #8491A7;}
                        }
                        & .company {width: 15%; text-align: center;
                            & p {font-size: 18px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
                        }
                        & .del {width: 20px;
                            & button {display: flex; justify-content: center; align-items: center; width: 100%; aspect-ratio: 1 / 1; font-size: 16px; line-height: 1; border-radius: 50%; background: #9AA7BC; color: #fff;}
                        }
                    }
                }
                > ul.grid {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px;
                    > li {position: relative; aspect-ratio: 4 / 3; overflow: hidden;
                        &:hover {
                            & .thumbs {opacity: 0; pointer-events: none;}
                        }
                        &.type01 {
                            & .overlay {background: linear-gradient(#F5FEF8 0%, #F5F9FE 100%); border: 1px solid #B9E1C6;}
                        }
                        &.type02 {
                            & .overlay {background: #F5FEF8; border: 1px solid #C5EEDE;}
                        }
                        &.type03 {
                            & .overlay {background: #F2F7FF; border: 1px solid #CADFFF;}
                        }
                        &.type04 {
                            & .overlay {background: #F8F6FF; border: 1px solid #DDD5FF;}
                        }
                        & .thumbs {position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.2s;
                            & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                        }
                        & .overlay {display: flex; justify-content: center; align-content: center; flex-wrap: wrap; width: 100%; height: 100%; text-align: center;
                            > div {width: 100%;}
                            & .logo {
                                & img {max-width: 60px;}
                            }
                            & .company {margin-top: 6px;
                                & p {font-weight: 600;}
                            }
                            & .cate {display: flex; justify-content: center; margin: 10px 0;
                                & p {font-size: 14px; line-height: 1; font-weight: 600; color: #0782da; padding: 5px 10px; border-radius: 999px; border: 1px solid #6FC9FA; background: #fff; margin: 0 2px;}
                                & p:nth-child(1) {background: #6FC9FA35;}
                                & p:nth-child(2) {background: #6FC9FA10;}
                                &.type02 p {color: #16A775; border: 1px solid #36BE8F;}
                                &.type02 p:nth-child(1) {background: #36BE8F20;}
                                &.type02 p:nth-child(2) {background: #36BE8F10;}
                            }
                            & .subject {
                                & p {font-size: 14px; font-weight: 600;}
                            }
                        }
                    }
                }
            }
            & .portfolio-paging {margin-top: 70px;
                > ul {display: flex; justify-content: center; align-items: center;
                    > li {
                        & a {display: block; padding: 0 10px;
                            & p {color: #868686;}
                            &.on p {font-weight: 700; color: #292E41;}
                        }
                    }
                }
            }
            & .portfolio-desc {width: 100%; max-width: 925px; padding: 15px 20px; border-radius: 10px; background: #F9F9F9; margin: 20px auto 70px;
                & p {position: relative; font-size: 14px; padding-left: 15px;}
                & p::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #292E41;}
            }
            & .portfolio-bt {display: flex; justify-content: center;
                & button {width: 160px; height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px; margin-right: 5px;}
                & button:last-child {background: #fff; border: 1px solid #E1E5ED; color: #222; margin-right: 0;}
            }
        }
        & .company {
            & .company-scrab {
                > ul {display: grid;
                    > li {position: relative; padding-top: 4px; border-radius: 12px; cursor: pointer;
                        & .front {position: relative; background: #fff; border-radius: 8px; padding: 40px 30px;
                            & .logo {position: relative; display: flex; justify-content: center; padding-top: 40px;
                                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain;}
                            }
                            & .cp {margin: 40px 0 20px;
                                & p {font-size: 18px; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                                & span {font-size: 14px;}
                            }
                            & .info {
                                & p {display: flex; align-items: center; color: #697385;
                                    & strong {font-weight: 400; color: #9AA7BC; margin-right: 8px;}
                                }
                            }
                            & .desc {margin: 20px 0 25px;
                                & p {font-weight: 600; color: #2C9E4F; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                            }
                            & .cate {display: flex; align-items: center; padding-top: 25px; border-top: 1px solid #D1D1D150;
                                & p {font-size: 14px; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 999px;
                                    &.type01 {color: #6270F4; background: #DDE0FF;}
                                    &.type02 {color: #289FF4; background: #D0ECFF;}
                                    &.type03 {color: #DA5AE0; background: #DA5AE020;}
                                    &.type04 {color: #DA5AE0; background: #DA5AE020;}
                                    /* &.type04 {color: #6270F4; background: #F0F2FF;} */
                                }
                                & span {display: flex; align-items: center; font-size: 14px; font-weight: 600; line-height: 1; padding: 5px 10px; border: 1px solid #D4D8E1; border-radius: 999px; color: #697385; margin-left: 5px; background: #fff;
                                    & img {height: 14px; margin-right: 4px;}
                                }
                            }
                            & .favorite {position: absolute; bottom: 40px; right: 30px;
                                & button {
                                    & i {font-size: 20px; color: #EAEDF4;}
                                }
                            }
                        }
                    }
                    &.type03 {grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
                        > li {padding-top: 0; border: 1px solid #CDDDFF; border-radius: 0;
                            & .front {border-radius: 0; padding: 30px; transition: all 0.2s ease-in-out;
                                & .logo {position: absolute; top: 30px; right: 30px; width: 60px; aspect-ratio: 1 / 1; border-radius: 50%; padding: 0; background: #fff;
                                    & img {width: calc(100% - 12px); height: calc(100% - 12px);}
                                }
                                & .cp {margin: 0 0 15px; padding-right: 80px;
                                    & p {font-size: 17px;}
                                }
                                & .info {padding-right: 80px;
                                    & p {font-size: 13px;}
                                }
                                & .desc {
                                    & p {font-size: 14px; color: #0782DA;}
                                }
                                & .favorite {bottom: 30px; right: 30px;
                                    & button {
                                        &.on {
                                            & i {color: #36BE8F;}
                                        }
                                    }
                                }
                            }
                            &:hover {
                                & .front {background: #F4F7FF;}
                            }
                        }
                    }
                }
            }
            & .company-paging {margin-top: 70px;
                > ul {display: flex; justify-content: center; align-items: center;
                    > li {
                        & a {display: block; padding: 0 10px;
                            & p {color: #868686;}
                            &.on p {font-weight: 700; color: #292E41;}
                        }
                    }
                }
            }
        }
        & .estimate {
            & .estimate-list {
                & table {width: 100%; border-top: 1px solid #0F162A; table-layout: fixed;
                    & tr {
                        & td {text-align: center; padding: 18px;
                            & p {font-size: 16px; line-height: 1; color: #222;}
                        }
                        & td.num {width: 100px;}
                        & td.cate {width: 125px;}
                        & td.detail {width: 125px;}
                        & td.subject {width: calc(60% - 350px);}
                        & td.date {width: 10%;}
                        & td.status {width: 10%;}
                        & td.ct {width: 7.5%;}
                        & td.op {width: 7.5%;}
                        & td.es {width: 15%;}
                        & td.none {width: 100%; padding: 40px;}
                    }
                    & thead {background: #F9F9F9;
                        & tr {
                            & td {
                                & p {font-weight: 600;}
                            }
                        }
                    }
                    & tbody {
                        & tr {border-top: 1px solid #CBCBCB;
                            &:last-child {border-bottom: 1px solid #CBCBCB;}
                            & td {
                                &.cate {
                                    & p {display: inline-block; font-size: 14px; line-height: 1; padding: 5px 10px; color: #16A775; background: #36BE8F20; border: 1px solid #36BE8F; border-radius: 999px;}
                                }
                                &.detail {
                                    & p {display: inline-block; font-size: 14px; line-height: 1; padding: 5px 10px; color: #16A775; background: #36BE8F10; border: 1px solid #36BE8F; border-radius: 999px;}
                                }
                                &.subject {text-align: left;
                                    & a {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                                }
                                &.status {
                                    & p {display: inline-block; font-size: 14px; border: 1px solid #292E41; padding: 5px 15px; border-radius: 5px;
                                        &.on {background: #292E41; color: #fff;}
                                    }
                                }
                                &.status {
                                    & p {display: inline-block; font-size: 14px; border: 1px solid #292E41; padding: 5px 15px; border-radius: 5px;
                                        &.new {border: 1px solid #2C9E4F; background: #2C9E4F; color: #fff;}
                                        &.ing {border: 1px solid #2C9E4F; color: #2C9E4F;}
                                    }
                                }
                                &.es {
                                    & a {display: inline-block; font-size: 14px; border: 1px solid #292E41; padding: 5px 15px; color: #222; line-height: 1; border-radius: 5px;}
                                }
                            }
                        }
                    }
                }
            }
            & .estimate-view {
                & .view-box {margin-bottom: 70px;
                    &:last-child {margin-bottom: 0;}
                    & .top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
                        & p {font-size: 18px; font-weight: 600;}
                        & a {display: flex; justify-content: center; align-items: center; width: 160px; height: 44px; border-radius: 5px; background: #2C9E4F; color: #fff;}
                    }
                    & .info {border-top: 1px solid #0F162A;
                        > ul {
                            > li {display: flex; border-bottom: 1px solid #CBCBCB;
                                & .cate {width: 200px; padding: 18px 40px; background: #F9F9F9;
                                    & p {font-weight: 600;}
                                }
                                & .desc {width: calc(100% - 200px); padding: 18px 40px;
                                    & p {}
                                    & a {display: block; margin-bottom: 10px;
                                        &:last-child {margin-bottom: 0;}
                                        & i {margin-right: 5px;}
                                    }
                                    & span {display: inline-block; font-size: 14px; line-height: 1; padding: 5px 15px; background: #2C9E4F; color: #fff; border-radius: 5px;}
                                    & button {display: inline-block; font-size: 14px; line-height: 1; padding: 5px 15px; background: #fff; border: 1px solid #292E41; border-radius: 5px; margin-right: 5px;
                                        &:last-child {margin-right: 0;}
                                    }
                                }
                            }
                        }
                    }
                }
                & .back {display: flex; justify-content: flex-end; margin-top: 70px;
                    & a {display: flex; justify-content: center; align-items: center; width: 160px; height: 44px; font-weight: 600; border-radius: 5px; background: #292E41; color: #fff;}
                }
            }
            & .estimate-write {
                & .con {padding: 25px; border: 1px solid #E8E8E8; border-radius: 10px; margin-bottom: 70px;
                    &:last-child {margin-bottom: 0;}
                    & .text {margin-bottom: 20px;
                        & p {position: relative; font-size: 18px; line-height: 1; font-weight: 600; color: #222; padding-left: 25px;
                            &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 14px; aspect-ratio: 1 / 1; border-radius: 50%; border: 4px solid #2C9E4F; box-sizing: border-box;}
                        }
                    }
                    & .info {
                        > ul {display: flex; justify-content: space-between; flex-wrap: wrap;
                            > li {display: flex; align-items: center; width: calc(100% / 2 - 40px); padding: 10px 0; border-top: 1px dotted #E1E5ED;
                                &:nth-child(-n + 2) {border-top: 0;}
                                & p {width: 170px; color: #222;}
                                & span {width: calc(100% - 170px); color: #666;}
                            }
                        }
                    }
                    & .detail {
                        > ul {
                            > li {display: flex; justify-content: center; align-items: flex-start; border-bottom: 1px dotted #E1E5ED; padding: 20px 0;
                                > *:last-child {margin-right: 0 !important;}
                                & .cate {display: flex; align-items: center; width: 200px; padding: 0 15px 0 0;
                                    & p {line-height: 40px;}
                                    & button {display: flex; justify-content: center; align-items: center; line-height: 1; margin-left: 10px;
                                        & i {font-size: 20px; color: #9AA7BC;}
                                    }
                                    & input[type="text"] {width: 100%; height: 40px; border: 1px solid #E1E5ED; border-radius: 5px; padding: 0 12px;}
                                }
                                & .price {width: calc(100% - 200px);
                                    & .opt {display: flex; margin-bottom: 8px;
                                        &:last-child {margin-bottom: 0;}
                                        & .opt-name {display: flex; width: 400px;
                                            & input[type="text"] {width: 100%; height: 40px; border: 1px solid #E1E5ED; border-radius: 5px; padding: 0 12px;}
                                        }
                                        & .opt-price {display: flex; justify-content: center; align-items: center; width: calc((100% - 440px) / 3); padding: 0 15px;
                                            & p {margin-right: 10px;}
                                            & input[type="text"] {max-width: 200px; width: 100%; height: 40px; border: 1px solid #E1E5ED; border-right: 0; border-radius: 5px 0 0 5px; padding: 0 12px;}
                                            & span {font-size: 15px; color: #8491A7; line-height: 38px; border: 1px solid #E1E5ED; border-left: 0; border-radius: 0 5px 5px 0; padding-right: 12px; pointer-events: none;}
                                        }
                                        > button {display: flex; justify-content: center; align-items: center; line-height: 1; margin-left: 10px;
                                            & i {font-size: 20px; color: #9AA7BC;}
                                        }
                                    }
                                }
                                & .add {width: 155px; height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px;}
                            }
                        }
                    }
                    & .total {display: flex; justify-content: space-between; align-items: center; margin-top: 20px;
                        & p {}
                        & .total-txt {
                            & p {font-size: 24px; font-weight: 600;}
                        }
                        & .total-price {display: flex; align-items: center;
                            & input[type="text"] {position: relative; width: 100%; max-width: 400px; height: 40px; border-radius: 5px; border: 1px solid #e1e5ed; padding: 0 12px;}
                            & p {margin-left: 10px;}
                        }
                    }
                }
                & .bt {display: flex; justify-content: center; margin-top: 70px;
                    & button {display: flex; justify-content: center; align-items: center; width: 160px; height: 44px; font-size: 16px; border-radius: 5px; background: #292E41; color: #fff; margin-right: 5px;}
                    & button:last-child {border: 1px solid #E1E5ED; background: #fff; color: #222; margin-right: 0;}
                }
            }
            & .estimate-complete {width: 100%; max-width: 925px; padding: 40px; border: 1px solid #E8E8E8; border-radius: 10px; margin: 0 auto 70px; text-align: center;
                & p {font-size: 20px; font-weight: 600; margin-bottom: 20px;}
                & span {font-size: 15px; color: #666;}
            }
            & .estimate-paging {margin-top: 70px;
                > ul {display: flex; justify-content: center; align-items: center;
                    > li {
                        & a {display: block; padding: 0 10px;
                            & p {color: #868686;}
                            &.on p {font-weight: 700; color: #292E41;}
                        }
                    }
                }
            }
            & .estimate-bt {display: flex; justify-content: center;
                & button {width: 160px; height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px; margin-right: 5px;}
                & button:last-child {background: #fff; border: 1px solid #E1E5ED; color: #222; margin-right: 0;}
            }
        }
        & .contract {
            & .contract-list {
                & table {width: 100%; border-top: 1px solid #0F162A; table-layout: fixed;
                    & tr {
                        & td {text-align: center; padding: 18px;
                            & p {font-size: 16px; line-height: 1; color: #222;}
                            &.num {width: 100px;}
                            &.cate {width: 125px;}
                            &.detail {width: 125px;}
                            &.subject {width: calc(5% - 250px);}
                            &.date {width: 10%;}
                            &.status {width: 10%;}
                            &.company {width: 10%;}
                            &.ctt {width: 10%;}
                            &.es {width: 10%;}
                            & td.none {width: 100%; padding: 40px;}
                        }
                    }
                    & thead {background: #F9F9F9;
                        & tr {
                            & td {
                                & p {font-weight: 600;}
                            }
                        }
                    }
                    & tbody {
                        & tr {border-top: 1px solid #CBCBCB;
                            &:last-child {border-bottom: 1px solid #CBCBCB;}
                            & td {
                                &.cate {
                                    & p {display: inline-block; font-size: 14px; line-height: 1; padding: 5px 10px; color: #16A775; background: #36BE8F20; border: 1px solid #36BE8F; border-radius: 999px;}
                                }
                                &.detail {
                                    & p {display: inline-block; font-size: 14px; line-height: 1; padding: 5px 10px; color: #16A775; background: #36BE8F10; border: 1px solid #36BE8F; border-radius: 999px;}
                                }
                                &.subject {text-align: left;
                                    & a {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                                }
                                &.status {
                                    & p {display: inline-block; font-size: 14px; border: 1px solid #292E41; padding: 5px 15px; border-radius: 5px;
                                        &.on {background: #292E41; color: #fff;}
                                    }
                                }
                                &.es {
                                    & a {display: inline-block; font-size: 14px; border: 1px solid #292E41; padding: 5px 15px; color: #222; line-height: 1; border-radius: 5px;}
                                }
                            }
                        }
                    }
                }
            }
            & .contract-write {
                & .con {padding: 25px; border: 1px solid #E8E8E8; border-radius: 10px; margin-bottom: 70px;
                    &:last-child {margin-bottom: 0;}
                    & .text {margin-bottom: 20px;
                        & p {position: relative; font-size: 18px; line-height: 1; font-weight: 600; color: #222; padding-left: 25px;
                            &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 14px; aspect-ratio: 1 / 1; border-radius: 50%; border: 4px solid #2C9E4F; box-sizing: border-box;}
                        }
                    }
                    & .info {
                        > ul {
                            > li {display: flex; align-items: flex-start; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px dotted #e1e5ed;
                                &:first-child {padding-top: 0;}
                                &:last-child {padding-bottom: 0; border-bottom: 0;}
                                > div {width: calc(100% - 200px);}
                                & .cate {width: 200px;
                                    & p {position: relative; display: inline-block; line-height: 40px;
                                        &::after {content: ''; position: absolute; top: 50%; right: -15px; transform: translateY(-50%); width: 5px; aspect-ratio: 1 / 1; border-radius: 50%; background: #2C9E4F;}
                                        &.none::after {content: none;}
                                    }
                                }
                                & .desc {display: flex; align-items: center;
                                    & input[type="text"] {width: 100%; max-width: 390px; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 12px;}
                                    & input[type="text"]:read-only {max-width: unset; background: #f3f3f3;}
                                    & textarea {width: 100%; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 12px;}
                                }
                                & .add {position: relative; display: flex; flex-wrap: wrap;
                                    & input[type="text"] {width: 100%; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 12px; margin-top: 10px;}
                                    & input[type="text"]:read-only {max-width: 390px; margin-top: 0;}
                                    > button {width: 100px; height: 40px; border-radius: 5px; background: #292E41; color: #fff; margin-left: 10px; font-size: 16px;}
                                    > .zip {position: absolute; top: 40px; left: 0; background: #fff; border: 1px solid #e1e5ed;}
                                }
                                & .date {display: inline-flex; align-items: center; width: unset; margin-right: 40px;
                                    &:last-child {margin-right: 0;}
                                    & p {margin-right: 10px; color: #222;}
                                    & input[type="text"] {width: 180px; height: 40px; font-size: 15px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 42px 0 12px; background: url("/assets/site/img/sub/ico-calendar.png") no-repeat; background-position: top 50% right 12px; cursor: pointer;}
                                }
                                & .price {display: flex; align-items: center;
                                    & input[type="text"] {width: 100%; max-width: 300px; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-right: 0; border-radius: 5px 0 0 5px; padding-left: 12px;}
                                    & p {border: 1px solid #e1e5ed; line-height: 40px; height: 40px; border-left: 0; border-radius: 0 5px 5px 0; padding-right: 12px; color: #8491A7;}
                                }
                                & .how {
                                    & .type {display: flex; align-items: center; margin-bottom: 10px;
                                        & input[type="radio"] {display: none;}
                                        & label {display: flex; align-items: center; margin-right: 30px;
                                            &:last-child {margin-right: 0;}
                                            & span {display: flex; justify-content: center; align-items: center; width: 30px; aspect-ratio: 1 / 1; border: 1px solid #E1E5ED; border-radius: 5px; background: #fff; transition: all 0.2s;
                                                & i {opacity: 0; transition: all 0.2s;}
                                            }
                                            & p {margin-left: 10px; line-height: 40px;}
                                        }
                                        & input[type="radio"]:checked + label span i {opacity: 1;}
                                        & input[type="radio"]:checked + label p {font-weight: 600;}
                                    }
                                    & .list {
                                        & .list-con {display: flex; align-items: center; height: 40px; margin-bottom: 10px;
                                            &:last-child {margin-bottom: 0;}
                                            & .ct {display: flex; align-items: center;
                                                & p {width: 100px; font-weight: 600; margin-right: 10px;}
                                                & span {}
                                            }
                                            & .dt {display: flex; align-items: center; margin-right: 10px;
                                                & p {width: 100px; font-weight: 600; margin-right: 10px;}
                                                & input[type="text"] {width: 180px; height: 40px; font-size: 15px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 42px 0 12px; background: url("/assets/site/img/sub/ico-calendar.png") no-repeat; background-position: top 50% right 12px; cursor: pointer;}
                                            }
                                            & .per {display: flex; align-items: center; margin-right: 10px;
                                                & span {}
                                                & input[type="text"] {width: 100%; max-width: 300px; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-right: 0; border-radius: 5px 0 0 5px; padding-left: 12px; margin-left: 10px;}
                                                & p {border: 1px solid #e1e5ed; line-height: 40px; height: 40px; border-left: 0; border-radius: 0 5px 5px 0; padding-right: 12px; color: #8491A7;}
                                            }
                                            & .value {display: flex; align-items: center;
                                                & p {border: 1px solid #e1e5ed; line-height: 40px; height: 40px; border-right: 0; border-radius: 5px 0 0 5px; padding-left: 12px; color: #8491A7;}
                                                & input[type="text"] {width: 100%; max-width: 300px; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-left: 0; border-radius: 0 5px 5px 0; padding: 0 12px;}
                                            }
                                            & .ut {display: flex; align-items: center; margin-left: 10px;
                                                & button {display: flex; justify-content: center; align-items: center; line-height: 1; margin-right: 10px;
                                                    &:last-child {margin-right: 0;}
                                                    & i {font-size: 20px; color: #9AA7BC;}
                                                }
                                            }
                                        }
                                    }
                                    & .balance {display: flex; align-items: center; margin-top: 10px;
                                        & .ct {display: flex; align-items: center;
                                            & p {width: 100px; font-weight: 600; margin-right: 10px;}
                                            & span {}
                                        }
                                        & .per {display: flex; align-items: center; margin-right: 10px;
                                            & span {white-space: nowrap;}
                                            & input[type="text"] {width: 100%; max-width: 300px; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-right: 0; border-radius: 5px 0 0 5px; padding-left: 12px; margin-left: 10px;}
                                            & p {border: 1px solid #e1e5ed; line-height: 40px; height: 40px; border-left: 0; border-radius: 0 5px 5px 0; padding-right: 12px; color: #8491A7;}
                                        }
                                        & .value {display: flex; align-items: center;
                                            & input[type="text"] {width: 100%; max-width: 300px; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-right: 0; border-radius: 5px 0 0 5px; padding-left: 12px;}
                                            & p {border: 1px solid #e1e5ed; line-height: 40px; height: 40px; border-left: 0; border-radius: 0 5px 5px 0; padding-right: 12px; color: #8491A7;}
                                        }
                                    }
                                }
                                & .year {display: flex; align-items: center;
                                    & input[type="text"] {width: 100%; max-width: 50px; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-right: 0; border-radius: 5px 0 0 5px; padding-left: 12px;}
                                    & p {border: 1px solid #e1e5ed; line-height: 40px; height: 40px; border-left: 0; border-radius: 0 5px 5px 0; padding-right: 12px; color: #8491A7;}
                                }
                                & .secu {display: flex; align-items: center;
                                    & input[type="text"] {width: 100%; max-width: 50px; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-right: 0; border-radius: 5px 0 0 5px; padding-left: 12px; margin-left: 10px;}
                                    & p {border: 1px solid #e1e5ed; line-height: 40px; height: 40px; border-left: 0; border-radius: 0 5px 5px 0; padding-right: 12px; color: #8491A7; margin-right: 10px;}
                                }
                                & .file {
                                    & .file-box {display: flex;
                                        & input[type="text"] {width: 100%; height: 40px; max-width: 390px; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 12px;}
                                        & input[type="text"]:read-only {background: #f9f9f9;}
                                        & label {display: flex; justify-content: center; align-items: center; width: 100px; height: 40px; border-radius: 5px; background: #697385; color: #fff; margin-left: 10px; font-size: 16px;
                                            & input[type="file"] {display: none;}
                                        }
                                        & button {display: flex; justify-content: center; align-items: center; width: 100px; height: 40px; border-radius: 5px; background: #EAEDF4; margin-left: 10px; font-size: 16px;
                                            & p {}
                                        }
                                    }
                                    & .file-list {display: flex; align-items: center; margin-top: 10px;
                                        & button {display: flex; justify-content: center; align-items: center; width: 100px; height: 40px; border-radius: 5px; background: #EAEDF4; margin-left: 10px; font-size: 16px;
                                            & p {}
                                        }
                                    }
                                }
                                & .bk {gap: 10px;
                                    > input[type="text"] {max-width: 300px;}
                                    > button {width: 100px; height: 40px; border-radius: 5px; background: #292E41; color: #fff; font-size: 16px;}
                                    > select {position: relative; width: 100%; max-width: 180px; height: 40px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 28px 0 12px; background: url("/assets/site/img/common/ico-angle-down.png") no-repeat; background-position: center right 12px; background-size: 16px;}
                                }
                                & .invalid-feedback {width: 100%; margin: 10px 0 0 0; padding-left: 200px;}
                            }
                        }
                    }
                }
                & .bt {display: flex; justify-content: center; margin-top: 70px;
                    & button {display: flex; justify-content: center; align-items: center; width: 160px; height: 44px; font-size: 16px; border-radius: 5px; background: #292E41; color: #fff; margin-right: 5px;}
                    & button:last-child {border: 1px solid #E1E5ED; background: #fff; color: #222; margin-right: 0;}
                }
            }
            & .contract-paging {margin-top: 70px;
                > ul {display: flex; justify-content: center; align-items: center;
                    > li {
                        & a {display: block; padding: 0 10px;
                            & p {color: #868686;}
                            &.on p {font-weight: 700; color: #292E41;}
                        }
                    }
                }
            }
        }
        & .promotion {
            & .promotion-list {
                & table {width: 100%; border-top: 1px solid #0F162A; table-layout: fixed;
                    & tr {
                        & td {text-align: center; padding: 18px;
                            & p {font-size: 16px; line-height: 1; color: #222;}
                        }
                        & td.num {width: 100px;}
                        & td.cate {width: 10%;}
                        & td.detail {width: 10%;}
                        & td.subject {width: calc(100% - 70% - 100px);}
                        & td.date {width: 10%;}
                        & td.grade {width: 10%;}
                        & td.start {width: 10%;}
                        & td.end {width: 10%;}
                        & td.status {width: 10%;}
                        & td.none {width: 100%; padding: 40px;}
                    }
                    & thead {background: #F9F9F9;
                        & tr {
                            & td {
                                & p {font-weight: 600;}
                            }
                        }
                    }
                    & tbody {
                        & tr {border-top: 1px solid #CBCBCB;
                            &.expire td {
                                & p {color: #cbcbcb;}
                                & a {color: #cbcbcb;}
                            }
                            &:last-child {border-bottom: 1px solid #CBCBCB;}
                            & td {}
                            & td.cate {
                                & p {display: inline-block; font-size: 14px; line-height: 1; padding: 5px 10px; color: #16A775; background: #36BE8F20; border: 1px solid #36BE8F; border-radius: 999px;}
                            }
                            & td.detail {
                                & p {display: inline-block; font-size: 14px; line-height: 1; padding: 5px 10px; color: #16A775; background: #36BE8F10; border: 1px solid #36BE8F; border-radius: 999px;}
                            }
                            & td.subject {text-align: left;
                                & a {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                            }
                            & td.grade {
                                & p {display: inline-block; font-family: var(--key-font); font-size: 12px; line-height: 1; border-radius: 5px; padding: 5px;}
                                & p.type01 {background: linear-gradient(90deg, #2C9E4F 0%, #4761F9 100%); background-clip: text; -webkit-background-clip: text; color: transparent; border: 1px solid #16A775;}
                                & p.type02 {color: #07BB9D; border: 1px solid #16A775;}
                                & p.type03 {color: #3675FF; border: 1px solid #3675FF;}
                                & p.type04 {color: #7758FF; border: 1px solid #7758FF;}
                            }
                            & td.status {
                                & p {color: #D6081D;}
                            }
                        }
                    }
                }
            }
            & .promotion-view {
                & .view-box {margin-bottom: 70px;
                    &:last-child {margin-bottom: 0;}
                    & .top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
                        & p {font-size: 18px; font-weight: 600;}
                        & a {display: flex; justify-content: center; align-items: center; width: 160px; height: 44px; border-radius: 5px; background: #2C9E4F; color: #fff;}
                    }
                    & .info {border-top: 1px solid #0F162A;
                        > ul {
                            > li {display: flex; border-bottom: 1px solid #CBCBCB;
                                & .cate {width: 200px; padding: 18px 40px; background: #F9F9F9;
                                    & p {font-weight: 600;}
                                }
                                & .desc {width: calc(100% - 200px); padding: 18px 40px;
                                    & p {
                                        & strong {font-weight: 400; color: #D6081D;}
                                    }
                                    & span {display: inline-block; font-size: 14px; line-height: 1; border-radius: 5px; margin-right: 10px;
                                        &:last-child {margin-right: 0;}
                                        &.dp1 {font-size: 14px; font-weight: 600; color: #36BE8F; background: #36BE8F20; padding: 5px 10px; border: 1px solid #36BE8F; border-radius: 999px;}
                                        &.dp2 {font-size: 14px; font-weight: 600; color: #36BE8F; background: #36BE8F10; padding: 5px 10px; border: 1px solid #36BE8F; border-radius: 999px;}
                                        &.ct1 {font-family: var(--key-font); font-size: 12px; border-radius: 5px; background: linear-gradient(90deg, #2C9E4F 0%, #4761F9 100%); background-clip: text; -webkit-background-clip: text; color: transparent; border: 1px solid #16A775; padding: 5px;}
                                        &.ct2 {font-family: var(--key-font); font-size: 12px; border-radius: 5px; color: #07BB9D; border: 1px solid #16A775; padding: 5px;}
                                        &.ct3 {font-family: var(--key-font); font-size: 12px; border-radius: 5px; color: #3675FF; border: 1px solid #3675FF; padding: 5px;}
                                        &.ct4 {font-family: var(--key-font); font-size: 12px; border-radius: 5px; color: #7758FF; border: 1px solid #7758FF; padding: 5px;}
                                    }
                                }
                            }
                        }
                    }
                    & .tb {
                        & .sc {display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0 0 10px;
                            & input[type="text"] {width: 100%; max-width: 390px; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 12px;}
                            & button {width: 160px; height: 40px; font-size: 16px; font-weight: 600; background: #292E41; color: #fff; border-radius: 5px;}
                        }
                        & .list {border-top: 1px solid #0F162A; border-bottom: 1px solid #cbcbcb;
                            & table {width: 100%;
                                & tr {
                                    & td {text-align: center;
                                        &.num {width: 100px;}
                                        &.cate {width: 150px;}
                                        &.detail {width: 150px;}
                                        &.subject {width: calc(100% - 800px);}
                                        &.date {width: 200px;}
                                        &.edit {width: 200px;}
                                        & p {padding: 15px 0; line-height: 1;}
                                    }
                                }
                                & thead {
                                    & tr {
                                        & td {background: #f9f9f9;
                                            & p {font-weight: 600; text-align: center;}
                                        }
                                    }
                                }
                                & tbody {
                                    & tr {border-top: 1px solid #cbcbcb;
                                        & td {}
                                        & td.cate {
                                            & p {display: inline-block; font-size: 14px; line-height: 1; padding: 5px 10px; color: #16A775; background: #36BE8F20; border: 1px solid #36BE8F; border-radius: 999px;}
                                        }
                                        & td.detail {
                                            & p {display: inline-block; font-size: 14px; line-height: 1; padding: 5px 10px; color: #16A775; background: #36BE8F10; border: 1px solid #36BE8F; border-radius: 999px;}
                                        }
                                        & td.subject {text-align: left;
                                            & a {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                                        }
                                        & td.promotion {
                                            & button {font-size: 14px; line-height: 1; color: #222; padding: 5px 15px; border-radius: 5px; border: 1px solid #292E41; background: #fff;}
                                        }
                                        & td.edit {
                                            & button {font-size: 14px; line-height: 1; color: #222; padding: 5px 15px; border-radius: 5px; border: 1px solid #292E41; background: #fff;}
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                & .back {display: flex; justify-content: flex-end; margin-top: 70px;
                    & a {display: flex; justify-content: center; align-items: center; width: 160px; height: 44px; font-weight: 600; border-radius: 5px; background: #292E41; color: #fff;}
                }
            }
            & .promotion-nav {margin-bottom: 80px;
                > ul {display: flex; justify-content: center;
                    > li {display: flex; justify-content: center; align-items: center; width: 200px; height: 50px; border: 1px solid #E1E5ED; border-radius: 999px; cursor: pointer; margin-right: 10px; color: #222;
                        &:last-child {margin-right: 0;}
                        &.on {border: 1px solid #36BE8F; color: #36BE8F;}
                        & p {font-weight: 600;}
                    }
                }
            }
            & .promotion-write {
                > ul {
                    > li {display: none;
                        &.on {display: block;}
                        & .cate {display: flex; margin-bottom: 70px;
                            & button {display: flex; justify-content: center; align-items: center; font-size: 16px; width: 100%; background: #f9f9f9; color: #222;
                                &:first-child {border-radius: 10px 0 0 10px;}
                                &.ban {margin-left: 20px; background: #fff; border: 1px solid #E1E5ED; border-radius: 10px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 10%);
                                    &.on {border: 1px solid #36BE8F; background: #fff; color: #222;}
                                }
                                &.bdr {border-radius: 0 10px 10px 0;}
                                /* &:nth-last-child(2) {border-radius: 0 10px 10px 0;} */
                                &.on {background: #2C9E4F; color: #fff;}
                                & p {font-weight: 600; line-height: 50px;}
                                & img {margin-left: 10px;}
                            }
                        }
                        & .con {
                            & .info {display: none; justify-content: space-between; align-items: flex-start;
                                &.on {display: flex;}
                                & .img {width: 600px; padding: 40px 60px; background: #F9F9F9; border: 1px solid #EAEDF4; border-radius: 15px;
                                    & img {width: 100%; border: 1px solid #EDEDED; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 5%);}
                                    & .swiper-pagination-bullet-active {background: #2C9E4F;}
                                }
                                & .text {width: calc(100% - 670px);
                                    & .title {margin-bottom: 45px;
                                        & p {position: relative; font-size: 24px; line-height: 1; font-weight: 600; margin-bottom: 20px; padding-left: 24px;
                                            &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 14px; aspect-ratio: 1 / 1; border-radius: 50%; border: 4px solid #2C9E4F; box-sizing: border-box;}
                                        }
                                        & span {font-size: 20px; line-height: 1;
                                            & strong {color: #0782DA;}
                                        }
                                    }
                                    & .list {
                                        > ul {
                                            > li {margin-bottom: 60px;
                                                & .sec {background: #F2F7FF; border-radius: 5px; padding: 10px 15px; margin-bottom: 20px;
                                                    & p {position: relative; font-weight: 600; line-height: 1; padding-left: 20px; color: #697385;
                                                        &::after {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 7px; aspect-ratio: 1 / 1; border-radius: 50%; background: #36BE8F;}
                                                        &::before {content: ''; position: absolute; top: 50%; left: 4px; transform: translateY(-50%); width: 7px; aspect-ratio: 1 / 1; border-radius: 50%; background: #697385;}
                                                    }
                                                }
                                                & .desc {
                                                    & p {position: relative; padding-left: 20px; color: #0F162A; margin-bottom: 5px;
                                                        &::before {content: ''; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 4px; aspect-ratio: 1 / 1; border-radius: 50%; background: #0F162A;}
                                                    }
                                                    & .ct1 {display: inline-block; font-size: 14px; line-height: 1; border-radius: 5px; transform: translateY(-2px); font-family: var(--key-font); font-size: 12px; border-radius: 5px; background: linear-gradient(90deg, #2C9E4F 0%, #4761F9 100%); background-clip: text; -webkit-background-clip: text; color: transparent; border: 1px solid #16A775; padding: 5px;}
                                                    & .ct2 {display: inline-block; font-size: 14px; line-height: 1; border-radius: 5px; transform: translateY(-2px); font-family: var(--key-font); font-size: 12px; border-radius: 5px; color: #07BB9D; border: 1px solid #16A775; padding: 5px;}
                                                    & .ct3 {display: inline-block; font-size: 14px; line-height: 1; border-radius: 5px; transform: translateY(-2px); font-family: var(--key-font); font-size: 12px; border-radius: 5px; color: #3675FF; border: 1px solid #3675FF; padding: 5px;}
                                                    & .ct4 {display: inline-block; font-size: 14px; line-height: 1; border-radius: 5px; transform: translateY(-2px); font-family: var(--key-font); font-size: 12px; border-radius: 5px; color: #7758FF; border: 1px solid #7758FF; padding: 5px;}
                                                    > span {display: block; margin-top: 20px;}
                                                }
                                                & .opt {
                                                    & label {display: flex; align-items: center;
                                                        & input[type="radio"] {display: none;}
                                                        & span {position: relative; display: block; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #D4D8E1;
                                                            &::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: #6A6A6A; border-radius: 50%; opacity: 0; transition: all 0.2s;}
                                                        }
                                                        & p {margin-left: 10px;
                                                            & b {font-weight: 400; color: #0782DA; margin-left: 10px;}
                                                        }
                                                        & input[type="radio"]:checked + span::after {opacity: 1;}
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    & .guide {padding: 15px 20px; border-radius: 10px; background: #f9f9f9;
                                        & p {font-size: 14px; color: #D6081D;}
                                    }
                                    & .bt {display: flex; justify-content: flex-end; margin-top: 35px; padding: 0 35px;
                                        & button {width: 160px; height: 44px; font-size: 16px; border-radius: 5px; border: 1px solid #E1E5ED;}
                                        & button:first-child {background: #292E41; color: #fff; border: 1px solid #292E41; margin-right: 5px;}
                                    }
                                }
                            }
                        }
                    }
                }
            }
            & .promotion-select {width: 100%; max-width: 970px; margin: 0 auto 70px;
                & .product {margin-bottom: 48px;
                    & .name {
                        & p {position: relative; font-size: 24px; line-height: 1; font-weight: 600; padding-left: 24px;
                            &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 14px; aspect-ratio: 1 / 1; border-radius: 50%; border: 4px solid #2C9E4F; box-sizing: border-box;}
                        }
                    }
                    & .info {background: #F9F9F9; border: 1px solid #E8E8E8; border-radius: 10px; margin: 20px 0;
                        > ul {display: flex; padding: 40px;
                            > li {
                                &:first-child {width: 150px; border-right: 1px solid #E8E8E8;}
                                &:nth-child(2) {width: 250px; padding: 0 20px; border-right: 1px solid #E8E8E8;}
                                &:last-child {width: calc(100% - 400px); text-align: right;}
                                & span {font-size: 14px; color: #8491A7;}
                                & p {font-size: 14px; color: #697385; white-space: nowrap;
                                    & strong {font-size: 18px; color: #292E41;}
                                }
                            }
                        }
                    }
                }
                & .total {margin-bottom: 20px;
                    & p {color: #666;}
                }
                & .list {
                    & table {width: 100%; border-top: 1px solid #0F162A; table-layout: fixed;
                        & tr {
                            & td {text-align: center; padding: 18px;
                                & p {font-size: 16px; line-height: 1; color: #222;}
                            }
                            & td.check {width: 70px;
                                & input[type="radio"] {display: none;}
                                & label {display: flex; justify-content: center; align-items: center; width: 30px; aspect-ratio: 1 / 1; margin: 0 auto; border: 1px solid #E1E5ED; border-radius: 5px; background: #fff; transition: all 0.2s;
                                    & i {opacity: 0; transition: all 0.2s;}
                                }
                                & input[type="radio"]:checked + label {background: #f9f9f9;}
                                & input[type="radio"]:checked + label i {opacity: 1;}
                            }
                            & td.num {width: 100px;}
                            & td.cate {width: 10%;}
                            & td.detail {width: 15%;}
                            & td.subject {width: calc(100% - 40% - 170px);}
                            & td.date {width: 15%;}
                            & td.none {width: 100%; padding: 40px;}
                        }
                        & thead {background: #F9F9F9;
                            & tr {
                                & td {
                                    & p {font-weight: 600;}
                                }
                            }
                        }
                        & tbody {
                            & tr {border-top: 1px solid #CBCBCB;
                                &:last-child {border-bottom: 1px solid #CBCBCB;}
                                & td {}
                                & td.check {
                                }
                                & td.cate {
                                    & p {display: inline-block; font-size: 14px; line-height: 1; padding: 5px 10px; color: #16A775; background: #36BE8F20; border: 1px solid #36BE8F; border-radius: 999px;}
                                }
                                & td.detail {
                                    & p {display: inline-block; font-size: 14px; line-height: 1; padding: 5px 10px; color: #16A775; background: #36BE8F10; border: 1px solid #36BE8F; border-radius: 999px;}
                                }
                                & td.subject {text-align: left;
                                    & a {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                                }
                            }
                        }
                    }
                }
                & .upload {padding: 25px; background: #fff; border: 1px solid #E8E8E8; border-radius: 10px; margin: 20px auto 70px;
                    > ul {
                        > li {display: flex; justify-content: flex-end; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px dotted #E1E5ED;
                            & .cate {width: 120px; height: 40px; margin-right: 20px;
                                & p {position: relative; display: inline-block; font-size: 16px; line-height: 40px; color: #222; padding-right: 15px;}
                                & p::before {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 5px; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--basic-color);}
                                & p.none::before {content: none;}
                            }
                            & .con {display: flex; align-items: center; width: calc(100% - 140px); margin-bottom: 10px;
                                > * {margin: 0 5px;}
                                > *:first-child {margin-left: 0;}
                                > *:last-child {margin-right: 0;}
                                & input[type="text"], & input[type="password"], & input[type="number"] {width: 100%; max-width: 390px; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 12px;}
                                & input[type="button"] {width: 100px; height: 40px; border-radius: 5px; background: #292E41; color: #fff;}
                                & textarea {width: 100%; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 12px;}
                                & select {position: relative; width: 100%; max-width: 155px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 28px 0 12px; background: url("/assets/site/img/common/ico-angle-down.png") no-repeat; background-position: center right 12px; background-size: 16px;}
                                & select.mail {max-width: 280px;}
                                & .invalid-feedback {white-space: nowrap;}
                                & .ck {display: flex; align-items: center; margin-right: 60px;
                                    &:last-child {margin-right: 0;}
                                    & input[type="radio"] {display: none;}
                                    & label {position: relative; padding-left: 46px;
                                        &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 26px; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid #E1E5ED; transition: all 0.2s;}
                                        &::after {content: ''; position: absolute; top: 50%; left: 8px; transform: translateY(-50%); width: 13px; aspect-ratio: 1 / 1; border-radius: 50%; background: #6A6A6A; opacity: 0; transition: all 0.2s;}
                                    }
                                    & input[type="radio"]:checked + label::after {opacity: 1;}
                                }
                            }
                            & .con:last-child {margin-bottom: 0;}
                            & .desc {width: calc(100% - 140px); padding: 0 10px;
                                & p {position: relative; font-size: 14px; color: #697385; padding: 0 10px;}
                                & p.bold {font-weight: 700;}
                                & p::before {content: ''; position: absolute; top: 9px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #697385;}
                            }
                            & .thumbs {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: calc(100% - 140px); margin-bottom: 10px;
                                & label {position: relative; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; aspect-ratio: 1.25 / 1; border: 1px solid #E1E5ED; border-radius: 5px;
                                    & img {}
                                    & p {width: 100%; font-size: 14px; line-height: 1; text-align: center; margin-top: 10px;}
                                    & input[type="file"] {display: none;}
                                    & .img_preview, .img_preview1 {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 5px;
                                        & button {position: absolute; z-index: 2; top: 6px; right: 6px; font-size: 12px; border-radius: 4px; background: #fff; color: #A3A3A3; padding: 4px 8px; border: 1px solid #eee;}
                                        & button {position: absolute; z-index: 2; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 4px;}
                                    }
                                    & .banner_preview, .banner_preview1 {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 5px;
                                        & img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
                                        & button {position: absolute; z-index: 2; top: 6px; right: 6px; font-size: 12px; border-radius: 4px; background: #fff; color: #A3A3A3; padding: 4px 8px; border: 1px solid #eee;}
                                    }
                                }
                            }
                            & .file {display: flex; align-items: center; width: calc(100% - 140px); margin-bottom: 10px;
                                & label {display: flex; justify-content: center; align-items: center; width: 100px; height: 40px; font-size: 16px; border: 1px solid #292E41; border-radius: 5px;}
                                & input[type="file"] {display: none;}
                                & p {font-size: 14px; color: #697385; margin-left: 10px;}
                            }
                        }
                        > li:first-child {padding-top: 0;}
                        > li:last-child {padding-bottom: 0; border-bottom: 0;}
                    }
                }
            }
            & .promotion-pay {width: 100%; max-width: 970px; margin: 0 auto 70px;
                & .con {margin-bottom: 70px;
                    &:last-child {margin-bottom: 0;}
                    & .cate {margin-bottom: 20px;
                        & p {font-size: 24px; line-height: 1; font-weight: 600;}
                    }
                    & .info {
                        & table {width: 100%; border: 1px solid #E8E8E8;
                            & tr {
                                & td {text-align: center; padding: 20px 0;
                                    &.name {width: 15%;}
                                    &.date {width: 30%;}
                                    &.subject {width: calc(100% - 60%);}
                                    &.price {width: 15%;}
                                }
                            }
                            & thead {
                                & tr {background: #F8F9FB;
                                    & td {  
                                        & p {font-size: 14px;}
                                    }
                                }
                            }
                            & tbody {
                                & tr {
                                    & td {
                                        & p {font-size: 18px;}
                                    }
                                }
                            }
                        }
                    }
                    & .sale {border: 1px solid #E8E8E8; background: #f9f9f9; padding: 40px;
                        > ul {
                            > li {display: flex; justify-content: center; align-items: center; margin-bottom: 15px;
                                &:last-child {margin-bottom: 0;}
                                & span {width: 100%; max-width: 100px; font-size: 14px; font-weight: 600; color: #8491A7;}
                                & p {width: 100%; max-width: 300px; font-size: 18px; font-weight: 600;}
                                & select {position: relative; width: 100%; max-width: 300px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 28px 0 12px; background: url("/assets/site/img/common/ico-angle-down.png") no-repeat; background-position: center right 12px; background-size: 16px; background-color: #fff;}
                            }
                        }
                    }
                    & .total {display: flex; align-items: flex-start; padding: 30px 80px; background: #222;
                        & .ea {display: flex; align-items: center; padding-right: 35px; margin-right: 35px;
                            & span {font-size: 14px; color: #A3A3A3; font-weight: 600;}
                            & p {font-size: 18px; color: #fff; font-weight: 600; margin-left: 10px;}
                        }
                        & .price {display: flex; justify-content: space-between; align-items: center; width: 100%;
                            & .left {
                                & p {display: flex; align-items: center; font-size: 14px; color: #A3A3A3; font-weight: 600;
                                    & strong {font-size: 18px; color: #fff; font-weight: 600; margin-left: 10px;}
                                }
                            }
                            & .right {border-bottom: 1px solid #A3A3A3;
                                & p {font-size: 14px; color: #A3A3A3; font-weight: 600;
                                    & strong {font-size: 18px; font-weight: 600; color: #FF495C; margin-left: 40px;}
                                }
                            }
                        }
                    }
                }
            }
            & .promotion-complete {width: 100%; max-width: 925px; padding: 40px; border: 1px solid #E8E8E8; border-radius: 10px; margin: 0 auto 70px; text-align: center;
                & .text {
                    & p {font-size: 20px; font-weight: 600; margin-bottom: 20px;}
                    & span {font-size: 15px; color: #666;}
                }
                & .info {margin-top: 40px; padding: 40px; background: #F9F9F9; border: 1px solid #E8E8E8; border-radius: 10px;
                    > ul {display: flex; justify-content: center;
                        > li {width: calc(100% / 3); text-align: center; border-right: 1px solid #E8E8E8;
                            &:last-child {border-right: 0;}
                            & span {display: block; font-size: 14px; line-height: 1; color: #8491A7; margin-bottom: 15px;}
                            & p {font-size: 14px; color: #697385;
                                & strong {font-size: 18px; font-weight: 600; color: #292E41;}
                            }
                        }
                    }
                }
            }
            & .promotion-complete {width: 100%; max-width: 925px; padding: 40px; border: 1px solid #E8E8E8; border-radius: 10px; margin: 0 auto 70px; text-align: center;
                & .text {
                    & p {font-size: 20px; font-weight: 600; margin-bottom: 20px;}
                    & span {font-size: 15px; color: #666;}
                }
                & .info {margin-top: 40px; padding: 40px; background: #F9F9F9; border: 1px solid #E8E8E8; border-radius: 10px;
                    > ul {display: flex; justify-content: center;
                        > li {width: calc(100% / 3); text-align: center; border-right: 1px solid #E8E8E8;
                            &:last-child {border-right: 0;}
                            & span {display: block; font-size: 14px; line-height: 1; color: #8491A7; margin-bottom: 15px;}
                            & p {font-size: 14px; color: #697385;
                                & strong {font-size: 18px; font-weight: 600; color: #292E41;}
                            }
                        }
                    }
                }
            }
            & .promotion-fail {width: 100%; max-width: 925px; padding: 40px; border: 1px solid #E8E8E8; border-radius: 10px; margin: 0 auto 70px; text-align: center;
                & .text {
                    & p {font-size: 20px; font-weight: 600;}
                }
                & .info {margin-top: 40px; padding: 40px; background: #F9F9F9; border: 1px solid #E8E8E8; border-radius: 10px;
                    & span {display: block; font-size: 15px; color: #666;}
                }
            }
            & .promotion-bt {display: flex; justify-content: center;
                & button {width: 160px; height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px; margin-right: 5px;}
                & button:last-child {background: #fff; border: 1px solid #E1E5ED; color: #222; margin-right: 0;}                
                & a {display: flex; justify-content: center; align-items: center; width: 160px; height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px; margin-right: 5px;}
                & a:last-child {background: #fff; border: 1px solid #E1E5ED; color: #222; margin-right: 0;}
            }
            & .promotion-paging {margin-top: 70px;
                > ul {display: flex; justify-content: center; align-items: center;
                    > li {
                        & a {display: block; padding: 0 10px;
                            & p {color: #868686;}
                            &.on p {font-weight: 700; color: #292E41;}
                        }
                    }
                }
            }
        }
        & .payment {
            & .payment-list {
                & table {width: 100%; border-top: 1px solid #0F162A; table-layout: fixed;
                    & tr {
                        & td {text-align: center; padding: 18px;
                            & p {font-size: 16px; line-height: 1; color: #222;}
                        }
                        & td.num {width: 100px;}
                        & td.order {width: 15%;}
                        & td.cate {width: 10%;}
                        & td.subject {width: calc(100% - 70% - 100px); padding: 0 10px;}
                        & td.status {width: 5%;}
                        & td.grade {width: 10%;}
                        & td.method {width: 10%;}
                        & td.price {width: 10%;}
                        & td.date {width: 10%;}
                        & td.none {width: 100%; padding: 40px;}
                    }
                    & thead {background: #F9F9F9;
                        & tr {
                            & td {
                                & p {font-weight: 600;}
                            }
                        }
                    }
                    & tbody {
                        & tr {border-top: 1px solid #CBCBCB;
                            &:last-child {border-bottom: 1px solid #CBCBCB;}
                            & td {}
                            & td.grade {
                                & .ct1 {font-family: var(--key-font); font-size: 12px; border-radius: 5px; background: linear-gradient(90deg, #2C9E4F 0%, #4761F9 100%); background-clip: text; -webkit-background-clip: text; color: transparent; border: 1px solid #16A775; padding: 5px;}
                                & .ct2 {font-family: var(--key-font); font-size: 12px; border-radius: 5px; color: #07BB9D; border: 1px solid #16A775; padding: 5px;}
                                & .ct3 {font-family: var(--key-font); font-size: 12px; border-radius: 5px; color: #3675FF; border: 1px solid #3675FF; padding: 5px;}
                                & .ct4 {font-family: var(--key-font); font-size: 12px; border-radius: 5px; color: #7758FF; border: 1px solid #7758FF; padding: 5px;}
                            }
                            & td.subject {text-align: left;
                                & a {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                            }
                        }
                    }
                }
            }
            & .payment-view {
                & .view-box {margin-bottom: 70px;
                    &:last-child {margin-bottom: 0;}
                    & .top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
                        & p {font-size: 18px; font-weight: 600;}
                        & a {display: flex; justify-content: center; align-items: center; width: 160px; height: 44px; border-radius: 5px; background: #2C9E4F; color: #fff;}
                    }
                    & .info {border-top: 1px solid #0F162A;
                        > ul {
                            > li {display: flex; border-bottom: 1px solid #CBCBCB;
                                & .cate {width: 200px; padding: 18px 40px; background: #F9F9F9;
                                    & p {font-weight: 600;}
                                }
                                & .desc {width: calc(100% - 200px); padding: 18px 40px;
                                    & p {
                                        & strong {font-weight: 400; color: #D6081D;}
                                    }
                                    & span {display: inline-block; font-size: 14px; line-height: 1; border-radius: 5px; margin-right: 10px;
                                        &:last-child {margin-right: 0;}
                                        &.dp1 {font-size: 14px; font-weight: 600; color: #36BE8F; background: #36BE8F20; padding: 5px 10px; border: 1px solid #36BE8F; border-radius: 999px;}
                                        &.dp2 {font-size: 14px; font-weight: 600; color: #36BE8F; background: #36BE8F10; padding: 5px 10px; border: 1px solid #36BE8F; border-radius: 999px;}
                                        &.ct1 {font-family: var(--key-font); font-size: 12px; border-radius: 5px; background: linear-gradient(90deg, #2C9E4F 0%, #4761F9 100%); background-clip: text; -webkit-background-clip: text; color: transparent; border: 1px solid #16A775; padding: 5px;}
                                        &.ct2 {font-family: var(--key-font); font-size: 12px; border-radius: 5px; color: #07BB9D; border: 1px solid #16A775; padding: 5px;}
                                        &.ct3 {font-family: var(--key-font); font-size: 12px; border-radius: 5px; color: #3675FF; border: 1px solid #3675FF; padding: 5px;}
                                        &.ct4 {font-family: var(--key-font); font-size: 12px; border-radius: 5px; color: #7758FF; border: 1px solid #7758FF; padding: 5px;}
                                    }
                                }
                            }
                        }
                    }
                }
                & .back {display: flex; justify-content: flex-end; margin-top: 70px;
                    & a {display: flex; justify-content: center; align-items: center; width: 160px; height: 44px; font-weight: 600; border-radius: 5px; background: #292E41; color: #fff;}
                }
            }
            & .payment-confirm {width: 100%; max-width: 640px; padding: 40px; border: 1px solid #E8E8E8; border-radius: 10px; margin: 0 auto 70px; text-align: center;
                & .text {margin-bottom: 40px;
                    & p {font-size: 20px; font-weight: 600;}
                }
                & .write {display: flex; justify-content: center; align-items: center;
                    & p {font-size: 14px; margin-right: 20px;}
                    & input[type="text"] {width: 100%; max-width: 390px; height: 40px; border: 1px solid #E1E5ED; border-radius: 5px; padding: 0 15px;}
                }
            }
            & .payment-bt {display: flex; justify-content: center;
                & button {width: 160px; height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px; margin-right: 5px;}
                & button:last-child {background: #fff; border: 1px solid #E1E5ED; color: #222; margin-right: 0;}
            }
            & .payment-paging {margin-top: 70px;
                > ul {display: flex; justify-content: center; align-items: center;
                    > li {
                        & a {display: block; padding: 0 10px;
                            & p {color: #868686;}
                            &.on p {font-weight: 700; color: #292E41;}
                        }
                    }
                }
            }
        }
        & .coupon {
            & .coupon-add {display: flex; justify-content: center; align-items: center; background: #F9F9F9; border-radius: 10px; border: 1px solid #E8E8E8; padding: 25px 0; margin-bottom: 50px;
                & input[type="text"] {width: 100%; max-width: 390px; height: 40px; border: 1px solid #E1E5ED; border-radius: 5px; padding: 0 15px;}
                & button {width: 100px; height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px; margin-left: 10px;}
            }
            & .coupon-list {width: 100%; max-width: 1024px; margin: 0 auto;
                > ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px;
                    > li {background: #F5FEF8; border: 1px solid #C5EEDE50; border-radius: 10px; padding: 25px 30px;
                        & .per {
                            & p {font-size: 26px; font-weight: 600; line-height: 1;}
                        }
                        & .name {margin: 10px 0;
                            & p {font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
                        }
                        & .info {display: flex; justify-content: space-between; align-items: center;
                            & .left {display: flex; align-items: center;
                                & p {font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 8px; border-radius: 999px; margin-right: 5px;
                                    &:last-child {margin-right: 0;}
                                    &.ct1 {background: #36BE8F; color: #fff;}
                                    &.ct2 {background: #697385; color: #fff;}
                                }
                            }
                            & .right {display: flex;
                                & p {font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 8px; border: 1px solid #D4D8E1; border-radius: 999px; background: #fff; color: #868686; margin-right: 5px;
                                    &:last-child {margin-right: 0;}
                                }
                            }
                        }
                        & .con {display: flex; margin-top: 15px; padding-top: 15px; border-top: 1px dotted #CBCBCB;
                            & p {font-size: 12px; font-weight: 600; color: #868686; margin-right: 10px;}
                            & span {font-size: 12px; font-weight: 600; color: #868686;}
                        }
                        &.off {background: #F8F9FB;
                            & .per {
                                & p {color: #D4D8E1;}
                            }
                            & .name {
                                & p {color: #D4D8E1;}
                            }
                            & .info {
                                & .left {
                                    & p {background: #D4D8E1;}
                                }
                            }
                            & .con {border-top: 1px dotted #D4D8E1;
                                & p {color: #D4D8E1;}
                                & span {color: #D4D8E1;}
                            }
                        }
                        &.no-data {background: 0; border: none;}
                    }
                }
            }
            & .coupon-bt {display: flex; justify-content: center; margin-top: 70px;
                & button {width: 160px; height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px; margin-right: 5px;}
                & button:last-child {background: #fff; border: 1px solid #E1E5ED; color: #222; margin-right: 0;}
            }
        }
        & .inquiry {
            & .inquiry-list {
                & table {width: 100%; border-top: 1px solid #0F162A; table-layout: fixed;
                    & tr {
                        & td {text-align: center; padding: 18px;
                            & p {font-size: 16px; line-height: 1; color: #222;}
                        }
                        & td.num {width: 5%;}
                        & td.cate {width: 10%;}
                        & td.subject {width: calc(100% - 35%);}
                        & td.date {width: 10%;}
                        & td.status {width: 10%;}
                        & td.none {width: 100%; padding: 40px;}
                    }
                    & thead {background: #F9F9F9;
                        & tr {
                            & td {
                                & p {font-weight: 600;}
                            }
                        }
                    }
                    & tbody {
                        & tr {border-top: 1px solid #CBCBCB;
                            &:last-child {border-bottom: 1px solid #CBCBCB;}
                            & td {}
                            & td.subject {text-align: left;
                                & a {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                            }
                            & td.status {
                                & p {display: inline-block; font-size: 14px; border: 1px solid #292E41; padding: 5px 15px; border-radius: 5px;
                                    &.on {background: #292E41; color: #fff;}
                                }
                            }
                        }
                    }
                }
            }
            & .inquiry-view {
                & .con {border-top: 1px solid #292E41; border-bottom: 1px solid #CBCBCB;
                    & .info {display: flex; align-items: center; padding: 18px 0; background: #f9f9f9; border-bottom: 1px solid #CBCBCB;
                        & .subject {width: calc(100% - 350px); padding: 0 36px;
                            & p {font-size: 18px; font-weight: 600; line-height: 24px;}
                        }
                        & .date {width: 200px; text-align: center;
                            & p {line-height: 24px;}
                        }
                        & .cate {width: 150px; padding: 0 36px;
                            & p {font-size: 14px; line-height: 1; padding: 5px 15px; border: 1px solid #292E41; border-radius: 5px;}
                        }
                    }
                    & .desc {padding: 40px 40px 0;}
                    & .bt {display: flex; justify-content: flex-end; padding: 40px;
                        & button {width: 160px; height: 44px; background: #D6081D; border-radius: 5px; font-size: 16px; font-weight: 500; color: #fff;}
                    }
                }
                & .reply {display: flex; justify-content: space-between; align-items: flex-start; padding: 40px;
                    & .left {
                        & p {display: flex; justify-content: center; align-items: center; width: 30px; aspect-ratio: 1 / 1; border-radius: 50%; background: #2C9E4F; color: #fff;}
                    }
                    & .right {width: calc(100% - 70px);
                        & .subject {display: flex; align-items: center; color: #222; margin-bottom: 20px;
                            & p {width: 100%; font-size: 18px; font-weight: 600; padding-right: 100px;}
                            & span {white-space: nowrap;}
                            & input[type="text"] {width: 100%; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 12px;}
                        }
                        & .desc {
                            & p {}
                            & textarea {width: 100%; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 12px;}
                            & button {width: 160px; height: 44px; border-radius: 5px; font-size: 16px; background: #292E41; color: #fff;}
                        }
                    }
                }
                & .nav {border-top: 1px solid #CBCBCB;
                    > ul {
                        > li {display: flex; border-bottom: 1px solid #CBCBCB;
                            & .left {display: flex; justify-content: center; width: 200px; background: #F9F9F9;
                                & p {line-height: 60px; color: #222;}
                                & p i {margin-right: 10px;}
                            }
                            & .right {display: flex; align-items: center; width: calc(100% - 200px);
                                & a {width: calc(100% - 200px); line-height: 60px; padding: 0 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #222;}
                                & a i {}
                                & span {width: 200px; text-align: center; color: #222;}
                            }
                        }
                    }
                }
                & .back {display: flex; justify-content: flex-end; margin-top: 20px;
                    & button {width: 160px; height: 44px; background: #292E41; border-radius: 5px; font-size: 16px; font-weight: 500; color: #fff;}
                }
            }
            & .inquiry-write {
                > ul {padding: 0 25px;
                    > li {display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 0; border-bottom: 1px dotted #E1E5ED;
                        & .cate {width: 120px;
                            p {position: relative; display: inline-block; line-height: 40px;
                                &::after {content: ''; position: absolute; top: 50%; right: -15px; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #2C9E4F;}
                            }
                        }
                        & .desc {display: flex; align-items: center; flex-wrap: wrap; width: calc(100% - 140px);
                            & select {}
                            & input[type="text"] {width: 100%; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 12px;}
                            & input[type="text"]:read-only {max-width: 390px;}
                            & input[type="file"] {display: none;}
                            & label {display: flex; justify-content: center; align-items: center; width: 100px; height: 40px; background: #292E41; color: #fff; border-radius: 5px; margin-left: 10px;}
                            & textarea {width: 100%; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 12px;}
                            & select {position: relative; width: 100%; max-width: 390px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 28px 0 12px; background: url("/assets/site/img/common/ico-angle-down.png") no-repeat; background-position: center right 12px; background-size: 16px;}
                            & p {position: relative; width: 100%; font-size: 14px; margin-top: 10px; padding: 0 20px;
                                &::before {content: ''; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); width: 4px; height: 4px; background: #697385; border-radius: 50%;}
                            }
                        }
                    }
                    > li:last-child {border-bottom: 0;}
                }
            }
            & .inquiry-paging {margin-top: 70px;
                > ul {display: flex; justify-content: center; align-items: center;
                    > li {
                        & a {display: block; padding: 0 10px;
                            & p {color: #868686;}
                            &.on p {font-weight: 700; color: #292E41;}
                        }
                    }
                }
            }
            & .inquiry-bt {display: flex; justify-content: center; align-items: center; margin-top: 70px;
                & button {width: 160px; height: 44px; border-radius: 5px; font-size: 16px; background: #292E41; color: #fff;}
                & button:last-child {border: 1px solid #E1E5ED; background: #fff; color: #222; margin-left: 5px;}
            }
        }
        & .call {
            & .call-list {
                & table {width: 100%; border-top: 1px solid #0F162A; table-layout: fixed;
                    & tr {
                        & td {text-align: center; padding: 18px;
                            &.num {width: 100px;}
                            &.name {width: 150px;}
                            &.subject {width: 10%;}
                            &.desc {width: calc(70% - 400px);}
                            &.date {width: 10%;}
                            &.file {width: 10%;}
                            &.es {width: 150px;}
                            &.none {width: 100%; padding: 40px;}
                            & p {font-size: 16px; line-height: 1; color: #222;}
                        }
                    }
                    & thead {background: #F9F9F9;
                        & tr {
                            & td {
                                & p {font-weight: 600;}
                            }
                        }
                    }
                    & tbody {
                        & tr {border-top: 1px solid #CBCBCB;
                            &:last-child {border-bottom: 1px solid #CBCBCB;}
                            & td {
                                &.desc {text-align: left;
                                    & p {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                                }
                                &.status {
                                    & p {display: inline-block; font-size: 14px; border: 1px solid #292E41; padding: 5px 15px; border-radius: 5px;
                                        &.on {background: #292E41; color: #fff;}
                                    }
                                }
                                &.es {
                                    & a {display: inline-block; font-size: 14px; border: 1px solid #292E41; padding: 5px 15px; color: #222; line-height: 1; border-radius: 5px;}
                                }
                            }
                        }
                    }
                }
            }
            & .call-view {
                & .con {border-top: 1px solid #292E41; border-bottom: 1px solid #CBCBCB;
                    & .info {border-bottom: 1px solid #CBCBCB;
                        > ul {display: flex;
                            > li {display: flex; width: calc(100% / 3);
                                & p {width: 150px; font-weight: 600; background: #f9f9f9; padding: 15px 20px; text-align: center;}
                                & span {width: calc(100% - 150px); padding: 15px 20px;}
                            }
                        }
                    }
                    & .desc {padding: 40px;}
                    & .bt {display: flex; justify-content: flex-end; padding: 40px;
                        & button {width: 160px; height: 44px; background: #D6081D; border-radius: 5px; font-size: 16px; font-weight: 500; color: #fff;}
                    }
                }
                & .reply {display: flex; justify-content: space-between; align-items: flex-start; padding: 40px;
                    & .left {
                        & p {display: flex; justify-content: center; align-items: center; width: 30px; aspect-ratio: 1 / 1; border-radius: 50%; background: #2C9E4F; color: #fff;}
                    }
                    & .right {width: calc(100% - 70px);
                        & .subject {display: flex; align-items: center; color: #222; margin-bottom: 20px;
                            & p {width: 100%; font-size: 18px; font-weight: 600; padding-right: 100px;}
                            & span {white-space: nowrap;}
                        }
                        & .desc {
                            & p {}
                        }
                    }
                }
                & .nav {border-top: 1px solid #CBCBCB;
                    > ul {
                        > li {display: flex; border-bottom: 1px solid #CBCBCB;
                            & .left {display: flex; justify-content: center; align-items: center; width: 200px; background: #F9F9F9;
                                & p {line-height: 60px; color: #222;}
                                & p i {margin-right: 10px;}
                            }
                            & .right {display: flex; align-items: center; flex-wrap: wrap; width: calc(100% - 200px);
                                & a {width: calc(100% - 200px); padding: 10px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #222;}
                                & a i {}
                                & span {width: 200px; text-align: center; color: #222;}
                            }
                        }
                    }
                }
                & .back {display: flex; justify-content: flex-end; margin-top: 20px;
                    & button {width: 160px; height: 44px; background: #292E41; border-radius: 5px; font-size: 16px; font-weight: 500; color: #fff;}
                }
            }
            & .call-paging {margin-top: 70px;
                > ul {display: flex; justify-content: center; align-items: center;
                    > li {
                        & a {display: block; padding: 0 10px;
                            & p {color: #868686;}
                            &.on p {font-weight: 700; color: #292E41;}
                        }
                    }
                }
            }
        }
        & .edit {width: 100%; max-width: 900px; margin: 0 auto;
            & .edit-form {padding: 25px; background: #fff; border: 1px solid #E8E8E8; border-radius: 10px;
                > ul {
                    > li {display: flex; justify-content: flex-end; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px dotted #E1E5ED;
                        & .cate {width: 120px; height: 40px; margin-right: 20px;
                            & p {position: relative; display: inline-block; font-size: 16px; line-height: 40px; color: #222; padding-right: 15px;}
                            & p::before {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 5px; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--basic-color);}
                            & p.none::before {content: none;}
                        }
                        & .con {display: flex; align-items: center; width: calc(100% - 140px); margin-bottom: 10px;
                            > * {margin: 0 5px;}
                            > *:first-child {margin-left: 0;}
                            > *:last-child {margin-right: 0;}
                            & input[type="text"], & input[type="password"] {width: 100%; max-width: 390px; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 12px;}
                            & input[type="submit"] {width: 100px; height: 40px; border-radius: 5px; background: #292E41; color: #fff;}
                            & input[type="text"]:read-only {background: #F3F3F3; color: #A3A3A3;}
                            & button {width: 100px; height: 40px; border-radius: 5px; background: #292E41; color: #fff; font-size: 16px;}
                            & select {position: relative; width: 100%; max-width: 155px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 28px 0 12px; background: url("/assets/site/img/common/ico-angle-down.png") no-repeat; background-position: center right 12px; background-size: 16px;}
                            & select.mail {max-width: 280px;}
                            & textarea {width: 100%; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 12px;}
                            & .invalid-feedback {white-space: nowrap;}
                        }
                        & .con:last-child {margin-bottom: 0;}
                        & .desc {width: calc(100% - 140px); padding: 0 10px;
                            & p {position: relative; font-size: 14px; color: #697385; padding: 0 10px;}
                            & p.bold {font-weight: 700;}
                            & p::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: #697385;}
                        }
                        & .thumbs {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: calc(100% - 140px); margin-bottom: 10px;
                            & label {position: relative; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; aspect-ratio: 1.25 / 1; border: 1px solid #E1E5ED; border-radius: 5px;
                                & img {}
                                & p {width: 100%; line-height: 1; text-align: center; margin-top: 10px;}
                                & input[type="file"] {display: none;}
                                & .img_preview, .img_preview1 {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 5px; overflow: hidden;
                                    & img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
                                    & button {position: absolute; z-index: 2; top: 6px; right: 6px; font-size: 12px; border-radius: 4px; background: #fff; color: #A3A3A3; padding: 4px 8px; border: 1px solid #eee;}
                                }
                            }
                        }
                        & .file {display: flex; align-items: center; width: calc(100% - 140px); margin-bottom: 10px;
                            & label {display: flex; justify-content: center; align-items: center; width: 100px; height: 40px; font-size: 16px; border: 1px solid #292E41; border-radius: 5px;}
                            & input[type="file"] {display: none;}
                            & p {font-size: 14px; color: #697385; margin-left: 10px;}
                        }
                        & .dvs {display: flex; align-items: center; flex-wrap: wrap; width: calc(100% - 140px); gap: 10px 5px;
                            & select {position: relative; width: calc(100% / 3 - 4px); height: 40px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 28px 0 12px; background: url("/assets/site/img/common/ico-angle-down.png") no-repeat; background-position: center right 12px; background-size: 16px;}
                            & input[type="text"] {width: 100%; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 12px;}
                            & input[type="text"]:read-only {background: #F3F3F3; color: #A3A3A3;}
                        }
                    }
                    > li:first-child {padding-top: 0;}
                    > li:last-child {padding-bottom: 0; border-bottom: 0;}
                }
            }
            & .edit-desc {padding: 15px 20px; border-radius: 10px; background: #F9F9F9; margin: 20px 0 70px;
                & p {position: relative; font-size: 14px; padding-left: 15px;}
                & p::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #292E41;}
            }
            & .edit-bt {display: flex; justify-content: center;
                & button {width: 160px; height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px; margin-right: 5px;}
                & button:last-child {background: #fff; border: 1px solid #E1E5ED; color: #222; margin-right: 0;}
            }
        }
        & .leave {
            & .leave-modal {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; opacity: 0; pointer-events: none; z-index: 999; transition: opacity .3s linear;
                & .leave-bg {width: 100%; height: 100%; background: #000; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
                & .leave-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -45%); background: #fff; padding: 80px; border-radius: 10px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .15s linear transform .3s linear;
                    & .close {position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 0 0 0 10px; background: #E1E5ED; cursor: pointer;
                        & i {font-size: 24px; color: #697385;}
                    }
                    & .text {text-align: center; margin-bottom: 40px;
                        & p {font-size: 24px; font-weight: 500; line-height: 1.2; margin-bottom: 20px;}
                        & span {font-size: 15px; color: #666;}
                    }
                    & .bt {
                        & button {width: 160px; height: 44px; font-size: 16px; border-radius: 5px; border: 1px solid #E1E5ED;}
                        & button:first-child {background: #292E41; color: #fff; border: 1px solid #292E41; margin-right: 5px;}
                    }
                }
                &.on {opacity: 1; pointer-events: visible;
                    & .leave-bg {opacity: 0.6; pointer-events: visible;}
                    & .leave-box {opacity: 1; transform: translate(-50%, -50%); pointer-events: visible;}
                }
            }
            & .leave-complete {width: 100%; max-width: 640px; padding: 40px; border: 1px solid #E8E8E8; border-radius: 10px; margin: 0 auto 70px; text-align: center;
                & p {font-size: 20px; font-weight: 600; line-height: 1; margin-bottom: 20px;}
                & span {font-size: 15px; color: #666;}
            }
            & .leave-bt {text-align: center;
                & a {display: inline-flex; justify-content: center; align-items: center; width: 160px; height: 44px; font-size: 16px; color: #fff; background: #292E41; border-radius: 5px;}
            }
        }
        & .nav {
            & .nav-info {margin-bottom: 40px;
                & .name {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;
                    & .left {display: flex; align-items: center;
                        & img {height: 25px; margin-right: 8px; transform: translateY(-2px);}
                        & p {font-size: 12px; line-height: 1;
                            & strong {font-family: var(--key-font); font-size: 20px; font-weight: 500;}
                        }
                    }
                    & .right {
                        & a {display: flex; align-items: center; gap: 5px; background: #36BE8F; border-radius: 10px; padding: 6px 10px;
                            & img {height: 16px;}
                            & p {font-size: 14px; color: #fff;}
                            & span {font-size: 14px; font-weight: 600; color: #FEF85A;}
                        }
                    }
                }
                & .info {
                    > ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
                        > li {padding: 20px; background: #f9f9f9; border-radius: 10px;
                            & p {font-size: 12px; color: #8491A7; text-align: left;}
                            & span {display: block; font-size: 20px; font-weight: 500; text-align: right;}
                        }
                    }
                }
            }
            & .nav-list {
                > ul {
                    > li {margin-bottom: 60px;
                        &:last-child {margin-bottom: 0;}
                        & span {display: inline-block; font-size: 12px; line-height: 1; color: #16A775; padding: 8px 10px; border-radius: 8px; background: #F5FEF8; margin-bottom: 5px;}
                        & a {display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #EAEDF4;
                            & p {line-height: 1; color: #484848;}
                            & i {font-size: 14px; color: #9AA7BC;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1640px) {
        & .mypage-info {
            & .info {width: calc(100% - 600px);}
            & .desc {max-width: 600px;}
        }
    }
    @media (width <= 1280px) {
        & .mypage-con {
            & .portfolio {
                & .portfolio-list {
                    & table {
                        & tr {
                            & td {padding: 15px 0;
                                &.num {width: 70px;}
                                &.cate {width: 10%;}
                                &.detail {width: 10%;}
                                &.subject {width: calc(100% - 72% - 70px);}
                                &.like {display: none;}
                                &.scrab {display: none;}
                                &.views {width: 8%;}
                                &.status {width: 8%;}
                                &.promotion {width: 10%;}
                                &.edit {width: 8%;}
                                &.del {width: 8%;}
                                & p {font-size: 15px;}
                                & a {font-size: 15px;}
                            }
                        }
                    }
                }
                & .portfolio-scrab {
                    > ul {
                        &.grid {grid-template-columns: repeat(4, minmax(0, 1fr));}
                    }
                }
            }
            & .company {
                & .company-scrab {
                    > ul {
                        &.type03 {grid-template-columns: repeat(4, minmax(0, 1fr));}
                    }
                }
            }
            & .estimate {
                & .estimate-list {
                    & table {
                        & tr {
                            & td {padding: 15px 0;
                                & p {font-size: 15px;}
                                & a {font-size: 15px;}
                            }
                        }
                    }
                }
            }
            & .contract {
                & .contract-list {
                    & table {
                        & tr {
                            & td {padding: 15px 0;
                                & p {font-size: 15px;}
                                & a {font-size: 15px;}
                            }
                        }
                    }
                }
            }
            & .promotion {
                & .promotion-list {
                    & table {
                        & tr {
                            & td {padding: 15px 0;
                                & p {font-size: 15px;}
                                & a {font-size: 15px;}
                            }
                        }
                    }
                }
                & .promotion-write {
                    > ul {
                        > li {
                            & .cate {
                                & button {
                                    & p {line-height: 40px;}
                                }
                            }
                            & .con {
                                & .info {
                                    & .img {padding: 30px;}
                                    & .text {width: calc(100% - 640px);
                                        & .title {
                                            & span {
                                                & br {display: none;}
                                            }
                                        }
                                        & .list {
                                            > ul {
                                                > li {
                                                    & .desc {
                                                        & p {line-height: 24px;
                                                            &::before {top: 10px; transform: translateY(0);}
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            & .payment {
                & .payment-list {
                    & table {
                        & tr {
                            & td {padding: 15px 0;
                                & p {font-size: 15px;}
                                & a {font-size: 15px;}
                            }
                        }
                    }
                }
            }
            & .inquiry {
                & .inquiry-list {
                    & table {
                        & tr {
                            & td {padding: 15px 0;
                                & p {font-size: 15px;}
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .mypage-info {padding: 30px;
            & .info {width: calc(100% - 450px);
                & .profile {width: 80px;}
                & .text {
                    & p {font-size: 18px;}
                }
            }
            & .desc {max-width: 450px;
                > ul {
                    > li {
                        & p {font-size: 16px;}
                        & span {font-size: 14px;
                            & strong {font-size: 24px;}
                        }
                    }
                }
            }
        }
        & .mypage-con {
            & .company {
                & .company-scrab {
                    > ul {
                        &.type03 {grid-template-columns: repeat(3, minmax(0, 1fr));}
                    }
                }
            }
            & .promotion {
                & .promotion-write {
                    > ul {
                        > li {
                            & .con {
                                & .info {
                                    & .img {width: 400px;}
                                    & .text {width: calc(100% - 450px);}
                                }
                            }
                        }
                    }
                }
            }
            & .edit {max-width: unset;}
        }
    }
    @media (width <= 860px) {padding: 20px 0 70px;
        & .mypage-tit {
            & p {font-size: 18px;}
        }
        & .mypage-depth {
            > ul {
                > li {padding: 0 6px;
                    & i {font-size: 14px;}
                    & p {font-size: 12px;}
                }
            }
        }
        & .mypage-nav {display: none;}
        & .mypage-info {display: none;}
        & .mypage-con {
            & .tit {display: none;}
            & .util {margin-bottom: 15px;
                & .left {
                    & .util-total {
                        & p {font-size: 14px;}
                    }
                }
                & .right {
                    & .util-array {
                        & .bar {
                            & button {font-size: 12px;}
                        }
                    }
                    & .util-grid {
                        & button {width: 30px; height: 30px;
                            & i {font-size: 18px;}
                        }
                    }
                    & .util-select {width: 150px;
                        & select {height: 30px; font-size: 14px;}
                    }
                    & .util-bt {
                        & a {width: 120px; height: 30px; font-size: 13px;}
                    }
                }
            }
            & .portfolio {
                & .portfolio-form {padding: 15px 20px; margin: 0;
                    > ul {
                        > li {padding: 10px 0;
                            & .cate {height: 35px;
                                & p {font-size: 14px; line-height: 35px;}
                            }
                            & .con {font-size: 14px;
                                & input[type="text"], & input[type="password"], & input[type="number"] {height: 35px; font-size: 14px;}
                                & select {height: 35px; font-size: 14px;}
                                & input[type="button"] {height: 35px; font-size: 14px;}
                                & textarea {font-size: 14px;}
                                & .ck {margin-right: 30px;
                                    & label {font-size: 13px; padding-left: 30px;
                                        &::before {width: 20px;}
                                    }
                                }
                            }
                            & .thumbs {grid-template-columns: repeat(3, minmax(0, 1fr));
                                & label {
                                    & p {font-size: 14px;}
                                }
                            }
                            & .desc {
                                & p {font-size: 12px; line-height: 18px;
                                    &::before {top: 7px; transform: translateY(0);}
                                }
                            }
                        }
                    }
                }
                & .portfolio-list {overflow-x: scroll;
                    & table {width: 1000px;
                        & tr {
                            & td {padding: 12px 0;
                                & p {font-size: 14px;}
                                & a {font-size: 14px;}
                            }
                        }
                        & tbody {
                            & tr {
                                & td {
                                    &.cate {
                                        & p {font-size: 12px;}
                                    }
                                    &.detail {
                                        & p {font-size: 12px;}
                                    }
                                    &.promotion {
                                        & button {font-size: 12px;}
                                    }
                                    &.edit {
                                        & button {font-size: 12px;}
                                    }
                                    &.del {
                                        & button {font-size: 12px;}
                                    }
                                }
                            }
                        }
                    }
                }
                & .portfolio-desc {margin: 20px 0 40px;}
                & .portfolio-bt {
                    & button {width: 100px; height: 30px; font-size: 14px;}
                }
                & .portfolio-scrab {
                    > ul {
                        &.list {
                            > li {padding: 10px;
                                & .thumbs {max-width: 100px;}
                                & .subject {width: calc(50% - 115px); padding: 0 15px;
                                    & p {font-size: 13px;}
                                }
                                & .cate {
                                    & p {font-size: 11px; padding: 4px 8px;}
                                }
                                & .place {width: 15%;
                                    & p {font-size: 13px;}
                                }
                                & .company {width: 20%; padding: 0 10px;
                                    & p {font-size: 13px;}
                                }
                                & .del {width: 15px;
                                    & button {font-size: 10px;}
                                }
                            }
                        }
                        &.grid {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
                            > li {
                                &:hover {
                                    & .thumbs {opacity: 1; pointer-events: visible;}
                                }
                                & .overlay {display: none;}
                            }
                        }
                    }
                }
                & .portfolio-paging {margin-top: 40px;
                    > ul {
                        > li {
                            & a {font-size: 14px; padding: 0 6px;}
                        }
                    }
                }
            }
            & .company {
                & .company-scrab {
                    > ul {
                        &.type03 {grid-template-columns: repeat(2, minmax(0, 1fr));}
                    }
                }
                & .company-paging {margin-top: 40px;
                    > ul {
                        > li {
                            & a {font-size: 14px; padding: 0 6px;}
                        }
                    }
                }
            }
            & .estimate {
                & .estimate-list {
                    & table {
                        & tr {
                            & td {padding: 12px 0;
                                & p {font-size: 14px;}
                                &.num {width: 70px;}
                                &.cate {width: 80px;}
                                &.detail {display: none;}
                                &.subject {width: calc(75% - 150px); padding: 0 10px;}
                                &.date {width: 12.5%;}
                                &.status {width: 12.5%;}
                                &.ct {display: none;}
                                &.op {display: none;}
                            }
                        }
                        & tbody {
                            & tr {
                                & td {
                                    &.cate {
                                        & p {font-size: 12px;}
                                    }
                                    &.detail {
                                        & p {font-size: 12px;}
                                    }
                                    &.subject {
                                        & a {font-size: 14px;}
                                    }
                                    &.status {
                                        & p {font-size: 12px;}
                                    }
                                    &.es {
                                        & a {font-size: 12px;}
                                    }
                                }
                            }
                        }
                    }
                }
                & .estimate-write {
                    & .con {padding: 20px; margin-bottom: 40px;
                        & .text {margin-bottom: 15px;
                            & p {font-size: 16px; padding-left: 16px;
                                &::before {width: 10px; border: 3px solid #2C9E4F;}
                            }
                        }
                        & .info {
                            > ul {
                                > li {width: 100%; padding: 10px 0;
                                    &:nth-child(-n + 2) {border-top: 1px dotted #E1E5ED;}
                                    &:first-child {border-top: 0; padding-top: 0;}
                                    &:last-child {padding-bottom: 0;}
                                    & p {width: 100px; font-size: 14px; font-weight: 600;}
                                    & span {width: calc(100% - 100px); font-size: 14px;}
                                }
                            }
                        }
                        & .detail {
                            > ul {
                                > li {flex-wrap: wrap;
                                    &:first-child {padding-top: 0;}
                                    & .cate {width: 100%; justify-content: space-between; margin-bottom: 10px;
                                        & p {font-size: 15px; font-weight: 500; line-height: 1;}
                                        & button {
                                            & i {font-size: 16px;}
                                        }
                                    }
                                    & .price {width: 100%;
                                        & .opt {flex-wrap: wrap; gap: 10px 0;
                                            & .opt-name {width: 100%;
                                                & input[type="text"] {height: 35px; font-size: 14px;}
                                            }
                                            & .opt-price {width: calc(100% - 30px); padding: 0;
                                                & p {font-size: 14px;}
                                                & input[type="text"] {max-width: 100%; height: 35px; font-size: 14px;}
                                                & span {font-size: 14px; line-height: 33px;}
                                            }
                                            & button {margin-left: 14px;
                                                & i {font-size: 16px;}
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        & .total {
                            & .total-txt {
                                & p {font-size: 18px;}
                            }
                            & .total-price {
                                & input[type="text"] {height: 35px; font-size: 15px;}
                                & p {font-size: 15px;}
                            }
                        }
                    }
                    & .bt {margin-top: 40px;
                        & button {width: 100px; height: 30px; font-size: 14px;}
                    }
                }
                & .estimate-view {
                    & .view-box {margin-bottom: 40px;
                        & .top {margin-bottom: 15px;
                            & p {font-size: 16px;}
                            & a {width: 100px; height: 30px; font-size: 14px;}
                        }
                        & .info {
                            > ul {
                                > li {
                                    & .cate {width: 100px; padding: 15px;
                                        & p {font-size: 14px;}
                                    }
                                    & .desc {width: calc(100% - 100px); padding: 15px; font-size: 14px;
                                        & p {font-size: 14px;}
                                        & span {font-size: 12px;}
                                    }
                                }
                            }
                        }
                    }
                    & .back {margin-top: 40px; justify-content: center;
                        & a {width: 100px; height: 35px; font-size: 14px;}
                    }
                }
                & .estimate-paging {margin-top: 40px;
                    > ul {
                        > li {
                            & a {font-size: 14px; padding: 0 6px;}
                        }
                    }
                }
            }
            & .contract {
                & .contract-list {
                    & table {
                        & tr {
                            & td {padding: 12px 0;
                                & p {font-size: 14px;}
                                &.num {width: 70px;}
                                &.cate {width: 80px;}
                                &.detail {display: none;}
                                &.subject {width: calc(50% - 150px); padding: 0 10px;}
                                &.date {width: 12.5%;}
                                &.status {width: 12.5%;}
                                &.company {width: 12.5%;}
                                &.ctt {display: none;}
                                &.es {width: 12.5%;}
                            }
                        }
                        & tbody {
                            & tr {
                                & td {
                                    &.cate {
                                        & p {font-size: 12px;}
                                    }
                                    &.detail {
                                        & p {font-size: 12px;}
                                    }
                                    &.subject {
                                        & a {font-size: 14px;}
                                    }
                                    &.status {
                                        & p {font-size: 12px;}
                                    }
                                    &.es {
                                        & p {
                                            & a {font-size: 12px;}
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                & .contract-write {
                    & .con {padding: 20px; margin-bottom: 40px;
                        & .text {margin-bottom: 15px;
                            & p {font-size: 16px; padding-left: 16px;
                                &::before {width: 10px; border: 3px solid #2C9E4F;}
                            }
                        }
                        & .info {
                            > ul {
                                > li {width: 100%; padding: 10px 0;
                                    > div {width: calc(100% - 140px);}
                                    & .cate {width: 140px;
                                        & p {font-size: 14px; font-weight: 600; line-height: 35px;}
                                    }
                                    & .desc {
                                        & input[type="text"] {max-width: 100%; height: 35px; font-size: 14px;}
                                        & textarea {font-size: 14px;}
                                    }
                                    & .add {
                                        > button {width: 100px; height: 35px; font-size: 14px;}
                                        & input[type="text"] {max-width: 100%; height: 35px; font-size: 14px;}
                                    }
                                    & .date {margin-right: 20px;
                                        & p {font-size: 14px;}
                                        & input[type="text"] {height: 35px; font-size: 14px;}
                                    }
                                    & .price {
                                        & p {line-height: 35px; height: 35px; font-size: 14px;}
                                        & input[type="text"] {height: 35px; font-size: 14px;}
                                    }
                                    & .how {
                                        & .type {
                                            & label {
                                                & span {width: 24px; height: 24px; aspect-ratio: unset;
                                                    & i {font-size: 14px;}
                                                }
                                                & p {font-size: 14px; line-height: 1;}
                                            }
                                        }
                                        & .list {
                                            & .list-con {height: 35px;
                                                & .ct {
                                                    & p {width: 80px; font-size: 14px;}
                                                    & span {font-size: 14px;}
                                                }
                                                & .dt {
                                                    & p {width: 80px; font-size: 14px;}
                                                    & span {font-size: 14px;}
                                                    & input[type="text"] {width: 150px; height: 35px; font-size: 14px;}
                                                }
                                                & .per {
                                                    & p {font-size: 14px; height: 35px; line-height: 35px;}
                                                    & input[type="text"] {width: 50px; height: 35px; font-size: 14px;}
                                                    & span {font-size: 14px; line-height: 35px;}
                                                }
                                                & .value {
                                                    & p {font-size: 14px; height: 35px; line-height: 35px;}
                                                    & input[type="text"] {max-width: 120px; height: 35px; font-size: 14px;}
                                                    & span {font-size: 14px; line-height: 35px;}
                                                }
                                                & .ut {
                                                    & button {margin-right: 6px;
                                                        & i {font-size: 16px;}
                                                    }
                                                }
                                            }
                                            & .balance {
                                                & .ct {
                                                    & p {width: 80px; font-size: 14px;}
                                                    & span {font-size: 14px;}
                                                }
                                                & .per {
                                                    & p {font-size: 14px; height: 35px; line-height: 35px;}
                                                    & input[type="text"] {width: 50px; height: 35px; font-size: 14px;}
                                                    & span {font-size: 14px; line-height: 35px;}
                                                }
                                                & .value {
                                                    & p {font-size: 14px; height: 35px; line-height: 35px;}
                                                    & input[type="text"] {max-width: 200px; height: 35px; font-size: 14px;}
                                                    & span {font-size: 14px; line-height: 35px;}
                                                }
                                            }
                                        }
                                    }
                                    & .year {
                                        & p {line-height: 35px; height: 35px; font-size: 14px;}
                                        & input[type="text"] {line-height: 35px; height: 35px; font-size: 14px;}
                                    }
                                    & .secu {
                                        & p {line-height: 35px; height: 35px; font-size: 14px;}
                                        & span {line-height: 35px; height: 35px; font-size: 14px;}
                                        & input[type="text"] {max-width: 100px; line-height: 35px; height: 35px; font-size: 14px;}
                                    }
                                    & .file {
                                        & .file-box {
                                            & input[type="text"] {max-width: 300px; height: 35px; font-size: 14px;}
                                            & label {height: 35px;
                                                & p {font-size: 14px;}
                                            }
                                            & button {height: 35px; font-size: 14px;}
                                        }
                                        & .file-list {
                                            & a {font-size: 14px;}
                                            & button {width: 80px; height: 35px; font-size: 14px; font-weight: 500;}
                                        }
                                    }
                                    & .bk {
                                        & input[type="text"] {max-width: 160px;}
                                        & select {max-width: 140px; height: 35px; line-height: 35px; font-size: 14px;}
                                        & button {font-size: 14px; width: 80px; height: 35px;}
                                    }
                                }
                            }
                        }
                    }
                    & .bt {margin-top: 40px;
                        & button {width: 100px; height: 35px; font-size: 14px;}
                    }
                }
                & .contract-paging {margin-top: 40px;
                    > ul {
                        > li {
                            & a {font-size: 14px; padding: 0 6px;}
                        }
                    }
                }
            }
            & .promotion {
                & .promotion-list {
                    & table {
                        & tr {
                            & td {padding: 12px 0;
                                & p {font-size: 14px;}
                                & a {font-size: 14px;}
                                &.num {width: 70px;}
                                &.cate {width: 80px;}
                                &.detail {display: none;}
                                &.subject {width: calc(65% - 150px); padding: 0 10px;}
                                &.date {display: none;}
                                &.start {width: 12.5%;}
                                &.end  {width: 12.5%;}
                            }
                        }
                        & tbody {
                            & tr {
                                & td {
                                    &.cate {
                                        & p {font-size: 12px;}
                                    }
                                    &.detail {
                                        & p {font-size: 12px;}
                                    }
                                }
                            }
                        }
                    }
                }
                & .promotion-view {
                    & .view-box {margin-bottom: 40px;
                        & .top {margin-bottom: 15px;
                            & p {font-size: 16px;}
                            & a {width: 100px; height: 30px; font-size: 14px;}
                        }
                        & .info {
                            > ul {
                                > li {
                                    & .cate {width: 100px; padding: 15px;
                                        & p {font-size: 14px;}
                                    }
                                    & .desc {width: calc(100% - 100px); padding: 15px; font-size: 14px;
                                        & p {font-size: 14px;}
                                        & span {font-size: 12px;
                                            &.dp1 {font-size: 12px;}
                                            &.dp2 {font-size: 12px;}
                                            &.ct1 {font-size: 12px;}
                                            &.ct2 {font-size: 12px;}
                                            &.ct3 {font-size: 12px;}
                                            &.ct4 {font-size: 12px;}
                                        }
                                    }
                                }
                            }
                        }
                    }
                    & .back {margin-top: 40px; justify-content: center;
                        & a {width: 100px; height: 35px; font-size: 14px;}
                    }
                }
                & .promotion-nav {margin-bottom: 50px;
                    > ul {justify-content: space-between;
                        > li {width: calc(100% / 2 - 5px); height: 35px; margin-right: 0;
                            & p {font-size: 14px;}
                        }
                    }
                }
                & .promotion-select {margin: 0 auto 40px;
                    & .product {
                        & .name {
                            & p {font-size: 20px;}
                        }
                        & .info {
                            > ul {padding: 25px;}
                        }
                        & .desc {
                            & p {font-size: 14px;}
                        }
                    }
                    & .total {margin-bottom: 15px;
                        & p {font-size: 14px;}
                    }
                    & .list {
                        & table {
                            & tr {
                                & td {padding: 12px; font-size: 14px;
                                    &.check {
                                        & label {width: 20px; height: 20px; aspect-ratio: unset;}
                                    }
                                    &.num {width: 70px;}
                                    &.cate {width: 15%;}
                                    &.detail {width: 20%;}
                                    &.subject {width: calc(50% - 140px);}
                                }
                            }
                            & thead {
                                & tr {
                                    & td {
                                        & p {font-size: 14px;}
                                    }
                                }
                            }
                            & tbody {
                                & tr {
                                    & td {
                                        & p {font-size: 14px;}
                                        &.cate {
                                            & p {font-size: 12px;}
                                        }
                                        &.detail {
                                            & p {font-size: 12px;}
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                & .promotion-write {
                    > ul {
                        > li {
                            & .cate {margin-bottom: 30px;
                                & button {height: 35px;
                                    &.ban {margin-left: 10px;
                                        & img {width: 12px; margin-left: 6px;}
                                    }
                                    & p {font-size: 14px; line-height: 35px;}
                                }
                            }
                            & .con {
                                & .info {justify-content: center; flex-wrap: wrap; gap: 30px;
                                    & .img {width: 100%; max-width: 450px; padding: 20px;}
                                    & .text {width: 100%;
                                        & .title {margin-bottom: 25px;
                                            & p {font-size: 20px; margin-bottom: 15px;}
                                            & span {font-size: 15px;}
                                        }
                                        & .list {
                                            > ul {
                                                > li {margin-bottom: 30px;
                                                    & .sec {margin-bottom: 15px;
                                                        & p {font-size: 15px;}
                                                    }
                                                    & .desc {
                                                        & p {font-size: 14px;
                                                            &::before {left: 6px;}
                                                            &:last-child {margin-bottom: 0;}
                                                        }
                                                        > span {font-size: 14px; margin-top: 10px;}
                                                    }
                                                    & .opt {
                                                        & label {
                                                            & p {font-size: 14px;}
                                                            & span {width: 15px; height: 15px;
                                                                &::after {width: 8px; height: 8px;}
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        & .guide {padding: 15px;
                                            & p {font-size: 13px;}
                                        }
                                        & .bt {justify-content: center; padding: 0;
                                            & button {width: 100px; height: 35px; font-size: 14px;}
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                & .promotion-pay {
                    & .con {
                        & .cate {
                            & p {font-size: 20px;}
                        }
                        & .info {
                            & table {
                                & tr { 
                                    & td {padding: 12px 0;}
                                }
                                & tbody {
                                    & tr {
                                        & td {
                                            & p {font-size: 13px;
                                                & strong {font-size: 15px;}
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        & .sale {padding: 20px;
                            > ul {
                                > li {
                                    & select {height: 35px; font-size: 14px;}
                                }
                            }
                        }
                        & .total {padding: 20px 40px;
                            & .ea {
                                & p {font-size: 16px;}
                            }
                            & .price {
                                & .left {
                                    & p {
                                        & strong {font-size: 14px;}
                                    }
                                }
                                & .right {
                                    & p {
                                        & strong {font-size: 14px;}
                                    }
                                }
                            }
                        }
                    }
                }
                & .promotion-complete {padding: 20px; margin: 0 auto 40px;
                    & .text {
                        & span {font-size: 14px;}
                    }
                    & .info {padding: 20px; margin-top: 20px;
                        > ul {
                            > li {
                                & p {font-size: 14px;
                                    & strong {font-size: 16px;}
                                }
                            }
                        }
                    }
                }
                & .promotion-fail {padding: 20px; margin: 0 auto 40px;
                    & .text {
                        & img {width: 120px; height: 120px;}
                    }
                    & .info {padding: 20px; margin-top: 20px;}
                }
                & .promotion-success {padding: 20px; margin: 0 auto 40px;
                    & .text {
                        & img {width: 120px; height: 120px;}
                    }
                    & .info {padding: 20px; margin-top: 20px;}
                }
                & .promotion-bt {
                    & button {width: 100px; height: 35px; font-size: 14px;}
                    & a {width: 100px; height: 35px; font-size: 14px;}
                }
            } 
            & .payment {
                & .payment-list {overflow-x: scroll;
                    & table {width: 1200px;
                        & tr {
                            & td {padding: 12px 0;
                                & p {font-size: 14px;}
                                & a {font-size: 14px;}
                                &.num {width: 70px;}
                            }
                        }
                    }
                }
                & .payment-view {
                    & .view-box {margin-bottom: 40px;
                        & .top {margin-bottom: 15px;
                            & p {font-size: 16px;}
                            & a {width: 100px; height: 30px; font-size: 14px;}
                        }
                        & .info {
                            > ul {
                                > li {
                                    & .cate {width: 100px; padding: 15px;
                                        & p {font-size: 14px;}
                                    }
                                    & .desc {width: calc(100% - 100px); padding: 15px; font-size: 14px;
                                        & p {font-size: 14px;}
                                        & span {font-size: 12px;
                                            &.dp1 {font-size: 12px;}
                                            &.dp2 {font-size: 12px;}
                                            &.ct1 {font-size: 12px;}
                                            &.ct2 {font-size: 12px;}
                                            &.ct3 {font-size: 12px;}
                                            &.ct4 {font-size: 12px;}
                                        }
                                    }
                                }
                            }
                        }
                    }
                    & .back {margin-top: 40px; justify-content: center;
                        & a {width: 100px; height: 35px; font-size: 14px;}
                    }
                }
                & .payment-confirm {padding: 20px; margin: 0 auto 40px;
                    & .text {margin-bottom: 20px;
                        & p {font-size: 16px;}
                    }
                    & .write {
                        & input[type="text"] {height: 35px; font-size: 14px;}
                    }
                }
                & .payment-bt {
                    & button {width: 100px; height: 35px; font-size: 14px;}
                    & a {width: 100px; height: 35px; font-size: 14px;}
                }
            }
            & .coupon {
                & .coupon-add {margin-bottom: 40px; padding: 15px;
                    & input[type="text"] {height: 35px; font-size: 14px;}
                    & button[type="submit"] {height: 35px; font-size: 14px;}
                }
                & .coupon-list {
                    > ul {gap: 20px;
                        > li {padding: 20px 25px;
                            & .per {
                                & p {font-size: 24px;}
                            }
                        }
                    }
                }
            }
            & .inquiry {
                & .inquiry-list {
                    & table {
                        & tr {
                            & td {padding: 12px 0;
                                & p {font-size: 14px;}
                                &.num {width: 70px;}
                                &.cate {width: 80px;}
                                &.subject {width: calc(75% - 150px); padding: 0 10px;}
                                &.date {width: 12.5%;}
                                &.status {width: 12.5%;}
                            }
                        }
                        & tbody {
                            & tr {
                                & td {
                                    &.cate {
                                        & p {font-size: 14px;}
                                    }
                                    &.subject {
                                        & a {font-size: 14px;}
                                    }
                                    &.status {
                                        & p {font-size: 12px;}
                                    }
                                }
                            }
                        }
                    }
                }
                & .inquiry-view {
                    & .con {
                        & .info {justify-content: space-between; flex-wrap: wrap; padding: 15px 20px;
                            & .subject {width: 100%; padding: 0; margin-bottom: 10px;
                                & p {font-size: 15px; line-height: 1.4;}
                            }
                            & .date {width: unset; text-align: left;
                                & p {font-size: 14px; line-height: 1;}
                            }
                            & .cate {width: unset; padding: 0;
                                & p {display: inline-block; font-size: 12px;}
                            }
                        }
                        & .desc {padding: 15px 20px 0;}
                        & .bt {padding: 15px 20px;
                            & button {width: 100px; height: 30px; font-size: 14px;}
                        }
                    }
                    & .reply {padding: 15px 0;
                        & .left {display: none;}
                        & .right {width: 100%;
                            & .subject {flex-wrap: wrap; margin-bottom: 10px;
                                & p {width: 100%; font-size: 15px; padding-right: 0;}
                                & span {width: 100%; font-size: 12px; color: #aaa; text-align: right;}
                                & input[type="text"] {height: 35px; font-size: 14px;}
                            }
                            & .desc {
                                & p {font-size: 14px;}
                                & textarea {font-size: 14px;}
                                & button {width: 100px; height: 30px; font-size: 14px;}
                            }
                        }
                    }
                    & .nav {
                        > ul {
                            > li {
                                & .left {width: 100px;
                                    & p {font-size: 14px; font-weight: 600; line-height: 40px;
                                        & i {display: none;}
                                    }
                                }
                                & .right {width: calc(100% - 100px);
                                    & a {width: 100%; font-size: 14px; line-height: 40px; padding: 0 10px;}
                                    & span {display: none;}
                                }
                            }
                        }
                    }
                    & .back {justify-content: center;
                        & button {width: 100px; height: 30px; font-size: 14px;}
                    }
                }
                & .inquiry-write {
                    > ul {padding: 0;
                        > li {padding: 10px 0;
                            & .cate {
                                & p {font-size: 14px; line-height: 35px; font-weight: 500;
                                    &::after {width: 4px; height: 4px;}
                                }
                            }
                            & .desc {
                                & input[type="text"] {height: 35px; font-size: 14px;}
                                & select {height: 35px; font-size: 14px;}
                                & textarea {font-size: 14px;}
                                & label {height: 35px; font-size: 14px;}
                                & p {font-size: 12px;}
                            }
                        }
                    }
                }
                & .inquiry-bt {margin-top: 40px;
                    & button {width: 100px; height: 30px; font-size: 14px;}
                }
                & .inquiry-paging {margin-top: 40px;
                    > ul {
                        > li {
                            & a {font-size: 14px; padding: 0 6px;}
                        }
                    }
                }
            }
            & .edit {
                & .edit-form {padding: 15px 20px;
                    > ul {
                        > li {padding: 10px 0;
                            & .cate {height: 35px;
                                & p {font-size: 14px; line-height: 35px;}
                            }
                            & .con {
                                & input[type="text"], & input[type="password"] {height: 35px; font-size: 14px;}
                                & input[type="submit"] {height: 35px; font-size: 14px;}
                                & button {height: 35px; font-size: 14px;}
                                & select {height: 35px; font-size: 14px;}
                                & textarea {font-size: 14px;}
                            }
                            & .desc {
                                & p {font-size: 12px; line-height: 18px;
                                    &::before {top: 7px; transform: translateY(0);}
                                }
                            }
                            & .dvs {
                                & select {height: 35px; font-size: 14px;}
                            }
                            & .thumbs {grid-template-columns: repeat(3, minmax(0, 1fr));
                                & label {
                                    & p {font-size: 14px;}
                                }
                            }
                        }
                    }
                }
                & .edit-desc {margin: 20px 0 40px;}
                & .edit-bt {
                    & button {width: 100px; height: 30px; font-size: 14px;}
                }
            }
        }
    }
    @media (width <= 640px) {
        & .mypage-con {
            & .util {
                & .right {
                    & .util-grid {display: none;}
                }
            }
            & .portfolio {
                & .portfolio-form {
                    > ul {
                        > li {flex-wrap: wrap;
                            & .cate {width: 100%; height: unset; margin-right: 0; margin-bottom: 10px;
                                & p {line-height: 1; padding-right: 12px;
                                    &::before {width: 4px; height: 4px;}
                                }
                            }
                            & .con {width: 100%;
                                & input[type="text"], & input[type="password"] {max-width: 100%;}
                            }
                            & .thumbs {width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr));}
                            & .desc {width: 100%; padding: 0;}
                        }
                    }
                }
                & .portfolio-desc {
                    & p {line-height: 20px;
                        &::before {width: 4px; height: 4px; top: 8px; transform: translateY(0);}
                    }
                }
                & .portfolio-scrab {
                    > ul {
                        &.list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 10px; padding: 10px 0; border-bottom: 1px solid #CBCBCB;
                            > li {position: relative; padding: 0; border-bottom: 0; flex-wrap: wrap;
                                & .thumbs {max-width: 100%;}
                                & .subject {width: 100%; padding: 0; text-align: center; margin: 5px 0;
                                    & p {font-size: 14px;}
                                }
                                & .cate {width: 100%;}
                                & .place {width: 100%; margin: 5px 0;}
                                & .company {width: 100%;}
                                & .del {position: absolute; top: 10px; right: 10px; width: 20px; z-index: 2;
                                    & button {font-size: 15px;}
                                }
                            }
                        }
                        &.grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
                    }
                }
            }
            & .company {
                & .company-scrab {
                    > ul {
                        &.type03 {
                            > li {
                                & .front {padding: 20px;
                                    & .logo {display: none;}
                                    & .cp {padding-right: 0; margin: 0 0 10px;
                                        & p {font-size: 15px;}
                                    }
                                    & .info {padding-right: 0;}
                                    & .desc {margin: 10px 0 15px;
                                        & p {font-size: 12px;}
                                    }
                                    & .cate {padding-top: 15px;
                                        & p {font-size: 12px;}
                                        & span {font-size: 12px;}
                                    }
                                    & .favorite {bottom: 20px; right: 20px;
                                        & button {
                                            & i {font-size: 14px;}
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            & .estimate {
                & .estimate-list {overflow-x: scroll;
                    & table {width: 700px;}
                }
            }
            & .contract {
                & .contract-list {overflow-x: scroll;
                    & table {width: 800px;}
                }
                & .contract-write {
                    & .con {
                        & .info {
                            > ul {
                                > li {
                                    > div {width: 100%;}
                                    & .cate {width: 100%;}
                                    & .cont {}
                                    & .add {
                                        & input[type="text"] {margin-top: 5px;}
                                        & input[type="text"]:read-only {max-width: calc(100% - 110px);}
                                    }
                                    & .date {display: flex; width: 100%; margin-right: 0; margin-bottom: 5px;
                                        &:last-child {margin-bottom: 0;}
                                        & p {width: 80px;}
                                        & input[type="text"] {width: calc(100% - 90px);}
                                    }
                                    & .price {
                                        & input[type="text"] {max-width: calc(100% - 35px);}
                                        & p {width: 35px; text-align: right;}
                                    }
                                    & .how {
                                        & .type {margin-bottom: 20px;}
                                        & .list {
                                            & .list-con {height: unset; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 15px;
                                                & .ct {width: 140px; flex-wrap: wrap;
                                                    & p {width: 100%; line-height: 1; margin: 0 0 10px;}
                                                    & span {line-height: 35px;}
                                                }
                                                & .dt {width: 140px; flex-wrap: wrap; margin: 0;
                                                    & p {width: 100%; line-height: 1; margin: 0 0 10px;}
                                                    & input[type="text"] {width: 90%; padding: 0 30px 0 12px; background-size: 14px;}
                                                }
                                                & .per {width: calc(100% - 140px); margin: 0; padding-top: 24px;
                                                    & input[type="text"] {width: calc(100% - 35px); margin-left: 0; max-width: unset;}
                                                    & p {width: 35px; text-align: right;}
                                                    &.fin {width: 100%; padding-top: 5px;
                                                        & span {width: 140px;}
                                                        & input[type="text"] {width: calc(100% - 175px);}
                                                    }
                                                }
                                                & .value {width: calc(100% - 188px); margin-top: 5px;
                                                    &.sm {width: calc(100% - 140px);}
                                                    & input[type="text"] {max-width: unset;}
                                                    &.mt {margin-top: 24px;}
                                                }
                                                & .ut {width: 48px; margin: 5px 0 0; padding-left: 10px;
                                                    &.mt {margin: 24px 0 0;}
                                                }
                                            }
                                            & .balance {justify-content: flex-end; flex-wrap: wrap;
                                                & .ct {width: 100%;}
                                                & .per {width: 100%; margin: 0; padding-top: 10px;
                                                    & span {width: 140px;}
                                                    & input[type="text"] {width: calc(100% - 175px); margin-left: 0; max-width: unset;}
                                                    & p {width: 35px; text-align: right;}
                                                }
                                                & .value {width: calc(100% - 140px); margin-top: 5px;
                                                    & input[type="text"] {width: 100%; max-width: unset;}
                                                }
                                            }
                                        }
                                    }
                                    & .year {
                                        & input[type="text"] {max-width: calc(100% - 35px);}
                                        & p {width: 35px; text-align: right;}
                                    }
                                    & .secu {
                                        & span {}
                                        & input[type="text"] {}
                                        & p {}
                                    }
                                    & .file {
                                        & .file-box {
                                            & input[type="text"] {max-width: calc(100% - 220px);}
                                        }
                                        & .file-list {
                                            & a {max-width: calc(100% - 90px); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                                        }
                                    }
                                    & .bk {flex-wrap: wrap;
                                        & select {max-width: 100%;}
                                    }
                                }
                            }
                        }
                    }
                }
            }
            & .promotion {
                & .promotion-list {overflow-x: scroll;
                    & table {width: 1000px;
                        & tr {
                            & td {
                                &.detail {display: table-cell; width: 80px;}
                                &.subject {width: calc(50% - 240px);}
                                &.date {display: table-cell; width: 10%;}
                                &.start {width: 10%;}
                                &.end {width: 10%;}
                            }
                        }
                    }
                }
                & .promotion-select {
                    & .product {
                        & .info {
                            > ul {flex-wrap: wrap; padding: 20px;
                                > li {
                                    &:first-child {width: calc(100% / 2); border-right: 0;}
                                    &:nth-child(2) {width: calc(100% / 2); padding: 0; border-right: 0;}
                                    &:last-child {width: 100%; text-align: left; margin-top: 20px;}
                                    & span {font-size: 12px;}
                                    & p {font-size: 12px; line-height: 1; margin-top: 5px;
                                        & strong {font-size: 15px;}
                                    }
                                }
                            }
                        }
                    }
                    & .list {overflow-x: scroll;
                        & table {width: 800px;
                            & tr {
                                & td {
                                    &.detail {width: 15%;}
                                    &.subject {width: calc(55% - 140px);}
                                }
                            }
                        }
                    }
                    & .upload {
                        > ul {
                            > li {flex-wrap: wrap;
                                & .cate {width: 100%; height: unset; margin-right: 0; margin-bottom: 10px;
                                    & p {line-height: 1; padding-right: 12px;
                                        &::before {width: 4px; height: 4px;}
                                    }
                                }
                                & .con {width: 100%;
                                    & input[type="text"], & input[type="password"] {max-width: 100%;}
                                }
                                & .thumbs {width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr));}
                                & .desc {width: 100%; padding: 0;}
                            }
                        }
                    }
                }
                & .promotion-pay {
                    & .con {margin-bottom: 40px;
                        & .info {overflow-x: scroll;
                            & table {width: 900px;}
                        }
                        & .sale {
                            > ul {
                                > li {
                                    & p {width: calc(100% - 100px); max-width: unset; font-size: 16px;}
                                    & select {width: calc(100% - 100px); max-width: unset;}
                                }
                            }
                        }
                        & .total {padding: 20px;
                            & .ea {display: none;}
                        }
                    }
                }
                & .promotion-complete {
                    & .info {
                        > ul {flex-wrap: wrap; gap: 15px 0;
                            > li {width: 100%; border-right: 0;
                                &:last-child {width: 100%;}
                                & span {margin-bottom: 5px;}
                                & p {font-size: 14px;
                                    & strong {font-size: 16px;}
                                }
                            }
                        }
                    }
                }
            }
            & .coupon {
                & .coupon-list {
                    > ul {
                        > li {padding: 20px;
                            & .info {flex-wrap: wrap; gap: 10px 0;
                                & .left {width: 100%;}
                                & .right {width: 100%;}
                            }
                        }
                    }
                }
            }
            & .inquiry {
                & .inquiry-list {overflow-x: scroll;
                    & table {width: 700px;}
                }
                & .inquiry-write {
                    > ul {
                        > li {align-items: center; flex-wrap: wrap;
                            &:first-child {padding-top: 0;}
                            &:last-child {padding-bottom: 0;}
                            & .cate {width: 100%; margin-bottom: 10px;
                                & p {font-weight: 600; line-height: 1;}
                            }
                            & .desc {width: 100%;
                                & select {max-width: 100%;}
                                & input[type="text"]:read-only {max-width: calc(100% - 110px);}
                            }
                        }
                    }
                }
            }
            & .edit {
                & .edit-form {
                    > ul {
                        > li {flex-wrap: wrap;
                            & .cate {width: 100%; height: unset; margin-right: 0; margin-bottom: 10px;
                                & p {line-height: 1; padding-right: 12px;
                                    &::before {width: 4px; height: 4px;}
                                }
                            }
                            & .con {width: 100%;
                                & input[type="text"], & input[type="password"] {max-width: 100%;}
                            }
                            & .dvs {width: 100%;}
                            & .thumbs {width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr));}
                            & .desc {width: 100%; padding: 0;}
                        }
                    }
                }
                & .edit-desc {
                    & p {line-height: 20px;
                        &::before {top: 11.5px;}
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .mypage-con {
            & .portfolio {
                & .portfolio-scrab {
                    > ul {
                        &.list {grid-template-columns: repeat(2, minmax(0, 1fr));}
                    }
                }
            }
            & .company {
                & .company-scrab {
                    > ul {
                        &.type03 {grid-template-columns: repeat(1, minmax(0, 1fr));}
                    }
                }
            }
            & .contract {
                & .contract-write {
                    & .con {
                        & .info {
                            > ul {
                                > li {
                                    & .how {
                                        & .list {
                                            & .list-con {
                                                & .dt {width: 100%;
                                                    & input[type="text"] {width: 100%;}
                                                }
                                                & .value {width: calc(100% - 48px);
                                                    &.sm {width: 100%;}
                                                    &.mt {margin: 5px 0 0;}
                                                }
                                                & .ut {
                                                    &.mt {margin: 5px 0 0;}
                                                }
                                            }
                                        }
                                    }
                                    & .secu {flex-wrap: wrap;
                                        & span {width: 100%;}
                                        & input[type="text"] {width: calc(100% - 35px); max-width: unset; margin: 0;}
                                        & p {width: 35px; margin: 0; text-align: right;}
                                    }
                                    & .bk {
                                        & input[type="text"] {max-width: 100%;}
                                        & button {width: 100%;}
                                    }
                                }
                            }
                        }
                    }
                }
            }
            & .promotion {
                & .promotion-write {
                    > ul {
                        > li {
                            & .cate {
                                & button {
                                    & p {font-size: 12px;}
                                }
                            }
                        }
                    }
                }
            }
            & .coupon {
                & .coupon-list {
                    > ul {grid-template-columns: repeat(1, minmax(0, 1fr));}
                }
            }
        }
    }
}