@charset "utf-8";

html,body {
    width: 100%;
    height: 100%;
}

/* qs-main-wrap */
#qs-main-wrap {
    width: 100%;
    background:url("../img/bg.png") no-repeat center center / cover;
    padding:0 var(--body-padding);
}
.qs-main-inner {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:10rem 0;
}
.qm-box {
    position: relative;
    max-width: 82rem;
    padding:5rem;
    border:solid 5px #fff;
    background:#F5EBDC;
}
.qm-box::-webkit-scrollbar {
    width: 6px;
}
.qm-box::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.qm-box::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 4px;
}
.qm-box::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

.qm-box h1 {
    font-size: 4rem;
    font-weight: 700;
    color:#000;
    text-align: center;
}
.qm-box h3 {    
    font-size: 1.8rem;
    font-weight: 400;    
    text-align: center;
    color: rgb(146 64 14 / 1);
    line-height: 1.5;
    word-break: keep-all;
    word-wrap: break-word;    
    max-width: 58rem;
    margin:0 auto;
    margin-top: 3rem;
}
.qm-box h4 {
    font-size: 1.8rem;
    font-weight: 300;
    text-align: center;
    color:rgb(180 83 9 / 1);
    margin-top: 3rem;
    line-height: 1.5;
}
.qm-btn-box {
    display:flex;
    gap:2rem;
    margin-top: 5rem;
    padding:0 5rem;
}
.qm-btn-box a {
    position:relative;
    display:block;
    background:#fff;
    width: 28rem;
    height: 9rem;
    border-radius: 3rem;
    font-size: 2rem;
    font-weight: 700;
    color:#000;
    text-align: center;
    transition:all 0.3s ease;
    background:#C07032;
    display:flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.qm-btn-box a span {
    display:inline-block;
    font-size: 1.6rem;
    font-weight: 700;
    color:#fff;
}
.qm-btn-box a span b {
    display:block;
    font-size: 2rem;
    font-weight: 700;
}
.qm-btn-box a.element-btn::before {
    content:'';
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:-3rem;
    width:8rem;
    height:10.8rem;
    background:url("../img/result/character/rani.png") no-repeat center center;
    background-size: contain;
}
.qm-btn-box a.middle-high-btn::before {
    content:'';
    position:absolute;
    top:70%;
    transform:translateY(-50%);
    right:-3rem;
    width:10rem;
    height:9.14rem;
    background:url("../img/result/character/babi.png") no-repeat center center;
    background-size: contain;
}
.qm-box .bottom-banner {
    margin-top: 5rem;
    display:flex;
    align-items: center;
    justify-content: center;
    gap:2rem;
}
.qm-box .bottom-banner div {
    display:flex;
    align-items: center;
    gap:0.5rem;
}
.qm-box .bottom-banner div span {
    font-size: 1.4rem;
    color:rgb(76 86 100 / 1);
    font-weight: 700;
}
.qm-box .bottom-banner div.bn1 span img {
    width:8.5rem;
    height:auto;
}
.qm-box .bottom-banner div.bn2 span img {
    width:13rem;
    height:auto;
}

@media (max-width:750px){
    .qm-box h1 {
        font-size: 3rem;
    }
    .qm-box h3 br {
        display:none;
    }
    .qm-box h4 br {
        display:none;
    }
    .qm-btn-box {
        flex-direction: column;
    }
    .qm-btn-box a {
        width:100%;
    }
}
@media (max-width:520px){
    .qm-box h1 {
        font-size: 2.2rem;
    }
    .qm-box h3 {
        font-size: 1.6rem;
    }
    .qm-box h4 {
        font-size: 1.6rem;
    }
    .qm-btn-box {
        padding:0 2rem;
    }
    .qm-btn-box a span b {
        font-size: 1.8rem;
    }
    .qm-box .bottom-banner div span {
        font-size: 1.2rem;
    } 
}
@media (max-width:420px){
    .qm-box {
        padding: 3rem;
    }
    .qm-box .bottom-banner {
        flex-direction: column;
        align-items: center;
    }   
}



/* qs-step-wrap */
#qs-step-wrap {
    background:#fff;
    min-height:100vh;
}
/* step-header */
.step-header {
    display:flex;
    align-items: center;    
    padding:1.5rem var(--body-padding);
    background:url("../img/bg.png") no-repeat center center / cover;
    margin-bottom: 2rem;
    display:none;
}
.step-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color:#000;
    line-height: 1.5;
}

