#jp_quiz { }
#jp_quiz h1 { font-size: 2em; margin-top: 1em; padding-left: .5em;}


 /* news highlight */
 #jp_quiz .top-news-highlight { border: 1px solid #ccc; background: #fafafa; }
 #jp_quiz .top-news-highlight .inner { padding: 1em; }
 #jp_quiz .top-news-highlight .main-display { display: flex;}

 #jp_quiz .top-news-highlight .left { max-width: 400px; width: 95%; padding: 2em 2em 0 0; }
 #jp_quiz .top-news-highlight .left .news-label span { font-size: .77em; display: block; border-bottom: 2px solid #aaa;}
 #jp_quiz .top-news-highlight .left .news-label span { padding-bottom: .5em; font-weight: bold; color: #b5820f; font-family: "Roboto", serif;}
 #jp_quiz .top-news-highlight .left h2 { font-size: 2.1em; margin-bottom: .4em; color: #444;  font-family: "Raleway", sans-serif; font-weight: bold;}

 #jp_quiz .top-news-highlight .left h6 { font-size: .9em; line-height: 1.5em; margin-bottom: 1em; color: #666; font-family: "Roboto", serif;}
 #jp_quiz .top-news-highlight .left .info-sec { font-size: .77em; color: #777; font-family: "Roboto", serif;}
 #jp_quiz .top-news-highlight .left .info-sec a.take_quiz { color: #fff; display: block; width: 90px; padding: .8em 1em; background: #c73737; }
 #jp_quiz .top-news-highlight .left .info-sec a.take_quiz { text-align: center; border-radius: 15px; font-weight: bold; }

 #jp_quiz .top-news-highlight .right { max-width: 90%;  width: 90%; max-height: 350px; }
 #jp_quiz .top-news-highlight .right .img-sec {  width: 100%; height: 100%; }
 #jp_quiz .top-news-highlight .right .img-sec img { width: 100%; height: 100%; object-fit: cover;}


#jp_quiz .quiz-list { background: #eee; padding: 1em; }
#jp_quiz .quiz-list h3 { font-size: 1.5em; margin-bottom: 1em; border-bottom: 2px solid #ccc; padding-bottom: .5em;}
#jp_quiz .quiz-list .content-sec { display: flex; justify-content: space-between;}
#jp_quiz .quiz-list .content-sec a.item { background: #fefefe; width: 30%; display: block; }
#jp_quiz .quiz-list .content-sec .item img { display: block; width: 100%;}
#jp_quiz .quiz-list .content-sec .item em { display: block; font-size: 1em; margin: 1em 0; text-align: center; color: #23662f;}
#jp_quiz .quiz-list .content-sec .item span { display: block; font-size: .8em; text-align: center; text-align: center; border-radius: 15px; }
#jp_quiz .quiz-list .content-sec .item span { padding: .5em .9em; background: #555; margin: 0 auto; width: 90px; color: #fff; margin-bottom: 1em;}

#jp_quiz a.view-all-quiz { font-size: 1em; text-align: center; width: 90%; margin: 2em auto; max-width: 500px; }
#jp_quiz a.view-all-quiz { padding: 1em; display: block; background: #0d8bc1; color: #fff; border-radius: 20px;}


 /* ---------------------------------
  All Quiz
  -----------------------------------*/
#jp_quiz_all {}
#jp_quiz_all h1 { font-size: 1.6em;  margin: 0 0 1em 1em; border-bottom: 2px solid #ccc; padding-bottom: .5em;}
#jp_quiz_all .content-sec { display: flex;  flex-wrap: wrap; padding: 1em;}
#jp_quiz_all .content-sec a.item { background: #fefefe; width: 250px; display: block; margin: 0 1em 2em 0; }
#jp_quiz_all .content-sec .item img { display: block; width: 100%;}
#jp_quiz_all .content-sec .item em { display: block; font-size: 1em; margin: 1em 0; text-align: center; color: #23662f;}
#jp_quiz_all .content-sec .item span { display: block; font-size: .8em; text-align: center; text-align: center; border-radius: 15px; }
#jp_quiz_all .content-sec .item span { padding: .5em .9em; background: #555; margin: 0 auto; width: 90px; color: #fff; margin-bottom: 1em;}

/*--------------------------------------------------------
  			Small Screen
---------------------------------------------------------*/

@media screen and (max-width: 835px) {

#jp_quiz a.view-all-quiz {  max-width: 200px; }


}


@media screen and (max-width: 700px) {


  /* news highlight */
#jp_quiz .top-news-highlight { }
#jp_quiz .top-news-highlight .main-display {  }
#jp_quiz .top-news-highlight .right { margin-top: 1em;  height: 250px;}


/* ---------------------------------
 All Quiz
 -----------------------------------*/
#jp_quiz_all .content-sec a.item { width: 45%; margin-right: 1em; }


}


@media screen and (max-width: 600px) {


  /* news highlight */
#jp_quiz .top-news-highlight .main-display { display: block; }

/*  */
#jp_quiz .quiz-list .content-sec { display: block; }
#jp_quiz .quiz-list .content-sec a.item { width: 90%; display: block; max-width: 350px; margin: 0 auto 1em auto;}
#jp_quiz .quiz-list .content-sec .item img { display: block; width: 100%;}
#jp_quiz .quiz-list .content-sec .item em { display: block; font-size: 1em; margin: 1em 0; text-align: center; color: #23662f;}
#jp_quiz .quiz-list .content-sec .item span { display: block; font-size: .8em; text-align: center; text-align: center; border-radius: 15px; }
#jp_quiz .quiz-list .content-sec .item span { padding: .5em .9em; background: #555; margin: 0 auto; width: 90px; color: #fff; margin-bottom: 1em;}




}


@media screen and (max-width: 500px) {

  /* news highlight */
#jp_quiz .top-news-highlight .main-display { display: block; }


}