/* 웹접근성 텍스트 숨김처리 */
.fs0{
    font-size: 0 !important;
    text-indent: -1000px;
  }
/* 영역 내부 이미지 100프로 처리 */
* > img{
width: 100%;
}

.show {
    opacity: 1 !important;
    transition: opacity 1s linear;
    display: block !important;
}

/* 스크롤바 기본 설정 */
::-webkit-scrollbar {
    width: 20px; /* 스크롤바 전체 너비 */
    height: 20px; /* 가로 스크롤바 높이 */
  }
  
  /* 트랙 스타일 */
  ::-webkit-scrollbar-track {
    background: transparent; /* 트랙 색상 */
  }
  
  /* 스크롤바(손잡이) 스타일 */
  ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.35); /* 손잡이 색상 */
    border-radius: 10px; /* 손잡이 둥근 모서리 */
  }

/* 인트로 */
.intro{
    width: 100%;
    height: 100%;
    background: url(../img/intro_bg.png) no-repeat center / 100%;
    position: relative;
    z-index: 10;
}
.intro::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/gif7.gif) no-repeat center/ 100%;
    position: absolute;
    top: 5%;
    left: 0.5%;
    pointer-events: none;
}
.intro.active::after{
    display: none;
}
/* .intro .intro_inner{
    width: 1400px;
    height: 1042px;
    background: url(../img/intro_book.png)no-repeat center / contain;
} */
.intro.active .intro_inner{
    width: 100%;
    height: 100%;
    background-image: url(../img/gif8.gif);
}
.intro_btn{
    /* width: 245px;
    height: 264px; */
    width: 300px;
    height: 300px;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.contents_wrap{
    width: 100%;
    height: 100%;
    background: url(../img/step1_bg.jpg)no-repeat center / 100%;
    position: relative;
}
.btn_sound{
    width: 80px;
    height: 88px;
    background: url(../img/btn_sound.png) no-repeat center / 100%;
    position: absolute;
    top: 100px;
    right: 130px;
    z-index: 2;
}
.btn_sound.off{
    background-image: url(../img/btn_sound_off.png);
}

.contents_wrap > div{
    width: 100%;
    height: 100%;
    display: none;
}
.contents_wrap > div button{
    font-family: 'Hakgyoansim Allimjang';
    font-size: 36px;
    text-shadow: 1px 0 5px rgba(0,0,0,0.45);
    color: #fff;
    padding-bottom: 10px;
}

/* step1 */
.step1 h1{
    font-family: 'HakgyoansimMonggeulmonggeul';
    font-size: 140px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.btn_start{
    width: 300px;
    height: 88px;
    background: url(../img/btn_start.png) no-repeat center / 100%;
    position: absolute;
    bottom: 170px;
    left: 50%;
    transform: translateX(-50%);
}
.btn_start.click::after{
    content: "";
    display: block;
    background: url(../img/icon_click.png) no-repeat center/ 100%;
    width: 112px;
    height: 113px;
    position: absolute;
    top: 40px;
    right: -60px;
    transition: all 0.5s linear;
    animation: blink 1s linear 3;
    opacity: 0;
}
@keyframes blink{
    0%{opacity: 1;}
    100%{opacity: 0;}
}
.cover_ch_wrap{
    width: 100%;
    height: 100%;
    position: relative;
    pointer-events: none;
}
.cover_ch{
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    width: 500px;
    height: 500px;
}
.cover_ch.cover_ch1{
    background-image: url(../img/gif01.gif);
    top: 250px;
    left: 0;
}
.cover_ch.cover_ch2{
    background-image: url(../img/gif02.gif);
    top: 500px;
    left: 130px;
}
.cover_ch.cover_ch3{
    background-image: url(../img/gif03.gif);
    left: 280px;
    top: -20px;
}
.cover_ch.cover_ch4{
    background-image: url(../img/gif04.gif);
    top: 50px;
    right: 170px;
}
.cover_ch.cover_ch5{
    background-image: url(../img/gif05.gif);
    top: 470px;
    right: 100px;
}

/* step2 */
.step2{
    padding: 130px 0 180px;
}
.step2_tit{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 45px;
    margin-bottom: 60px;
}
.step2 h2{
    font-family: 'HakgyoansimMonggeulmonggeul';
    font-size: 68px;
    position: relative;
    letter-spacing: -0.01em;
    z-index: 2;
}
.step2 h2::after{
    content: "";
    display: block;
    background: url(../img/bg_tit1.png)no-repeat center /100%;
    width: 840px;
    height: 30px;
    position: absolute;
    bottom: -5px;
    left: -20px;
    z-index: -1;
}
.step2 .icon_tit{
    width: 102px;
    height: 84px;
}

.card_wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
}
.card_btn{
    width: 340px;
    height: 468px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    border-radius: 40px;
    position: relative;
}
.card_btn.focus{
    cursor: pointer;
}
.card_btn.focus::after{
    content: '';
    display: block;
    width: 394px;
    height: 522px;
    background: url(../img/card_effect.png) no-repeat center / 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.card_btn.on{
    box-shadow: 2px 0 30px rgba(0,0,0,0.25);
}
.card_btn.card_btn1{
    background-image: url(../img/card1_on.png);
}
.card_btn.card_btn1.type1{
    background-image: url(../img/card1_1.png);
}
.card_btn.card_btn1.type2{
    background-image: url(../img/card1_2.png);
}
.card_btn.card_btn2{
    background-image: url(../img/card2_off.png);
}
.card_btn.card_btn2.on{
    background-image: url(../img/card2_on.png);
}
.card_btn.card_btn2.type1{
    background-image: url(../img/card2_1.png);
}
.card_btn.card_btn2.type2{
    background-image: url(../img/card2_2.png);
}
.card_btn.card_btn3{
    background-image: url(../img/card3_off.png);
}
.card_btn.card_btn3.on{
    background-image: url(../img/card3_on.png);
}
.card_btn.card_btn3.type1{
    background-image: url(../img/card3_1.png);
}
.card_btn.card_btn3.type2{
    background-image: url(../img/card3_2.png);
}
.card_btn.card_btn4{
    background-image: url(../img/card4_off.png);
}
.card_btn.card_btn4.on{
    background-image: url(../img/card4_on.png);
}
.card_btn.card_btn4.type1{
    background-image: url(../img/card4_1.png);
}
.card_btn.card_btn4.type2{
    background-image: url(../img/card4_2.png);
}

.btn_result{
    width: 300px;
    height: 88px;
    background: url(../img/btn_result_off.png) no-repeat center / 100%;
}
.btn_result.on{
    background-image: url(../img/btn_start.png);
    position: relative;
}
.btn_result.on::after{
    content: "";
    display: block;
    background: url(../img/icon_click.png) no-repeat center/ 100%;
    width: 112px;
    height: 113px;
    position: absolute;
    top: 40px;
    right: -60px;
    transition: all 0.5s linear;
    animation: blink 1s linear 3;
    opacity: 0;
}
.btn_guide{
    width: 300px;
    height: 88px;
    background: url(../img/btn_guide.png) no-repeat center / 100%;
}

/* 캐릭터 설명 팝업 */
.ch_desc_popup{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    z-index: 10;
}
.ch_desc_popup .character_wrap {
    position: absolute;
    bottom: 40px;
    left: 250px;
}
.ch_desc_popup .character_wrap .character{
    width: 500px;
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    /* background-image: url(../img/gif06_5.gif); */
}
.ch_desc_popup .character_wrap .bubble{
    width: 674px;
    height: 324px;
    background: url(../img/bubble_bg.png) no-repeat center / 100%;
    position: absolute;
    top: -124px;
    right: -560px;
    padding: 80px 60px 69px;
    text-align: center;
    font-family: 'BMJUA';
    font-size: 44px;
    color: #000;
    line-height: 57px;
}
.ch_desc_popup .character_wrap .bubble.bubble2{
    padding-top: 110px;
}
.ch_desc_popup .character_wrap .bubble span{
    background: #b7a2c5;
    font-family: 'BMJUA';
    font-size: 36px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color:#fff;
    display: inline-block;
    line-height: 48px;
    margin-right: 10px;
    vertical-align: top;
    margin-top: 2px;
}
.btn_skip{
    width: 300px;
    height: 88px;
    background: url(../img/btn_skip.png) no-repeat center /100%;
    position: absolute;
    right: 134px;
    bottom: 80px;
    opacity: 0;
    transition: all 0.5s linear;
}
.btn_close{
    width: 65px;
    height: 70px;
    background: url(../img/btn_close.png) no-repeat center / contain;
    position: absolute;
}
.ch_desc_popup .btn_close{
    top: 108px;
    right: 137px;
    opacity: 0;
    transition: all 0.5s linear;
}
.guide_popup .btn_close,
.howto_popup .btn_close{
    top: 40px;
    right: 50px;
}
.howto_popup .btn_close.click::after{
    content: "";
    display: block;
    background: url(../img/icon_click.png) no-repeat center/ 100%;
    width: 112px;
    height: 113px;
    position: absolute;
    top: 40px;
    right: -60px;
    transition: all 0.5s linear;
    animation: blink 1s linear 3;
    opacity: 0;
}
.other_popup .btn_close{
    top: 50px;
    right: 60px;
}

.guide_popup,
.stop_popup,
.howto_popup,
.other_popup{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    z-index: 10;
}
.guide_popup.show,
.stop_popup.show,
.howto_popup.show,
.other_popup.show{
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.guide_popup .pop_inner{
    width: 1280px;
    height: 700px;
    background: url(../img/guide_bg.png) no-repeat center /100%;
    position: relative;
}
.howto_popup .pop_inner{
    width: 1446px;
    height: 1002px;
    background: url(../img/howto_bg.png) no-repeat center /100%;
    position: relative;
}
.other_popup .pop_inner{
    width: 1678px;
    height: 934px;
    background: url(../img/other_bg.png) no-repeat center /100%;
    position: relative;
}
.guide_popup .pop_inner h3,
.howto_popup .pop_inner h3,
.other_popup .pop_inner h3{
    font-family: 'Hakgyoansim Allimjang';
    font-size: 48px;
    color: #fff;
    width: 523px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.45);
}
.howto_popup .pop_inner h3{
    font-size: 52px;
    width: 522px;
    height: 120px;
    margin: 20px 0 50px 40px;
}
.other_popup .pop_inner h3{
    width: 470px;
    height: 120px;
    margin: 20px 0 50px 20px;
}

.guide_popup .pop_inner .guide_desc {
    padding: 84px 80px;
}
.guide_popup .pop_inner p{  
    font-size: 42px;
    line-height: 1.4;
    text-indent: 42px;
    text-align: justify;
    /* letter-spacing: -0.02em; */
}
.guide_popup .pop_inner p.desc_source{
    width: 100%;
    font-size: 25px;
    line-height: 1.4;
    position: absolute;
    bottom: 70px;
    text-indent: 0;
}
.guide_popup .pop_inner p.desc_source .brackets:before{
	content: '『';
	margin-left: -10px;
}
.guide_popup .pop_inner p.desc_source .brackets::after{
	content: '』';
	margin-right: -10px;
}
.stop_popup .pop_inner{
    width: 1158px;
    height: 552px;
    background: url(../img/stop_bg.png)no-repeat center /100%;
    position: relative;
    padding-top: 175px;
}
.stop_popup .btn_close{
    top: 50px;
    right: 50px;
}
.step3 .stop_popup .btn_wrap {
    gap: 50px;
    justify-content: center;
    padding-right: 0;
}
.stop_popup .btn_wrap button{
    width: 220px;
    height: 88px;
    background: url(../img/btn_stop.png) no-repeat center / 100%;
}
.stop_popup p{
    font-family: 'Hakgyoansim Allimjang';
    font-weight: 400;
    font-size: 50px;
    margin-bottom: 50px;
}
.howto_popup .btn_play{
    width: 80px;
    height: 88px;
    background: url(../img/btn_sound.png) no-repeat center / 100%;
}
.howto_popup .howto_slide{
    width: 100%;
    height: 100%;
    position: relative;
}
.howto_popup .slide{
    /* display: none; */
    opacity: 0;
    transition: all 0.5s linear;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.howto_popup .slide.on{
    /* display: block; */
    opacity: 1;
    z-index: 10;
}
.howto_popup .slide_btn{
    width: 50px;
    height: 108px;
    position: absolute;
    top: 34%;
    padding: 0;
}
.howto_popup .slide_btn:disabled{
    cursor: default;
}
.howto_popup .slide_next{
    background: url(../img/btn_next.png) no-repeat center / 100%;
    right: -90px;
}
.slide_next.blink{
    animation: blink 1s infinite;
}
.howto_popup .slide_prev{
    background: url(../img/btn_prev.png) no-repeat center / 100%;
    left: -90px;
}
.howto_popup .top_img{
    width: 1120px;
    margin: 0 auto;
    /* pointer-events: none; */
}
.howto_popup .top_img::after{
    content: '';
    display: none;
    position: absolute;
}
.howto_popup .slide.on .top_img::after{
    display: block;
    animation: blink 1s linear 2;
}
.howto_popup .slide1 .top_img::after{
    width: 991px;
    height: 184px;
    background: url(../img/slide_effect1.png)no-repeat center / 100%;
    top: 112px;
    left: 50%;
    transform: translateX(-50%);
}
.howto_popup .slide2 .top_img::after{
    width: 902px;
    height: 239px;
    background: url(../img/slide_effect2.png)no-repeat center / 100%;
    top: 254px;
    left: 50%;
    transform: translateX(-50%);
}
.howto_popup .slide3 .top_img::after{
    width: 257px;
    height: 120px;
    background: url(../img/slide_effect3.png)no-repeat center / 100%;
    top: 422px;
    left: 50%;
    transform: translateX(-50%);
}
.howto_popup .slide4 .top_img::after{
    width: 257px;
    height: 120px;
    background: url(../img/slide_effect4.png)no-repeat center / 100%;
    top: 26px;
    left: 768px;
}
.howto_popup .bottom_area{
    display: flex;
    align-items: center;
    /* padding-left: 110px; */
    /* width: 100%; */
    width: 120%;
}
.howto_popup .bottom_area p{
    font-size: 44px;
    font-weight: 500;
    margin-left: 26px;
    margin-bottom: 10px;
}
.howto_popup .bottom_area p span{
    display: inline-block;
    width: 216px;
    height: 58px;
    font-size: 0;
    text-indent: -1000px;
    vertical-align: top;
}
.howto_popup .bottom_area p .btn_result{
 background: url(../img/btnResult.png) no-repeat center /100%;
}
.howto_popup .bottom_area p .btn_stop{
    background: url(../img/btnStop.png) no-repeat center /100%;
   }
.howto_popup .pagination{
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}
.howto_popup .pagination .page{
    display: inline-block;
    background: #bbc0c7;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
}
.howto_popup .pagination .page.on{
    background: #ffba00;
}

/* .howto_popup .slide1{
    position: relative;
} */
/* .howto_popup .slide1.guide::after{
    content: "";
    display: block;
    background: url(../img/icon_click.png) no-repeat center/ 100%;
    width: 112px;
    height: 113px;
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    transition: all 0.5s linear;
    animation: slideMotion 1s linear 2;
} 
@keyframes slideMotion{
    0%{left: 70%;}
    100%{left: 40%; display: none;}
} */

.other_popup .other_btns{
    display: none;
}
.other_popup .other_btns button{
    width: 352px;
    padding: 0;
}
.other_popup .other_result{
    display: none;
}
.other_popup .btn_back{
    width: 300px;
    height: 88px;
    background: url(../img/btn_back.png) no-repeat;
}

/* step3 */
.step3{
    padding: 100px 130px;
}
.step3 .btn_wrap{
    padding-right: 100px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 22px;
}
.step3 .test_wrap{
    width: 1660px;
    height: 690px;
    background: url(../img/slide_bg.png) no-repeat center / 100%;
    position: relative;
}
.slide_cont{
    display: none;
}
.slide_que{
    display: flex;
    align-items: center;
    padding: 34px 90px 34px 95px;
    gap: 30px;
    line-height: 1.4;
}
.slide_que .que_icon{
    width: 170px;
    height: 200px;
    display: inline-block;
}
.eiTest .slide_que .que_icon{
    background: url(../img/icon_que1.png) no-repeat center / 100%;
}
.nsTest .slide_que .que_icon{
    background: url(../img/icon_que2.png) no-repeat center / 100%;
}
.ftTest .slide_que .que_icon{
    background: url(../img/icon_que3.png) no-repeat center / 100%;
}
.pjTest .slide_que .que_icon{
    background: url(../img/icon_que4.png) no-repeat center / 100%;
}
.slide_que p{
    width: calc(100% - 200px);
    font-family: 'GmarketSans';
    font-weight: 500;
    font-size: 66px;
    vertical-align: middle;
    text-align: left;
    letter-spacing: -0.01em;
}
.slide_que p span{
    display: inline-block;
    width: 360px;
    height: 100px;
    border-radius: 20px;
    background: #fff;
    border: 2px solid #ccccdd;
    margin-right: 10px;
    vertical-align: middle;
}
.answer_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
}
.answer_wrap .answer{
    width: 670px;
    height: 240px;
    border-radius: 40px;
    border: 2px solid #dadce8;
    background: #fff;
    box-shadow: 0 10px 0 0 #dadce8;
    font-family: 'GmarketSans';
    font-weight: 500;
    /* font-size: 60px; */
    font-size: 54px;
    letter-spacing: -0.04em;
    color: #000;
    line-height: 1.4;
    text-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* padding-bottom: 10px; */
}
.answer_wrap .answer.on{
    background: #ecffbf;
    border-color: #b3d85c;
    box-shadow: 0 10px 0 0 #b3d85c;
}
.test_wrap .slide_prev,
.test_wrap .slide_next{
    width: 50px;
    height: 108px;
    position: absolute;
    top: 43%;
}
.test_wrap .slide_next{
    background: url(../img/btn_next.png) no-repeat center / 100%;
    right: 20px;
}
.test_wrap .slide_prev{
    background: url(../img/btn_prev.png) no-repeat center / 100%;
    left: 20px;
}
.test_wrap .slide_pagination{
    font-family: 'Hakgyoansim Allimjang';
    font-size: 36px;
    position: absolute;
    bottom: 30px;
    left: 50px;
}
.test_wrap .slide_pagination span{
    color: #6d6657;
    font-family: 'Hakgyoansim Allimjang';
    font-size: 36px;
}
.test_wrap .btn_result{
    margin-top: 30px;
    position: relative;
}
.test_wrap .test_result.on::after{
    content: "";
    display: block;
    background: url(../img/icon_click.png) no-repeat center/ 100%;
    width: 112px;
    height: 113px;
    position: absolute;
    top: 40px;
    right: -60px;
    transition: all 0.5s linear;
    animation: blink 1s linear 3;
    opacity: 0;
}


/* step4 */
.step4{
    padding: 130px 0 150px;
}
.step4 h2{
    font-family: 'HakgyoansimMonggeulmonggeul';
    font-size: 68px;
    position: relative;
    letter-spacing: -0.01em;
    z-index: 2;
    display: inline-block;
    margin-bottom: 70px;
}
.step4 h2::after{
    content: "";
    display: block;
    background: url(../img/tit_bg1.png)no-repeat center /100%;
    width: 800px;
    height: 30px;
    position: absolute;
    bottom: -5px;
    left: -20px;
    z-index: -1;
}
.step4 div:not(.eiTest) h2::after{
    width: 856px;
}
.step4 div.nsTest h2::after{
    background: url(../img/tit_bg2.png)no-repeat center /100%;
}
.step4 div.ftTest h2::after{
    background: url(../img/tit_bg3.png)no-repeat center /100%;
}
.step4 div.pjTest h2::after{
    background: url(../img/tit_bg4.png)no-repeat center /100%;
}
.step4 .contents{
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 30px;
}
.step4 .card_area{
    width: 340px;
    height: 468px;
}
.step4 .card_desc{
    width: 1114px;
    height: 468px;
    background: url(../img/desc_bg.png) no-repeat center /100%;
    padding: 50px 60px 0 82px;
    margin-bottom: 40px;
}
.step4 .card_desc .desc_row{
    display: flex;
    align-items: start;
    margin-bottom: 30px;
}
.step4 .card_desc p{
    font-size: 46px;
    text-align: left;
    width: calc(100% - 44px);
    line-height: 1.4;
    font-weight: 500;
}
.step4 .card_desc .dot{
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    background: #000;
    border-radius: 50%;
    margin-right: 30px;
    margin-top: 25px;
}
.btn_nextStep,
.btn_reset{
    width: 360px;
    height: 88px;
    background: url(../img/btn_nextStep.png) no-repeat center / 100%;
}
.btn_other{
    width: 360px;
    height: 88px;
    background: url(../img/btn_other.png) no-repeat center / 100%;
}

/* step5 */
.step5{
    padding: 130px 0 180px;
}
.step5 h2{
    font-family: 'HakgyoansimMonggeulmonggeul';
    font-size: 68px;
    position: relative;
    letter-spacing: -0.01em;
    z-index: 2;
    display: inline-block;
    margin-bottom: 40px;
}
.step5 h2::after{
    content: "";
    display: block;
    background: url(../img/bg_tit2.png)no-repeat center /100%;
    width: 689px;
    height: 30px;
    position: absolute;
    bottom: -5px;
    left: -20px;
    z-index: -1;
}
.step5 .result_wrap{
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}
.step5 .resultImg{
    width: 340px;
    height: 494px;
}
.step5 .result_desc_wrap{
    width: 1108px;
    height: 520px;
    border-radius: 70px;
    padding: 50px 20px 50px 50px;
    position: relative;
}
.step5 .result_desc_wrap .scroll_cont{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    /* position: relative; */
    padding-bottom: 23px;
}
.step5 .btn_wrap{
    padding-right: 220px;
    /* gap: 20px;
    display: flex;
    justify-content: end; */
    text-align: right;
}
.step5 .reset_popup .btn_wrap{
    padding: 0;
    text-align: center;
}
.step5 .result_desc_wrap .scroll_cont::before,
.step5 .result_desc_wrap .scroll_cont::after{
    content: '';
    display: none;
    width: 92%;
    height: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.step5 .result_desc_wrap .scroll_cont.topDeco::before{
    top: 48px;
    display: block;
}
.step5 .result_desc_wrap .scroll_cont.bottomDeco::after{
    bottom: 48px;
    display: block;
}
/* 배경 테투리및포인트 글자 */
/* 파 ebf8ff c1e2f5 116087*/
/* 초 effaf7 c9eae2 2d8f77*/
/* 빨 fef3f5 fdd8dc ba4954* /
/* 주 fff6e9 ffe4be a55e18*/
.step5 .result_desc_wrap.istj,
.step5 .result_desc_wrap.enfp,
.step5 .result_desc_wrap.esfj,
.step5 .result_desc_wrap.intp{
    background: #ebf8ff;
    border: 2px solid #c1e2f5;
}
.step5 .result_desc_wrap.istj .scroll_cont::before,
.step5 .result_desc_wrap.enfp .scroll_cont::before,
.step5 .result_desc_wrap.esfj .scroll_cont::before,
.step5 .result_desc_wrap.intp .scroll_cont::before{
    background: linear-gradient( #ebf8ff, transparent );
}
.step5 .result_desc_wrap.istj .scroll_cont::after,
.step5 .result_desc_wrap.enfp .scroll_cont::after,
.step5 .result_desc_wrap.esfj .scroll_cont::after,
.step5 .result_desc_wrap.intp .scroll_cont::after{
    background: linear-gradient(transparent , #ebf8ff );
}

.step5 .result_desc_wrap.estp,
.step5 .result_desc_wrap.infj,
.step5 .result_desc_wrap.isfp,
.step5 .result_desc_wrap.entj{
    background: #fef3f5;
    border: 2px solid #fdd8dc;
}
.step5 .result_desc_wrap.estp .scroll_cont::before,
.step5 .result_desc_wrap.infj .scroll_cont::before,
.step5 .result_desc_wrap.isfp .scroll_cont::before,
.step5 .result_desc_wrap.entj .scroll_cont::before{
    background: linear-gradient(#fef3f5 ,transparent);
}
.step5 .result_desc_wrap.estp .scroll_cont::after,
.step5 .result_desc_wrap.infj .scroll_cont::after,
.step5 .result_desc_wrap.isfp .scroll_cont::after,
.step5 .result_desc_wrap.entj .scroll_cont::after{
    background: linear-gradient(transparent , #fef3f5 );
}
.step5 .result_desc_wrap.isfj,
.step5 .result_desc_wrap.entp,
.step5 .result_desc_wrap.istp,
.step5 .result_desc_wrap.enfj{
    background: #effaf7;
    border: 2px solid #c9eae2;
}
.step5 .result_desc_wrap.isfj .scroll_cont::before,
.step5 .result_desc_wrap.entp .scroll_cont::before,
.step5 .result_desc_wrap.istp .scroll_cont::before,
.step5 .result_desc_wrap.enfj .scroll_cont::before{
    background: linear-gradient(#effaf7 ,transparent );
}
.step5 .result_desc_wrap.isfj .scroll_cont::after,
.step5 .result_desc_wrap.entp .scroll_cont::after,
.step5 .result_desc_wrap.istp .scroll_cont::after,
.step5 .result_desc_wrap.enfj .scroll_cont::after{
    background: linear-gradient(transparent , #effaf7 );
}
.step5 .result_desc_wrap.esfp,
.step5 .result_desc_wrap.intj,
.step5 .result_desc_wrap.estj,
.step5 .result_desc_wrap.infp{
    background: #fff6e9;
    border: 2px solid #ffe4be;
}
.step5 .result_desc_wrap.esfp .scroll_cont::before,
.step5 .result_desc_wrap.intj .scroll_cont::before,
.step5 .result_desc_wrap.estj .scroll_cont::before,
.step5 .result_desc_wrap.infp .scroll_cont::before{
    background: linear-gradient( #fff6e9 ,transparent);
}
.step5 .result_desc_wrap.esfp .scroll_cont::after,
.step5 .result_desc_wrap.intj .scroll_cont::after,
.step5 .result_desc_wrap.estj .scroll_cont::after,
.step5 .result_desc_wrap.infp .scroll_cont::after{
    background: linear-gradient(transparent , #fff6e9 );
}
.step5 .result_desc_wrap.istj .result_label,
.step5 .result_desc_wrap.enfp .result_label,
.step5 .result_desc_wrap.esfj .result_label,
.step5 .result_desc_wrap.intp .result_label{
    background: #c1e2f5;
}
.step5 .result_desc_wrap.estp .result_label,
.step5 .result_desc_wrap.infj .result_label,
.step5 .result_desc_wrap.isfp .result_label,
.step5 .result_desc_wrap.entj .result_label{
    background: #fdd8dc;
}
.step5 .result_desc_wrap.isfj .result_label,
.step5 .result_desc_wrap.entp .result_label,
.step5 .result_desc_wrap.istp .result_label,
.step5 .result_desc_wrap.enfj .result_label{
    background: #c9eae2;
}
.step5 .result_desc_wrap.esfp .result_label,
.step5 .result_desc_wrap.intj .result_label,
.step5 .result_desc_wrap.estj .result_label,
.step5 .result_desc_wrap.infp .result_label{
    background: #ffe4be;
}
.step5 .result_desc_wrap .result_label{
    font-size: 38px;
    padding: 0 60px;
    border-radius: 35px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
    margin-bottom: 35px;
    font-weight: 500;
}
.step5 .result_desc_wrap > div{
    text-align: left;
}
.step5 .result_desc_wrap .desc_row{
    display: flex;
    align-items: start;
    margin-bottom: 20px;
    margin-left: 30px;
}
.step5 .result_desc_wrap .dot{
    display: inline-block;
    vertical-align: top;
    width: 14px;
    height: 14px;
    background: #000;
    border-radius: 50%;
    margin-right: 30px;
    margin-top: 20px;
}
.step5 .result_desc_wrap p{
    font-size: 38px;
    text-align: left;
    width: calc(100% - 44px);
    line-height: 1.4;
    word-break: keep-all;
}
.step5 .result_desc_wrap .desc_bottom p {
    margin-left: 30px;
}
.step5 .result_desc_wrap .keywords{
    display: inline-block;
    font-family: 'GangwonEduSaeeum';
    font-size: 52px;
    margin-top: 5px;
    vertical-align: top;
    line-height: 52px;
}
.step5 .result_desc_wrap.istj .keywords,
.step5 .result_desc_wrap.enfp .keywords,
.step5 .result_desc_wrap.esfj .keywords,
.step5 .result_desc_wrap.intp .keywords{
    color: #116087;
}
.step5 .result_desc_wrap.estp .keywords,
.step5 .result_desc_wrap.infj .keywords,
.step5 .result_desc_wrap.isfp .keywords,
.step5 .result_desc_wrap.entj .keywords{
    color: #ba4954;
}
.step5 .result_desc_wrap.isfj .keywords,
.step5 .result_desc_wrap.entp .keywords,
.step5 .result_desc_wrap.istp .keywords,
.step5 .result_desc_wrap.enfj .keywords{
    color: #2d8f77;
}
.step5 .result_desc_wrap.esfp .keywords,
.step5 .result_desc_wrap.intj .keywords,
.step5 .result_desc_wrap.estj .keywords,
.step5 .result_desc_wrap.infp .keywords{
    color: #a55e18;
}