@charset "euc-kr";
@import url(button.css);
@import url(form.css);
@import url(popup.css);



/*마우스 애니메이션 추가*/
.mousescroll {
    position: fixed;
    z-index: 10;
    text-align: center;
    right: 19rem;
    bottom: 7rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12%;
    padding: 10px;
    cursor: pointer;
}

.mousescroll p {
    color: #fff;
    margin-bottom: 10px !important;
}

.mousescroll button {
    width: 28px;
    height: 42px;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    font-size: 0;
}

.mousescroll button:before {
    width: 2px;
    height: 8px;
    background: #fff;
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    animation: scroll 1s infinite;
}

@keyframes scroll {
    0% {
        top: 8px;
    }

    50% {
        top: 10px;
    }

    100% {
        top: 8px;
    }
}

@media (max-width:820px) {
    .tag_scroll_area {
        display: none !important;
    }
}

/*
 * STEP 01 : 사건선택
 */

/* 인트로 영상 재생후 보이게 */
#LAYOUT_NAVI.step.s01.c00 {
    display: none;
}

#LAYOUT_BODY.step.s01.c00 header {
    display: none;
}

#LAYOUT_BODY.step.s01.c00 #LAYOUT_CONT {
    display: none;
}

#LAYOUT_TAIL.step.s01.c00 {
    display: none;
}

/* #LAYOUT_BODY.step.s01.c00 .video_fullback_skip {
    right: 5rem;
    top: inherit;
    bottom: 5rem;
}
#LAYOUT_BODY.step.s09.c14 .video_fullback_skip {
    right: 5rem;
    top: inherit;
    bottom: 5rem;
} */

#LAYOUT_BODY.step.s01 .content-wrapper {
    position: relative;
    height: 100%;
    padding-bottom: 0;
}

#LAYOUT_BODY.step.s01 #CASE_PICS {
    position: fixed;
    top: 6rem;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
}

#LAYOUT_BODY.step.s01 #CASE_PICS .bx-viewport,
#LAYOUT_BODY.step.s01 #CASE_PICS .bx-wrapper {
    height: 100% !important;
}

#LAYOUT_BODY.step.s01 #CASE_PICS ul {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#LAYOUT_BODY.step.s01 #CASE_PICS ul li {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    display: none;
}

#LAYOUT_BODY.step.s01 #CASE_PICS ul li.on {
    display: block;
}

/* 살인 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c01 {
    background: url('../img/sub_step0100_img_case01.jpg') no-repeat center center;
    background-size: cover;
}

/* 절도 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c02 {
    background: url('../img/sub_step0100_img_case02.jpg') no-repeat center center;
    background-size: cover;
}

/* 강제추행 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c03 {
    background: url('../img/sub_step0100_img_case03.jpg') no-repeat center center;
    background-size: cover;
}

/* 사기 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c04 {
    background: url('../img/sub_step0100_img_case04.jpg') no-repeat center center;
    background-size: cover;
}

/* 도주치상 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c05 {
    background: url('../img/sub_step0100_img_case05.jpg') no-repeat center center;
    background-size: cover;
}

/* 공무집행방해 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c06 {
    background: url('../img/sub_step0100_img_case06.jpg') no-repeat center center;
    background-size: cover;
}

/* 상해 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c07 {
    background: url('../img/sub_step0100_img_case07.jpg') no-repeat center center;
    background-size: cover;
}

/* 방화 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c08 {
    background: url('../img/sub_step0100_img_case08.jpg') no-repeat center center;
    background-size: cover;
}

/* 횡령 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c09 {
    background: url('../img/sub_step0100_img_case09.jpg') no-repeat center center;
    background-size: cover;
}

/* 마약 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c10 {
    background: url('../img/sub_step0100_img_case10.jpg') no-repeat center center;
    background-size: cover;
}

/* 명예훼손 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c11 {
    background: url('../img/sub_step0100_img_case11.jpg') no-repeat center center;
    background-size: cover;
}

/* 디지털 성범죄 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c12 {
    background: url('../img/sub_step0100_img_case12.jpg') no-repeat center center;
    background-size: cover;
}

/* 강도상해 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c13 {
    background: url('../img/sub_step0100_img_case13.jpg') no-repeat center center;
    background-size: cover;
}

/* 무고 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c14 {
    background: url('../img/sub_step0100_img_case14.jpg') no-repeat center center;
    background-size: cover;
}

/* 위증교사 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c15 {
    background: url('../img/sub_step0100_img_case15.jpg') no-repeat center center;
    background-size: cover;
}

/* 중감금치상 */
#LAYOUT_BODY.step.s01 #CASE_PICS ul li.c16 {
    background: url('../img/sub_step0100_img_case16.jpg') no-repeat center center;
    background-size: cover;
}


#LAYOUT_BODY.step.s01 .cont {
    z-index: 90;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 5rem;
}

#LAYOUT_BODY.step.s01 .cont>.tit {
    margin: 15rem 0 0 5%;
    font-size: 2.4rem;
    color: #fff;
}

#LAYOUT_BODY.step.s01 .cont>.tit strong {
    display: block;
    margin-bottom: 2rem;
    font-size: 7.2rem;
    font-weight: 800;
}

#LAYOUT_BODY.step.s01 .cont>.tit strong br {
    display: none;
}

#LAYOUT_BODY.step.s01 .cont>.sel-wrapper {
    border-top: solid 1px rgba(255, 255, 255, 0.1);
    position: relative;
    margin: 10rem 0 0 5%;
    padding: 3rem 0 0 0;
    width: 60rem;
    color: #fff;
}

#LAYOUT_BODY.step.s01 .cont>.sel-wrapper .indi {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 5rem;
}

#LAYOUT_BODY.step.s01 .cont>.sel-wrapper .num {
    font-size: 2.4rem;
    color: rgba(255, 255, 255, 0.7);
}

#LAYOUT_BODY.step.s01 .cont>.sel-wrapper .num strong {
    font-size: 3.6rem;
    font-weight: 800;
    color: #fff;
}

#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR {
    height: 20rem;
    overflow: hidden;
    margin: 10px 0 0;
}

#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li {
    display: block;
    height: 100%;
    font-size: 2.4rem;
    color: #fff
}

#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li strong {
    display: block;
    margin: 0 0 2rem;
    font-size: 2.4rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li strong em {
    display: inline-block;
    margin-left: 1rem;
    height: 4.8rem;
    line-height: 4.4rem;
    padding: 0 1.5rem;
    border: solid 3px #fff;
    border-radius: 2.4rem;
    color: #fff;
    font-weight: 600;
    padding-left: 4.5rem;
}

/* data-caseid */
/* 살인 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="01"] strong em {
    padding-left: 5.5rem;
    background: url("../img/case_c01_on.png") no-repeat left 1.5rem center;
    background-size: auto 1.2rem;
}

/* 절도 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="02"] strong em {
    background: url("../img/case_c02_on.png") no-repeat left 1.5rem center;
    background-size: auto 2rem;
}

/* 강제추행 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="03"] strong em {
    padding-left: 4.5rem;
    background: url("../img/case_c03_on.png") no-repeat left 1.5rem center;
    background-size: auto 2rem;
}

/* 사기 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="04"] strong em {
    background: url("../img/case_c04_on.png") no-repeat left 1.5rem center;
    background-size: auto 2rem;
}

/* 도주치상 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="05"] strong em {
    padding-left: 5rem;
    background: url("../img/case_c05_on.png") no-repeat left 1.5rem center;
    background-size: auto 2rem;
}

/* 공무집행방해 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="06"] strong em {
    background: url("../img/case_c06_on.png") no-repeat left 1.5rem center;
    background-size: auto 2rem;
}

/* 상해 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="07"] strong em {
    background: url("../img/case_c07_on.png") no-repeat left 1.5rem center;
    background-size: auto 2rem;
}

/* 방화 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="08"] strong em {
    background: url("../img/case_c08_on.png") no-repeat left 1.5rem center;
    background-size: auto 2rem;
}

/* 횡령 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="09"] strong em {
    background: url("../img/case_c09_on.png") no-repeat left 1.5rem center;
    background-size: auto 2rem;
}

/* 마약 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="10"] strong em {
    background: url("../img/case_c10_on.png") no-repeat left 1.5rem center;
    background-size: auto 2rem;
}

/* 명예훼손 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="11"] strong em {
    padding-left: 5rem;
    background: url("../img/case_c11_on.png") no-repeat left 1.5rem center;
    background-size: auto 2rem;
}

/* 디지털 성범죄 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="12"] strong em {
    background: url("../img/case_c12_on.png") no-repeat left 1.5rem center;
    background-size: auto 2rem;
}

/* 강도상해 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="13"] strong em {
    padding-left: 5rem;
    background: url("../img/case_c13_on.png") no-repeat left 1.5rem center;
    background-size: 2.5rem auto;
}

/* 무고범죄 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="14"] strong em {
    padding-left: 4rem;
    background: url("../img/case_c14_on.png") no-repeat left 1.5rem center;
    background-size: auto 2rem;
}

/* 위증교사 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="15"] strong em {
    padding-left: 3.5rem;
    background: url("../img/case_c_perjury_on.png") no-repeat left 1.5rem center;
    background-size: auto 2rem;
}

/* 중감금치상 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li[data-caseid="16"] strong em {
    padding-left: 4.6rem;
    background: url("../img/case_c_prize_on.png") no-repeat left 1.5rem center;
    background-size: auto 1.8rem;
}


#LAYOUT_BODY.step.s01 .cont>.sel-wrapper .indi>div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15rem;
    display: flex;
    align-items: center;
    column-gap: 4rem;
}

#LAYOUT_BODY.step.s01 .cont>.sel-wrapper .indi>div a {
    display: inline-block;
    width: 2rem;
    height: 3.2rem;
    font-size: 0;
}

#LAYOUT_BODY.step.s01 .cont>.sel-wrapper .indi>div span.line {
    display: inline-block;
    font-size: 0;
    width: 1px;
    height: 2.4rem;
    border-left: 1px solid #fff;
    opacity: 0.2;
}

/* 이전 범죄 보기 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper a#CASE_BTN_PREV {
    background: url('../img/main_vs_prev.png') no-repeat;
    background-size: auto 3.2rem;
}
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper a#CASE_BTN_PREV[role="button"] {
    cursor: pointer;
    text-decoration: none;
}

/* 다음 범죄 보기 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper a#CASE_BTN_NEXT {
    background: url('../img/main_vs_next.png') no-repeat;
    background-size: auto 3.2rem;
}
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper a#CASE_BTN_NEXT[role="button"] {
    cursor: pointer;
    text-decoration: none;
}

/* 영상 일시정지 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper a#CASE_BTN_PAUSE {
    width: 2.2rem;
    background: url('../img/main_vs_pause.png') no-repeat;
    background-size: auto 3.2rem;
}
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper a#CASE_BTN_PAUSE[role="button"] {
    cursor: pointer;
    text-decoration: none;
}

/* 영상 재생 */
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper a#CASE_BTN_PLAY {
    display:none;
    width: 2.6rem;
    background: url('../img/main_vs_play.png') no-repeat;
    background-size: auto 3.2rem;
}
#LAYOUT_BODY.step.s01 .cont>.sel-wrapper a#CASE_BTN_PLAY[role="button"] {
    cursor: pointer;
    text-decoration: none;
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s01 .cont>.tit {
        font-size: 1.8rem;
        line-height: 1.6;
    }

    #LAYOUT_BODY.step.s01 .cont>.tit strong {
        font-size: 4.4rem;
        line-height: 1.2;
    }

    #LAYOUT_BODY.step.s01 .cont>.tit strong br {
        display: block;
    }
}

@media (max-width:620px) {
    #LAYOUT_BODY.step.s01 .cont>.sel-wrapper {
        margin: 6rem 5% 0 5%;
        width: auto;
    }
}

@media (max-width:580px) {
    #LAYOUT_BODY.step.s01 .cont>.sel-wrapper {
        margin: 4rem 5% 0 5%;
        width: auto;
    }
}

@media (max-width:480px) {
    #LAYOUT_BODY.step.s01 .cont>.sel-wrapper #CASE_SELECTOR li br {
        display: none;
    }
}



/* 커스텀 페이지네이션 */
#LAYOUT_BODY.step.s01 .sel-pager {
    position: absolute;
    top: 5rem;
    right: 20rem;
}

#LAYOUT_BODY.step.s01 .sel-pager h2 {
    font-size: 2.5rem;
    color: #fff;
    font-weight: 600;
    text-align: center;
}

#LAYOUT_BODY.step.s01 .sel-pager ul {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    flex-wrap: wrap;
    width: calc(26rem + 1rem);
}

#LAYOUT_BODY.step.s01 .sel-pager ul li {
    text-align: center;
    display: inline-block;
    width: 13rem;
}

#LAYOUT_BODY.step.s01 .sel-pager ul li a {
    display: block;
    border-radius: 5px;
    height: 8rem;
    background: #fff;
    font-family: 'HangeulNuri';
    font-size: 1.5rem;
    color: #000;
    padding-top: 4.8rem;
}

#LAYOUT_BODY.step.s01 .sel-pager ul li a[role="button"] {
    cursor: pointer;
    text-decoration: none;
}

#LAYOUT_BODY.step.s01 .sel-pager ul li a.active {
    background: var(--first-color);
    color: #fff;
}

/* new 범죄 선택 */
#LAYOUT_BODY.step.s01 .sel-pager ul li.new {
    position: relative;
}

#LAYOUT_BODY.step.s01 .sel-pager ul li.new:after {
    display: block;
    content: "NEW";
    padding: 0 0.8rem;
    height: 2rem;
    line-height: 2rem;
    background: var(--first-color);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
    border-radius: 1rem;
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
}

/* data-case-id */
/* 살인 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="01"] a {
    background: #fff url("../img/case_c01.png") no-repeat center top 1.5rem;
    background-size: auto 1.68rem;
}

/* 절도 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="02"] a {
    background: #fff url("../img/case_c02.png") no-repeat center top 1.5rem;
    background-size: auto 2.64rem;
}

/* 강제추행 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="03"] a {
    background: #fff url("../img/case_c03.png") no-repeat center top 1.5rem;
    background-size: auto 3.04rem;
}

/* 사기 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="04"] a {
    background: #fff url("../img/case_c04.png") no-repeat center top 1.5rem;
    background-size: auto 2.96rem;
}

/* 도주치상 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="05"] a {
    background: #fff url("../img/case_c05.png") no-repeat center top 1.5rem;
    background-size: auto 2.56rem;
}

/* 공무집행방해 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="06"] a {
    background: #fff url("../img/case_c06.png") no-repeat center top 1.5rem;
    background-size: auto 2.8rem;
}

/* 상해 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="07"] a {
    background: #fff url("../img/case_c07.png") no-repeat center top 2rem;
    background-size: auto 2.56rem;
}

/* 방화 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="08"] a {
    background: #fff url("../img/case_c08.png") no-repeat center top 1.5rem;
    background-size: auto 2.72rem;
}

/* 횡령 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="09"] a {
    background: #fff url("../img/case_c09.png") no-repeat center top 1.5rem;
    background-size: auto 2.8rem;
}

/* 마약 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="10"] a {
    background: #fff url("../img/case_c10.png") no-repeat center top 1.5rem;
    background-size: auto 2.88rem;
}

/* 명예훼손 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="11"] a {
    background: #fff url("../img/case_c11.png") no-repeat center top 1.5rem;
    background-size: auto 2.56rem;
}

/* 디지털 성범죄 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="12"] a {
    background: #fff url("../img/case_c12.png") no-repeat center top 1.5rem;
    background-size: auto 3.2rem;
}

/* 강도상해 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="13"] a {
    background: #fff url("../img/case_c13.png") no-repeat center top 2.2rem;
    background-size: auto 1.76rem;
}

/* 무고범죄 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="14"] a {
    background: #fff url("../img/case_c14.png") no-repeat center top 1.2rem;
    background-size: auto 3.28rem;
}

/* 위증교사 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="15"] a {
    background: #fff url("../img/case_c_perjury.png") no-repeat center top 1.2rem;
    background-size: auto 3.68rem;
}

/* 중감금치상 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="16"] a {
    background: #fff url("../img/case_c_prize.png") no-repeat center top 1.2rem;
    background-size: auto 3.12rem;
}

/*  active  ============================================================= */
/* 살인 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="01"] a.active {
    background: var(--first-color) url("../img/case_c01_on.png") no-repeat center top 1.5rem;
    background-size: auto 1.68rem;
}

/* 절도 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="02"] a.active {
    background: var(--first-color) url("../img/case_c02_on.png") no-repeat center top 1.5rem;
    background-size: auto 2.64rem;
}

/* 강제추행 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="03"] a.active {
    background: var(--first-color) url("../img/case_c03_on.png") no-repeat center top 1.5rem;
    background-size: auto 3.04rem;
}

/* 사기 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="04"] a.active {
    background: var(--first-color) url("../img/case_c04_on.png") no-repeat center top 1.5rem;
    background-size: auto 2.96rem;
}

/* 도주치상 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="05"] a.active {
    background: var(--first-color) url("../img/case_c05_on.png") no-repeat center top 1.5rem;
    background-size: auto 2.56rem;
}

/* 공무집행방해 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="06"] a.active {
    background: var(--first-color) url("../img/case_c06_on.png") no-repeat center top 1.5rem;
    background-size: auto 2.8rem;
}

/* 상해 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="07"] a.active {
    background: var(--first-color) url("../img/case_c07_on.png") no-repeat center top 2rem;
    background-size: auto 2.56rem;
}

/* 방화 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="08"] a.active {
    background: var(--first-color) url("../img/case_c08_on.png") no-repeat center top 1.5rem;
    background-size: auto 2.72rem;
}

/* 횡령 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="09"] a.active {
    background: var(--first-color) url("../img/case_c09_on.png") no-repeat center top 1.5rem;
    background-size: auto 2.8rem;
}

/* 마약 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="10"] a.active {
    background: var(--first-color) url("../img/case_c10_on.png") no-repeat center top 1.5rem;
    background-size: auto 2.88rem;
}

/* 명예훼손 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="11"] a.active {
    background: var(--first-color) url("../img/case_c11_on.png") no-repeat center top 1.5rem;
    background-size: auto 2.56rem;
}

/* 디지털 성범죄 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="12"] a.active {
    background: var(--first-color) url("../img/case_c12_on.png") no-repeat center top 1.5rem;
    background-size: auto 3.2rem;
}

/* 강도상해 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="13"] a.active {
    background: var(--first-color) url("../img/case_c13_on.png") no-repeat center top 2.2rem;
    background-size: auto 1.76rem;
}

/* 무고범죄 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="14"] a.active {
    background: var(--first-color) url("../img/case_c14_on.png") no-repeat center top 1.2rem;
    background-size: auto 3.28rem;
}

/* 위증교사 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="15"] a.active {
    background: var(--first-color) url("../img/case_c_perjury_on.png") no-repeat center top 1.2rem;
    background-size: auto 3.68rem;
}

/* 중감금치상 */
#LAYOUT_BODY.step.s01 .sel-pager ul li[data-case-id="16"] a.active {
    background: var(--first-color) url("../img/case_c_prize_on.png") no-repeat center top 1.2rem;
    background-size: auto 3.12rem;
}


@media (max-width:1220px) {
    #LAYOUT_BODY.step.s01 .sel-pager {}
}

@media (max-width:1024px) {
    #LAYOUT_BODY.step.s01 .sel-pager ul {}
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s01 .sel-pager {
        right: 5%;
    }
}

@media (max-width:580px) {
    #LAYOUT_BODY.step.s01 .cont>.tit {
        margin: 6rem 0 0 5%;
    }

    #LAYOUT_BODY.step.s01 .sel-pager {
        position: relative;
        top: inherit;
        right: inherit;
        margin-top: 5rem;
        padding: 0 5%;
        padding-bottom: 8rem;
    }

    #LAYOUT_BODY.step.s01 .sel-pager h2 {
        text-align: left;
    }

    #LAYOUT_BODY.step.s01 .sel-pager ul {
        width: 100%;
    }

    #LAYOUT_BODY.step.s01 .sel-pager ul li {
        width: calc(50% - 0.5rem);
    }

    #LAYOUT_BODY.step.s01 .sel-pager ul li a {
        height: 9rem;
        padding-top: 5.5rem;
    }
}

@media (max-width:520px) {}

@media (max-width:420px) {}






/*
 * STEP 02 : 사건개요 및 형량
 */
