.curriculumPopup {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px
}

.curriculumPopup h1 {
    width: 85%;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.5
}

.curriculumPopup .curriculumContentWrap {
    width: 69%
}

.curriculumPopup .curriculumContentWrap .subTitle {
    display: flex
}

.curriculumPopup .curriculumContentWrap .subTitle p {
    color: #555;
    font-size: 1.125rem;
    margin: .3125rem 0 1.25rem 0
}

.curriculumPopup .curriculumContentWrap .subTitle p:nth-of-type(1) {
    border-right: 1px solid #555;
    padding-right: 1.25rem
}

.curriculumPopup .curriculumContentWrap .subTitle p:nth-of-type(2) {
    padding-left: 1.25rem
}

.curriculumPopup .curriculumContentWrap .videoWrap {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%
}

.curriculumPopup .curriculumContentWrap .videoWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.curriculumPopup .curriculumContentWrap .quizWrap {
    max-height: 37.5rem;
    padding: 0;
    overflow: auto;
    border: 1px solid #d7d7d7
}

.curriculumPopup .curriculumContentWrap .quizWrap::-webkit-scrollbar {
    width: .625rem;
    background: #ddd
}

.curriculumPopup .curriculumContentWrap .quizWrap::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    width: .625rem;
    background-color: rgba(55,84,148,.13)
}

.curriculumPopup .curriculumContentWrap .quizWrap h2 {
    font-size: 1.9375rem;
    font-weight: 600;
    color: #fff;
    background: #2b68c3;
    text-align: center;
    padding: .9375rem 0
}

.curriculumPopup .curriculumContentWrap .quizWrap .quiz {
    width: 60%;
    margin: 0 auto;
    padding: 4.0625rem 0;
    border-bottom: 1px solid #d7d7d7
}

.curriculumPopup .curriculumContentWrap .quizWrap .quiz p {
    text-align: center
}

.curriculumPopup .curriculumContentWrap .quizWrap .quiz p.quizQ {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.25rem
}

.curriculumPopup .curriculumContentWrap .quizWrap .quiz p.quizA button {
    border: 3px solid #e2e2e2;
    border-radius: 1.25rem;
    font-size: 3.125rem;
    padding: 1.25rem;
    font-weight: 900;
    width: 12.5rem
}

.curriculumPopup .curriculumContentWrap .quizWrap .quiz p.quizA button:hover {
    background-color: #f2f2f2
}

.researchWrap {
    border: 1px solid #d7d7d7;
    padding: 1.875rem;
    margin-top: 1.875rem;
    box-sizing: border-box;
}

.researchWrap .researchGubun { border:solid 1px silver; padding:15px; margin-bottom:20px; }
.researchWrap .researchGubun:first-child { border-top:15px solid #023f8b; border-radius:15px 15px 0 0;}

.researchWrap::-webkit-scrollbar {
    width: .625rem;
    background: #ddd
}

.researchWrap::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    width: .625rem;
    background-color: rgba(55,84,148,.13)
}

.researchWrap h2 {
    font-size: 1.625rem;
    font-weight: bold;
    margin-bottom: 1.25rem
}

.researchWrap h3 {
    font-size: 1.125rem;
    font-weight: bold;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    padding: .9375rem;
    background-color: #e2e2e2;
    border-top: 2px solid #2f68c2
}

.researchWrap .surveyError .surveyQuestion {
    color: red
}

.researchWrap .surveyWrap {
    padding: 0 1.25rem
}

.researchWrap .surveyWrap .surveyQuestion {
    margin: .625rem 0;
    font-size: .9375rem;
    font-weight: 600
}

.researchWrap .surveyWrap .surveyAnswer {
    margin: .625rem 0 1.875rem;
    display: block;
    /* flex-wrap: wrap; */
}

#base_info .surveyWrap .surveyAnswer {
    display: flex;
    flex-wrap: wrap;
}

#base_info .surveyAnswer .col-form-label,
.researchWrap .researchGubun .col-form-label {
    width:100%; flex: none; max-width:100%; display:block;
}
.surveyAnswer label.radio,
.surveyAnswer label.checkbox { display:block; }

.researchWrap .surveyWrap .surveyAnswer>div {
    min-width: 15%;
    margin: 5px 0 !important
}
p.surveyExtension { padding:0 10px; font-size:0.95em; }
.curriculumPopup .curriculumContentWrap .curriculumBtn {
    display: flex;
    margin-left: .5px
}