@media (max-width:641px){
    .step-header h2 span {
        display:block;
    }
}

/* step-container */
.step-container {
    padding:0 var(--body-padding);
}
.step-content {
    max-width: 102.4rem;
    margin:0 auto;
}
.step-content .tit-box {
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding:2rem 0;
    border-bottom:solid 1px #eee;
}
.step-content .tit-box h3 {
    font-size: 2rem;
    font-weight: 700;
    color:#000;
}
.step-content .progress-circle {
    position:relative;
    width:4rem;
    height:4rem;
    border-radius:100vh;
    background:#eee;
    overflow:hidden;
}
.step-content .progress-circle .inner {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    height:100%;
    background:#2080f0;
    transition:all 0.3s ease;
}
.step-content .progress-circle .box {
    position:absolute;
    top:0.3rem;
    left:0.3rem;
    bottom:0.3rem;
    right:0.3rem;
    background:#fff;
    border-radius:100vh;
    display:flex;
    align-items: center;
    justify-content: center;
}
.step-content .progress-circle .box span {
    display:inline-block;
    font-size: 1.3rem;
    font-weight: 400;
    color:#000;
    line-height: 1;
}

/* n-steps */
.n-steps {
    margin-top: 3rem;
    display:flex;
    gap:2rem;
}
.n-steps .n-step-item {
    position:relative;
    flex:1;
    display:flex;
    gap:1rem;
}
.n-steps .n-step-item .indicator {
    width:2.8rem;
    height:2.8rem;
    border-radius:100vh;
    background:#fff;
    overflow:hidden;
    display:flex;
    align-items: center;
    justify-content: center;
    border:solid 1px #666;
    padding-top:0.2rem;
}
.n-steps .n-step-item .indicator span {
    display:inline-block;    
    font-size: 1.5rem;
    font-weight: 400;
    color:#666;
    line-height: 1;
}
.n-steps .n-step-item .conts {
    flex:1;
    display:flex;
    flex-direction: column;
    gap:1rem;
}
.n-steps .n-step-item .conts .s-header {
    display:flex;
    align-items: center;
    gap:1rem;
}
.n-steps .n-step-item .conts .s-header .title {
    padding-top:0.6rem;
    font-size: 1.5rem;
    font-weight: 400;
    color:#666;
    line-height: 1;
}
.n-steps .n-step-item .conts .s-header .splitor {
    flex:1;
    height:1px;
    border-top:solid 1px #ccc;
}
.n-steps .n-step-item .conts .s-desc {

}
.n-steps .n-step-item .conts .s-desc p {
    font-size: 1.4rem;
    font-weight: 400;
    color:#666;
    line-height: 1.5;
    word-break: keep-all;
    word-wrap: break-word;
}

/* active */
.n-steps .n-step-item.active .indicator {
    background:#008a3d;
}
.n-steps .n-step-item.active .indicator span {
    color:#fff;
}
.n-steps .n-step-item.active .conts .s-header .title {
    color:#000;
}
.n-steps .n-step-item.active .conts .s-desc p {
    color:#000;
}

/* finished */
.n-steps .n-step-item.finished .indicator {
    border:solid 1px #008a3d;
    background:#fff;
}
.n-steps .n-step-item.finished .indicator span {
    display:inline-block;
    width:1.8rem;
    height:1.8rem;
    font-size:0;
    background:url("../img/step_check.svg") no-repeat center center;
    background-size: 1.8rem auto;
}
.n-steps .n-step-item.finished .conts .s-header .splitor {
    border-top:solid 1px #008a3d;
}