/* 레이아웃 및 단계별 백그라운드 */
#LAYOUT_BODY.step.s02 {
    position: relative;
}

#LAYOUT_BODY.step.s02>.sect-bg {
    z-index: -100;
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 100%;
    transform: translateX(-50%) translateY(-50%);
}

#LAYOUT_BODY.step.s02>.sect-bg>div {
    height: 100%;
}

#LAYOUT_BODY.step.s02>.sect-bg>div.s01 {
    background-color: #333;
}

#LAYOUT_BODY.step.s02.c01>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0201_img01.jpg') no-repeat center center;
    background-size: cover;
}

#LAYOUT_BODY.step.s02.c02>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0202_img01.jpg') no-repeat center center;
    background-size: cover;
}

#LAYOUT_BODY.step.s02.c03>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0203_img01.jpg') no-repeat center center;
    background-size: cover;
}

#LAYOUT_BODY.step.s02.c04>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0204_img01.jpg') no-repeat center center;
    background-size: cover;
}

#LAYOUT_BODY.step.s02.c05>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0205_img01.jpg') no-repeat center center;
    background-size: cover;
}

#LAYOUT_BODY.step.s02.c06>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0206_img01.jpg') no-repeat center center;
    background-size: cover;
}

#LAYOUT_BODY.step.s02.c07>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0207_img01.jpg') no-repeat center center;
    background-size: cover;
}

#LAYOUT_BODY.step.s02.c08>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0208_img01.jpg') no-repeat center center;
    background-size: cover;
}

#LAYOUT_BODY.step.s02.c09>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0209_img01.jpg') no-repeat center center;
    background-size: cover;
}

#LAYOUT_BODY.step.s02.c10>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0210_img01.jpg') no-repeat center center;
    background-size: cover;
}

/* 명예훼손 */
#LAYOUT_BODY.step.s02.c11>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0211_img01.jpg') no-repeat center center;
    background-size: cover;
}

/* 디지털 성범죄 */
#LAYOUT_BODY.step.s02.c12>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0212_img01.jpg') no-repeat center center;
    background-size: cover;
}

/* 강도상해 */
#LAYOUT_BODY.step.s02.c13>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0213_img01.jpg') no-repeat center center;
    background-size: cover;
}

/* 무고범죄 */
#LAYOUT_BODY.step.s02.c14>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0214_img01.jpg') no-repeat center center;
    background-size: cover;
}

/* 위증교사 */
#LAYOUT_BODY.step.s02.c15>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0215_img01.jpg') no-repeat center center;
    background-size: cover;
}

/* 중감금치상 */
#LAYOUT_BODY.step.s02.c16>.sect-bg>div.s01 {
    background: #333 url('../img/sub_step0216_img01.jpg') no-repeat center center;
    background-size: cover;
}

/* 단계별 레이아웃 */
#LAYOUT_BODY.step.s02>.cont {
    position: absolute;
    left: calc((100% - 17rem)/2);
    top: 0;
    width: 124rem;
    transform: translateX(-50%);
    padding-top: 6rem;
    padding-bottom: 8rem;
}

#LAYOUT_BODY.step.s02>.cont>h2.ctit {
    padding: 5rem 0 5rem;
    font-size: 4.8rem;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

@media (max-width: 1560px) {
    #LAYOUT_BODY.step.s02>.cont {
        width: calc(100% - 17rem - 4rem);
    }
}

@media (max-width: 1024px) {
    #LAYOUT_BODY.step.s02>.cont {
        padding-bottom: 16rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s02>.cont {
        left: 50%;
        width: calc(100% - 4rem);
    }

    #LAYOUT_BODY.step.s02>.cont>h2.ctit {
        font-size: 3.8rem;
        padding: 6rem 0 5rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s02>.cont {
        width: calc(100% - 10%);
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s02>.cont {
        width: calc(100% - 10%);
    }
}



/* 탭 메뉴 */
#LAYOUT_BODY.step.s02 .c-tab {
    display: flex;
    align-items: center;
    column-gap: 5px;
}

#LAYOUT_BODY.step.s02 .c-tab li {
    width: 20rem;
    text-align: center;
}

#LAYOUT_BODY.step.s02 .c-tab li a {
    position: relative;
    display: block;
    height: 6rem;
    line-height: 6rem;
    background: var(--body-color);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
}

#LAYOUT_BODY.step.s02 .c-tab li a:before {
    display: none;
    content: "";
    position: absolute;
    width: 100%;
    height: 1rem;
    background: var(--first-color);
    top: -1rem;
    left: 0;
}

#LAYOUT_BODY.step.s02 .c-tab li a span {
    display: inline-block;
    line-height: 1;
    padding-bottom: 0.3rem;
    border-bottom: solid 1px var(--body-color);
}

#LAYOUT_BODY.step.s02 .c-tab li.active a {
    line-height: 5rem;
    font-size: 2rem;
    font-weight: 700;
    background: var(--first-color);
}

#LAYOUT_BODY.step.s02 .c-tab li.active a:before {
    display: block;
}

#LAYOUT_BODY.step.s02 .c-tab li.active a span {
    border-bottom: solid 1px #fff;
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s02 .c-tab {
        justify-content: center;
    }

    #LAYOUT_BODY.step.s02 .c-tab li {
        width: 15rem;
    }

    #LAYOUT_BODY.step.s02 .c-tab li a {
        height: 5rem;
        line-height: 5rem;
    }

    #LAYOUT_BODY.step.s02 .c-tab li.active a {
        line-height: 4rem;
    }
}

/* 탭 내용 */
/* 사건개요 */
#LAYOUT_BODY.step.s02 .c-wrap .summary {
    display: flex;
}

#LAYOUT_BODY.step.s02 .c-wrap .summary .thumb {
    flex: 1;
    position: relative;
    border: solid 2rem var(--first-color);
    overflow: hidden;
}

#LAYOUT_BODY.step.s02 .c-wrap .summary .thumb:after {
    display: block;
    content: "";
    padding-top: 100%;
}

#LAYOUT_BODY.step.s02 .c-wrap .summary .thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 101%;
    width: auto;
}

#LAYOUT_BODY.step.s02 .c-wrap .summary .info {
    flex: 1.5;
    padding: 5rem;
    background: #fff;
}

#LAYOUT_BODY.step.s02 .c-wrap .summary .info .tit {
    position: relative;
    font-size: 2.8rem;
    color: var(--first-color);
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    word-break: keep-all;
}

#LAYOUT_BODY.step.s02 .c-wrap .summary .info .tit i {

    display: none;
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'HangeulNuri';
    font-size: 10rem;
    line-height: 1;
}

#LAYOUT_BODY.step.s02 .c-wrap .summary .info .cnt {
    margin-top: 3rem;
    font-size: 2rem;
    color: var(--body-color);
    line-height: 1.7;
}

#LAYOUT_BODY.step.s02.c11 .c-wrap .summary .info .cnt {
    font-size: 2.1rem;
    line-height: 2;
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s02 .c-wrap .summary {
        flex-wrap: wrap;
    }

    #LAYOUT_BODY.step.s02 .c-wrap .summary .thumb {
        flex-basis: 100%;
    }

    #LAYOUT_BODY.step.s02 .c-wrap .summary .thumb:after {
        padding-top: 65%;
    }

    #LAYOUT_BODY.step.s02 .c-wrap .summary .thumb img {
        width: 100%;
        height: auto;
    }

    #LAYOUT_BODY.step.s02 .c-wrap .summary .info {
        flex: 1;
        flex-basis: 100%;
        padding: 4rem 3rem;
    }

    #LAYOUT_BODY.step.s02 .c-wrap .summary .info .tit {
        font-size: 2.6rem;
        padding-top: 3rem;
    }

    #LAYOUT_BODY.step.s02 .c-wrap .summary .info .tit i {
        font-size: 8rem;
    }
}

/* 체험 전 형량 */
#LAYOUT_BODY.step.s02 .c-wrap .choice {
    padding: 5rem;
    background: #fff;
    border: solid 2rem var(--first-color);
}

#LAYOUT_BODY.step.s02 .c-wrap .choice h3 {
    font-size: 2.6rem;
    font-weight: 600;
    text-align: center;
}

#LAYOUT_BODY.step.s02 .c-wrap .choice h3 strong {
    color: var(--first-color);
    font-weight: 800;
}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox {
    margin-top: 4rem;
    display: flex;
    column-gap: 4rem;
}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox h4 {
    font-size: 2.4rem;
    color: #000;
    font-weight: 700;
    border-bottom: solid 1px #000;
    padding-bottom: 0.5rem;
    margin-bottom: 3rem;
}

/* 체험 전 형량 선택 */
#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .select {
    flex: 1.2;
}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .select ul.lst {}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .select ul.lst li+li {
    margin-top: 1.5rem;
}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .select ul.lst li a {
    font-size: 2rem;
    display: block;
    height: 2.2rem;
    line-height: 2.2rem;
    padding: 0 0 0 3.2rem;
    background: url('../img/common_icon_radio01_off.png') no-repeat left center;
    background-size: 2.2rem auto;
}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .select ul.lst li a[role="radio"] {
    cursor: pointer;
    text-decoration: none;
}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .select ul.lst li a[role="radio"]:focus {
    outline: 1px dashed var(--first-color);
    outline-offset: 2px;
}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .select ul.lst li a.on {
    color: #000;
    background: url('../img/common_icon_radio01_on.png') no-repeat left center;
    background-size: 2.2rem auto;
}

/* 집행유예란? */
#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .cnt {
    flex: 1;
}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .cnt .txt {
    font-size: 2rem;
    font-weight: 500;
}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .cnt .txt i {
    font-size: 1.6rem;
    color: var(--first-color);
}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .cnt .ext {
    margin-top: 1.5rem;
    padding-top: 2rem;
    border-top: solid 1px #e5e5e5;
    font-size: 2rem;
    color: var(--first-color);
    font-weight: 600;
}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .cnt .ext i {
    display: inline-block;
    height: 2.8rem;
    line-height: 2.8rem;
    background: var(--first-color);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
    padding: 0 1.5rem;
    border-radius: 1.4rem;
    margin-right: 1rem;
}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .cnt .ext-list {}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .cnt .ext-list li {
    margin-top: 1rem;
    font-size: 1.8rem;
}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .cnt .ext-list li:before {
    display: inline-block;
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    background: var(--first-color);
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}

#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .cnt .ext-list li span {
    display: inline-block;
    height: 2.4rem;
    line-height: 2.4rem;
    /* padding-right:3.5rem; */
}

/* #LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .cnt .ext-list li.xx span {
    background:url("../img/sub_step0200_icon_x.png") no-repeat right center;
    background-size:2.4rem auto;
}
#LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .cnt .ext-list li.oo span {
    background:url("../img/sub_step0200_icon_o.png") no-repeat right center;
    background-size:2.4rem auto;
} */

@media (max-width:1380px) {
    #LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .cnt .txt br {
        display: none;
    }

    #LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .cnt .txt i {
        display: block;
    }
}

@media (max-width:1200px) {
    #LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .select {
        flex: 1;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s02 .c-wrap .choice {
        padding: 4rem 3rem;
    }

    #LAYOUT_BODY.step.s02 .c-wrap .choice h3 {
        font-size: 2.2rem;
    }

    #LAYOUT_BODY.step.s02 .c-wrap .choice h3 br {
        display: none;
    }

    #LAYOUT_BODY.step.s02 .c-wrap .choice .cbox {
        flex-wrap: wrap;
        margin-top: 5rem;
    }

    #LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .select {
        flex-basis: 100%;
    }

    #LAYOUT_BODY.step.s02 .c-wrap .choice .cbox .cnt {
        margin-top: 5rem;
        flex-basis: 100%;
    }
}





/*
 * STEP 03 : ??????
 */
#LAYOUT_BODY.step.s03>.sect-bg {
    z-index: -100;
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 100%;
    transform: translateX(-50%) translateY(-50%);
}

#LAYOUT_BODY.step.s03>.sect-bg.c01 {
    background: url('../img/sub_step0307_bg.jpg') no-repeat center;
    background-size: cover;
}

#LAYOUT_BODY.step.s03>.sect-bg.c02 {
    background: url('../img/sub_step0307_bg.jpg') no-repeat center;
    background-size: cover;
}

#LAYOUT_BODY.step.s03>.sect-bg.c03 {
    background: url('../img/sub_step0307_bg.jpg') no-repeat center;
    background-size: cover;
}

#LAYOUT_BODY.step.s03>.sect-bg.c04 {
    background: url('../img/sub_step0307_bg.jpg') no-repeat center;
    background-size: cover;
}

#LAYOUT_BODY.step.s03>.sect-bg.c05 {
    background: url('../img/sub_step0307_bg.jpg') no-repeat center;
    background-size: cover;
}

#LAYOUT_BODY.step.s03>.sect-bg.c06 {
    background: url('../img/sub_step0307_bg.jpg') no-repeat center;
    background-size: cover;
}

#LAYOUT_BODY.step.s03>.sect-bg.c07 {
    background: url('../img/sub_step0307_bg.jpg') no-repeat center;
    background-size: cover;
}

#LAYOUT_BODY.step.s03>.sect-bg.c08 {
    background: url('../img/sub_step0307_bg.jpg') no-repeat center;
    background-size: cover;
}

#LAYOUT_BODY.step.s03>.sect-bg.c09 {
    background: url('../img/sub_step0309_bg.jpg') no-repeat center;
    background-size: cover;
}

#LAYOUT_BODY.step.s03>.sect-bg.c10 {
    background: url('../img/sub_step0310_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 명예훼손 */
#LAYOUT_BODY.step.s03>.sect-bg.c11 {
    background: url('../img/sub_step0311_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 디지털 성범죄 */
#LAYOUT_BODY.step.s03>.sect-bg.c12 {
    background: url('../img/sub_step0312_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 강도상해 */
#LAYOUT_BODY.step.s03>.sect-bg.c13 {
    background: #333 url('../img/sub_step0313_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 무고범죄 */
#LAYOUT_BODY.step.s03>.sect-bg.c14 {
    background: #333 url('../img/sub_step0314_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 위증교사 */
#LAYOUT_BODY.step.s03>.sect-bg.c15 {
    background: #333 url('../img/sub_step0315_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 중감금치상죄 */
#LAYOUT_BODY.step.s03>.sect-bg.c16 {
    background: #333 url('../img/sub_step0316_bg.jpg') no-repeat center;
    background-size: cover;
}


/* 단계별 레이아웃 */
#LAYOUT_BODY.step.s03>.cont {
    position: absolute;
    left: calc((100% - 17rem)/2);
    top: 0;
    width: 100rem;
    transform: translateX(-50%);
    padding-top: 6rem;
    padding-bottom: 8rem;
}

#LAYOUT_BODY.step.s03>.cont>h2.ctit {
    padding: 5rem 0 3rem;
    font-size: 3.6rem;
    line-height: 1;
    font-weight: 300;
    color: #fff;
    text-align: center;
}

#LAYOUT_BODY.step.s03>.cont>h2.ctit p {
    line-height: 1.4;
}

#LAYOUT_BODY.step.s03>.cont>h2.ctit p br {
    display: none;
}

#LAYOUT_BODY.step.s03>.cont>h2.ctit p span {
    font-weight: 700;
}

#LAYOUT_BODY.step.s03>.cont>h2.ctit p strong {
    color: #ffed4e;
}

@media (max-width: 1280px) {
    #LAYOUT_BODY.step.s03>.cont {
        width: calc(100% - 17rem - 4rem);
    }
}

@media (max-width:1120px) {
    #LAYOUT_BODY.step.s03>.cont>h2.ctit {
        font-size: 3rem;
    }
}

@media (max-width: 1024px) {
    #LAYOUT_BODY.step.s03>.cont {
        padding-bottom: 16rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s03>.cont {
        left: 50%;
        width: calc(100% - 4rem);
    }

    #LAYOUT_BODY.step.s03>.cont>h2.ctit {
        font-size: 2.8rem;
    }
}

@media (max-width:580px) {
    #LAYOUT_BODY.step.s03>.cont>h2.ctit p br {
        display: block;
    }

    #LAYOUT_BODY.step.s03>.cont>h2.ctit p em {
        display: none;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s03>.cont {
        width: calc(100% - 10%);
    }

    #LAYOUT_BODY.step.s03>.cont>h2.ctit {
        font-size: 2.2rem;
    }
}

/* 영상 전문: 청각 장애인(화면 표시) + 스크린 리더(텍스트 인식) 모두 지원 - 기존 txt 파일 활용 */
#LAYOUT_BODY.step.s03>.cont .video-wrapper .video-transcript {
    margin-top: 7rem;
    padding: 2rem;
    background: #fff;
    color: #222;
    max-height: 20rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #757575 #e8e8e8;
}
#LAYOUT_BODY.step.s03>.cont .video-wrapper .video-transcript::-webkit-scrollbar {
    width: 6px;
}
#LAYOUT_BODY.step.s03>.cont .video-wrapper .video-transcript::-webkit-scrollbar-track {
    background: #e8e8e8;
    border-radius: 3px;
}
#LAYOUT_BODY.step.s03>.cont .video-wrapper .video-transcript::-webkit-scrollbar-thumb {
    background: #757575;
    border-radius: 3px;
}
#LAYOUT_BODY.step.s03>.cont .video-wrapper .video-transcript::-webkit-scrollbar-thumb:hover {
    background: #555;
}
#LAYOUT_BODY.step.s03>.cont .video-wrapper .video-transcript h4 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 1rem;
}
#LAYOUT_BODY.step.s03>.cont .video-wrapper .video-transcript .video-transcript-content {
    font-size: 1.4rem;
    line-height: 1.6;
    color: #222;
}
#LAYOUT_BODY.step.s03>.cont .video-wrapper .video-transcript .video-transcript-content p {
    margin: 0 0 0.8rem 0;
}
#LAYOUT_BODY.step.s03>.cont .video-wrapper .video-transcript .video-transcript-content p:last-child {
    margin-bottom: 0;
}

#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list {
    margin-top: 7rem;
}

#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list:after {
    display: block;
    content: "";
    clear: both;
}

#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li {
    float: left;
    width: calc((100% - 1px) / 3);
    background-color: #e5e5e5;
}

#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li:first-child {
    border-top: 0;
}

#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li a {
    display: block;
    padding-top: 1rem;
    text-align: center;
    padding-bottom: 1rem;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--body-color);
    overflow: hidden;
}

#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li a:before {
    padding-bottom: 60%;
}

#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li a.on,
#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li a:hover {
    background-color: #fff;
    color: var(--first-color);
}

#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li a:before {
    display: block;
    content: "";
    margin: 0 auto 1rem;
    width: calc(100% - 2rem);
    height: calc(100% - 4rem);
    background-color: #000;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li a.v01:before {
    background-image: url('../img/sub_step0304_thumb01.jpg');
}

#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li a.v02:before {
    background-image: url('../img/sub_step0304_thumb02.jpg');
}

#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li a.v03:before {
    background-image: url('../img/sub_step0304_thumb03.jpg');
}

#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li a:hover.v01:before,
#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li a.on.v01:before {
    background-image: url('../img/sub_step0304_thumb01_on.jpg');
}

#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li a:hover.v02:before,
#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li a.on.v02:before {
    background-image: url('../img/sub_step0304_thumb02_on.jpg');
}

#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li a:hover.v03:before,
#LAYOUT_BODY.step.s03>.cont .video-wrapper.plist ul.play-list li a.on.v03:before {
    background-image: url('../img/sub_step0304_thumb03_on.jpg');
}


#LAYOUT_BODY.step.s03.c04>.cont .video-wrapper.plist {
    width: 80rem;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    #LAYOUT_BODY.step.s03.c04>.cont .video-wrapper.plist {
        width: 100%;
    }
}

/*
 * STEP 04 : ?????? ?? ?????? ????
 */
/* 레이아웃 및 사건별 백그라운드 */
#LAYOUT_BODY.step.s04 {
    position: relative;
}

#LAYOUT_BODY.step.s04 .sect-bg {
    z-index: -100;
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 100%;
    transform: translateX(-50%) translateY(-50%);
}

#LAYOUT_BODY.step.s04 .sect-bg {
    background: url('../img/sub_step0407_bg.jpg') no-repeat center;
    /* 기본 */
    background-size: cover;
}