.curriculumPopup .curriculumContentWrap .curriculumBtn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    margin: 0;
    background: #999;
    border: none;
    box-sizing: border-box
}

.curriculumPopup .curriculumContentWrap .curriculumBtn a:nth-of-type(1) {
    border-right: 1px solid #646464
}

.curriculumPopup .curiculumDetail {
    width: 30%;
    padding-left: 15px
}

.curriculumPopup .curiculumDetail .detailList {
    margin-top: 20px
}

.curriculumPopup .curiculumDetail h3 {
    font-size: 1.375rem;
    margin-top: 2.8125rem
}

.curriculumPopup .curiculumDetail p.lecture-progress {
    color: #6f6f6f;
    margin: .9375rem 0
}

.curriculumPopup .curiculumDetail p.lecture-progress span {
    display: inline-block;
    margin: 0 .625rem
}

.curriculumPopup .curiculumDetail p.graph-wrap {
    width: 100%
}

.curriculumPopup .curiculumDetail p.graph-wrap span {
    display: inline-block
}

.curriculumPopup .curiculumDetail p.graph-wrap .graph {
    width: 100%;
    height: .625rem;
    border-radius: 1.25rem;
    background: #ccc;
    overflow: hidden
}

.curriculumPopup .curiculumDetail p.graph-wrap .graph span {
    height: inherit;
    border-radius: 1.25rem;
    background: #2f68c2;
    text-indent: -999999px
}

.curriculumPopup .curiculumDetail .detailList .courseTitle {
    padding: 1.5625rem;
    background-color: #ebebeb
}

.curriculumPopup .curiculumDetail .detailList .courseTitle h2 {
    font-weight: bold
}

.curriculumPopup .curiculumDetail .detailList .courseTitle .desc {
    margin-top: 1.25rem;
    font-size: .9375rem;
    line-height: 1.75
}

.curriculumPopup .curiculumDetail .detailList .courseItem {
    display: block;
    padding: .8125rem;
    border-bottom: 1px solid #ebebeb
}

.curriculumPopup .curiculumDetail .detailList .courseItem.active {
    border-left: 2px solid #2f68c2
}

.curriculumPopup .curiculumDetail .detailList .courseItem.active a p.title span:nth-of-type(1) {
    color: #2f68c2;
    font-weight: 600
}

.curriculumPopup .curiculumDetail .detailList .courseItem .desc {
    font-size: .8125rem;
    line-height: 1.4;
    margin-top: .3125rem;
    padding: .3125rem 0 0 0
}

.curriculumPopup .curiculumDetail .detailList .courseItem p.title {
    display: flex;
    font-size: .9375rem;
    line-height: 1.75
}

.curriculumPopup .curiculumDetail .detailList .courseItem p.title span:nth-of-type(1) {
    width: 80%
}

.curriculumPopup .curiculumDetail .detailList .courseItem p.title span:nth-of-type(1) i {
    font-size: .9375rem;
    margin-left: .3125rem;
    color: #112d52
}

.curriculumPopup .curiculumDetail .detailList .courseItem p.title span:nth-of-type(2) {
    width: 20%;
    text-align: right;
    font-size: .875rem
}

.curriculumPopup .curiculumDetail .detailList .courseItem .quiz {
    display: inline-flex;
    align-items: center;
    font-size: .9375rem;
    margin: .625rem 0 0 .3125rem
}

.curriculumPopup .curiculumDetail .detailList .courseItem .quiz i {
    font-size: 1.125rem;
    color: #0081f8;
    margin-right: .3125rem
}

.curriculumPopup button.btn-close {
    position: absolute;
    right: 1.875rem;
    top: 1.875rem;
    width: 1.875rem;
    height: 1.875rem;
    background: url(/images/ui/sub/btn_close.png) no-repeat center center;
    background-size: contain;
    color: transparent
}

@media screen and (max-width: 1024px) {
    .curriculumPopup .curriculumContentWrap,.curriculumPopup .curiculumDetail {
        width:100%
    }

    .researchWrap {
        max-height: 33.75rem
    }
    #manageWrap.researchWrap { max-height:100% !important;}

    .researchWrap .surveyWrap .surveyAnswer>div label {
        margin-right: .625rem
    }

    .curriculumPopup .curiculumDetail {
        padding-left: .3125rem
    }
}