@keyframes changeModelM {
    0%, 40%, 100% {
        opacity: 1;
    }
    50%, 90% {
        opacity: 0;
    }
}
@keyframes changeModelW {
    0%, 40%, 100% {
        opacity: 0;
    }
    50%, 90% {
        opacity: 1;
    }
}
.big5_page{padding-top: 95px;color: #252525;}
.big5_page section{padding: 50px 0 210px;}
.big5_page .bg_male{background: url('/lovetest/big5/img/bg_big5.jpg') no-repeat center / cover;padding: 125px 0 0;}
.big5_page .bg_female{background: url('/lovetest/big5/img/bg_big5.jpg') no-repeat center / cover;padding: 125px 0 0;}
.big5_page .step00 .inner{display: flex;align-items: flex-start;padding-left: 500px;}
.big5_page .step00 .img_box{position: relative;margin-left: 100px;width: 710px;height: 665px;}
.big5_page .step00 .img_box img{position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
.big5_page .step00 .img_box .img_male{animation: changeModelM 7s ease-in infinite;}
.big5_page .step00 .img_box .img_female{opacity: 0; animation: changeModelW 7s ease-in infinite;}
.big5_page .result_wrap1{background-color: #f7f8fa;padding: 50px 0 80px;}
.result_wrap1 .form_tit1{margin-top: 30px;}
.big5_page .result_wrap2{padding: 100px 0;}
.personality_box{position: relative;width: 560px;margin: 0 auto 20px;background-color: #fff;border-radius: 10px;padding: 32px 55px 28px;}
.bar_box{display: flex;height: 16px;background-color: #F0F1F5;border-radius: 30px;margin: 18px 0 20px;overflow: hidden;}
.bar_box span{display: inline-block;width: 20%;height: 100%;flex:1;opacity: 0;}
.bar_box span + span{border-left: 1px solid #F0F1F5;}
.personality_tit1{position: relative;font-weight: 700;font-size: 20px;}
.personality_tit1::before{content: '¤ý';display: inline-block;position: absolute;top: 0px;left: -20px;}
.personality_tit1 > span{display: inline-block;position: relative;width: 24px;height: 24px;line-height: 24px;text-align: center;background-color: #EAEAEA;font-weight: 500;font-size: 14px;border-radius: 100%;vertical-align: middle;cursor: help;margin-left: 2px;margin-bottom: 4px;}
.personality_tit1 > span::before{content: '';display: block;position: absolute;top: -11px;left: 50%;transform: translateX(-50%);width: 7px;height: 8.4px;background: url('https://www.duo.co.kr/img/form/ic-speech.svg') no-repeat center / cover;opacity: 0;}
.personality_tit1 > span:hover{background-color: #252525;color: #fff;}
.personality_tit1 > span:hover::before{opacity: 1;}
.personality_txt1{position: absolute;top: 32px;right: 55px;font-weight: 700;font-size: 22px;}
.personality_txt2{position: relative;font-weight: 400;font-size: 18px;line-height: 1.6;padding-left: 26px;}
.personality_txt2::before{content: '';display: inline-block;width: 16px;height: 16px;background: url('https://www.duo.co.kr/img/form/ic-answer.svg') no-repeat center / cover;position: absolute;top: 3px;left: 0;}
.speech_bubble{display: inline-block;position: absolute;top: -33px;border-radius: 27px;background-color: #252525;color: #fff;font-size: 18px;padding: 16px 24px;z-index: 1;opacity: 0;}
.speech_bubble.on{opacity: 1;}
.bar_box.bgc_0094C7 span{background-color: #0094C7;}
.bar_box.bgc_202A93 span{background-color: #202A93;}
.bar_box.bgc_04A137 span{background-color: #04A137;}
.bar_box.bgc_F1690B span{background-color: #F1690B;}
.bar_box.bgc_F90B0A span{background-color: #F90B0A;}
.bar_box.score_1 span:nth-child(-n+1){opacity: 1;}
.bar_box.score_2 span:nth-child(-n+2){opacity: 1;}
.bar_box.score_3 span:nth-child(-n+3){opacity: 1;}
.bar_box.score_4 span:nth-child(-n+4){opacity: 1;}
.bar_box.score_5 span:nth-child(-n+5){opacity: 1;}
.result_tit1{font-weight: 700;font-size: 42px;margin-bottom: 30px;text-align: center;}
.result_txt1{font-weight: 300;font-size: 16px;text-align: center;margin-bottom: 45px;}
.duo_box{width: 560px;margin: 0 auto;border: 1px solid #7B7B7B;border-radius: 10px;}
.duo_box + .duo_box{margin-top: 30px;}
.duo_box .title_box{text-align: center;border-bottom: 1px solid #7b7b7b;padding: 24px 0;}
.duo_box .title_box p{font-weight: 700;font-size: 26px;}
.duo_box .contents_box{display: flex;flex-flow: wrap row;padding: 50px;gap:30px;}
.duo_box .img_box{width: 140px;}
.duo_box .text_box{width: calc(100% - 170px);}
.duo_box .text_box dl{display: flex;flex-flow: wrap row;line-height: 1.7;}
.duo_box .text_box dl + dl{margin-top: 20px;}
.duo_box .text_box dl dt{width: 65px;font-weight: 400;font-size: 18px;}
.duo_box .text_box dl dd{width: calc(100% - 65px);padding-left: 20px;font-weight: 700;font-size: 18px;word-break: auto-phrase;}

@media (max-width: 1700px) {    
    .big5_page .step00 .inner{padding-left: 400px;}
}

@media (max-width: 1560px) {
    .big5_page .bg_male{padding-top: 110px;}
    .big5_page .step00 .inner{width: 1280px;margin: 0 auto;padding-left: 280px;}
    .big5_page .step00 .inner .text_box{width: 350px;}
    .big5_page .step00 .inner .img_box{width: calc(100% - 450px);margin-left: 100px;height: 517px;}    
    .result_wrap1 .form_tit1{margin-top: 20px;}
    .bar_box{height: 14px;margin: 16px auto 18px;}
    .personality_box{width: 475px;padding: 27px 46px 24px;}
    .personality_tit1{font-size: 17px;}
    .personality_txt1{font-size: 19px;}
    .personality_txt2{font-size: 15px;}
    .personality_txt2::before{width: 14px;height: 14px;}
    .personality_tit1 > span{width: 20px;height: 20px;line-height: 20px;font-size: 12px;}
    .speech_bubble{font-size: 15px;padding: 12px 20px;top: -27px;}
    .result_tit1{font-size: 36px;margin-bottom: 25px;}
    .result_txt1{font-size: 14px;}
    .duo_box{width: 475px;}
    .duo_box .title_box{padding: 20px 0;}
    .duo_box .title_box p{font-size: 22px;}
    .duo_box .contents_box{padding: 42px;gap:25px;}
    .duo_box .img_box{width: 120px;}
    .duo_box .text_box{width: calc(100% - 145px);}
    .duo_box .text_box dl + dl{margin-top: 15px;}
    .duo_box .text_box dl dt{width: 55px;font-size: 16px;}
    .duo_box .text_box dl dd{width: calc(100% - 55px);font-size: 16px;padding-left: 16px;}
}