.section_quiz{
    margin: 0;
}

.section_quiz .quiz_list ul{
    display: flex;
    flex-wrap: wrap;
}

.section_quiz .quiz_list li{
    width: calc(100% / 3 - 20px);
    margin-bottom: 40px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin-right: 30px;
}

.section_quiz .quiz_list li:nth-child(3n){
    margin-right: 0;
}

.section_quiz .quiz_list .quiz_title_img{
    /*width: 274px;*/
    height: 190px;
    border-radius: 10px 10px 0 0;
}

.section_quiz .quiz_list .quiz_title_img img{
    max-width: 100%;
    height: 100%;
    width: 100%;
    display: block;
    border-radius: 10px 10px 0 0;
    object-fit: cover;
}



.section_quiz .quiz_category{
    margin-bottom: 8px;
}

.section_quiz .quiz_category span{
    display: inline-block;
    color: #fff;
    border-radius: 20px;
    font-weight: 500;
    font-size: 12px;
    padding:3px 8px;
    margin-right: 8px;
}

.section_quiz .quiz_category .progress{
    background: #E4F9F0;
    color: #37C187;
}

.section_quiz .quiz_category .quiz_gray_category{
    background: #EDEDED;
    color: #999999;
}

.section_quiz .quiz_list .quiz_list_title{
    color: #292929;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 12px;
}

.section_quiz .quiz_list .quiz_list_title a{
    display: inline-block;
    width: 100%;
}

.section_quiz .quiz_date{
    font-size: 13px;
    color: #767676;
}

.section_quiz .quiz_date th{
    font-weight: 400;
    padding: 0 7px 4px 0;
    line-height: 20px;
}

.section_quiz .quiz_date td{
    font-weight: 400;
    line-height: 20px;
}

.section_quiz .quiz_date td img{
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 3px;
}

.section_quiz .quiz_date td img:nth-child(3){
    margin-left: 8px;
}

.quiz_user_num{
    color: #767676;
    font-size: 13px;
    margin: 0 0 4px 0;
}


.section_quiz .quiz_result{
    font-size: 13px;
}

.section_quiz .quiz_result .quiz_answer{
    color: #4294FF;
    display: inline-block;
}

.section_quiz .quiz_result .quiz_answer span,
.section_quiz .quiz_result .quiz_answer_out span{
    font-weight: 600;
}

.section_quiz .quiz_result .quiz_bar{
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    display: inline-block;
    width:118px;
    height: 8px;
    margin: 0 8px;
}

.section_quiz .quiz_result .quiz_bar div:first-child{
    position: absolute;
    left: 0;
    height: 8px;
    background: #4294FF;
    border-radius: 15px 0 0 15px;
}

.section_quiz .quiz_result .quiz_bar div:last-child{
    position: absolute;
    height: 8px;
    right: 0;
    background: #F65757;
    border-radius: 0 15px 15px 0;
}

.section_quiz .quiz_result .quiz_answer_out{
    display: inline-block;
    color: #F65757;
}







/*상세페이지 css 작업입니다.*/
/*상세페이지 공통 영역입니다.*/

.related_article{
    border-top: 1px solid #EDEDED;
    padding-top: 20px;
    margin: 0 auto;


}

.view_list_wrap {
    background-color: #fff;
    width: 950px;
    height: auto;
    margin: 0 auto;
    /*padding-top: 30px;*/
    /*overflow: hidden;*/
    float: left;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 10px;

}
.view_content_item{
    min-height: auto;
    border-bottom: 0;
    padding: 30px 0 0 0;
}

.view_title_wrap{
    margin-bottom: 20px;
}

.view_text{
    border-top: 1px solid #EDEDED;
    padding: 40px 0;
    margin-top: 20px;
}

/*관련기사, 힌트 등등 공통 css*/
.category_default_img{
    background: #E3F2F9 url("../../../images/common/tokenpost.svg")center center no-repeat;
    width: 100%;
    height: 103px;
    border-radius: 5px;
}

