@charset "utf-8";

/* 폰트 재정의 - 대시보드 */
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: local('Pretendard Black'), url(../font/woff2/Pretendard-Black.woff2) format('woff2'), url(../font/woff/Pretendard-Black.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: local('Pretendard ExtraBold'), url(../font/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(../font/woff/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: local('Pretendard Bold'), url(../font/woff2/Pretendard-Bold.woff2) format('woff2'), url(../font/woff/Pretendard-Bold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: local('Pretendard SemiBold'), url(../font/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(../font/woff/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: local('Pretendard Medium'), url(../font/woff2/Pretendard-Medium.woff2) format('woff2'), url(../font/woff/Pretendard-Medium.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: local('Pretendard Regular'), url(../font/woff2/Pretendard-Regular.woff2) format('woff2'), url(../font/woff/Pretendard-Regular.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: local('Pretendard Light'), url(../font/woff2/Pretendard-Light.woff2) format('woff2'), url(../font/woff/Pretendard-Light.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-display: swap;
    src: local('Pretendard ExtraLight'), url(../font/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(../font/woff/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-display: swap;
    src: local('Pretendard Thin'), url(../font/woff2/Pretendard-Thin.woff2) format('woff2'), url(../font/woff/Pretendard-Thin.woff) format('woff');
}

.pcf-wrap {

    background-color: #fbfcff;
    font-family: 'Pretendard', sans-serif;
}

.pcf-wrap .bg-edit {
    cursor: text;
}

.pcf-top {
    min-height: 430px;
    padding-top: 74px;
    background-color: #03c75a;
}

.pcf-inner {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
}

.pcf-h2 {
    padding: 22px 0 20px;
    margin-bottom: 0;
    font-size: 42px;
    font-weight: bold;
    color: #fff;
}

.pcf-top-txt {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    word-break: keep-all;
}

.calculat-img {
    position: absolute;
    right: 22px;
    top: 0;
    animation: shake 1s infinite;
    transform-origin: bottom center;
}

@keyframes shake {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@media screen and (max-width:940px) {
    .pcf-top {
        min-height: 512px;
        padding-top: 22px;
    }

    .pcf-top .pcf-inner {
        text-align: center;
    }

    .pcf-h2 {
        padding-top: 42px;
        font-size: 24px;
    }

    .pcf-top-txt {
        font-size: 16px;
    }

    .calculat-img {
        position: relative;
        width: 162px;
        right: 0;
    }

}

.pcf-content {
    padding-bottom: 40px;
}

.pcf-step {
    margin-top: -100px;
    margin-bottom: 40px;
    padding: 30px 20px;
    border-radius: 22px;
    box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.04);
    background-color: #fff;
}

.pcf-step-list {
    display: flex;
    justify-content: center;
    gap: 55px;
    margin-bottom: 20px;
    ;
}

.pcf-step-list li {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    padding-top: 32px;
    text-align: center;
}

.pcf-step-list li::before {
    content: '';
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #25c375;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.pcf-step-list li.bg01::before {
    background-image: url(../images/pcf/pcf-step1-icon.png);
}

.pcf-step-list li.bg02::before {
    background-image: url(../images/pcf/pcf-step2-icon.png);
}

.pcf-step-list li.bg03::before {
    background-image: url(../images/pcf/pcf-step3-icon.png);
}

.pcf-step-list li.bg04::before {
    background-image: url(../images/pcf/pcf-step4-icon.png);
}

.pcf-step-list li::after {
    content: '';
    width: 30px;
    height: 2px;
    background-color: #25c375;
    position: absolute;
    right: -44px;
    top: 50%;
    transform: translateY(-50%);
}

.pcf-step-list li.bg04::after {
    display: none;
}

.pcf-step-list li .top {
    font-size: 10px;
    line-height: 1;
    color: #808287;
}

.pcf-step-list li .bot {
    margin-top: 4px;
    ;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    color: #000;
}

.pcf-step-alert {
    min-height: 84px;
    margin-bottom: 0;
    padding: 12px 16px;
    border: 1px solid #dbe4ff;
    border-radius: 8px;
    background-color: #f2f9ff;
}

.pcf-step-alert dl {
    margin-bottom: 0;
}

.pcf-step-alert dt {
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    color: #4f6fd9;
}

.pcf-step-alert dd {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    color: #616161;
}

.pcf-step-alert dd.red {
    color: #ef3535;
}

.pcf-step-alert dd .blue {
    color: #4f6fd9;
    font-weight: bold;
}

@media screen and (max-width:940px) {
    .pcf-step {
        margin-top: -130px;
    }

    .pcf-step-list {
        gap: 30px;
    }

    .pcf-step-list li::after {
        display: none;
    }
}

@media screen and (max-width:768px) {
    .pcf-step-list {
        gap: 20px;
    }
}

.pcf-inner .collapse-group {
    margin-bottom: 20px;
}

.pcf-user .collapse-btn-wrap .collapse-btn {
    display: flex;
    justify-content: space-between;
    padding: 0 0 0 40px;
    background-image: none;
    background-color: transparent;
    border: 0;
    font-size: 28px;
    font-weight: bold;
    color: #000;
}

.pcf-user .collapse-btn-wrap .collapse-btn[aria-expanded=true]:after,
.pcf-user .collapse-btn-wrap .collapse-btn:after {
    content: '';
    width: 30px;
    height: 30px;
    background: url(../images/pcf/pcf-title-icon.png)no-repeat 0 0;
    position: absolute;
    left: 0;
    top: 6px;
    transform: rotate(0)
}

.pcf-user .collapse-btn-wrap .collapse-btn:hover {
    color: #000;
    box-shadow: none;
}

.pcf-user-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 96px;
    height: 48px;
    font-size: 16px;
    font-weight: 200;
    background-color: #121212;
    border-radius: 4px;
    color: #fff;
}

.pcf-user-btn i {
    margin-right: 8px;
    color: #fff !important;
}


.pcf-calc .collapse-btn-wrap .collapse-btn {
    padding: 0 0 0 40px;
    background-image: none;
    background-color: transparent;
    border: 0;
    font-size: 28px;
    font-weight: bold;
    color: #000;
}

.pcf-calc .collapse-btn-wrap .collapse-btn:after {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/pcf/pcf-title-icon.png)no-repeat 0 0;
    position: absolute;
    left: 0;
    top: 18px;
}

.pcf-calc .collapse-btn-wrap .collapse-btn:hover {
    color: #000;
    box-shadow: none;
}

.pcf-user .card,
.pcf-calc .card {
    border: 0;
    margin-top: 30px;
    padding: 0;
    background-color: transparent;
}

.pcf-box-wrap {
    gap: 20px;
}

.pcf-box {
    padding: 30px 20px;
    border-radius: 22px;
    box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.04);
    background-color: #fff;
}

.pcf-inner .form-custom label {
    padding-left: 10px;
    padding-right: 0;
    font-size: 14px;
    color: #1d2939;
}

.pcf-inner .required:after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 6px;
    background: url('../images/point.png')no-repeat center center/cover;
    position: absolute;
    left: 1px;
    top: 5px;
}

.pcf-inner input,
.pcf-inner .form-control {
    height: 46px;
    padding: 0 20px;
    border-radius: 6px;
    border: solid 1px #e6edf3;
    background-color: #fcffe6;
    font-size: 16px;
    color: #191f28;
}

.privacy-check {
    display: flex;
    width: 100%;
    margin-top: 30px;
    padding: 12px 16px;
    border-radius: 8px;
    border: solid 1px #e4e4e4;
    background-color: #fcfcfd;
}

.privacy-check .ft {
    font-size: 14px;
    color: #808287;
}

.privacy-check .privacy-check-btn {
    background-color: transparent;
    border: 0;
    text-decoration: underline;
    font-size: 14px;
    color: #222;
}

.privacy-check .check-state {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: #ef3535;
    font-size: 14px;
    color: #fff;
}

.privacy-check .check-state.check {
    background-color: #25c375;
}

.pcf-box-title {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 600;
    color: #000;
}

.pcf-form-num label {
    width: 80px;
}

.pcf-form-num label.sr-only {
    width: 1px;
}

.pcf-form-btn {
    display: flex;
    height: 48px;
    justify-content: center;
    align-items: center;
    padding: 0 20px !important;
    background-color: #25c375;
    color: #fff;
    border-radius: 4px;
    border: 1px solid #fff;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.pcf-box .pcf-form-btn {
    position: relative;
    z-index: 1001;
}

.pcf-reset-btn {
    display: flex;
    /* width: 96px; */
    height: 48px;
    padding: 0 20px;
    justify-content: center;
    align-items: center;
    background-color: #121212;
    color: #fff;
    border-radius: 4px;
    border: 1px solid #fff;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

@media screen and (max-width:940px) {

    .pcf-user .card,
    .pcf-calc .card {
        margin-top: 20px;
    }

    .pcf-box {
        flex-direction: column;
        margin: 0;
    }

    .pcf-box .form-group {
        max-width: 100%;
        padding: 0;
        margin-bottom: 10px;
    }

    .pcf-box-wrap {
        flex-direction: column;
        margin: 0;
    }

    .privacy-check {
        flex-direction: column;
    }

    .privacy-check .privacy-check-btn {
        text-align: left;
        padding: 10px 0;
    }

    .privacy-check .check-state {
        margin-left: 0;
        margin-right: auto;
    }
}

.multiselect-native-select .btn-group {
    width: 100%;
}

.multiselect-native-select .btn-group .btn-default.multiselect {
    height: 48px;
    padding: 0 16px;
    border-radius: 4px;
    border: solid 1px #e6edf3;
    background-color: #fff;
    font-size: 16px;
    font-weight: 400;
}

.pcf-box .btn-default.multiselect.dropdown-toggle::after {
    border: 0;
    content: '\f078';
    width: 24px;
    height: 24px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
    font-size: 18px;
}

.pcf-box .pcf-step-alert {
    margin: 20px 0;
}

.pcf-box .multiselect-container {
    z-index: 1002;
}

.pcf-box .multiselect-container>li>a>label.checkbox,
.pcf-box .multiselect-container>li>a>label.radio {
    width: auto;
    padding: 0;
    font-size: 14px;
    color: #1d1d1d;
    font-weight: 400;
}

.pcf-box .multiselect-container>li>a>label.checkbox input[type="checkbox"] {
    display: none;
}

.pcf-box .multiselect-container>li>a>label.checkbox::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid #e6edf3;
    margin-right: 8px;
    background-color: #fff;
    vertical-align: middle;
}

.pcf-box .multiselect-container>li>a>label.checkbox:has(input[type="checkbox"]:checked)::before {
    background-color: #00c473;
    border-color: #00c473;
    background-image: url('../images/pcf/pcf-checked.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.pcf-box .multiselect-container>li>a>label.checkbox:has(input[type="checkbox"]:checked) {
    color: #00c473;
}

/* 검색창 */
.pcf-box .multiselect-container input {
    height: 20px !important;
    border: solid 1px #25c375 !important;
    background-color: #fff !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}

/* 5열 구성 */
.pcf-box .multiselect-container .input-group {
    padding: 0;
}

.pcf-box .multicolumn-menu.show {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 60px;
    max-width: 1248px !important;
    padding: 10px;
    overflow-x: auto;
    border: solid 1px #e6edf3;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.04);
}

.pcf-box .multicolumn-menu li {
    white-space: nowrap;
}

.pcf-box .multicolumn-menu li:first-child {
    grid-column: 1 / -1;
    /* 전체 열을 차지 */
}

.pcf-box .multicolumn-menu {
    max-height: 400px;
    overflow-y: auto;
}

.pcf-box .multiselect-container li.active:hover a label {
    padding-left: 0;
}

.pcf-box .multicolumn-menu input[type="checkbox"]:checked {
    background-color: #25c375;
}

.pcf-box .multiselect-container li:hover {
    background-color: transparent;
}

.pcf-box .multiselect-container li:hover a label {
    color: #25c375;
}

@media screen and (max-width:940px) {
    .pcf-box .multicolumn-menu.show {
        grid-template-columns: repeat(1, 1fr);
        max-width: 100% !important;
        width: 100% !important;
    }

    .pcf-box .multiselect-container>li>a>label.checkbox,
    .pcf-box .multiselect-container>li>a>label.radio {
        font-size: 16px;
    }

    .pcf-box .multiselect-container input {
        height: 26px !important;
    }
}

.pcf-bot-txt {
    margin-top: 40px;
    font-size: 14px;
    font-weight: 500;
    color: #474747;
    line-height: 1.4;
    text-align: center;
}

.pcf-btn-group {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 20px;
    margin-top: 30px;
    ;
}

.pcf-btn-group i.fas {
    margin-right: 10px;
}

.pcf-footer {
    padding: 59px 63px;
    background-color: #3b3b3b;
}

.pcf-footer address,
.pcf-footer .pcf-copy {
    font-size: 16px;
    color: #a7a7a7;
}

.pcf-copy {
    margin-top: 14px;
    border-radius: 10px;
}

.pcf-modal .modal-content {
    border: 0;
}

.pcf-modal .modal-body {
    padding: 30px 36px 0;
}

/* 에러 모달 */
.pcf-modal .modal-dialog {
    max-width: 410px;
}

.pcf-modal.type .modal-dialog {
    max-width: 842px;
    margin: 0 auto;
}

.error-body {
    text-align: center;
}

.error-body .error-title {
    margin: 10px 0 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.56;
    color: #101828;
}

.error-body .error-txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43;
    color: #667085;
}

.pcf-modal .modal-footer {
    justify-content: center;
    padding: 10px 36px 30px;
    border: 0;
    background-color: #fff;
}

.pcf-modal .modal-footer .pcf-form-btn {
    width: 100%;
}

.modal-privacy-txt {
    padding: 18px 16px;
    background-color: #f6f6f6;
    border: 1px solid #ebebeb;
    text-align: left;
}

.modal-privacy-txt dl dt {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.modal-privacy-txt dl dd {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.14;
    color: #555;
}

/* 개인정보 수집 동의 모달 */
.privacy-checkbox {
    margin-top: 10px;
    text-align: right;
}

.privacy-checkbox input[type="checkbox"] {
    display: none;
}

.privacy-checkbox label {
    position: relative;
    padding-left: 30px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.14px;
    color: #222;
}

.privacy-checkbox label::before {
    content: '';
    width: 20px;
    height: 20px;
    display: inline-block;
    border: solid 1px #e6edf3;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.privacy-checkbox input[type="checkbox"]:checked+label::before {
    background: url(../images/pcf/pcf-checked.png)no-repeat 0 0/cover;
}

/* 산정결과 모달 */
.result-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.56px;
    color: #000;
}

.result-top .company {
    color: #25c375;
}

.result-top .pcf-unit {
    margin-left: 10px;
    padding: 8px;
    border-radius: 4px;
    background-color: #f7f7f8;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1;
    color: #98999f;
}

.result-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    margin-bottom: 30px;

}

.result-list li {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 184px;
    height: 184px;
    padding: 8px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px dotted #25c375;
}

.result-list li::after {
    content: '';
    width: 27px;
    height: 5px;
    background: url(../images/pcf/circle-after-icon.png)no-repeat 50% 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -52px;
}

.result-list li:last-child::after {
    display: none;
}

.result-list li .result-box {
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 104px;
    background-color: #fcfcfc;
    background-position: 50% 40px;
    background-repeat: no-repeat;
    border-radius: 50%;
    ;
    text-align: center;
}

.result-list li .result-box.bg01 {
    background-image: url(../images/pcf/pcf-01.png);
}

.result-list li .result-box.bg02 {
    background-image: url(../images/pcf/pcf-02.png);
}

.result-list li .result-box.bg03 {
    background-image: url(../images/pcf/pcf-03.png);
}

.result-list li .result-box dt {
    margin-bottom: 3px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: -0.72px;
    color: #25c375;
}

.result-list li .result-box dd {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.64px;
    color: #121212;
}

.result-chart {
    width: 100%;
    height: 230px;
    margin-bottom: 30px;
    padding: 12px;
    border: 1px solid #e3e3e3;
    text-align: center;
    box-sizing: border-box;
}

.contact-title {
    position: relative;
    margin-bottom: 10px;
    padding-top: 10px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.4px;
    text-align: center;
    color: #121212;
}

.contact-title::before {
    content: '';
    width: 26px;
    height: 3px;
    background-color: #25c375;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.contact-content {
    display: flex;
    justify-content: center;
    gap: 80px;
}

.contact-content dl {
    margin: 0
}

.contact-content dl dt {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: -0.72px;
    color: #98a2b3;
}

.contact-content dl dd {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.72px;
    color: #000;
}

@media screen and (max-width:940px) {
    .pcf-modal {
        padding-right: 0 !important;
    }

    .pcf-modal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100% !important;
    }

    .pcf-modal .modal-content {
        height: 100%;
        border-radius: 0;
    }

    .pcf-modal .modal-body {
        padding-top: 60px;
    }

    .result-top {
        flex-direction: column;
    }

    .result-list {
        gap: 10px;
    }

    .result-list li {
        max-width: 104px;
        width: 33.3334%;
        height: 104px;

    }

    .result-list li .result-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 0;
        background-image: none !important;
    }

    .contact-content {
        flex-direction: column;
        gap: 10px;
    }

    .pcf-footer {
        padding: 40px 16px;
        ;
    }

    .pcf-footer-box {
        flex-direction: column;
    }

    .pcf-footer-logos {
        padding-left: 0;
        margin-left: 0 !important;
        margin-top: 40px;
    }

    .pcf-modal .modal-body {
        background-color: #fff;
    }

    .pcf-modal .modal-footer {
        border-radius: 0;
        background-color: #fff;
    }
}

.select-bg {
    display: none;
}

.select-bg.on {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1000;

}