/* 강도상해 */
#LAYOUT_BODY.step.s04.c13 .sect-bg {
    background: url('../img/sub_step0413_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 무고 */
#LAYOUT_BODY.step.s04.c14 .sect-bg {
    background: url('../img/sub_step0414_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 위증교사 */
#LAYOUT_BODY.step.s04.c15 .sect-bg {
    background: url('../img/sub_step0415_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 중감금치상죄 */
#LAYOUT_BODY.step.s04.c16 .sect-bg {
    background: url('../img/sub_step0416_bg.jpg') no-repeat center;
    background-size: cover;
}




/* 단계별 레이아웃 */
#LAYOUT_BODY.step.s04>.cont {
    position: absolute;
    left: calc((100% - 17rem)/2);
    top: 0;
    width: 124rem;
    transform: translateX(-50%);
    padding-top: 6rem;
    padding-bottom: 8rem;
}

#LAYOUT_BODY.step.s04>.cont>h2.ctit {
    padding: 5rem 0 5rem;
    font-size: 4.8rem;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

@media (max-width: 1560px) {
    #LAYOUT_BODY.step.s04>.cont {
        width: calc(100% - 17rem - 4rem);
    }
}

@media (max-width: 1024px) {
    #LAYOUT_BODY.step.s04>.cont {
        padding-bottom: 16rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s04>.cont {
        left: 50%;
        width: calc(100% - 4rem);
    }

    #LAYOUT_BODY.step.s04>.cont>h2.ctit {
        font-size: 3.8rem;
        padding: 6rem 0 5rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s04>.cont {
        width: calc(100% - 10%);
    }
}



/* 탭 메뉴 */
#LAYOUT_BODY.step.s04 .c-tab {
    display: flex;
    align-items: center;
    column-gap: 5px;
    justify-content: center;
}

#LAYOUT_BODY.step.s04 .c-tab li {
    width: 20rem;
    text-align: center;
}

#LAYOUT_BODY.step.s04 .c-tab li a {
    position: relative;
    display: block;
    height: 6rem;
    line-height: 6rem;
    background: var(--body-color);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
}

#LAYOUT_BODY.step.s04 .c-tab li a:before {
    display: none;
    content: "";
    position: absolute;
    width: 100%;
    height: 1rem;
    background: #fff;
    top: -1rem;
    left: 0;
}

#LAYOUT_BODY.step.s04 .c-tab li a span {
    display: inline-block;
    line-height: 1;
    padding-bottom: 0.3rem;
    border-bottom: solid 1px var(--body-color);
}

#LAYOUT_BODY.step.s04 .c-tab li.active a {
    color: var(--first-color);
    line-height: 5rem;
    font-size: 2rem;
    font-weight: 700;
    background: #fff;
}

#LAYOUT_BODY.step.s04 .c-tab li.active a:before {
    display: block;
}

#LAYOUT_BODY.step.s04 .c-tab li.active a span {
    border-bottom: solid 1px var(--first-color);
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s04 .c-tab {
        justify-content: center;
    }

    #LAYOUT_BODY.step.s04 .c-tab li {
        width: auto;
    }

    #LAYOUT_BODY.step.s04 .c-tab li a {
        height: 5rem;
        line-height: 5rem;
        padding: 0 1.5rem;
    }

    #LAYOUT_BODY.step.s04 .c-tab li.active a {
        line-height: 4rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s04 .c-tab li a {
        font-size: 1.6rem;
    }

    #LAYOUT_BODY.step.s04 .c-tab li.active a {
        font-size: 1.8rem;
    }
}

@media (max-width:460px) {
    #LAYOUT_BODY.step.s04 .c-tab li a {
        font-size: 1.4rem;
    }

    #LAYOUT_BODY.step.s04 .c-tab li.active a {
        font-size: 1.6rem;
    }
}

@media (max-width:420px) {
    #LAYOUT_BODY.step.s04 .c-tab li a {
        padding: 0 1rem;
        font-size: 1.3rem;
    }

    #LAYOUT_BODY.step.s04 .c-tab li.active a {
        font-size: 1.4rem;
    }
}

#LAYOUT_BODY.step.s04 .c-wrap {
    background: #fff;
    padding: 5rem 4rem;
}

#LAYOUT_BODY.step.s04 .c-wrap section {
    display: flex;
    column-gap: 4rem;
}

#LAYOUT_BODY.step.s04 .c-wrap .s01 .left {
    flex: 1;
    background: url("../img/s04_book.png") no-repeat right 4rem center;
    background-size: 15.4rem auto;
    border-right: solid 1px #e5e5e5;
}

#LAYOUT_BODY.step.s04.c13 .c-wrap .s01 .left {
    background-position: right 4rem bottom;
}

#LAYOUT_BODY.step.s04 .c-wrap .s01 .left h3 {
    position: relative;
    padding-top: 3rem;
    font-size: 2.6rem;
    color: var(--first-color);
    font-weight: 700;
}

#LAYOUT_BODY.step.s04 .c-wrap .s01 .left h3 i {
    display: inline-block;
    position: absolute;
    top: -1rem;
    left: 0;
    font-family: 'HangeulNuri';
    font-size: 8rem;
    line-height: 1;
}

#LAYOUT_BODY.step.s04 .c-wrap .s01 .left .cnt {
    margin-top: 1.5rem;
    font-size: 1.8rem;
    margin-bottom: 5rem;
}

#LAYOUT_BODY.step.s04 .c-wrap .s01 .left a.lnk {
    display: inline-block;
    font-size: 1.8rem;
    color: var(--first-color);
    font-weight: 700;
}

#LAYOUT_BODY.step.s04 .c-wrap .s01 .left a.lnk:after {
    display: inline-block;
    content: "";
    width: 3.2rem;
    height: 3.2rem;
    background: var(--first-color) url("../img/icon_arr_small.png") no-repeat center;
    background-size: auto 1rem;
    border-radius: 50%;
    margin-left: 1rem;
    vertical-align: middle;
}

#LAYOUT_BODY.step.s04 .c-wrap .s01 .right {
    flex: 1;
}

#LAYOUT_BODY.step.s04.c12 .c-wrap .s01 .right {
    flex: 3;
}

#LAYOUT_BODY.step.s04.c13 .c-wrap .s01 .right {
    flex: 3;
}

#LAYOUT_BODY.step.s04 .c-wrap .s01 .right h3 {
    font-size: 2.6rem;
    color: #000;
    font-weight: 700;
}

#LAYOUT_BODY.step.s04 .c-wrap .s01 .right h4 {
    margin-top: 1.5rem;
}

#LAYOUT_BODY.step.s04 .c-wrap section .right h4 span {
    display: inline-block;
    background: var(--first-color);
    color: #fff;
    font-size: 2.2rem;
    font-weight: 600;
    padding: 1.2rem 2rem;
    line-height: 1.2;
    box-shadow: rgba(0, 0, 0, 0.4) 0.3rem 0.3rem 1rem;
}

#LAYOUT_BODY.step.s04 .c-wrap .s01 .right .cnt {
    margin-top: 2rem;
    font-size: 2rem;
}

@media (max-width:1240px) {
    #LAYOUT_BODY.step.s04 .c-wrap section {
        flex-wrap: wrap;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s01 .left {
        flex-basis: 100%;
        background: url("../img/s04_book.png") no-repeat right 0 center;
        background-size: 15.4rem auto;
        border-right: none;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s01 .right {
        margin-top: 4rem;
        border-top: solid 1px #e5e5e5;
        padding-top: 4rem;
        flex: 1;
        flex-basis: 100%;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s01 .right .cnt br {
        display: none;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s04 .c-wrap {
        padding: 4rem 3rem;
    }

    #LAYOUT_BODY.step.s04 .c-wrap section .right h4 span {
        font-size: 2rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s04 .c-wrap .s01 .left h3 {
        font-size: 2.4rem;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s01 .left h3 i {
        font-size: 6rem;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s01 .right h3 {
        font-size: 2.4rem;
    }

    #LAYOUT_BODY.step.s04 .c-wrap section .right h4 span {
        font-size: 1.8rem;
    }
}

@media (max-width:450px) {
    #LAYOUT_BODY.step.s04 .c-wrap .s01 .left {
        background: url("../img/s04_book.png") no-repeat right 0 bottom;
        background-size: 10.4rem auto;
    }
}

#LAYOUT_BODY.step.s04 .c-wrap .s02 .left {
    flex: 1;
    border-right: solid 1px #e5e5e5;
}

#LAYOUT_BODY.step.s04 .c-wrap .s02 .left h3 {
    font-size: 2.4rem;
    color: #000;
    font-weight: 700;
}

#LAYOUT_BODY.step.s04 .c-wrap .s02 .right {
    flex: 3;
}

#LAYOUT_BODY.step.s04 .c-wrap .s02 .right h4 {
    margin-bottom: 2rem;
}

#LAYOUT_BODY.step.s04 .c-wrap .s02 .right .cnt strong {
    font-size: 2.4rem;
    color: var(--first-color);
    font-weight: 600;
}

#LAYOUT_BODY.step.s04 .c-wrap .s02 .right ul.t01 {
    font-size: 0;
}

#LAYOUT_BODY.step.s04 .c-wrap .s02 .right ul.t01 li {
    font-size: 2rem;
    font-weight: 500;
    margin-top: 1.2rem;
}

#LAYOUT_BODY.step.s04 .c-wrap .s02 .right ul.t01.col-2 li {
    display: inline-block;
    width: 50%;
}

#LAYOUT_BODY.step.s04 .c-wrap .s02 .right ul.t01 li+li {}

#LAYOUT_BODY.step.s04 .c-wrap .s02 .right ul.t01 li i {
    display: inline-block;
    height: 2.4rem;
    line-height: 2.4rem;
    width: 2.4rem;
    text-align: center;
    background: var(--first-color);
    font-size: 1.6rem;
    color: #fff;
    font-weight: 500;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@media (max-width:1240px) {
    #LAYOUT_BODY.step.s04 .c-wrap .s02 .left {
        flex-basis: 100%;
        border-right: none;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s02 .right {
        flex: 1;
        flex-basis: 100%;
        margin-top: 2rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s04 .c-wrap .s02 .right .cnt strong {
        font-size: 2.2rem;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s02 .right ul.t01 li {
        font-size: 1.8rem;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s02 .right ul.t01.col-2 li {
        width: 100%;
    }
}

#LAYOUT_BODY.step.s04 .c-wrap .s03 .left {
    flex: 1;
    border-right: solid 1px #e5e5e5;
}

#LAYOUT_BODY.step.s04 .c-wrap .s03 .left h3 {
    font-size: 2.4rem;
    color: #000;
    font-weight: 700;
}

#LAYOUT_BODY.step.s04 .c-wrap .s03 .right {
    flex: 3;
}

#LAYOUT_BODY.step.s04 .c-wrap .s03 .right p.ntt {
    font-size: 2.2rem;
    color: #000;
    font-weight: 500;
    margin-bottom: 2rem;
}

#LAYOUT_BODY.step.s04 .c-wrap .s03 .right .cnt {}

#LAYOUT_BODY.step.s04 .c-wrap .s03 .right .cnt dl+dl {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: solid 1px #e5e5e5;
}

#LAYOUT_BODY.step.s04 .c-wrap .s03 .right .cnt dl dt {
    font-size: 2.2rem;
    color: var(--first-color);
    font-weight: 700;
}

#LAYOUT_BODY.step.s04 .c-wrap .s03 .right .cnt dl dd {
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: 500;
}

#LAYOUT_BODY.step.s04 .c-wrap .s03 .right .cnt dl dd i {
    display: block;
    font-size: 2rem;
    color: #000;
    font-weight: 500;
}

@media (max-width:1240px) {
    #LAYOUT_BODY.step.s04 .c-wrap .s03 .left {
        flex-basis: 100%;
        border-right: none;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s03 .right {
        flex: 1;
        flex-basis: 100%;
        margin-top: 2rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s04 .c-wrap .s03 .right .cnt dl+dl {
        margin-top: 2.5rem;
        padding-top: 2.5rem;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s03 .right .cnt dl dd {
        margin-top: 1rem;
        font-size: 2rem;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s03 .right .cnt dl dd i {
        font-size: 1.8rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s04 .c-wrap .s03 .left h3 {
        font-size: 2.2rem;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s03 .right .cnt dl dt {
        font-size: 2rem;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s03 .right .cnt dl dd {
        font-size: 1.8rem;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s03 .right .cnt dl dd i {
        font-size: 1.6rem;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s03 .right .cnt dl dd br {
        display: none;
    }
}

#LAYOUT_BODY.step.s04 .c-wrap .s04 .left {
    flex: 1;
    border-right: solid 1px #e5e5e5;
}

#LAYOUT_BODY.step.s04 .c-wrap .s04 .left h3 {
    font-size: 2.4rem;
    color: #000;
    font-weight: 700;
}

#LAYOUT_BODY.step.s04 .c-wrap .s04 .right {
    flex: 3;
}

#LAYOUT_BODY.step.s04 .c-wrap .s04 .right h4 {
    margin-bottom: 2rem;
}

#LAYOUT_BODY.step.s04 .c-wrap .s04 .right .cnt strong {
    font-size: 2.6rem;
    color: var(--first-color);
    font-weight: 600;
}

#LAYOUT_BODY.step.s04 .c-wrap .s04 .right ul.t01 {
    margin-top: 2rem;
}

#LAYOUT_BODY.step.s04 .c-wrap .s04 .right ul.t01 li {
    position: relative;
    font-size: 2rem;
    font-weight: 500;
    padding-left: 3rem;
}

#LAYOUT_BODY.step.s04 .c-wrap .s04 .right ul.t01 li+li {
    margin-top: 1.2rem;
}

#LAYOUT_BODY.step.s04 .c-wrap .s04 .right ul.t01 li i {
    position: absolute;
    left: 0;
    top: 0.3rem;
    display: inline-block;
    height: 2.4rem;
    line-height: 2.4rem;
    width: 2.4rem;
    text-align: center;
    background: var(--first-color);
    font-size: 1.6rem;
    color: #fff;
    font-weight: 500;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s04 .c-wrap .s04 .left {
        flex-basis: 100%;
        border-right: none;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s04 .right {
        flex: 1;
        flex-basis: 100%;
        margin-top: 2rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s04 .c-wrap .s04 .left h3 {
        font-size: 2.2rem;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s04 .right .cnt strong {
        font-size: 2.2rem;
    }

    #LAYOUT_BODY.step.s04 .c-wrap .s04 .right ul.t01 li {
        font-size: 1.8rem;
    }
}







/*
 * STEP 05 : 후기작성
 */

/* 레이아웃 및 사건별 백그라운드 비활성 */
#LAYOUT_NAVI.step.s05 .btn a.next {
    pointer-events: none;
}

/* 레이아웃 및 사건별 숨기기 */
#LAYOUT_NAVI.step.s05 {
    display: none;
}

#LAYOUT_BODY.step.s05 #LAYOUT_CONT {
    display: none;
}

#LAYOUT_BODY.step.s05 header {
    display: none;
}

#LAYOUT_TAIL.step.s05 {
    display: none;
}

/* 레이아웃 및 사건별 백그라운드 */
#LAYOUT_BODY.step.s05 {
    position: relative;
}

#LAYOUT_BODY.step.s05 .sect-bg {
    z-index: -100;
    position: fixed;
    top: 6rem;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 100%;
    transform: translateX(-50%);
}

#LAYOUT_BODY.step.s05 .sect-bg {
    background: url('../img/sub_step0509_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 횡령 */
#LAYOUT_BODY.step.s05.c09 .sect-bg {
    background: url('../img/sub_step0509_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 마약 */
#LAYOUT_BODY.step.s05.c10 .sect-bg {
    background: url('../img/sub_step0510_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 명예훼손 */
#LAYOUT_BODY.step.s05.c11 .sect-bg {
    background: url('../img/sub_step0511_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 디지털 성범죄 */
#LAYOUT_BODY.step.s05.c12 .sect-bg {
    background: url('../img/sub_step0512_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 강도상해 */
#LAYOUT_BODY.step.s05.c13 .sect-bg {
    background: #333 url('../img/sub_step0513_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 무고범죄 */
#LAYOUT_BODY.step.s05.c14 .sect-bg {
    background: #333 url('../img/sub_step0514_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 위증교사 */
#LAYOUT_BODY.step.s05.c15 .sect-bg {
    background: #333 url('../img/sub_step0515_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 중감금치상죄 */
#LAYOUT_BODY.step.s05.c16 .sect-bg {
    background: #333 url('../img/sub_step0516_bg.jpg') no-repeat center;
    background-size: cover;
}


/* 단계별 레이아웃 */
#LAYOUT_BODY.step.s05 .video-wrapper {
    position: absolute;
    left: calc((100% - 17rem)/2);
    top: 0;
    width: 92rem;
    transform: translateX(-50%);
    padding-top: 6rem;
    padding-bottom: 8rem;
}

#LAYOUT_BODY.step.s05 .video-wrapper>h2.ctit {
    padding: 5rem 0 5rem;
    font-size: 4.8rem;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

@media (max-width:1240px) {
    #LAYOUT_BODY.step.s05 .video-wrapper {
        width: calc(100% - 17rem - 4rem);
    }
}

@media (max-width: 1024px) {
    #LAYOUT_BODY.step.s05 .video-wrapper {
        padding-bottom: 16rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s05 .video-wrapper {
        left: 50%;
        width: calc(100% - 4rem);
    }

    #LAYOUT_BODY.step.s05 .video-wrapper>h2.ctit {
        font-size: 3.8rem;
        padding: 6rem 0 5rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s05 .video-wrapper {
        width: calc(100% - 10%);
    }
}



/* 비디오 */
#LAYOUT_BODY.step.s05 .video-wrapper .play-list {
    margin-top: 7rem;
    font-size: 0;
    margin-left: -10px;
    text-align: center;
}

#LAYOUT_BODY.step.s05 .video-wrapper .play-list.n4 li {
    position: relative;
    display: inline-block;
    width: calc(25% - 10px);
    margin-left: 10px;
}

#LAYOUT_BODY.step.s05 .video-wrapper .play-list.n5 li {
    position: relative;
    display: inline-block;
    width: calc(20% - 10px);
    margin-left: 10px;
}

#LAYOUT_BODY.step.s05 .video-wrapper .play-list li a {
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#LAYOUT_BODY.step.s05 .video-wrapper .play-list li a.on {
    color: #fff;
}

#LAYOUT_BODY.step.s05 .video-wrapper .play-list li a:before {
    display: block;
    content: "";
    margin: 0 auto 1rem;
    height: 12rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    box-shadow: 0 0 0 0.8rem transparent inset;
}

#LAYOUT_BODY.step.s05 .video-wrapper .play-list li a.on:before {
    box-shadow: 0 0 0 0.8rem #fff inset;
}

#LAYOUT_BODY.step.s05 .video-wrapper .play-list li a span {
    display: inline-block;
}

#LAYOUT_BODY.step.s05 .video-wrapper .play-list li a.on span {
    border-bottom: solid 1px #fff;
}

#LAYOUT_BODY.step.s05 .video-wrapper .play-list li a.on span:before {
    display: inline-block;
    content: "";
    width: 0.6rem;
    height: 1rem;
    background: url("../img/icon_arr_go.png") no-repeat center;
    background-size: auto 1rem;
    margin-right: 0.5rem;
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s05 .video-wrapper .play-list li {
        width: calc(50% - 10px);
        margin-bottom: 10px;
    }
}

/* 상해 */
#LAYOUT_BODY.step.s05.c07 .video-wrapper ul.play-list li a.v01:before {
    background-image: url(../img/sub_step0507_thumb01.png);
}

#LAYOUT_BODY.step.s05.c07 .video-wrapper ul.play-list li a.on.v01:before {
    background-image: url(../img/sub_step0507_thumb01_on.png);
}

#LAYOUT_BODY.step.s05.c07 .video-wrapper ul.play-list li a.v02:before {
    background-image: url(../img/sub_step0507_thumb02.png);
}

#LAYOUT_BODY.step.s05.c07 .video-wrapper ul.play-list li a.on.v02:before {
    background-image: url(../img/sub_step0507_thumb02_on.png);
}

#LAYOUT_BODY.step.s05.c07 .video-wrapper ul.play-list li a.v03:before {
    background-image: url(../img/sub_step0507_thumb03.png);
}

#LAYOUT_BODY.step.s05.c07 .video-wrapper ul.play-list li a.on.v03:before {
    background-image: url(../img/sub_step0507_thumb03_on.png);
}

#LAYOUT_BODY.step.s05.c07 .video-wrapper ul.play-list li a.v04:before {
    background-image: url(../img/sub_step0507_thumb04.png);
}