.category_article_image{
    margin-right: 20px;
}

.category_article_image:last-child{
    margin-right: 0;
}

.category_article_image > a > img {
    border-radius: 5px;
    object-fit: cover;
}

.related_article .title_text{
    margin-bottom: 16px;
}

.related_article .category_article_text{
    color: #292929;
    text-align: left;
    font-weight: 400;
    font-size: 12px;
    margin-top: 12px;
    line-height: 16px;

}
.related_article .category_article_text p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.related_article .category_article_item{
    height: 160px;
    justify-content: flex-start;
}

/*관련기사, 힌트 등등 공통 css END*/



/*상세페이지 공통 영역입니다.  END*/




.section_quiz .quiz_view .quiz_result .quiz_bar{
    width: 230px;
}

.quiz_view .view_title_wrap{
    display: flex;
}


.section_quiz .quiz_view .quiz_title_img{
    width: 160px;
    min-width: 160px;
    height: 160px;
    display: block;
    border-radius: 10px;
    margin-right: 20px;
    overflow: hidden;
}

.section_quiz .quiz_view .quiz_title_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section_quiz .quiz_view .quiz_title_item{
    display: block;
    width: calc(100% - 180px);
}

.section_quiz .quiz_view .quiz_view_title{
    font-weight: bold;
    font-size: 20px;
    line-height: 23px;
    margin-bottom: 20px;
}

.section_quiz .quiz_view .quiz_result_wrap .quiz_result{
    display: inline-block;
}

.section_quiz .quiz_view .quiz_result_wrap .round_btn1{
    background: #008FC3;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    padding: 7px 12px 5px 12px;
    border-radius:4px;
    border: 0;
    float: right;
    vertical-align: top;
    margin-top: -6px;
    cursor: pointer;
}

.btn_wrap{
    text-align: center;
    margin: 30px auto;
}
.round_btn2{
    width: 120px;
    font-weight: 500;
    font-size: 14px;
    background: #008FC3;
    border-radius:4px;
    padding: 8px 20px;
    color: #fff;
    border: 0;
    line-height: 24px;
    cursor: pointer;
}

.quiz_view .quiz_alert {
    width: 100%;
    height: 100%;
    /*background: rgba(217, 217, 217, 1);*/
    border-radius: 10px;
    margin-top: 20px;
}

.quiz_view .quiz_alert  p{
    color: #292929;
    line-height: 26px;
    vertical-align: middle;
}


.quiz_view .quiz_alert.alert_type2{
    /*padding:48px 10px 0 10px;*/
    background: #E5F6FC;
    padding:18px 0;
    text-align: center;
}

.quiz_view .quiz_alert.alert_type2 p{
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #008FC3;
    display: inline-block;
}

.quiz_view .quiz_alert.alert_type3{
    /*padding:48px 10px 0 10px;*/
    background: #E5F6FC;
    padding:32px 0;
    text-align: center;
}

.quiz_view .quiz_alert.alert_type3 p{
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    color: #008FC3;
}

.quiz_view .quiz_alert .alert_icon{
margin-right: 5px;
    line-height: 12px;
}




/*퀴즈 팝업*/
.quiz_modal{
    background: rgba(0, 0, 0, 0.4);
    display: block;
}

.quiz_modal .modal_container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 10px;
}

.quiz_modal .modal_container{
    width: 600px;
}

.quiz_modal  .modal_container .modal_title_wrap{
    border-bottom: 1px solid #DBDBDB ;
    padding: 18px 32px;
}

.quiz_modal  .modal_container .modal_title_wrap .modal_title{
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    display: inline-block;
    font-family: 'Pretendard';
}

.quiz_modal  .modal_container .modal_title_wrap button{
    width: 24px;
    height: 27px;
    position: relative;
    float: right;
    border: 0;
    background: none;
    cursor: pointer;
    vertical-align: middle;
}

