/******************** Interested Articles ********************/
.interestedArticles { display: inline-block; float: left; width: 300px; background: #fff; position: relative; padding: 8px 10px 18px; border: 1px solid #e0e0e0; border-top: 4px solid #0277bd; /*clear:both*/ }
.interestedArticles .ttl { background: none; border-right: none; padding-right: 0; margin-bottom: 12px }
.interestedArticles .ttl .more { display: none }
.interestedArticles .cnts { display: inline-block; float: right; width: 100% }
.interestedArticles .cnts li { display: inline-block; width: 100%; float: right; margin-bottom: 16px; position: relative }
.interestedArticles .cnts li:last-child { margin-bottom: 0 }
.interestedArticles .cnts li .num { float: right; display: inline-block; width: 36px; height: 36px; background: #e8e8e8; font-family: Arial; color: #0277bd; font-size: 20px; text-align: center; line-height: 1.8; margin: 6px 0 0 10px }
.interestedArticles .cnts li p { display: inline-block; width: calc(100% - 46px);   font-size: 13px; color: #000; text-align: right; direction: rtl; height: 50px; overflow: hidden }
.interestedArticles .cnts li:hover p { color: #0277bd }
.proPlayer .interestedArticles { border-radius: 6px }

@media only screen and (max-width: 1023px) {
      .interestedArticles { margin: 0 0 20px; width: 100%; }
    .interestedArticles .cnts li { margin-bottom: 20px }
    .interestedArticles .cnts li .num { position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin: 0 }
    .interestedArticles .cnts li p { height: auto; margin-right: 46px }
    .olympic .interestedArticles .cnts li .num { position: relative; float: right; top: auto; right: auto; transform: none; font-size: 14px }
    .olympic .interestedArticles .cnts li p { margin-right: 0 }
}

@media screen and (min-width:320px) and (max-width:767px) {
     .interestedArticles { width: 100%; padding: 5px 10px 10px; margin: 0 0 20px }
    .interestedArticles .cnts li p { font-size: 12px }
}