/* 공통 */
.container-body[min-width~="1312px"] .container{max-width:800px}
.row-index{padding-bottom:30px}
.list-top-state{display:table; width:100%}
.info h3{font-weight:500}
.list-category{margin-right:10px; font-size:13px; color:#888}

/* 공감, 공유수 */
.info .view{display:inline-block}
.share, .emo{margin-top:5px; display:inline-block; font-size:13px; color:#999}
.share::before, .emo::before{display:inline-block; margin-right:5px; background-size:100%}
.share::before{content:''; width:16px; height:12px;  background:url(../images/ico_share_sm.png)no-repeat}
.emo::before{content:''; width:16px; height:16px; vertical-align:top; background:url(../images/ico_emo_sm.png)no-repeat}

/*======= retina =======*/
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .share::before{background:url(../images/ico_share_sm@2x.png)no-repeat; background-size:100%}
  .emo::before{background:url(../images/ico_emo_sm@2x.png)no-repeat; background-size:100%}
}

@media (min-width:672px){
    .video-list .thum{width:168px; height:94px}
    .video-list .best{font-size:18px; width:40px}
}

/* emotion */
.emotion{margin-bottom:20px; font-size:14px; overflow:hidden}
.emotion dt{font-weight:600; float:left; margin-right:10px}
.emotion .txt{font-size:11px; line-height:1.2; color:#666}
.emotion .txt.on{color:#3958F6}
.emotion .state{font-size:14px; font-weight:600; margin-top:1px}
.emotion .emotion-action{text-align:center; max-width:620px; margin:0 auto}
.emotion .emotion-action a{width:20%; display:inline-block; float:left; padding:3px; text-align:center}
.emotion .emotion-action a::before{content:''; width:45px; height:45px; display:inline-block; background-repeat:no-repeat}
.emotion .emotion-action a.thank::before{background:url(../images/ico_emo_thank.png) center; background-size:100%}
.emotion .emotion-action a.impression::before{background:url(../images/ico_emo_impress.png) center; background-size:100%}
.emotion .emotion-action a.hope::before{background:url(../images/ico_emo_hope.png) center; background-size:100%}
.emotion .emotion-action a.repent::before{background:url(../images/ico_emo_repent.png) center; background-size:100%}
.emotion .emotion-action a.comfort::before{background:url(../images/ico_emo_comfort.png) center; background-size:100%}

/*======= retina =======*/
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .content-info .total::after{background:url(../images/ico_arrow_lang2@2x.png)no-repeat; background-size:100%}
  .emotion .emotion-action a.thank::before{background:url(../images/ico_emo_thank@2x.png) center; background-size:100%}
  .emotion .emotion-action a.impression::before{background:url(../images/ico_emo_impress@2x.png) center; background-size:100%}
  .emotion .emotion-action a.hope::before{background:url(../images/ico_emo_hope@2x.png) center; background-size:100%}
  .emotion .emotion-action a.repent::before{background:url(../images/ico_emo_repent@2x.png) center; background-size:100%}
  .emotion .emotion-action a.comfort::before{background:url(../images/ico_emo_comfort@2x.png) center; background-size:100%}
}

@media (min-width:414px){
  .emotion .txt{font-size:13px; line-height:1.3}	
  .emotion .emotion-action a{padding:6px}
  .emotion .emotion-action a::before{content:''; width:55px; height:50px}
}