@media (max-width:641px){
    .n-steps {
        flex-direction: column;
    }
    .n-steps .n-step-item {
        width:100%;
    }  
    .n-steps .n-step-item .conts .s-header .splitor {
        position:absolute;
        top:3.2rem;
        left:1.35rem;
        right:0;
        width:1px;
        height:calc(100% - 1.7rem);
        border-left:solid 1px #ccc;
    }
    .n-steps .n-step-item.finished .conts .s-header .splitor {
        border-left:solid 1px #008a3d;
    }
}




/* n-tabs */
.n-tabs {
    margin-top: 3rem;
}
.n-tabs dl {
    border:solid 1px #eee;
}
.n-tabs dl dt {
    padding:1.5rem 2rem;
}
.n-tabs dl dt .q-tit {
    display:flex;
    align-items: center;
    gap:1rem;
}
.n-tabs dl dt .q-tit span {
    display:inline-block;
    font-size: 1.8rem;
    font-weight: 700;
    color:#008a3d;
}
.n-tabs dl dt .q-tit span img {
    width:2.8rem;
    height:auto;
}
.n-tabs dl dd {

}
.n-tabs dl dd ul {
    display:flex;
    flex-direction: column;
}
.n-tabs dl dd ul li {
    display:flex;
    flex-direction: column;
    gap:1rem;
    border-top:solid 1px #eee;
    padding:1.5rem 2rem 3rem;
}
.n-tabs dl dd ul li:nth-child(even) {
    background:#f5f5f5;
}
.n-tabs dl dd ul li label.n-label {
    display:inline-block;
    font-size: 1.6rem;
    font-weight: 700;
    color:#000;
    line-height: 1.5;
    word-break: keep-all;
    word-wrap: break-word;
}
.n-tabs dl dd ul li .n-radio-box {
    padding-top:0.5rem;
}
.n-tabs .hidden-wrap {
    display:none;
    margin-top: 2rem;
}
.n-tabs .hidden-wrap .n-check-box-wrap {
    margin-top: 1rem;
    padding-top: 0.5rem;
}

/* n-text-* */
.n-tabs p.n-text-blue {
    font-size: 1.4rem;
    font-weight: 400;
    color:#2080f0;
    line-height: 1.5;
    margin-top: 0.5rem;
    word-break: keep-all;
    word-wrap: break-word;
}
.n-tabs p.n-text-green {
    font-size: 1.4rem;
    font-weight: 400;
    color:#008a3d;
    line-height: 1.5;
    word-break: keep-all;
    word-wrap: break-word;
}
.n-tabs p.n-text-orenge {
    font-size: 1.4rem;
    font-weight: 400;
    color:#C07032;
    line-height: 1.5;
    word-break: keep-all;
    word-wrap: break-word;
}

/* n-list-footer */
.n-list-footer {    
    padding:1.5rem 2rem;
    border:solid 1px #eee;
    border-top:0;
}
.n-tabs p.n-text-source {
    font-size: 1.4rem;
    font-weight: 400;
    color:#2080f0;
    line-height: 1.5;
    margin-top: 0.5rem;
    word-break: keep-all;
    word-wrap: break-word;
    text-align: right;
}



/* n-card-action */
.n-card-action {
    margin-top: 2rem;
    padding:3rem 0;
    display:flex;
    align-items: center;
    justify-content: flex-end;
}








/* 응답 내역 */
#qs-save-pdf-wrap {
    background:#fff;
    width: 100%;
    min-height:100vh;
    max-width: 128rem;
    margin: 0 auto;
}
#qs-save-pdf-wrap > .page {
    width: 100%;
    max-width: 128rem;
    margin: 0 auto;
}
#qs-save-pdf-wrap > .page .page-wrap {
    width: 100%;
    max-width: 128rem;
    margin: 0 auto;
    display:flex;
    flex-direction: column;
    min-height: 181rem;
}
#qs-save-pdf-wrap > .page .page-wrap .n-tabs {
    padding:3rem var(--body-padding);
}
#qs-save-pdf-wrap > .page .page-wrap .qs-footer {
    margin-top: auto !important;
}