.quiz_modal  .modal_container .modal_title_wrap button span{
    position: absolute;
    display: inline-block;
    background: #999999;
    width: 22px;
    height: 1px;
    border-radius: 5px;
}

.quiz_modal .modal_container .modal_title_wrap button span:first-child{
    left: 0;
    transform: rotate(45deg);
}

.quiz_modal .modal_container .modal_title_wrap button span:last-child{
    left: 0;
    transform: rotate(-45deg);
}

.quiz_modal .modal_container .modal_content{
    padding:0 20px;
    margin: 0 12px;
    max-height: 480px;
    overflow-y: auto;
}
/* 아래의 모든 코드는 영역::코드로 사용 */
.quiz_modal .modal_container .modal_content::-webkit-scrollbar {
    width: 6px;  /* 스크롤바의 너비 */
}
.quiz_modal .modal_container .modal_content::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: #EDEDED; /* 스크롤바의 색상 */
    border-radius: 10px;
}
.quiz_modal .modal_container .modal_content::-webkit-scrollbar-track {
    background: #fff;  /*스크롤바 뒷 배경 색상*/
}

.quiz_modal .quiz_question{
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    margin: 20px 0;
}


.quiz_modal .quiz_question span{
    color: #BBBBBB;
    display: inline-block;
    font-size: 18px;
    margin-bottom: 4px;
    font-family: 'Pretendard';
    vertical-align: middle;
    margin-right: 5px;
}

.quiz_modal .quiz_question_txt{
    border: 1px solid #DBDBDB;
    border-radius: 5px;
    padding: 12px 20px;
    width: 100%;
}

/*.example {*/
/*    width: 48%;*/
/*    border: 1px solid red;*/
/*    position: relative;*/
/*    display: inline-block;*/
/*}*/


.quiz_question_check {
    width: 100%;
    overflow: hidden;
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
}

.quiz_question_check._img_quiz{
    justify-content: flex-start;
}

.quiz_question_check .example{
    width: 259px;
    display: inline-block;
    margin: 0 0 12px 0;
}

.quiz_question_check .example:nth-child(2n){
    margin-left: 12px;
}

.quiz_question_check .example input {
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
    display: none;
}

.quiz_question_check .example label {
    position: relative;
    background: #F1F1F5;
    border-radius: 5px;
    color: #767676;
    font-size: 14px;
    line-height: 1;
    text-align: left;
    padding: 12px 16px 12px 45px;
    transition: all 0.1s ease-in-out;
    width: 100%;
    display: inline-block;
}

.quiz_question_check .example label img{
    max-width: 100%;
}

.quiz_question_check .example label:hover {
    cursor: pointer;
}

.quiz_question_check .example input:checked + label {
    position: relative;
    background-color: #E2F2F8;
    box-shadow: none;
    color: #008FC3;
    font-weight: 500;
    border-radius: 5px;

}

.quiz_question_check .example label::after{
    position: absolute;
    content: '';
    left:16px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: url("../../../images/tokenpost_new/quiz/radio_icon_default.png")no-repeat;
}

.quiz_question_check .example input:checked + label::after {
    position: absolute;
    content: '';
    left:16px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: url("../../../images/tokenpost_new/quiz/radio_icon.png")no-repeat;
}

.quiz_question_check .example.ex_img{
    width: 170px;
    height: 120px;
    margin-right: 9px;
}

.quiz_question_check .example.ex_img label{
    padding: 0;
}

.quiz_question_check .example.ex_img label::after{
    background: none;
}