#LAYOUT_BODY.step.s05.c07 .video-wrapper ul.play-list li a.on.v04:before {
    background-image: url(../img/sub_step0507_thumb04_on.png);
}

/* 방화 */
#LAYOUT_BODY.step.s05.c08 .video-wrapper ul.play-list li a.v01:before {
    background-image: url(../img/sub_step0508_thumb01.jpg);
}

#LAYOUT_BODY.step.s05.c08 .video-wrapper ul.play-list li a.on.v01:before {
    background-image: url(../img/sub_step0508_thumb01_on.jpg);
}

#LAYOUT_BODY.step.s05.c08 .video-wrapper ul.play-list li a.v02:before {
    background-image: url(../img/sub_step0508_thumb02.jpg);
}

#LAYOUT_BODY.step.s05.c08 .video-wrapper ul.play-list li a.on.v02:before {
    background-image: url(../img/sub_step0508_thumb02_on.jpg);
}

#LAYOUT_BODY.step.s05.c08 .video-wrapper ul.play-list li a.v03:before {
    background-image: url(../img/sub_step0508_thumb03.jpg);
}

#LAYOUT_BODY.step.s05.c08 .video-wrapper ul.play-list li a.on.v03:before {
    background-image: url(../img/sub_step0508_thumb03_on.jpg);
}

#LAYOUT_BODY.step.s05.c08 .video-wrapper ul.play-list li a.v04:before {
    background-image: url(../img/sub_step0508_thumb04.jpg);
}

#LAYOUT_BODY.step.s05.c08 .video-wrapper ul.play-list li a.on.v04:before {
    background-image: url(../img/sub_step0508_thumb04_on.jpg);
}

#LAYOUT_BODY.step.s05.c08 .video-wrapper ul.play-list li a.v05:before {
    background-image: url(../img/sub_step0508_thumb05.jpg);
}

#LAYOUT_BODY.step.s05.c08 .video-wrapper ul.play-list li a.on.v05:before {
    background-image: url(../img/sub_step0508_thumb05_on.jpg);
}

/* 도주치상 */
#LAYOUT_BODY.step.s05.c05 .video-wrapper ul.play-list li a.v01:before {
    background-image: url(../img/sub_step0505_thumb01.jpg);
}

#LAYOUT_BODY.step.s05.c05 .video-wrapper ul.play-list li a.on.v01:before {
    background-image: url(../img/sub_step0505_thumb01_on.jpg);
}

#LAYOUT_BODY.step.s05.c05 .video-wrapper ul.play-list li a.v02:before {
    background-image: url(../img/sub_step0505_thumb02.jpg);
}

#LAYOUT_BODY.step.s05.c05 .video-wrapper ul.play-list li a.on.v02:before {
    background-image: url(../img/sub_step0505_thumb02_on.jpg);
}

#LAYOUT_BODY.step.s05.c05 .video-wrapper ul.play-list li a.v03:before {
    background-image: url(../img/sub_step0505_thumb03.jpg);
}

#LAYOUT_BODY.step.s05.c05 .video-wrapper ul.play-list li a.on.v03:before {
    background-image: url(../img/sub_step0505_thumb03_on.jpg);
}

#LAYOUT_BODY.step.s05.c05 .video-wrapper ul.play-list li a.v04:before {
    background-image: url(../img/sub_step0505_thumb04.jpg);
}

#LAYOUT_BODY.step.s05.c05 .video-wrapper ul.play-list li a.on.v04:before {
    background-image: url(../img/sub_step0505_thumb04_on.jpg);
}

/* 공무집행방해 */
#LAYOUT_BODY.step.s05.c06 .video-wrapper ul.play-list li a.v01:before {
    background-image: url(../img/sub_step0506_thumb01.jpg);
}

#LAYOUT_BODY.step.s05.c06 .video-wrapper ul.play-list li a.on.v01:before {
    background-image: url(../img/sub_step0506_thumb01_on.jpg);
}

#LAYOUT_BODY.step.s05.c06 .video-wrapper ul.play-list li a.v02:before {
    background-image: url(../img/sub_step0506_thumb02.jpg);
}

#LAYOUT_BODY.step.s05.c06 .video-wrapper ul.play-list li a.on.v02:before {
    background-image: url(../img/sub_step0506_thumb02_on.jpg);
}

#LAYOUT_BODY.step.s05.c06 .video-wrapper ul.play-list li a.v03:before {
    background-image: url(../img/sub_step0506_thumb03.jpg);
}

#LAYOUT_BODY.step.s05.c06 .video-wrapper ul.play-list li a.on.v03:before {
    background-image: url(../img/sub_step0506_thumb03_on.jpg);
}

#LAYOUT_BODY.step.s05.c06 .video-wrapper ul.play-list li a.v04:before {
    background-image: url(../img/sub_step0506_thumb04.jpg);
}

#LAYOUT_BODY.step.s05.c06 .video-wrapper ul.play-list li a.on.v04:before {
    background-image: url(../img/sub_step0506_thumb04_on.jpg);
}

/* 강제추행 */
#LAYOUT_BODY.step.s05.c03 .video-wrapper ul.play-list li a.v01:before {
    background-image: url(../img/sub_step0503_thumb01.jpg);
}

#LAYOUT_BODY.step.s05.c03 .video-wrapper ul.play-list li a.on.v01:before {
    background-image: url(../img/sub_step0503_thumb01_on.jpg);
}

#LAYOUT_BODY.step.s05.c03 .video-wrapper ul.play-list li a.v02:before {
    background-image: url(../img/sub_step0503_thumb02.jpg);
}

#LAYOUT_BODY.step.s05.c03 .video-wrapper ul.play-list li a.on.v02:before {
    background-image: url(../img/sub_step0503_thumb02_on.jpg);
}

#LAYOUT_BODY.step.s05.c03 .video-wrapper ul.play-list li a.v03:before {
    background-image: url(../img/sub_step0503_thumb03.jpg);
}

#LAYOUT_BODY.step.s05.c03 .video-wrapper ul.play-list li a.on.v03:before {
    background-image: url(../img/sub_step0503_thumb03_on.jpg);
}

#LAYOUT_BODY.step.s05.c03 .video-wrapper ul.play-list li a.v04:before {
    background-image: url(../img/sub_step0503_thumb04.jpg);
}

#LAYOUT_BODY.step.s05.c03 .video-wrapper ul.play-list li a.on.v04:before {
    background-image: url(../img/sub_step0503_thumb04_on.jpg);
}

#LAYOUT_BODY.step.s05.c03 .video-wrapper ul.play-list li a.v05:before {
    background-image: url(../img/sub_step0503_thumb05.jpg);
}

#LAYOUT_BODY.step.s05.c03 .video-wrapper ul.play-list li a.on.v05:before {
    background-image: url(../img/sub_step0503_thumb05_on.jpg);
}

/* 사기 */
#LAYOUT_BODY.step.s05.c04 .video-wrapper ul.play-list li a.v01:before {
    background-image: url(../img/sub_step0504_thumb01.jpg);
}

#LAYOUT_BODY.step.s05.c04 .video-wrapper ul.play-list li a.on.v01:before {
    background-image: url(../img/sub_step0504_thumb01_on.jpg);
}

#LAYOUT_BODY.step.s05.c04 .video-wrapper ul.play-list li a.v02:before {
    background-image: url(../img/sub_step0504_thumb02.jpg);
}

#LAYOUT_BODY.step.s05.c04 .video-wrapper ul.play-list li a.on.v02:before {
    background-image: url(../img/sub_step0504_thumb02_on.jpg);
}

#LAYOUT_BODY.step.s05.c04 .video-wrapper ul.play-list li a.v03:before {
    background-image: url(../img/sub_step0504_thumb03.jpg);
}

#LAYOUT_BODY.step.s05.c04 .video-wrapper ul.play-list li a.on.v03:before {
    background-image: url(../img/sub_step0504_thumb03_on.jpg);
}

#LAYOUT_BODY.step.s05.c04 .video-wrapper ul.play-list li a.v04:before {
    background-image: url(../img/sub_step0504_thumb04.jpg);
}

#LAYOUT_BODY.step.s05.c04 .video-wrapper ul.play-list li a.on.v04:before {
    background-image: url(../img/sub_step0504_thumb04_on.jpg);
}

/* 이전 및 다음 */
#LAYOUT_BODY.step.s05>.content-wrapper.old .cont {
    position: absolute;
    left: calc((100% - 17rem)/2);
    top: 0;
    width: 92rem;
    transform: translateX(-50%);
    padding-top: 6rem;
    padding-bottom: 8rem;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .cont h2.ctit {
    padding: 5rem 0 5rem;
    font-size: 4.8rem;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

@media (max-width:1240px) {
    #LAYOUT_BODY.step.s05>.content-wrapper.old .cont {
        width: calc(100% - 17rem - 4rem);
    }
}

@media (max-width: 1024px) {
    #LAYOUT_BODY.step.s05>.content-wrapper.old .cont {
        padding-bottom: 16rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s05>.content-wrapper.old .cont {
        left: 50%;
        width: calc(100% - 4rem);
    }

    #LAYOUT_BODY.step.s05>.content-wrapper.old .cont h2.ctit {
        font-size: 3.8rem;
        padding: 6rem 0 5rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s05>.content-wrapper.old .cont {
        width: calc(100% - 10%);
    }
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .sel {
    height: 30rem;
    background-color: #fff;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .sel .pep-wrapper {
    height: 100%;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep {
    display: block;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 0;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep:after {
    display: block;
    content: "";
    clear: both;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li {
    position: relative;
    display: inline-block;
    margin: 0 0 0 10rem;
    padding: 0;
    width: 15rem;
    height: 100%;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li:first-child {
    margin-left: 0;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li a {
    position: relative;
    display: block;
    width: 100%;
    height: 20rem;
    margin-top: 3.6rem;
    font-size: 0;
    opacity: 0.5;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li a span {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.2rem;
    color: #666;
    font-weight: 600;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li.on {
    background: url("../img/btn_05_on_bg.png") no-repeat left top 3.6rem,
        url('../img/step05_icon_current.png') no-repeat center bottom;
    background-size: 15rem 15rem, auto 3rem;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li.on a {
    opacity: 1;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li.on a span {
    color: #000;
    font-weight: 700;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li a img {
    display: none;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .sel .btn_move {
    display: none;
}

#LAYOUT_BODY.step.s05.c01>.content-wrapper.old .sel ul.pep li.pep01 a {
    background: url('../img/step05_c01_pep01.png') no-repeat top
        /*36px*/
        center;
    background-size: 15rem auto;
}

#LAYOUT_BODY.step.s05.c01>.content-wrapper.old .sel ul.pep li.pep02 a {
    background: url('../img/step05_c01_pep02.png') no-repeat top
        /*36px*/
        center;
    background-size: 15rem auto;
}

#LAYOUT_BODY.step.s05.c01>.content-wrapper.old .sel ul.pep li.pep03 a {
    background: url('../img/step05_c01_pep03.png') no-repeat top
        /*36px*/
        center;
    background-size: 15rem auto;
}

#LAYOUT_BODY.step.s05.c01>.content-wrapper.old .sel ul.pep li.pep01.on a {
    background: url('../img/step05_c01_pep01_on.png') no-repeat top
        /*36px*/
        center;
    background-size: 15rem auto;
}

#LAYOUT_BODY.step.s05.c01>.content-wrapper.old .sel ul.pep li.pep02.on a {
    background: url('../img/step05_c01_pep02_on.png') no-repeat top
        /*36px*/
        center;
    background-size: 15rem auto;
}

#LAYOUT_BODY.step.s05.c01>.content-wrapper.old .sel ul.pep li.pep03.on a {
    background: url('../img/step05_c01_pep03_on.png') no-repeat top
        /*36px*/
        center;
    background-size: 15rem auto;
}

#LAYOUT_BODY.step.s05.c02>.content-wrapper.old .sel ul.pep li.pep01 a {
    background: url('../img/step05_c02_pep01.png') no-repeat top
        /*36px*/
        center;
    background-size: 15rem auto;
}

#LAYOUT_BODY.step.s05.c02>.content-wrapper.old .sel ul.pep li.pep02 a {
    background: url('../img/step05_c02_pep02.png') no-repeat top
        /*36px*/
        center;
    background-size: 15rem auto;
}

#LAYOUT_BODY.step.s05.c02>.content-wrapper.old .sel ul.pep li.pep03 a {
    background: url('../img/step05_c02_pep03.png') no-repeat top
        /*36px*/
        center;
    background-size: 15rem auto;
}

#LAYOUT_BODY.step.s05.c02>.content-wrapper.old .sel ul.pep li.pep01.on a {
    background: url('../img/step05_c02_pep01_on.png') no-repeat top
        /*36px*/
        center;
    background-size: 15rem auto;
}

#LAYOUT_BODY.step.s05.c02>.content-wrapper.old .sel ul.pep li.pep02.on a {
    background: url('../img/step05_c02_pep02_on.png') no-repeat top
        /*36px*/
        center;
    background-size: 15rem auto;
}

#LAYOUT_BODY.step.s05.c02>.content-wrapper.old .sel ul.pep li.pep03.on a {
    background: url('../img/step05_c02_pep03_on.png') no-repeat top
        /*36px*/
        center;
    background-size: 15rem auto;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf {
    background-color: #e9e8e8;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf .qbox {
    min-height: 30rem;
    display: none;
    padding: 6rem;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf .qbox.on {
    display: block;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf ul.qst {}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf ul.qst li {
    position: relative;
    display: block;
    min-height: 3.2rem;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf ul.qst li+li {
    margin-top: 1.8rem;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf ul.qst li a {
    display: inline-block;
    font-size: 2rem;
    font-weight: 500;
    color: #000;
    padding-left: 10rem;
    min-height: 3.2rem;
    vertical-align: middle;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf ul.qst li a:after {
    position: absolute;
    display: inline-block;
    content: "PLAY";
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    padding: 0 1rem;
    height: 3.2rem;
    line-height: 3.2rem;
    padding-left: 2.5rem;
    color: var(--first-color);
    font-size: 1.4rem;
    font-weight: 500;
    border: solid 1px var(--first-color);
    border-radius: 4px;
    background: url("../img/btn_05_play_on.png") no-repeat left 1rem center;
    background-size: auto 1rem;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf ul.qst li a span {
    padding: 0.5rem;
    display: inline-block;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf ul.qst li a:hover span {
    color: #fff;
    background: var(--first-color);
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf ul.qst li.done {}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf ul.qst li.done a {
    color: #666;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf ul.qst li.done a:after {
    color: #666;
    border: solid 1px #666;
    background: url("../img/btn_05_play_off.png") no-repeat left 1rem center;
    background-size: auto 1rem;
}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf ul.qst li:hover {}

#LAYOUT_BODY.step.s05>.content-wrapper.old .inf ul.qst li:hover a {}

#LAYOUT_BODY.step.s05.c01>.content-wrapper.old .inf .qbox.q01 {
    background: url('../img/step05_c01_q01_bg.png') no-repeat;
    background-size: cover;
}

#LAYOUT_BODY.step.s05.c01>.content-wrapper.old .inf .qbox.q02 {
    background: url('../img/step05_c01_q02_bg.png') no-repeat;
    background-size: cover;
}

#LAYOUT_BODY.step.s05.c01>.content-wrapper.old .inf .qbox.q03 {
    background: url('../img/step05_c01_q03_bg.png') no-repeat;
    background-size: cover;
}

#LAYOUT_BODY.step.s05.c02>.content-wrapper.old .inf .qbox.q01 {
    background: url('../img/step05_c02_q01_bg.png') no-repeat;
    background-size: cover;
}

#LAYOUT_BODY.step.s05.c02>.content-wrapper.old .inf .qbox.q02 {
    background: url('../img/step05_c02_q02_bg.png') no-repeat;
    background-size: cover;
}

#LAYOUT_BODY.step.s05.c02>.content-wrapper.old .inf .qbox.q03 {
    background: url('../img/step05_c02_q03_bg.png') no-repeat;
    background-size: cover;
}

@media (max-width:680px) {
    #LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li {
        margin: 0 0 0 0;
        width: 33.333%;
        padding: 0 1rem;
    }

    #LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li.on {
        background: url("../img/btn_05_on_bg.png") no-repeat center top 3.6rem,
            url('../img/step05_icon_current.png') no-repeat center bottom;
        background-size: 15rem 15rem, auto 3rem;
    }

    #LAYOUT_BODY.step.s05>.content-wrapper.old .inf .qbox {
        padding: 5rem 3rem;
    }

    #LAYOUT_BODY.step.s05>.content-wrapper.old .inf ul.qst li a {
        font-size: 2rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep {
        padding: 0 1rem;
    }

    #LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li.on {
        background: url("") no-repeat center top 3.6rem,
            url('../img/step05_icon_current.png') no-repeat center bottom;
        background-size: 15rem 15rem, auto 3rem;
    }

    #LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li a {
        background-size: 100% !important;
        background-position: top center !important;
    }

    #LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li a span {
        font-size: 2rem;
    }
}

@media (max-width:430px) {
    #LAYOUT_BODY.step.s05>.content-wrapper.old .sel {
        height: 26rem;
    }

    #LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li a {
        height: 18rem;
    }
}

@media (max-width:380px) {
    #LAYOUT_BODY.step.s05>.content-wrapper.old .sel {
        height: 24rem;
    }

    #LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li {
        padding: 0 0.5rem;
    }

    #LAYOUT_BODY.step.s05>.content-wrapper.old .sel ul.pep li a {
        height: 16rem;
    }
}

/* 횡령 */
#LAYOUT_BODY.step.s05.c09 .video-wrapper ul.play-list li a.v01:before {
    background-image: url(../img/sub_step0509_thumb01.jpg);
}

#LAYOUT_BODY.step.s05.c09 .video-wrapper ul.play-list li a.on.v01:before {
    background-image: url(../img/sub_step0509_thumb01_on.jpg);
}

#LAYOUT_BODY.step.s05.c09 .video-wrapper ul.play-list li a.v02:before {
    background-image: url(../img/sub_step0509_thumb02.jpg);
}

#LAYOUT_BODY.step.s05.c09 .video-wrapper ul.play-list li a.on.v02:before {
    background-image: url(../img/sub_step0509_thumb02_on.jpg);
}

#LAYOUT_BODY.step.s05.c09 .video-wrapper ul.play-list li a.v03:before {
    background-image: url(../img/sub_step0509_thumb03.jpg);
}

#LAYOUT_BODY.step.s05.c09 .video-wrapper ul.play-list li a.on.v03:before {
    background-image: url(../img/sub_step0509_thumb03_on.jpg);
}

#LAYOUT_BODY.step.s05.c09 .video-wrapper ul.play-list li a.v04:before {
    background-image: url(../img/sub_step0509_thumb04.jpg);
}

#LAYOUT_BODY.step.s05.c09 .video-wrapper ul.play-list li a.on.v04:before {
    background-image: url(../img/sub_step0509_thumb04_on.jpg);
}

/* 마약 */
#LAYOUT_BODY.step.s05.c10 .video-wrapper ul.play-list li a.v01:before {
    background-image: url(../img/sub_step0510_thumb01.jpg);
}

#LAYOUT_BODY.step.s05.c10 .video-wrapper ul.play-list li a.on.v01:before {
    background-image: url(../img/sub_step0510_thumb01_on.jpg);
}

#LAYOUT_BODY.step.s05.c10 .video-wrapper ul.play-list li a.v02:before {
    background-image: url(../img/sub_step0510_thumb02.jpg);
}

#LAYOUT_BODY.step.s05.c10 .video-wrapper ul.play-list li a.on.v02:before {
    background-image: url(../img/sub_step0510_thumb02_on.jpg);
}

#LAYOUT_BODY.step.s05.c10 .video-wrapper ul.play-list li a.v03:before {
    background-image: url(../img/sub_step0510_thumb03.jpg);
}

#LAYOUT_BODY.step.s05.c10 .video-wrapper ul.play-list li a.on.v03:before {
    background-image: url(../img/sub_step0510_thumb03_on.jpg);
}

#LAYOUT_BODY.step.s05.c10 .video-wrapper ul.play-list li a.v04:before {
    background-image: url(../img/sub_step0510_thumb04.jpg);
}

#LAYOUT_BODY.step.s05.c10 .video-wrapper ul.play-list li a.on.v04:before {
    background-image: url(../img/sub_step0510_thumb04_on.jpg);
}