.qs-header {    
    width:100%;
    max-width: 128rem;
    margin: 0 auto;
}
.qs-header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    row-gap: 5rem;
    padding:5rem var(--body-padding);
    padding-right:9.4rem;
    background-color: rgba(74, 116, 150, 0.1);
}
.qs-header .h-title {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.qs-header .h-title p span {
    display: inline-block;
    padding: 0.7rem;
    font-size: 2.6rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    background-color: #1552a2;
}
.qs-header .h-title h2 img {
    width: 58rem;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}
.qs-header .h-profile {
    margin-left: auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    justify-content: space-between;
    padding:3rem;    
    background-color: #fff;
    border:solid 2px #1552a2;
    border-radius: 2rem;
    height: 100%;
}
.qs-header .h-profile::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: calc(100% - 2rem);
    width: 8.5rem;
    height: 11.8rem;
    background:url("../img/result/character/onion.png") no-repeat center center / contain;
}
.qs-header .h-profile p {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.qs-header .h-profile p + p {
    margin-top: 1.5rem;
}
.qs-header .h-profile p span {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 400;
    color: #4d565d;
}
.qs-header .h-profile p span.tt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 8.2rem;
    font-weight: 700;
    color: #000;
    text-align: justify;    
    white-space: nowrap;
}
.qs-header .h-profile p span.tt em {
    font-weight: 700;
}
.qs-header .h-profile .line {
    width: 1px;
    height: 5rem;
    background-color: #ccc;
}

@media (max-width:1025px){
    .qs-header .h-title p span {
        font-size: 2.2rem;
    }
}
@media (max-width:641px){
    .qs-header .inner {
        padding: 3rem var(--body-padding);
        padding-right: 6.4rem;
        row-gap: 3rem;
    }
    .qs-header .h-profile {
        padding: 2rem;
    }
    .qs-header .h-profile p span {
        font-size: 1.6rem;
    }
    .qs-header .h-profile p span.tt {
        width: 7.21rem;
    }
    .qs-header .h-profile::after {
        width: 6.5rem;
        height: 9rem;
    }
}
@media (max-width:481px){
    .qs-header .inner {
        padding-right: 4.4rem;
    }
    .qs-header .h-title p span {
        font-size: 2rem;
    }
    .qs-header .h-profile {
        gap: 1.5rem;
    }
    .qs-header .h-profile p {
        gap: 1rem;
    }
    .qs-header .h-profile::after {
        width: 5rem;
        height: 6.9rem;
    }
}
@media (max-width:372px){
    .qs-header .inner {
        padding-right: 3.6rem;
    }
    .qs-header .h-profile p span {
        font-size: 1.5rem;
    }
    .qs-header .h-profile p span.tt {
        width: 6.8rem;
    }
    .qs-header .h-profile::after {
        width: 4.5rem;
        height: 5.9rem;
    }
}


/* qs-footer */
.qs-footer {
    width:100%;
    max-width: 128rem;
    margin: 0 auto;
    margin-top: auto;
}  
.qs-footer .inner {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding:2.5rem 3rem;
    background-color: #838f9e;
}
.qs-footer .banner {
    /* */
}
.qs-footer .banner img {
    width: 34.1rem;
    height: auto;
    max-width: 100%;
    object-fit: cover;
}
.qs-footer .f-subject {
    margin-left: auto;
    font-size: 1.6rem;
    font-weight: 400;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.qs-footer .f-subject strong {
    font-size: 1.8rem;
    font-weight: 700;
}

@media (max-width:641px){
    .qs-footer .inner {
        flex-direction: column;
        align-items: center;
        row-gap: 3rem;
    }
    .qs-footer .f-subject {
        margin-left: 0;
    }
}