.quiz_question_check .example.ex_img input:checked + label::after{
    background:  url("../../../images/tokenpost_new/quiz/check_icon.png")50% 50% no-repeat;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.quiz_question_check .example.ex_img img{
    border-radius: 5px;
    width: 170px;
    height: 120px;
}

.quiz_question_check .example.ex_img:nth-child(2n){
    margin-right: 9px;
    margin-left: 0;
}

.quiz_question_check .example.ex_img:nth-child(3n){
    margin-right: 0;
}

.quiz_modal .quiz_submit_btn{
    width: 100%;
    background: #008FC3;
    color: #fff;
    border: 0;
    border-radius: 0 0 5px 5px;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    padding: 16px 0;
    cursor: pointer;
}

.quiz_modal .question_item_content{
    font-weight: 400;
    font-size: 14px;
    font-family: 'Pretendard';
    color: #767676;
    margin: 15px 0 20px 0;
}

.quiz_modal .imgBox > img{
    margin-bottom: 5px;
}
/*퀴즈 팝업 end*/









.question_item{
    margin-bottom: 50px;
}

.question_item_footer_image{
    margin-bottom: 20px;
}

.quiz_hint{
    background: #FAFAFD;
    border: 1px solid #DBDBDB;
    border-radius: 10px;
    padding: 20px 28px;
}

.quiz_hint .hint_title{
    color: #767676;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 12px;
}

.quiz_hint .hint_title img{
    vertical-align: middle;
    margin: -5px 5px 0 0;
}

.quiz_hint .hint_content{
    color: #767676;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
}

.my_quiz_result{
    text-align: center;
    margin-bottom: 40px;
}

.my_quiz_result p{
    font-weight: 700;
    font-size: 18px;
}

.my_quiz_result span{
    background: #E6ECFF;
    border-radius: 4px;
    font-size: 14px;
    color: #4294FF;
    padding: 6px 12px;
    margin-left: 5px;
    vertical-align: bottom;
}

.my_quiz_result span img{
    display: inline-block;
    vertical-align: middle;
    margin-top: -4px;
}

.quiz_winner_list p{
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    margin: 40px 0 20px 0;
}

.quiz_winner_list{
    margin: 20px 0;
}

.quiz_winner_list table{
    width: 100%;
    text-align: center;
    border: 2px solid #008FC3;
    border-radius: 10px;
    overflow: hidden;
}

.quiz_winner_list table th{
    background: #008FC3;
    color: #fff;
    padding: 8px;
    font-weight: 700;
    font-size: 14px;
}

.quiz_winner_list table td{
    color: #767676;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    padding: 10px;
    word-break: break-all;
    border-bottom: 1px solid #EDEDED;
    border-right: 1px solid #EDEDED;
    width: 33%;
}

.quiz_winner_list table td:last-child{
    border-right: 0;
}

.quiz_winner_list table tr.quiz_winner_my td{
    background: #ECF6FA;
    color: #008FC3;
    font-weight: 700;
    font-size: 14px;

}


.quiz_list .quiz_item{
    padding: 20px 20px;
}

.quiz_related_article{
    border-top: 0;
}








@media (min-width: 0px) and (max-width: 1399px){
    .section_quiz .quiz_view .quiz_result .quiz_bar{
        width: 114px;
    }
    .section_quiz .quiz_list li {
        width: calc(100% / 2 - 20px);
    }

    .section_quiz .quiz_list li:nth-child(1n){
        margin-right: auto;
    }

    .section_quiz .quiz_list li:nth-child(3n){
        margin-right: auto;
    }

    .section_quiz .quiz_list li:nth-child(2n){
        margin-right: 0;
    }

    .related_article{
        margin: 0;
    }

    .quizListWrap .quiz_list li {
        width: 274px;
    }

    .view_list_wrap {
        width: 640px;
    }
    .section_quiz .quiz_result .quiz_bar {
        width: 118px;
    }
    .section_quiz .quiz_view .quiz_result_wrap .round_btn1{
        margin-top: -14px;
    }

    .section_quiz .quiz_view .quiz_result_wrap .quiz_result{

    }

    .category_article_image{
        margin-right: 16px;
    }
}