/* 명예훼손 */
#LAYOUT_BODY.step.s05.c11 .video-wrapper ul.play-list li a.v01:before {
    background-image: url(../img/sub_step0511_thumb01.jpg);
}

#LAYOUT_BODY.step.s05.c11 .video-wrapper ul.play-list li a.on.v01:before {
    background-image: url(../img/sub_step0511_thumb01_on.jpg);
}

#LAYOUT_BODY.step.s05.c11 .video-wrapper ul.play-list li a.v02:before {
    background-image: url(../img/sub_step0511_thumb02.jpg);
}

#LAYOUT_BODY.step.s05.c11 .video-wrapper ul.play-list li a.on.v02:before {
    background-image: url(../img/sub_step0511_thumb02_on.jpg);
}

#LAYOUT_BODY.step.s05.c11 .video-wrapper ul.play-list li a.v03:before {
    background-image: url(../img/sub_step0511_thumb03.jpg);
}

#LAYOUT_BODY.step.s05.c11 .video-wrapper ul.play-list li a.on.v03:before {
    background-image: url(../img/sub_step0511_thumb03_on.jpg);
}

#LAYOUT_BODY.step.s05.c11 .video-wrapper ul.play-list li a.v04:before {
    background-image: url(../img/sub_step0511_thumb04.jpg);
}

#LAYOUT_BODY.step.s05.c11 .video-wrapper ul.play-list li a.on.v04:before {
    background-image: url(../img/sub_step0511_thumb04_on.jpg);
}

/* 디지털 성범죄 */
#LAYOUT_BODY.step.s05.c12 .video-wrapper ul.play-list li a.v01:before {
    background-image: url(../img/sub_step0512_thumb01.jpg);
}

#LAYOUT_BODY.step.s05.c12 .video-wrapper ul.play-list li a.on.v01:before {
    background-image: url(../img/sub_step0512_thumb01_on.jpg);
}

#LAYOUT_BODY.step.s05.c12 .video-wrapper ul.play-list li a.v02:before {
    background-image: url(../img/sub_step0512_thumb02.jpg);
}

#LAYOUT_BODY.step.s05.c12 .video-wrapper ul.play-list li a.on.v02:before {
    background-image: url(../img/sub_step0512_thumb02_on.jpg);
}

#LAYOUT_BODY.step.s05.c12 .video-wrapper ul.play-list li a.v03:before {
    background-image: url(../img/sub_step0512_thumb03.jpg);
}

#LAYOUT_BODY.step.s05.c12 .video-wrapper ul.play-list li a.on.v03:before {
    background-image: url(../img/sub_step0512_thumb03_on.jpg);
}

#LAYOUT_BODY.step.s05.c12 .video-wrapper ul.play-list li a.v04:before {
    background-image: url(../img/sub_step0512_thumb04.jpg);
}

#LAYOUT_BODY.step.s05.c12 .video-wrapper ul.play-list li a.on.v04:before {
    background-image: url(../img/sub_step0512_thumb04_on.jpg);
}

/* 강도상해 */
#LAYOUT_BODY.step.s05.c13 .video-wrapper ul.play-list li a.v01:before {
    background-image: url(../img/sub_step0513_thumb01.png);
}

#LAYOUT_BODY.step.s05.c13 .video-wrapper ul.play-list li a.on.v01:before {
    background-image: url(../img/sub_step0513_thumb01_on.png);
}

#LAYOUT_BODY.step.s05.c13 .video-wrapper ul.play-list li a.v02:before {
    background-image: url(../img/sub_step0513_thumb02.png);
}

#LAYOUT_BODY.step.s05.c13 .video-wrapper ul.play-list li a.on.v02:before {
    background-image: url(../img/sub_step0513_thumb02_on.png);
}

#LAYOUT_BODY.step.s05.c13 .video-wrapper ul.play-list li a.v03:before {
    background-image: url(../img/sub_step0513_thumb03.png);
}

#LAYOUT_BODY.step.s05.c13 .video-wrapper ul.play-list li a.on.v03:before {
    background-image: url(../img/sub_step0513_thumb03_on.png);
}

#LAYOUT_BODY.step.s05.c13 .video-wrapper ul.play-list li a.v04:before {
    background-image: url(../img/sub_step0513_thumb04.png);
}

#LAYOUT_BODY.step.s05.c13 .video-wrapper ul.play-list li a.on.v04:before {
    background-image: url(../img/sub_step0513_thumb04_on.png);
}

/* 무고범죄 */
#LAYOUT_BODY.step.s05.c14 .video-wrapper ul.play-list li a.v01:before {
    background-image: url(../img/sub_step0514_thumb01.png);
}

#LAYOUT_BODY.step.s05.c14 .video-wrapper ul.play-list li a.on.v01:before {
    background-image: url(../img/sub_step0514_thumb01_on.png);
}

#LAYOUT_BODY.step.s05.c14 .video-wrapper ul.play-list li a.v02:before {
    background-image: url(../img/sub_step0514_thumb02.png);
}

#LAYOUT_BODY.step.s05.c14 .video-wrapper ul.play-list li a.on.v02:before {
    background-image: url(../img/sub_step0514_thumb02_on.png);
}

#LAYOUT_BODY.step.s05.c14 .video-wrapper ul.play-list li a.v03:before {
    background-image: url(../img/sub_step0514_thumb03.png);
}

#LAYOUT_BODY.step.s05.c14 .video-wrapper ul.play-list li a.on.v03:before {
    background-image: url(../img/sub_step0514_thumb03_on.png);
}

#LAYOUT_BODY.step.s05.c14 .video-wrapper ul.play-list li a.v04:before {
    background-image: url(../img/sub_step0514_thumb04.png);
}

#LAYOUT_BODY.step.s05.c14 .video-wrapper ul.play-list li a.on.v04:before {
    background-image: url(../img/sub_step0514_thumb04_on.png);
}

/* 위증교사 */
#LAYOUT_BODY.step.s05.c15 .video-wrapper ul.play-list li a.v01:before {
    background-image: url(../img/sub_step0515_thumb01.png);
}

#LAYOUT_BODY.step.s05.c15 .video-wrapper ul.play-list li a.on.v01:before {
    background-image: url(../img/sub_step0515_thumb01_on.png);
}

#LAYOUT_BODY.step.s05.c15 .video-wrapper ul.play-list li a.v02:before {
    background-image: url(../img/sub_step0515_thumb02.png);
}

#LAYOUT_BODY.step.s05.c15 .video-wrapper ul.play-list li a.on.v02:before {
    background-image: url(../img/sub_step0515_thumb02_on.png);
}

#LAYOUT_BODY.step.s05.c15 .video-wrapper ul.play-list li a.v03:before {
    background-image: url(../img/sub_step0515_thumb03.png);
}

#LAYOUT_BODY.step.s05.c15 .video-wrapper ul.play-list li a.on.v03:before {
    background-image: url(../img/sub_step0515_thumb03_on.png);
}

#LAYOUT_BODY.step.s05.c15 .video-wrapper ul.play-list li a.v04:before {
    background-image: url(../img/sub_step0515_thumb04.png);
}

#LAYOUT_BODY.step.s05.c15 .video-wrapper ul.play-list li a.on.v04:before {
    background-image: url(../img/sub_step0515_thumb04_on.png);
}

/* 중감금치상 */
#LAYOUT_BODY.step.s05.c16 .video-wrapper ul.play-list li a.v01:before {
    background-image: url(../img/sub_step0516_thumb01.png);
}

#LAYOUT_BODY.step.s05.c16 .video-wrapper ul.play-list li a.on.v01:before {
    background-image: url(../img/sub_step0516_thumb01_on.png);
}

#LAYOUT_BODY.step.s05.c16 .video-wrapper ul.play-list li a.v02:before {
    background-image: url(../img/sub_step0516_thumb02.png);
}

#LAYOUT_BODY.step.s05.c16 .video-wrapper ul.play-list li a.on.v02:before {
    background-image: url(../img/sub_step0516_thumb02_on.png);
}

#LAYOUT_BODY.step.s05.c16 .video-wrapper ul.play-list li a.v03:before {
    background-image: url(../img/sub_step0516_thumb03.png);
}

#LAYOUT_BODY.step.s05.c16 .video-wrapper ul.play-list li a.on.v03:before {
    background-image: url(../img/sub_step0516_thumb03_on.png);
}

#LAYOUT_BODY.step.s05.c16 .video-wrapper ul.play-list li a.v04:before {
    background-image: url(../img/sub_step0516_thumb04.png);
}

#LAYOUT_BODY.step.s05.c16 .video-wrapper ul.play-list li a.on.v04:before {
    background-image: url(../img/sub_step0516_thumb04_on.png);
}






/*
 * STEP 06 : 편지수령
 */

/* 단계별 레이아웃 */
#LAYOUT_BODY.step.s06>.cont {
    position: absolute;
    left: calc((100% - 17rem)/2);
    top: 0;
    width: 96rem;
    transform: translateX(-50%);
    padding-top: 6rem;
    padding-bottom: 8rem;
}

#LAYOUT_BODY.step.s06 .cont h2.ctit {
    padding: 5rem 0 5rem;
    font-size: 3.6rem;
    color: #fff;
    font-weight: 300;
    text-align: center;
    line-height: 1.4;
}

#LAYOUT_BODY.step.s06 .cont h2.ctit strong {
    font-weight: 700;
}

#LAYOUT_BODY.step.s06 .cont h2.ctit strong em {
    color: #ffed4e;
}

@media (max-width: 1260px) {
    #LAYOUT_BODY.step.s06>.cont {
        width: calc(100% - 17rem - 4rem);
    }
}

@media (max-width: 1024px) {
    #LAYOUT_BODY.step.s06>.cont {
        padding-bottom: 16rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s06>.cont {
        left: 50%;
        width: calc(100% - 4rem);
    }

    #LAYOUT_BODY.step.s06 .cont h2.ctit {
        font-size: 3.8rem;
        padding: 6rem 0 5rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s06>.cont {
        width: calc(100% - 10%);
    }

    #LAYOUT_BODY.step.s06 .cont h2.ctit {
        font-size: 2.8rem;
    }

    #LAYOUT_BODY.step.s06 .cont h2.ctit br {
        display: none;
    }
}

/* 레이아웃 및 사건별 백그라운드 */
#LAYOUT_BODY.step.s06 {
    position: relative;
}

#LAYOUT_BODY.step.s06 .sect-bg {
    z-index: -100;
    position: fixed;
    top: 6rem;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 100%;
    transform: translateX(-50%);
}

#LAYOUT_BODY.step.s06 .sect-bg {
    background: url('../img/sub_step0607_bg.jpg') no-repeat center;
    /* 기본 */
    background-size: cover;
}

#LAYOUT_BODY.step.s06.c09 .sect-bg {
    background: url('../img/sub_step0609_bg.jpg') no-repeat center;
    /* 횡령 */
    background-size: cover;
}

#LAYOUT_BODY.step.s06.c10 .sect-bg {
    background: url('../img/sub_step0610_bg.jpg') no-repeat center;
    /* 마약 */
    background-size: cover;
}

#LAYOUT_BODY.step.s06.c13 .sect-bg {
    background: url('../img/sub_step0613_bg.jpg') no-repeat center;
    /* 강도상해 */
    background-size: cover;
}

#LAYOUT_BODY.step.s06.c14 .sect-bg {
    background: url('../img/sub_step0614_bg.jpg') no-repeat center;
    /* 무고 */
    background-size: cover;
}

#LAYOUT_BODY.step.s06.c15 .sect-bg {
    background: url('../img/sub_step0615_bg.jpg') no-repeat center;
    /* 위증교사 */
    background-size: cover;
}

#LAYOUT_BODY.step.s06.c16 .sect-bg {
    background: url('../img/sub_step0616_bg.jpg') no-repeat center;
    /* 중감금치상죄 */
    background-size: cover;
}




/* 탭 메뉴 */
#LAYOUT_BODY.step.s06 .c-tab {
    display: flex;
    align-items: center;
    column-gap: 5px;
    justify-content: center;
}

#LAYOUT_BODY.step.s06 .c-tab li {
    width: 20rem;
    text-align: center;
}

#LAYOUT_BODY.step.s06.c01 .c-tab li {
    width: auto;
}

#LAYOUT_BODY.step.s06 .c-tab li a {
    position: relative;
    display: block;
    height: 6rem;
    line-height: 6rem;
    background: var(--body-color);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
}

#LAYOUT_BODY.step.s06.c01 .c-tab li a {
    padding: 0 1.5rem;
}

#LAYOUT_BODY.step.s06 .c-tab li a:before {
    display: none;
    content: "";
    position: absolute;
    width: 100%;
    height: 1rem;
    background: #fff;
    top: -1rem;
    left: 0;
}

#LAYOUT_BODY.step.s06 .c-tab li a span {
    display: inline-block;
    line-height: 1;
    padding-bottom: 0.3rem;
    border-bottom: solid 1px var(--body-color);
}

#LAYOUT_BODY.step.s06 .c-tab li.active a {
    color: var(--first-color);
    line-height: 5rem;
    font-size: 2rem;
    font-weight: 700;
    background: #fff;
}

#LAYOUT_BODY.step.s06 .c-tab li.active a:before {
    display: block;
}

#LAYOUT_BODY.step.s06 .c-tab li.active a span {
    border-bottom: solid 1px var(--first-color);
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s06 .c-tab {
        justify-content: center;
    }

    #LAYOUT_BODY.step.s06 .c-tab li {
        width: 18rem;
    }

    #LAYOUT_BODY.step.s06 .c-tab li a {
        height: 5rem;
        line-height: 5rem;
        padding: 0 1.5rem;
    }

    #LAYOUT_BODY.step.s06 .c-tab li.active a {
        line-height: 4rem;
    }
}

@media (max-width:420px) {
    #LAYOUT_BODY.step.s06.c01 .c-tab li a {
        font-size: 1.6rem;
        padding: 0 1rem;
    }
}



#LAYOUT_BODY.step.s06 .c-wrap {
    background: #fff;
    padding: 5rem 5rem;
}

#LAYOUT_BODY.step.s06 .c-wrap section {
    position: relative;
}

#LAYOUT_BODY.step.s06 .c-wrap section::before {
    display: block;
    content: "";
    position: absolute;
    top: -6.7rem;
    left: 0;
}

/* 성분표시기능 */
#LAYOUT_BODY.step.s06 .c-wrap section.clip-photo {
    padding-left: 30rem;
}

/* 1 */
#LAYOUT_BODY.step.s06.c01 .c-wrap section.s01::before {
    width: 25.5rem;
    height: 45.7rem;
    background: url("../img/sub_step0601_pic01_on.png") no-repeat center;
    background-size: 25.5rem auto;
}

#LAYOUT_BODY.step.s06.c01 .c-wrap section.s02::before {
    width: 25.5rem;
    height: 45.7rem;
    background: url("../img/sub_step0601_pic02_on.png") no-repeat center;
    background-size: 25.5rem auto;
}

/* 2 */
#LAYOUT_BODY.step.s06.c02 .c-wrap section.s01:before {
    width: 24.1rem;
    height: 43.5rem;
    background: url("../img/sub_step0602_pic01_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

#LAYOUT_BODY.step.s06.c02 .c-wrap section.s02:before {
    width: 24.1rem;
    height: 42.2rem;
    background: url("../img/sub_step0602_pic02_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

/* 3 */
#LAYOUT_BODY.step.s06.c03 .c-wrap section.s01:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0603_pic01_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

#LAYOUT_BODY.step.s06.c03 .c-wrap section.s02:before {
    width: 25.5rem;
    height: 42.6rem;
    background: url("../img/sub_step0603_pic02_on.png") no-repeat center;
    background-size: 25.5rem auto;
}

/* 4 */
#LAYOUT_BODY.step.s06.c04 .c-wrap section.s01:before {
    width: 24.1rem;
    height: 41.3rem;
    background: url("../img/sub_step0604_pic01_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

#LAYOUT_BODY.step.s06.c04 .c-wrap section.s02:before {
    width: 25.5rem;
    height: 42.6rem;
    background: url("../img/sub_step0604_pic02_on.png") no-repeat center;
    background-size: 25.5rem auto;
}

/* 5 */
#LAYOUT_BODY.step.s06.c05 .c-wrap section {
    padding-left: 0;
}

/* 6 */
#LAYOUT_BODY.step.s06.c06 .c-wrap section.s01:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0606_pic01_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

#LAYOUT_BODY.step.s06.c06 .c-wrap section.s02:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0606_pic02_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

/* 7 */
#LAYOUT_BODY.step.s06.c07 .c-wrap section {
    padding-left: 0;
}

/* 8 */
#LAYOUT_BODY.step.s06.c08 .c-wrap section {
    padding-left: 0;
}

/* 9 */
#LAYOUT_BODY.step.s06.c09 .c-wrap section.s01 {
    padding-left: 0;
}

#LAYOUT_BODY.step.s06.c09 .c-wrap section.s02:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0609_pic01.png") no-repeat center;
    background-size: 24.1rem auto;
}

/* 10 */
#LAYOUT_BODY.step.s06.c10 .c-wrap section:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0610_pic01.png") no-repeat center;
    background-size: 24.1rem auto;
}

/* 11 */
#LAYOUT_BODY.step.s06.c11 .c-wrap section.s01:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0611_pic01_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

#LAYOUT_BODY.step.s06.c11 .c-wrap section.s02:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0611_pic02_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

/* 12 */
#LAYOUT_BODY.step.s06.c12 .c-wrap section.s01:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0612_pic01_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

#LAYOUT_BODY.step.s06.c12 .c-wrap section.s02:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0612_pic02_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

/* 13 강도상해 */
#LAYOUT_BODY.step.s06.c13 .c-wrap section.s01:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0613_pic01_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

#LAYOUT_BODY.step.s06.c13 .c-wrap section.s02:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0613_pic02_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

/* 14 무고범죄 */
#LAYOUT_BODY.step.s06.c14 .c-wrap section.s01:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0614_pic01_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

#LAYOUT_BODY.step.s06.c14 .c-wrap section.s02:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0614_pic02_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

/* 15 위증교사 */
#LAYOUT_BODY.step.s06.c15 .c-wrap section.s01:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0615_pic01_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

#LAYOUT_BODY.step.s06.c15 .c-wrap section.s02:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0615_pic02_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

/* 16 중감금치상죄 */
#LAYOUT_BODY.step.s06.c16 .c-wrap section.s01:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0616_pic01_on.png") no-repeat center;
    background-size: 24.1rem auto;
}

#LAYOUT_BODY.step.s06.c16 .c-wrap section.s02:before {
    width: 24.1rem;
    height: 43.0rem;
    background: url("../img/sub_step0616_pic02_on.png") no-repeat center;
    background-size: 24.1rem auto;
}


#LAYOUT_BODY.step.s06 .c-wrap section:before {}

/* 편지수취 */
#LAYOUT_BODY.step.s06 .c-wrap section .inbox {
    border: solid 1px #000;
    padding: 5rem 4rem;
    /* background:url("../img/letter-bg.png") no-repeat center center;
    background-size:28.8rem auto; */
}

#LAYOUT_BODY.step.s06 .c-wrap section .inbox .letter_title {

    font-size: 4rem;
    font-weight: 700;
    text-align: center;
    color: #000;
    margin-bottom: 2rem;
    letter-spacing: 3rem;
}

#LAYOUT_BODY.step.s06 .c-wrap section .inbox .lhead {

    font-size: 1.8rem;
    color: #000;
    line-height: 2;
    font-weight: 700;
}

#LAYOUT_BODY.step.s06 .c-wrap section .inbox .cnt {

    margin-top: 2rem;
    font-size: 2rem;
    color: #000;
    line-height: 1.8;
}

#LAYOUT_BODY.step.s06 .c-wrap section .inbox .lfoot {
    display: flex;
    justify-content: flex-end;
}

#LAYOUT_BODY.step.s06 .c-wrap section .inbox .lfoot .photo img {
    width: 18rem;
    height: auto;
}

#LAYOUT_BODY.step.s06 .c-wrap section .inbox .lfoot .by {

    font-size: 1.8rem;
    color: #000;
    line-height: 2;
}

/* 서명 이미지 */
#LAYOUT_BODY.step.s06 .c-wrap section {}

#LAYOUT_BODY.step.s06 .c-wrap section .inbox .by {
    margin-top: 2rem;
    text-align: right;
    font-size: 1.8rem;
    color: #000;
    line-height: 2;
    font-weight: 700;
}

#LAYOUT_BODY.step.s06 .c-wrap section h3.letter_title {
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    color: #000;
    margin-bottom: 3rem;
}

#LAYOUT_BODY.step.s06 .c-wrap section .cnt .photo {
    float: left;
    width: 15rem;
    height: auto;
    margin-right: 2rem;
}



/* 탄원서 */
#LAYOUT_BODY.step.s06 .c-wrap section.s01 {}

#LAYOUT_BODY.step.s06 .c-wrap section.s01 .head {}

#LAYOUT_BODY.step.s06 .c-wrap section.s01 .head .label+.label {
    margin-top: 1rem;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s01 .head .label ul {
    display: flex;
    align-items: center;
    column-gap: 2rem;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s01 .head .label ul .label_a {
    font-family: 'Noto Serif KR', serif;
    width: 12rem;
    font-size: 1.8rem;
    color: #000;
    font-weight: 700;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s01 .head .label ul .label_b {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.8rem;
    color: #000;
    font-weight: 700;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s01 .cnt {}

#LAYOUT_BODY.step.s06 .c-wrap section.s01 .cnt .txt_other_ad {
    display: block;
    margin-top: 5rem;
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: 2rem;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s01 .cnt .sent_desc {}

#LAYOUT_BODY.step.s06 .c-wrap section.s01 .cnt .sent_desc span {
    display: block;
    padding-left: 2rem;
    text-indent: -2rem;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s01 .cnt .sent_desc span+span {
    margin-top: 1rem;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s01 .bottom {
    margin-top: 3rem;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s01 .bottom .txt_year {
    font-family: 'Noto Serif KR', serif;
    text-align: center;
    font-size: 1.8rem;
    color: #000;
    margin-bottom: 3rem;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s01 .bottom .txt_sign {
    font-family: 'Noto Serif KR', serif;
    text-align: right;
    font-size: 1.8rem;
    color: #000;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s01 .bottom .txt_sign b {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.8rem;
    font-weight: 500;
}

#LAYOUT_BODY.step.s06.c07 .c-wrap section.s01 .bottom .txt_sign b img {
    width: auto;
    height: 7rem;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s02 .cnt {}

#LAYOUT_BODY.step.s06 .c-wrap section.s02 .cnt strong {
    font-weight: 700;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s02 .bottom {
    margin-top: 3rem;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s02 .bottom .txt_year {
    font-family: 'Noto Serif KR', serif;
    text-align: center;
    font-size: 2rem;
    color: #000;
    margin-bottom: 3rem;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s02 .bottom .txt_sign {
    font-family: 'Noto Serif KR', serif;
    text-align: right;
    font-size: 2rem;
    color: #000;
}

#LAYOUT_BODY.step.s06 .c-wrap section.s02 .bottom .txt_sign b {
    font-family: 'Noto Serif KR', serif;
    font-size: 2rem;
    font-weight: 500;
}

#LAYOUT_BODY.step.s06.c07 .c-wrap section.s02 .bottom .txt_sign b img {
    width: auto;
    height: 7rem;
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s06 .c-wrap {
        padding: 4rem 3rem;
    }

    #LAYOUT_BODY.step.s06 .c-wrap section:before {
        top: -5.7rem;
    }

    #LAYOUT_BODY.step.s06 .c-wrap section .inbox {
        padding: 3rem 2rem;
    }

    #LAYOUT_BODY.step.s06 .c-wrap section .inbox .letter_title {
        font-size: 3rem;
    }

    #LAYOUT_BODY.step.s06 .c-wrap section .inbox .lhead {
        font-size: 1.6rem;
    }

    #LAYOUT_BODY.step.s06 .c-wrap section.s01 .cnt {
        font-size: 1.8rem;
    }

    #LAYOUT_BODY.step.s06 .c-wrap section .inbox .by {
        font-size: 1.6rem;
    }
}

@media (max-width:680px) {
    #LAYOUT_BODY.step.s06 .c-wrap section.clip-photo {
        padding-left: 0;
        padding-top: 48rem;
    }

    #LAYOUT_BODY.step.s06 .c-wrap section:before {
        top: 0rem;
        width: 100% !important;
    }


}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s06 .c-wrap {
        padding: 4rem 5%;
    }
}

/* 합의서 사인 */
#LAYOUT_BODY.step.s06.c05 .txt_sign,
#LAYOUT_BODY.step.s06.c09 .txt_sign {
    position: relative;
}

#LAYOUT_BODY.step.s06.c05 .txt_sign b,
#LAYOUT_BODY.step.s06.c09 .txt_sign b {
    position: relative;
    z-index: 2;
}

#LAYOUT_BODY.step.s06.c05 .txt_sign em,
#LAYOUT_BODY.step.s06.c09 .txt_sign em {
    font-family: 'Noto Serif KR', serif;
    display: inline-block;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    position: absolute;
    z-index: 0;
    font-size: 1.6rem;
    color: var(--body-color);
}

#LAYOUT_BODY.step.s06.c05 .img_stamp,
#LAYOUT_BODY.step.s06.c09 .img_stamp {
    position: relative;
    width: auto;
    height: 7rem;
    z-index: 1;
}

#LAYOUT_BODY.step.s06.c10 .c-wrap section .cnt .photo {
    float: left;
    margin-right: 2rem;
    height: 15rem;
    width: auto;
}



/*
 * STEP 07 : 선고
 */

/* 인트로 영상 재생후 다음 버튼 활성 */
#LAYOUT_NAVI.step.s07 .btn a.next {
    pointer-events: none;
}

/* 인트로 영상 재생후 보이게 */
#LAYOUT_NAVI.step.s07 {
    display: none;
}

#LAYOUT_BODY.step.s07 #LAYOUT_CONT {
    display: none;
}

#LAYOUT_BODY.step.s07 header {
    display: none;
}

#LAYOUT_TAIL.step.s07 {
    display: none;
}

/* 인트로 영상 재생후 스크롤 아이콘 보이게 */
#LAYOUT_BODY.step.s07 .tag_scroll_area {
    display: none;
}

/* 레이아웃 및 사건별 백그라운드 */
#LAYOUT_BODY.step.s07 {
    position: relative;
}

#LAYOUT_BODY.step.s07 .sect-bg {
    z-index: -100;
    position: fixed;
    top: 6rem;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 100%;
    transform: translateX(-50%);
}

#LAYOUT_BODY.step.s07 .sect-bg {
    background: url('../img/sub_step0707_bg.jpg') no-repeat center;
    /* 기본 */
    background-size: cover;
}

#LAYOUT_BODY.step.s07.c09 .sect-bg {
    background: url('../img/sub_step0709_bg.jpg') no-repeat center;
    /* 횡령 */
    background-size: cover;
}

#LAYOUT_BODY.step.s07.c10 .sect-bg {
    background: url('../img/sub_step0710_bg.jpg') no-repeat center;
    /* 마약 */
    background-size: cover;
}

/* 명예훼손 */
#LAYOUT_BODY.step.s07.c11 .sect-bg {
    background: url('../img/sub_step0711_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 디지털성범죄 */
#LAYOUT_BODY.step.s07.c12 .sect-bg {
    background: url('../img/sub_step0712_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 강도상해 */
#LAYOUT_BODY.step.s07.c13 .sect-bg {
    background: url('../img/sub_step0713_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 무고 */
#LAYOUT_BODY.step.s07.c14 .sect-bg {
    background: url('../img/sub_step0714_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 위증교사 */
#LAYOUT_BODY.step.s07.c15 .sect-bg {
    background: url('../img/sub_step0715_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 중감금치상죄 */
#LAYOUT_BODY.step.s07.c16 .sect-bg {
    background: url('../img/sub_step0716_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 단계별 레이아웃 */
#LAYOUT_BODY.step.s07 .cont {
    position: absolute;
    left: calc((100% - 17rem)/2);
    top: 0;
    width: 124rem;
    transform: translateX(-50%);
    padding-top: 6rem;
    padding-bottom: 8rem;
}

#LAYOUT_BODY.step.s07 .cont h2.ctit {
    padding: 5rem 0 5rem;
    font-size: 3.6rem;
    color: #fff;
    font-weight: 300;
    text-align: center;
    line-height: 1.4;
}

#LAYOUT_BODY.step.s07 .cont h2.ctit strong {
    font-weight: 700;
}

#LAYOUT_BODY.step.s07 .cont h2.ctit strong em {
    color: #ffed4e;
}

@media (max-width: 1560px) {
    #LAYOUT_BODY.step.s07 .cont {
        width: calc(100% - 17rem - 4rem);
    }
}

@media (max-width: 1024px) {
    #LAYOUT_BODY.step.s07 .cont {
        padding-bottom: 16rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s07 .cont {
        left: 50%;
        width: calc(100% - 4rem);
    }

    #LAYOUT_BODY.step.s07 .cont h2.ctit {
        font-size: 3.8rem;
        padding: 6rem 0 5rem;
    }
}

@media (max-width:660px) {
    #LAYOUT_BODY.step.s07 .cont h2.ctit br {
        display: none;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s07 .cont {
        width: calc(100% - 10%);
    }

    #LAYOUT_BODY.step.s07 .cont h2.ctit {
        font-size: 2.8rem;
    }
}

/* 탭 메뉴 */
#LAYOUT_BODY.step.s07 .c-tab {
    display: flex;
    align-items: center;
    column-gap: 5px;
    justify-content: center;
}

#LAYOUT_BODY.step.s07 .c-tab li {
    width: 20rem;
    text-align: center;
}

#LAYOUT_BODY.step.s07 .c-tab li a {
    position: relative;
    display: block;
    height: 6rem;
    line-height: 6rem;
    background: var(--body-color);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
}

#LAYOUT_BODY.step.s07 .c-tab li a:before {
    display: none;
    content: "";
    position: absolute;
    width: 100%;
    height: 1rem;
    background: #fff;
    top: -1rem;
    left: 0;
}

#LAYOUT_BODY.step.s07 .c-tab li a span {
    display: inline-block;
    line-height: 1;
    padding-bottom: 0.3rem;
    border-bottom: solid 1px var(--body-color);
}

#LAYOUT_BODY.step.s07 .c-tab li.active a {
    color: var(--first-color);
    line-height: 5rem;
    font-size: 2rem;
    font-weight: 700;
    background: #fff;
}

#LAYOUT_BODY.step.s07 .c-tab li.active a:before {
    display: block;
}

#LAYOUT_BODY.step.s07 .c-tab li.active a span {
    border-bottom: solid 1px var(--first-color);
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s07 .c-tab {
        justify-content: center;
    }

    #LAYOUT_BODY.step.s07 .c-tab li {
        width: 18rem;
    }

    #LAYOUT_BODY.step.s07 .c-tab li a {
        height: 5rem;
        line-height: 5rem;
        padding: 0 1.5rem;
    }

    #LAYOUT_BODY.step.s07 .c-tab li.active a {
        line-height: 4rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s07 .c-tab li a {
        font-size: 1.6rem;
    }

    #LAYOUT_BODY.step.s07 .c-tab li.active a {
        font-size: 1.8rem;
    }
}


#LAYOUT_BODY.step.s07 .c-wrap {
    background: #fff;
    padding: 5rem 5rem;
}

/* 선고 */
#LAYOUT_BODY.step.s07 .c-wrap section.s01 {}


#LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box {
    display: flex;
    column-gap: 4rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-right: solid 1px #e5e5e5;
    padding-right: 4rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box .left h3 {
    font-size: 2.4rem;
    color: #000;
    font-weight: 600;
    margin-bottom: 1rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box .left .lbtn-wrap {
    margin-top: auto;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box .left .lbtn-wrap a {
    display: block;
    margin-top: 10px;
    width: 20rem;
    height: 5.8rem;
    line-height: 5.8rem;
    padding: 0 1.5rem;
    font-size: 1.8rem;
    color: #fff;
    font-weight: 600;
    background: var(--first-color);
    border-radius: 1rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box .left .lbtn-wrap a span {
    display: block;
    background: url("../img/icon_arr_small.png") no-repeat right center;
    background-size: auto 1rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box .right {
    flex: 2.5;
}

@media (max-width:1220px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box {
        flex-direction: column;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box .left {
        border-right: none;
        padding-right: 0;
        text-align: center;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box .left>div {}

    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box .left .lbtn-wrap {
        margin-top: 1rem;
        text-align: center;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box .left .lbtn-wrap a {
        width: 100%;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box .right {
        flex: 1;
        flex-basis: 100%;
        margin-top: 3rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box .left h3 {
        font-size: 2.2rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .law-box .left h3 {
        font-size: 2rem;
    }
}






#LAYOUT_BODY.step.s07 .c-wrap section.s01 .head {
    background: #eee;
    padding: 4rem;
    text-align: left;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .head h4 {}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .head h4 span {
    display: block;
    background: var(--first-color);
    color: #fff;
    font-size: 2.2rem;
    font-weight: 600;
    padding: 1.2rem 2rem;
    box-shadow: rgb(0 0 0 / 40%) 0.3rem 0.3rem 1rem;
    line-height: 1.2;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .head p.desc {
    margin-top: 1.5rem;
    font-size: 2rem;
    color: #000;
    font-weight: 500;
    text-align: left;
    line-height: 1.2;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control {
    margin-top: 3rem;
    display: flex;
    column-gap: 3rem;
    justify-content: flex-start;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control>div:nth-child(1) {
    flex: 1.2;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control>div:nth-child(2) {
    flex: 1.2;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control>div:nth-child(3) {
    flex: 1;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl {
    border: solid 1px var(--first-color);
    border-radius: 5px;
    padding: 2rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl {
    display: flex;
    align-items: center;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl dt {
    font-size: 2.2rem;
    color: var(--first-color);
    font-weight: 700;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl dd {
    margin-left: auto;
    display: flex;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl dd .val {
    font-size: 2.2rem;
    color: var(--first-color);
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl dd .val i {
    font-size: 3.6rem;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl dd .val i:not(:first-child) {
    margin-left: 10px;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl dd a {
    display: inline-block;
    font-size: 0;
    width: 3.6rem;
    height: 3.6rem;
    background: var(--first-color);
    border-radius: 50%;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl dd a.pls {
    margin-left: 2rem;
    background: var(--first-color) url("../img/icon_add.png") no-repeat center;
    background-size: 1.6rem auto;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl dd a.mns {
    margin-left: 0.5rem;
    background: var(--first-color) url("../img/icon_del.png") no-repeat center;
    background-size: 1.6rem auto;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control .desc {
    display: block;
    margin-top: 1.5rem;
    padding: 0 2rem;
    font-size: 1.8rem;
    color: var(--first-color);
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control .desc i {
    display: block;
    color: #000;
    font-size: 1.6rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl.off {
    background: #eee;
    border: solid 1px #eee;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl.off dt {
    color: #000;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl.off dd .val {
    color: #555;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl.off dd a {
    background: #fff;
    pointer-events: none;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl.off dd a.pls {
    background: #fff url("../img/icon_add_grey.png") no-repeat center;
    background-size: 1.6rem auto;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s01 .control dl.off dd a.mns {
    background: #fff url("../img/icon_del_grey.png") no-repeat center;
    background-size: 1.6rem auto;
}

@media (max-width:1350px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .control {
        flex-wrap: wrap;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .control>div:nth-child(1) {
        flex-basis: 100%;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .control>div:nth-child(2) {
        flex-basis: 100%;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .control>div:nth-child(3) {
        flex-basis: 100%;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .control>div+div {
        margin-top: 3rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s07 .c-wrap {
        padding: 4rem 3rem;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .head h4 span {
        font-size: 2.2rem;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .head p.desc {
        font-size: 2.2rem;
    }
}

@media (max-width:650px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .head p.desc br {
        display: none;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .head {
        padding: 3rem;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .head h4 span {
        font-size: 1.8rem;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s01 .head p.desc {
        font-size: 1.8rem;
    }
}

/* 영상선택 */
#LAYOUT_BODY.step.s07 .c-wrap section.s02 {
    display: flex;
    column-gap: 4rem;

}

#LAYOUT_BODY.step.s07 .c-wrap section.s02 .left {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    border-right: solid 1px #e5e5e5;
    padding-right: 4rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s02 .left h3 {
    font-size: 2.4rem;
    color: #000;
    font-weight: 600;
    margin-bottom: 1rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s02 .left .ext {
    color: var(--first-color);
}

#LAYOUT_BODY.step.s07 .c-wrap section.s02 .left .lbtn-wrap {
    align-self: flex-end;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s02 .left .lbtn-wrap a {
    display: block;
    margin-top: 10px;
    width: 20rem;
    height: 5.8rem;
    line-height: 5.8rem;
    padding: 0 1.5rem;
    font-size: 1.8rem;
    color: #fff;
    font-weight: 600;
    background: var(--first-color);
    border-radius: 1rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s02 .left .lbtn-wrap a span {
    display: block;
    background: url("../img/icon_arr_small.png") no-repeat right center;
    background-size: auto 1rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s02 .right {
    flex: 2.5;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req ul.chk {
    font-size: 2rem;
    color: #000;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req ul.chk li {
    position: relative;
    display: block;
    padding: 1.2rem 0 1.2rem 12rem;
    cursor: pointer;
    border-bottom: solid 1px #ddd;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req ul.chk li.on {
    font-weight: 600;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req ul.chk li.req_add {
    position: relative;
    display: inline-block;
    padding: 1.2rem 4rem 1rem 3.5rem;
    cursor: pointer;
    background: none;
    border-bottom: 0;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req ul.chk li:after {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    content: "";
    width: 2.4rem;
    height: 2.4rem;
    background-image: url('../img/common_icon_check01_off.png');
    background-repeat: no-repeat;
    background-size: 2.2rem auto;
    background-position: center center;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req ul.chk li i {
    font-size: 1.8rem;
    margin-left: 0.5rem;
    font-style: normal;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req ul.chk li.on:after {
    background-image: url('../img/common_icon_check01_on.png');
    background-size: 2.2rem auto;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req ul.chk li.t01:before {
    display: block;
    content: attr(data-label);
    position: absolute;
    left: 4.4rem;
    top: 1.2rem;
    height: 3rem;
    line-height: 3rem;
    width: 5.5rem;
    text-align: center;
    font-weight: bold;
    color: var(--first-color);
    border: 2px solid var(--first-color);
    border-radius: 1.7rem;
    font-size: 1.6rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req ul.chk li.t02:before {
    display: block;
    content: attr(data-label);
    position: absolute;
    left: 4.4rem;
    top: 1.2rem;
    height: 3rem;
    line-height: 3rem;
    width: 5.5rem;
    text-align: center;
    font-weight: bold;
    color: #de3900;
    border: 2px solid #de3900;
    border-radius: 1.7rem;
    font-size: 1.6rem;
}

@media (max-width:1220px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s02 {
        flex-wrap: wrap;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s02 .left {
        flex-basis: 100%;
        border-right: none;
        padding-right: 0;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s02 .left>div {
        flex-basis: 100%;
        text-align: center;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s02 .left .lbtn-wrap {
        display: flex;
        column-gap: 10px;
        margin-top: 2rem;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s02 .left .lbtn-wrap a {
        flex: 1;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s02 .right {
        flex: 1;
        flex-basis: 100%;
        margin-top: 3rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s02 .left h3 {
        font-size: 2.2rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s02 .left h3 {
        font-size: 2rem;
    }
}


/* 결과선택1 */
#LAYOUT_BODY.step.s07 .c-wrap section.s03 {
    display: flex;
    column-gap: 4rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s03 .left {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    border-right: solid 1px #e5e5e5;
    padding-right: 4rem;
    /* background:url("../img/survey_bg.png") no-repeat left bottom;
    background-size:20rem auto; */
}

#LAYOUT_BODY.step.s07 .c-wrap section.s03 .left h3 {
    font-size: 2.4rem;
    color: #000;
    font-weight: 600;
    margin-bottom: 1rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s03 .right {
    flex: 2.5;
}


#LAYOUT_BODY.step.s07 .c-wrap section.req .right dl.bd {
    border-bottom: solid 1px #ddd;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

/* #LAYOUT_BODY.step.s07 .c-wrap section.req .right dl.bd.age {
    margin-top:-2rem;
    padding-top:2rem;
    background:#e8eff4;
} */
#LAYOUT_BODY.step.s07 .c-wrap section.req .right dl {
    display: flex;
    line-height: 4.5rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req .right dl+dl {
    margin-top: 2rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req .right dl>dt {
    width: 12rem;
    font-size: 2.2rem;
    font-weight: 600;
    color: #000;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req .right dl>dd {
    flex: 1;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req .right dl>dd>ul.rdo {}

#LAYOUT_BODY.step.s07 .c-wrap section.req .right dl>dd>ul.rdo:after {
    display: block;
    content: "";
    clear: both;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req .right dl>dd>ul.rdo>li {
    font-size: 2rem;
    color: #000;
    float: left;
    width: calc(100% / 4);
    padding: 0 0 0 3.2rem;
    background-image: url('../img/common_icon_radio01_off.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 2.2rem auto;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req .right dl>dd>ul.rdo>li.on {
    background-image: url('../img/common_icon_radio01_on.png');
    background-size: 2.2rem auto;
}

#LAYOUT_BODY.step.s07 .c-wrap section.req .right dl>dd>ul.rdo.n3>li {
    width: calc(100% / 3);
}

@media (max-width:1340px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s03 {
        flex-wrap: wrap;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s03 .left {
        flex-basis: 100%;
        border-right: none;
        padding-right: 0;
        background: url("../img/survey_bg.png") no-repeat right center;
        background-size: auto 7rem;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s03 .left h3 br {
        display: none;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s03 .right {
        flex: 1;
        flex-basis: 100%;
        margin-top: 3rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s03 .left h3 {
        font-size: 2.2rem;
    }
}

@media (max-width:640px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s03 .left {
        text-align: center;
        justify-content: center
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.req .right dl {
        flex-wrap: wrap;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.req .right dl>dt {
        flex-basis: 100%;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.req .right dl>dd {
        flex-basis: 100%;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s03 .left {
        background: none;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s03 .left h3 {
        font-size: 2rem;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.req .right dl>dd>ul.rdo>li {
        font-size: 2rem;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.req .right dl>dd>ul.g02 li {
        width: calc(100% / 3);
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.req .right dl>dd>ul.g04 li {
        width: calc(100% / 2) !important;
    }
}

@media (max-width:420px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s03 .left h3 br {
        display: none;
    }
}

/* 결과선택2 */
#LAYOUT_BODY.step.s07 .c-wrap section.s04_add {}

#LAYOUT_BODY.step.s07 .c-wrap section.s04_add .row {
    display: flex;
    column-gap: 4rem;
    justify-content: flex-start;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s04_add .row2 {
    margin-top: 2rem;
    border-top: solid 1px #ddd;
    padding-top: 2rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s04_add .row3 {
    margin-top: 2rem;
    border-top: solid 1px #ddd;
    padding-top: 2rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s04_add .row .left {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-right: solid 1px #e5e5e5;
    padding-right: 4rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s04_add .row .left h3 {
    font-size: 2.4rem;
    color: #000;
    font-weight: 600;
    margin-bottom: 1rem;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s04_add .row .left .ext {
    color: var(--first-color);
}

#LAYOUT_BODY.step.s07 .c-wrap section.s04_add .row .right {
    flex: 2.5;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s04_add ul.chk {
    display: flex;
    flex-wrap: wrap;
}

#LAYOUT_BODY.step.s07 .c-wrap section.s04_add ul.chk li.req_add {
    width: calc(100% / 3);
    padding: 1.2rem 2rem 1rem 3.5rem;
}

@media (max-width:1520px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s04_add ul.chk li.req_add {
        width: calc(100% / 3);
    }
}

@media (max-width:1340px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s04_add .row {
        flex-wrap: wrap;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s04_add .row .left {
        flex-basis: 100%;
        border-right: none;
        padding-right: 0;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s04_add .row .right {
        flex: 1;
        flex-basis: 100%;
        margin-top: 3rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s04_add .row .left h3 {
        font-size: 2.2rem;
    }
}

@media (max-width:640px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s04_add .row .left {
        text-align: center;
        justify-content: center;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s07 .c-wrap section.s04_add .row .left h3 {
        font-size: 2rem;
    }

    #LAYOUT_BODY.step.s07 .c-wrap section.s04_add ul.chk li.req_add {
        width: calc(100% / 2);
    }
}



#LAYOUT_BODY.step.s07 .subtt {
    margin-top: 1rem;
    font-size: 1.6rem;
    color: #000;
    font-weight: 500;
}



/*
 * STEP 08 : 결과보기
 */
/* 레이아웃 및 사건별 백그라운드 */
#LAYOUT_BODY.step.s08 {
    position: relative;
}

#LAYOUT_BODY.step.s08 .sect-bg {
    z-index: -100;
    position: fixed;
    top: 6rem;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 100%;
    transform: translateX(-50%);
}

#LAYOUT_BODY.step.s08 .sect-bg {
    background: url('../img/sub_step0807_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 횡령 */
#LAYOUT_BODY.step.s08.c09 .sect-bg {
    background: url('../img/sub_step0809_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 마약 */
#LAYOUT_BODY.step.s08.c10 .sect-bg {
    background: url('../img/sub_step0810_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 강도상해 */
#LAYOUT_BODY.step.s08.c13 .sect-bg {
    background: url('../img/sub_step0813_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 무고 */
#LAYOUT_BODY.step.s08.c14 .sect-bg {
    background: url('../img/sub_step0814_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 위증교사 */
#LAYOUT_BODY.step.s08.c15 .sect-bg {
    background: url('../img/sub_step0815_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 중감금치상죄 */
#LAYOUT_BODY.step.s08.c16 .sect-bg {
    background: url('../img/sub_step0816_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 단계별 레이아웃 */
#LAYOUT_BODY.step.s08 .cont {
    position: absolute;
    left: calc((100% - 17rem)/2);
    top: 0;
    width: 92rem;
    transform: translateX(-50%);
    padding-top: 6rem;
    padding-bottom: 8rem;
}

#LAYOUT_BODY.step.s08 .cont>h2.ctit {
    padding: 5rem 0 5rem;
    font-size: 4.8rem;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

@media (max-width:1240px) {
    #LAYOUT_BODY.step.s08 .cont {
        width: calc(100% - 17rem - 4rem);
    }
}

@media (max-width: 1024px) {
    #LAYOUT_BODY.step.s08 .cont {
        padding-bottom: 16rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s08 .cont {
        left: 50%;
        width: calc(100% - 4rem);
    }

    #LAYOUT_BODY.step.s08 .cont>h2.ctit {
        font-size: 3.8rem;
        padding: 6rem 0 5rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s08 .cont {
        width: calc(100% - 10%);
    }
}


#LAYOUT_BODY.step.s08>.cont>.result {
    position: relative;
    background-color: #f5f5f5;
    margin-top: 7rem;
}

#LAYOUT_BODY.step.s08>.cont>.result:after {
    display: block;
    content: "";
    clear: both;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf {
    float: right;
    width: 100%;
    height: auto;
    overflow-y: hidden;
    padding: 5rem 4rem 14rem 4rem;
    background-color: #fff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>h3 {
    font-size: 3.2rem;
    line-height: 1;
    font-weight: 600;
    color: #000;
    margin: 0 0 2rem;
    padding: 0 0 1.5rem;
    border-bottom: 1px solid #000;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section {
    margin-top: 3.5rem;
    font-size: 1.8rem;
    word-break: keep-all;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section h4 {
    margin-bottom: 1rem;
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--first-color);
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl {
    margin-top: 2rem;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dt {
    position: relative;
    margin-top: 1.5rem;
    padding: 0 0 0 3.5rem;
    font-size: 2.2rem;
    color: #000;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dt i {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    line-height: 2.4rem;
    background-color: var(--first-color);
    border-radius: 1.2rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: #fff;
    font-style: normal;
    text-align: center;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dt .ibox {
    display: inline-block;
    margin-left: 1rem;
    background-color: #5a7a95;
    padding: 0.5rem 1rem;
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd {
    padding: 1rem 0 0 3.5rem;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd>div {
    padding: 3rem;
    background-color: #f5f3f3;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table {
    width: 100%;
    background-color: #f5f5f5;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table tbody {}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table th,
#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table td {
    padding: 1.5rem 2rem;
    vertical-align: top;
    text-align: left;
    font-size: 1.8rem;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table tr {
    border-bottom: solid 1px #e5e5e5;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table tr:first-child th,
#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table tr:first-child td {
    padding-top: 0;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table tr:last-child th,
#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table tr:last-child td {
    padding-bottom: 0;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table tr:last-child {
    border-bottom: 0;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table th {
    color: var(--first-color);
    border-right: solid 1px #e5e5e5;
    padding-left: 0;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table th {
    width: 15rem;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table td em.point {
    color: #de3900;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section.btn {
    margin-top: 35px;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section.btn a {
    position: relative;
    display: inline-block;
    padding: 0 6rem 0 7rem;
    max-width: 100%;
    height: 5.6rem;
    line-height: 5.6rem;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    border-radius: 2.8rem;
    background: var(--first-color) url('../img/sub_step0800_icon_btn01.png') no-repeat left 2.5rem center;
    background-size: auto 2.4rem;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section.btn a.dasu-rule {
    background: var(--first-color) url('../img/dasu-icon.png') no-repeat left 2.5rem center;
    background-size: auto 2.4rem;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf>section.btn a:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 2.5rem;
    width: 0.6rem;
    height: 100%;
    background: url('../img/icon_arr_go.png') no-repeat center center;
    background-size: 0.6rem auto;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf .item_box {
    margin: 0 0 3rem 0;
}

#LAYOUT_BODY.step.s08>.cont>.result>.inf .item_title_tp2 {
    font-weight: 600;
    display: block;
    color: #000 !important;
}



@media (max-width:820px) {
    #LAYOUT_BODY.step.s08>.cont>.result>.inf {
        padding: 5rem 4rem 18rem 4rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s08>.cont>.result>.inf {
        padding: 4rem 3rem 17rem 3rem;
    }

    #LAYOUT_BODY.step.s08>.cont>.result>.inf>h3 {
        font-size: 2.6rem;
    }

    #LAYOUT_BODY.step.s08>.cont>.result>.inf>section h4 {
        font-size: 2.2rem;
    }

    #LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dt {
        font-size: 2rem;
        padding-left: 3rem;
    }

    #LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dt .ibox {
        font-size: 1.6rem;
        font-weight: 400;
    }

    #LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd {
        padding: 1rem 0 0 0;
    }

    #LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd>div {
        padding: 2rem;
    }

    #LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table tr,
    #LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table th,
    #LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table td {
        display: block;
        width: 100%;
        border-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    #LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table th+td {
        padding-top: 0;
    }

    #LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table td {
        font-size: 1.8rem;
    }

    #LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table th {}

    #LAYOUT_BODY.step.s08>.cont>.result>.inf>section dl dd table tr:last-child th {
        padding-bottom: 2rem;
    }
}


#LAYOUT_BODY.step.s08 .cont_sentence {
    position: fixed;
    bottom: 2.3rem;
    left: calc((100% - 17rem)/2);
    width: 92rem;
    transform: translateX(-50%);
    display: block;
    padding: 0;
}

#LAYOUT_BODY.step.s08 .cont_sentence ul {
    font-size: 0;
    display: flex;
    height: 12rem;
    align-items: center;
}

#LAYOUT_BODY.step.s08 .cont_sentence ul li {
    flex: 1;
    padding: 2rem 3rem;
    height: 100%;
}

#LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt1 {
    background: #000;
}

#LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt1 .txt_dec_tit {
    font-size: 2.2rem;
    color: rgba(255, 255, 255, 1);
    padding: 0 0 1rem 0;
    font-weight: 600;
}

#LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt1 .txt_dec_desc {
    font-size: 2.6rem;
    color: #fff;
    font-weight: 700;
}

#LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt2 {
    background: #dc7109;
    text-align: right;
}

#LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt2.active {
    background: #dc7109;
    text-align: right;
}

#LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt2 .txt_dec_tit {
    font-size: 2.2rem;
    color: rgba(255, 255, 255, 1);
    padding: 0 0 1rem 0;
    font-weight: 600;
}

#LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt2 .txt_dec_desc {
    font-size: 2.6rem;
    color: #fff;
    font-weight: 700;
}

@media (max-width:1240px) {
    #LAYOUT_BODY.step.s08 .cont_sentence {
        width: calc(100% - 17rem - 4rem);
    }
}

@media (max-width: 1024px) {}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s08 .cont_sentence {
        left: 50%;
        width: calc(100% - 4rem);
        bottom: 9.3rem;
    }

    #LAYOUT_BODY.step.s08 .cont_sentence ul {
        flex-wrap: wrap;
        height: auto;
    }

    #LAYOUT_BODY.step.s08 .cont_sentence ul li {
        flex-basis: 100%;
        min-height: inherit;
        padding: 2rem 2rem;
        text-align: center;
    }

    #LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt2 {
        text-align: center;
    }

    #LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt1 .txt_dec_tit {
        font-size: 1.8rem;
        padding: 0 0 0.5rem 0;
    }

    #LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt1 .txt_dec_desc {
        font-size: 2.4rem;
    }

    #LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt2 .txt_dec_tit {
        font-size: 1.8rem;
        padding: 0 0 0.5rem 0;
    }

    #LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt2 .txt_dec_desc {
        font-size: 2.4rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s08 .cont_sentence {
        width: calc(100% - 10%);
    }

    #LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt1 .txt_dec_tit {
        font-size: 1.6rem;
        padding: 0 0 0.5rem 0;
    }

    #LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt1 .txt_dec_desc {
        font-size: 2.2rem;
    }

    #LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt2 .txt_dec_tit {
        font-size: 1.6rem;
        padding: 0 0 0.5rem 0;
    }

    #LAYOUT_BODY.step.s08 .cont_sentence ul li.area_opt2 .txt_dec_desc {
        font-size: 2.2rem;
    }
}


#LAYOUT_BODY.step.s08>.cont>.video-tab {
    margin-top:8rem;
}

#LAYOUT_BODY.step.s08>.cont>.video-tab:after {
    display: block;
    content: "";
    clear: both;
}

#LAYOUT_BODY.step.s08>.cont>.video-tab li {
    display: block;
    float: left;
    width: 50%;
}

#LAYOUT_BODY.step.s08>.cont>.video-tab li a {
    position: relative;
    display: block;
    height: 6.5rem;
    line-height: 6.5rem;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--body-color);
    background-color: #e5e5e5;
}

#LAYOUT_BODY.step.s08>.cont>.video-tab li a.on {
    color: var(--first-color);
    background-color: #fff;
}

#LAYOUT_BODY.step.s08>.cont>.video-tab li a.on:after {
    display: block;
    content: "";
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.6rem;
    height: 1.5rem;
    background: url("../img/sub_step0800_icon_cur01.png") no-repeat top center;
    background-size: 2.6rem auto;
}




/*
 * STEP 09 : 팀소개
 */

/* 인트로 영상 재생후 다음 버튼 활성 */
#LAYOUT_NAVI.step.s09 .btn a.next {
    pointer-events: none;
}

/* 레이아웃 및 사건별 숨기기 */
#LAYOUT_NAVI.step.s09 {
    display: none;
}

#LAYOUT_NAVI.step.s09 #BTN_STEP_NEXT {
    font-size: 1.8rem;
}

#LAYOUT_BODY.step.s09 #LAYOUT_CONT {
    display: none;
}

#LAYOUT_BODY.step.s09 header {
    display: none;
}

#LAYOUT_TAIL.step.s09 {
    display: none;
}


/* 인트로 영상 재생후 스크롤 아이콘 보이게 */
#LAYOUT_BODY.step.s09 .tag_scroll_area {
    display: none;
}

/* 레이아웃 및 사건별 백그라운드 */
#LAYOUT_BODY.step.s09 {
    position: relative;
}

#LAYOUT_BODY.step.s09 .sect-bg {
    z-index: -100;
    position: fixed;
    top: 6rem;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 100%;
    transform: translateX(-50%);
}

#LAYOUT_BODY.step.s09 .sect-bg {
    background: url('../img/sub_step0907_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 횡령 */
#LAYOUT_BODY.step.s09.c09 .sect-bg {
    background: url('../img/sub_step0909_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 마약 */
#LAYOUT_BODY.step.s09.c10 .sect-bg {
    background: url('../img/sub_step0910_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 강도상해  */
#LAYOUT_BODY.step.s09.c13 .sect-bg {
    background: url('../img/sub_step0913_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 무고 */
#LAYOUT_BODY.step.s09.c14 .sect-bg {
    background: url('../img/sub_step0914_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 위증교사 */
#LAYOUT_BODY.step.s09.c15 .sect-bg {
    background: url('../img/sub_step0915_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 중감금치상죄 */
#LAYOUT_BODY.step.s09.c16 .sect-bg {
    background: url('../img/sub_step0916_bg.jpg') no-repeat center;
    background-size: cover;
}

/* 단계별 레이아웃 */
#LAYOUT_BODY.step.s09 .cont {
    position: absolute;
    left: calc((100% - 17rem)/2);
    top: 0;
    width: 124rem;
    transform: translateX(-50%);
    padding-top: 6rem;
    padding-bottom: 8rem;
}

#LAYOUT_BODY.step.s09 .cont h2.ctit {
    padding: 5rem 0 5rem;
    font-size: 4.8rem;
    color: #fff;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}

#LAYOUT_BODY.step.s09 .cont h2.ctit strong {
    font-weight: 700;
}

@media (max-width: 1560px) {
    #LAYOUT_BODY.step.s09 .cont {
        width: calc(100% - 17rem - 4rem);
    }
}

@media (max-width: 1024px) {
    #LAYOUT_BODY.step.s09 .cont {
        padding-bottom: 16rem;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s09 .cont {
        left: 50%;
        width: calc(100% - 4rem);
    }

    #LAYOUT_BODY.step.s09 .cont h2.ctit {
        font-size: 3.8rem;
        padding: 6rem 0 5rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s09 .cont {
        width: calc(100% - 10%);
    }

    #LAYOUT_BODY.step.s09 .cont h2.ctit {
        font-size: 2.8rem;
    }
}

/* 탭 메뉴 */
#LAYOUT_BODY.step.s09 .c-tab {
    display: flex;
    align-items: center;
    column-gap: 5px;
    justify-content: center;
}

#LAYOUT_BODY.step.s09 .c-tab li {
    width: 20rem;
    text-align: center;
}

#LAYOUT_BODY.step.s09 .c-tab li a {
    position: relative;
    display: block;
    height: 6rem;
    line-height: 6rem;
    background: var(--body-color);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
    white-space: nowrap;
}

#LAYOUT_BODY.step.s09 .c-tab li a:before {
    display: none;
    content: "";
    position: absolute;
    width: 100%;
    height: 1rem;
    background: #fff;
    top: -1rem;
    left: 0;
}

#LAYOUT_BODY.step.s09 .c-tab li a span {
    display: inline-block;
    line-height: 1;
    padding-bottom: 0.3rem;
    border-bottom: solid 1px var(--body-color);
}

#LAYOUT_BODY.step.s09 .c-tab li.active a {
    color: var(--first-color);
    line-height: 5rem;
    font-size: 2rem;
    font-weight: 700;
    background: #fff;
}

#LAYOUT_BODY.step.s09 .c-tab li.active a:before {
    display: block;
}

#LAYOUT_BODY.step.s09 .c-tab li.active a span {
    border-bottom: solid 1px var(--first-color);
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s09 .c-tab {
        justify-content: center;
    }

    #LAYOUT_BODY.step.s09 .c-tab li {
        width: 15rem;
    }

    #LAYOUT_BODY.step.s09 .c-tab li a {
        height: 5rem;
        line-height: 5rem;
        padding: 0 1.5rem;
    }

    #LAYOUT_BODY.step.s09 .c-tab li.active a {
        line-height: 4rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s09 .c-tab li {
        width: auto;
    }
}

@media (max-width:480px) {
    #LAYOUT_BODY.step.s09 .c-tab li a {
        font-size: 1.6rem;
    }

    #LAYOUT_BODY.step.s09 .c-tab li.active a {
        font-size: 1.8rem;
    }
}


#LAYOUT_BODY.step.s09 .c-wrap {
    background: #fff;
    padding: 5rem 5rem;
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s09 .c-wrap {
        padding: 4rem 3rem;
    }
}

/* 성분표시기능 */
#LAYOUT_BODY.step.s09 .cont .score {
    text-align: center;
}

#LAYOUT_BODY.step.s09 .cont .score h3 {
    font-size: 4.8rem;
    font-weight: 800;
    color: var(--first-color);
}

#LAYOUT_BODY.step.s09 .cont .score .dsc {
    margin-top: 1.5rem;
    font-size: 2rem;
    word-break: keep-all;
}

#LAYOUT_BODY.step.s09 .cont .score .dsc.nt {
    color: var(--first-color);
}

#LAYOUT_BODY.step.s09 .cont .score .score-box {
    width: 72rem;
    margin: 3rem auto 0;
    padding: 5rem 0;
    background-color: var(--first-color);
}

#LAYOUT_BODY.step.s09 .cont .score .score-box h4 {
    font-size: 3rem;
    color: #fff;
    font-weight: 600;
}

#LAYOUT_BODY.step.s09 .cont .score .score-box .score-picker {
    display: inline-block;
    margin-top: 3.5rem;
}

#LAYOUT_BODY.step.s09 .cont .score .score-box .score-picker:after {
    display: block;
    content: "";
    clear: both;
}

#LAYOUT_BODY.step.s09 .cont .score .score-box .score-picker li {
    float: left;
    display: block;
    width: 6rem;
    height: 6rem;
    margin-left: 1rem;
    font-size: 0;
    cursor: pointer;
    background-image: url('../img/sub_step0900_icon_star.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

#LAYOUT_BODY.step.s09 .cont .score .score-box .score-picker li:first-child {
    margin-left: 0;
}

#LAYOUT_BODY.step.s09 .cont .score .score-box .score-picker li.on {
    background-image: url('../img/sub_step0900_icon_star_on.png');
}

#LAYOUT_BODY.step.s09 .cont .score .score-box .score-dsc {
    margin-top: 3rem;
    font-size: 4.4rem;
    font-weight: 600;
    color: #00ffc6;
}

#LAYOUT_BODY.step.s09 .cont .score textarea {
    display: block;
    padding: 1rem;
    width: 100%;
    height: 16.5rem;
    font-size: 1.6rem;
    color: var(--body-color);
    resize: none;
    border: 1px solid #e5e5e5;
}

#LAYOUT_BODY.step.s09 .cont .score input[type=submit],
#LAYOUT_BODY.step.s09 .cont .score input[type=button] {
    margin-top: 3rem;
    max-width: 100%;
    height: 5.6rem;
    padding: 0 5rem 0 3rem;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    border: 0;
    border-radius: 2.8rem;
    background: var(--first-color) url('../img/icon_arr_go.png') no-repeat right 3rem center;
    cursor: pointer;
}

@media (max-width:1120px) {
    #LAYOUT_BODY.step.s09 .cont .score .dsc span br {
        display: none;
    }
}

@media (max-width:900px) {
    #LAYOUT_BODY.step.s09 .cont .score .score-box {
        width: 100%;
    }
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s09 .cont .score h3 {
        font-size: 3.6rem;
    }

    #LAYOUT_BODY.step.s09 .cont .score .score-box h4 {
        font-size: 2.6rem;
    }

    #LAYOUT_BODY.step.s09 .cont .score .score-box .score-dsc {
        font-size: 3.2rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s09 .c-wrap {
        padding: 3rem 5%;
    }

    #LAYOUT_BODY.step.s09 .cont .score h3 {
        font-size: 3.2rem;
    }

    #LAYOUT_BODY.step.s09 .cont .score .score-box h4 {
        font-size: 2.2rem;
    }

    #LAYOUT_BODY.step.s09 .cont .score .score-box .score-dsc {
        font-size: 2.8rem;
    }

    #LAYOUT_BODY.step.s09 .cont .score .score-box .score-picker li {
        width: 5rem;
        height: 5rem;
    }

    #LAYOUT_BODY.step.s09 .cont .score input[type=submit] {
        font-size: 1.8rem;
    }
}

@media (max-width:480px) {
    #LAYOUT_BODY.step.s09 .cont .score .dsc br {
        display: none;
    }
}

/* 그래프 */
#LAYOUT_BODY.step.s09 .cont .graph {
    display: flex;
    column-gap: 5rem;
}

#LAYOUT_BODY.step.s09 .cont .graph>div {
    flex: 1;
}

#LAYOUT_BODY.step.s09 .cont .graph>div.sect01 {
    flex: 2;
}

#LAYOUT_BODY.step.s09 .cont .graph>div.sect02 {}

#LAYOUT_BODY.step.s09 .cont .graph>div h3 {
    padding: 0 0 1.2rem 0;
    margin-bottom: 1.5rem;
    font-size: 2.8rem;
    line-height: 28px;
    font-weight: 700;
    color: #000;
    border-bottom: 1px solid #000;
}

#LAYOUT_BODY.step.s09 .cont .graph>div h3:after {
    display: block;
    content: "";
    clear: both;
}

#LAYOUT_BODY.step.s09 .cont .graph>div h3 .sum {
    display: inline-block;
    float: right;
    font-size: 1.8rem;
    color: #000;
    font-weight: 600;
}

#LAYOUT_BODY.step.s09 .cont .graph>div h3 .sum strong {
    color: var(--first-color);
    margin-left: 2rem;
}

#LAYOUT_BODY.step.s09 .cont .graph>div h3 .sum em {
    font-style: normal;
    color: var(--first-color);
}

#LAYOUT_BODY.step.s09 .cont .graph>div .list-wrap {
    display: flex;
    position: relative;
}

#LAYOUT_BODY.step.s09 .cont .graph>div ul {
    padding: 3rem 0 3rem 0;
}

#LAYOUT_BODY.step.s09 .cont .graph>div ul li {
    height: 4rem;
    line-height: 4rem;
    margin-top: 2rem;
    letter-spacing: -1px;
    white-space: nowrap;
}

#LAYOUT_BODY.step.s09 .cont .graph>div ul li:first-child {
    margin-top: 0;
}

#LAYOUT_BODY.step.s09 .cont .graph>div .list-tit {
    width: 25rem;
    padding-left: 2rem;
    padding-right: 1rem;
    text-align: right;
    background-color: #f2f9ff;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--body-color);
}

#LAYOUT_BODY.step.s09 .cont .graph>div .list-chart {
    flex: 1;
    background-color: #f7f7f7;
    padding-left: 2rem;
    padding-right: 10rem;
}

#LAYOUT_BODY.step.s09 .cont .graph>div.sect01 .list-chart {
    background: #f2f9ff;
}

#LAYOUT_BODY.step.s09 .cont .graph>div .list-chart li {}

#LAYOUT_BODY.step.s09 .cont .graph>div .list-chart .bar {
    position: relative;
    display: inline-block;
    max-width: 100%;
    background-color: var(--body-color);
}

#LAYOUT_BODY.step.s09 .cont .graph>div .list-chart .bar.purple {
    background-color: var(--second-color);
}

#LAYOUT_BODY.step.s09 .cont .graph>div .list-chart .bar.blue {
    background-color: var(--first-color);
}

#LAYOUT_BODY.step.s09 .cont .graph>div .list-chart .bar.red {
    background-color: #9d4a4a;
}

#LAYOUT_BODY.step.s09 .cont .graph>div .list-chart li span em {
    display: inline-block;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: var(--body-color);
    font-weight: 600;
}

#LAYOUT_BODY.step.s09 .cont .graph>div .list-chart li span.bar.purple em {
    color: var(--second-color);
}

#LAYOUT_BODY.step.s09 .cont .graph>div .list-chart li span.bar.blue em {
    color: var(--first-color);
}

#LAYOUT_BODY.step.s09 .cont .graph>div .list-chart li.on em:after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -35px;
    display: block;
    content: "";
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--first-color) url('../img/sub_step0900_icon_check.png') no-repeat center center;
    background-size: 1.5rem auto;
}

#LAYOUT_BODY.step.s09 .cont .graph>div.sect02 .list-tit {
    display: none;
}


@media (max-width:1200px) {
    #LAYOUT_BODY.step.s09 .cont .graph {
        flex-wrap: wrap;
    }

    #LAYOUT_BODY.step.s09 .cont .graph>div.sect01 {
        flex: 1;
        flex-basis: 100%;
    }

    #LAYOUT_BODY.step.s09 .cont .graph>div.sect02 {
        flex: 1;
        flex-basis: 100%;
        margin-top: 5rem;
    }

    #LAYOUT_BODY.step.s09 .cont .graph>div.sect02 .list-tit {
        display: block;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s09 .cont .graph>div h3 {
        font-size: 2.2rem;
    }

    #LAYOUT_BODY.step.s09 .cont .graph>div h3 .sum {
        font-size: 1.6rem;
    }

    #LAYOUT_BODY.step.s09 .cont .graph>div h3 .sum strong {
        margin-left: 1rem;
    }

    #LAYOUT_BODY.step.s09 .cont .graph>div {}

    #LAYOUT_BODY.step.s09 .cont .graph>div .list-tit {
        text-align: left;
        flex-basis: 100%;
    }

    #LAYOUT_BODY.step.s09 .cont .graph>div .list-tit li {
        margin-bottom: 5rem;
    }

    #LAYOUT_BODY.step.s09 .cont .graph>div .list-chart {
        position: absolute;
        top: 3.5rem;
        left: 0;
        width: 100%;
        background: transparent;
    }

    #LAYOUT_BODY.step.s09 .cont .graph>div .list-chart li {
        margin-top: 5rem;
    }

    #LAYOUT_BODY.step.s09 .cont .graph>div.sect01 .list-chart {
        background: transparent;
    }

    #LAYOUT_BODY.step.s09 .cont .graph>div.sect02 .list-tit {
        background: #f7f7f7;
    }
}


/* SNS 공유 */
#LAYOUT_BODY.step.s09 .cont .sns {
    text-align: center;
}

#LAYOUT_BODY.step.s09 .cont .sns h3 {
    font-size: 4.8rem;
    font-weight: 800;
    color: var(--first-color);
}

#LAYOUT_BODY.step.s09 .cont .sns .dsc {
    margin-top: 1.5rem;
    font-size: 2rem;
    word-break: keep-all;
}

#LAYOUT_BODY.step.s09 .cont .sns .sns-box {
    margin: 4rem 0 0;
}

#LAYOUT_BODY.step.s09 .cont .sns .sns-box ul {
    display: flex;
    justify-content: center;
    column-gap: 6rem;
}

#LAYOUT_BODY.step.s09 .cont .sns .sns-box li {
    text-align: center;
}

#LAYOUT_BODY.step.s09 .cont .sns .sns-box li a {
    display: inline-block;
    min-width: 6rem;
    padding-top: 7rem;
}

#LAYOUT_BODY.step.s09 .cont .sns .sns-box li span {
    font-size: 1.8rem;
    color: #000;
    font-weight: 600;
}

#LAYOUT_BODY.step.s09 .cont .sns .sns-box li.facebook a {
    background: url('../img/sprite_sns_facebook.png') no-repeat center top;
    background-size: 6rem auto;
}

#LAYOUT_BODY.step.s09 .cont .sns .sns-box li.twitter {
    width: 64px;
    height: 64px;
    background-image: url('../img/sprite_sns.png') !important;
    background-position: -510px -76px;
}

#LAYOUT_BODY.step.s09 .cont .sns .sns-box li.kakaostory {
    background: url('../img/sprite_sns_kakaostory.png') no-repeat center top;
    background-size: 6rem auto;
}

#LAYOUT_BODY.step.s09 .cont .sns .sns-box li.naver {
    background: url('../img/sprite_sns_naver.png') no-repeat center top;
    background-size: 6rem auto;
}

#LAYOUT_BODY.step.s09 .cont .sns .sns-box li.band {
    width: 64px;
    height: 64px;
    background-image: url('../img/sprite_sns.png') !important;
    background-position: -364px -76px;
}

#LAYOUT_BODY.step.s09 .cont .sns .sns-box li.link {
    background: url('../img/sprite_sns_link.png') no-repeat center top;
    background-size: 6rem auto;
}

@media (max-width:820px) {
    #LAYOUT_BODY.step.s09 .cont .sns h3 {
        font-size: 3.6rem;
    }
}

@media (max-width:520px) {
    #LAYOUT_BODY.step.s09 .cont .sns h3 {
        font-size: 3.2rem;
    }

    #LAYOUT_BODY.step.s09 .cont .sns .sns-box ul {
        column-gap: inherit;
    }

    #LAYOUT_BODY.step.s09 .cont .sns .sns-box li {
        flex: 1;
    }

    #LAYOUT_BODY.step.s09 .cont .sns .sns-box li span {
        font-size: 1.6rem;
    }
}



/*  */
.ybasic {
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem;
}

.ybasic li a {
    display: inline-block;
    text-align: center;
    width: 10rem;
    height: 4rem;
    line-height: 4rem;
    padding: 0 1.5rem;
    font-size: 1.6rem;
    color: #fff;
    font-weight: 400;
    background: #999;
}

.ybasic li.active a {
    display: inline-block;
    text-align: center;
    width: 10rem;
    height: 4rem;
    line-height: 4rem;
    padding: 0 1.5rem;
    font-size: 1.6rem;
    color: #fff;
    font-weight: 400;
    background: var(--first-color);
}


/* 다수인 처리방법 */
.dasu-box {
    margin-top: 1rem;
    border: solid 1px #000;
    padding: 2rem;
}

.dasu-box h2 {
    font-size: 2.2rem;
    color: #000;
}

.dasu-box div {}

.dasu-box div dl+dl {
    margin-top: 2rem;
}

.dasu-box div dl dt {
    font-size: 1.8rem !important;
    color: #000;
    padding-left: 0 !important;
}

.dasu-box div dl dd {
    padding-left: 0 !important;
}

.dasu-box div dl dd p {
    font-size: 1.8rem;
    color: #000;
}

.dasu-box div dl dd ul {}

.dasu-box div dl dd ul li {
    margin-top: 1rem;
    padding-left: 1.5rem;
    text-indent: -1.5rem;
    font-size: 1.6rem;
    color: #757575;
}



/* 개인정보처리방침 */
.prv-box {
    margin: 0 auto;
    margin-top: 4rem;
    text-align: left;
    max-width: 72rem;
}

.prv-box h4 {
    font-size: 2rem;
    color: #000;
    font-weight: 500;
}

.prv-box .chk-box {
    margin-top: 1rem;
}

.prv-box .chk-box label {
    font-size: 1.6rem;
    cursor: pointer;
}

.prv-box .agree-text {
    margin-top: 1rem;
    border: solid 1px #ddd;
    padding: 1rem;
    background: #f7f7f7;
    line-height: 1.6;
    font-size: 1.6rem;
    color: #757575;
}

.ytbl-input .form-input {
    width: 100%;
    height: 4.2rem;
    line-height: 4.2rem;
    padding: 0 1rem;
    border: solid 1px #e5e5e5;
    font-size: 1.6rem;
}

.ytbl-input .sel {
    width: 100%;
    height: 4.2rem;
    line-height: 4.2rem;
    padding: 0 1rem;
    border: solid 1px #e5e5e5;
    font-size: 1.6rem;
}

.ytbl-input {
    margin: 0 auto;
    margin-top: 3rem;
    max-width: 72rem;
    border-top: solid 1px var(--first-color);
    border-bottom: solid 1px var(--first-color);
    padding: 0.5rem 0;
}

.ytbl-input table {
    width: 100%;
}

.ytbl-input table th,
.ytbl-input table td {
    text-align: left;
    padding: 0.5rem 0;
}

.ytbl-input table th {
    font-size: 1.6rem;
    color: #000;
}

.ytbl-input table th em {
    color: var(--first-color);
}

.ytbl-input .mxw300 {
    width: 100%;
    max-width: 30rem;
}

.ytbl-input .mxw550 {
    width: 100%;
    max-width: 55rem;
}

/* 이메일주소 */
.ytbl-input div.email-wrap {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

.ytbl-input div.email-wrap .em1 {
    flex: 1;
}

.ytbl-input div.email-wrap .em3 {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

.ytbl-input div.email-wrap .em3 .domain {
    width: 16rem;
}

.ytbl-input .post-box {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

.ytbl-input .post-box .form-input {
    width: 17.5rem;
}

.ytbl-input .post-box button {
    padding: 0 1.5rem;
    height: 4.2rem;
    line-height: 4.2rem;
    background: var(--body-color);
    color: #fff;
    font-size: 1.5rem;
    border: 0;
}

.ytbl-input p.nt {
    margin-top: 1rem;
    font-size: 1.6rem;
    color: var(--first-color);
}

@media all and (max-width:740px) {
    .ytbl-input .email-wrap {
        flex-wrap: wrap;
        row-gap: 1rem;
    }

    .ytbl-input .email-wrap .em3 {
        flex-basis: 100%;
    }
}

@media all and (max-width:520px) {
    .ytbl-input .mxw300 {
        max-width: inherit;
    }
}

@media all and (max-width:420px) {
    .ytbl-input table colgroup {
        display: none;
    }

    .ytbl-input table th {
        width: 8rem;
    }

    .ytbl-input div.email-wrap .em3 .domain {
        flex: 1;
        width: auto;
    }

    .ytbl-input .post-box .form-input {
        width: 100%;
    }

    .ytbl-input .post-box .form-field {
        flex: 1;
    }
}




/* 결과선택 */
.step.s09.c11 .s04 {
    overflow-x: auto;
}

.cert-wrap {
    position: relative;
    padding: 13rem 10rem 10rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background:url("../img/cert-mark.png") no-repeat center;
    background-size:40rem auto; */
    /* background:url("../img/cert-mark-mid.png") no-repeat center;
    background-size:50rem auto;     */
    background: url("../img/cert-bg.png") no-repeat center, url("../img/cert-mark-big.png") no-repeat center;
    background-size: 100% 100%, 70rem auto;
    gap: 6rem;
    width: 237mm;
    min-height: 297mm;
    margin: auto;
}

.cert-wrap .no {
    font-family: "궁서체";
    font-size: 1.6rem;
    color: #000;
    font-weight: 400;
    position: absolute;
    top: 5rem;
    left: 10rem;
    letter-spacing: 0.1rem;
}

.cert-wrap h2 {
    font-family: "????";
    font-size: 4.8rem;
    color: #000;
    font-weight: 900;
    letter-spacing: 0.5rem;
}

.cert-wrap .case-name {
    align-self: flex-start;
    font-family: "????";
    font-size: 2.8rem;
    color: #000;
    font-weight: 600;
    letter-spacing: 0.1rem;
}

.cert-wrap .name {
    font-family: "????";
    font-size: 2.8rem;
    color: #000;
    align-self: flex-end;
    font-weight: 600;
    letter-spacing: 0.1rem;
}

.cert-wrap .ctext {
    padding: 1rem 0 9rem;
    font-family: "????";
    font-size: 3.8rem;
    color: #000;
    text-align: justify;
    word-break: break-all;
    text-justify: distribute;
    letter-spacing: 0.4rem;
    line-height: 2.5;
    font-weight: 600;
}

.cert-wrap .date {
    margin-top: auto;
    font-family: "????";
    font-size: 2.8rem;
    color: #000;
    letter-spacing: 0.1rem;
    font-weight: 600;
}

.cert-wrap .from {
    font-family: "????";
    font-size: 3.4rem;
    color: #000;
    letter-spacing: 0.5rem;
    font-weight: 600;
}

.cert-wrap .from em {
    position: relative;
    display: inline-block;
    margin-left: 2rem;
}

.cert-wrap .from em::after {
    display: block;
    content: "";
    width: 10rem;
    height: 10rem;
    margin-left: 2rem;
    background: url("../img/cert-stamp.png") no-repeat center;
    background-size: contain;
    position: absolute;
    top: -3rem;
    left: -5rem;
    z-index: 0;
}

.print-wrap .btn-center button {
    height: 5.6rem;
    padding: 0 3rem 0 3rem;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    border: 0;
    border-radius: 2.8rem;
    background: var(--first-color);
    cursor: pointer;
}

/* @media all and (max-width:1024px) {
    .cert-wrap {
        min-height:auto;
    }
    .cert-wrap h2 {
        font-size:2.8rem;
    }
    .cert-wrap .name {
        font-size:2.4rem;
    }
    .cert-wrap .ctext {
        padding:5rem 0;
        font-size:2.2rem;
    }
    .cert-wrap .date {
        font-size:1.8rem;
    }
    .cert-wrap .from {
        font-size:1.8rem;
    }
}
@media all and (max-width:580px) {
    .cert-wrap {
        gap:5rem;
        padding:8rem 5rem;
    }
}
@media all and (max-width:420px) {
    .cert-wrap {
        gap:4rem;
        padding:5rem 2rem 8rem;
    }
} */


p.print-txt {
    text-align: center;
    font-size: 1.6rem;
}