@media screen and (max-width:768px) {
  #loading span{font-size:20px;line-height:20px;top:57%;}
  .mobile{display:block !important;}
  .pc{display:none !important;}

  /* 랭킹 */
  .subcontainer .topBanner.ranking{height: 208px;background-size: 200%;}
  .subcontainer .topBanner.ranking h2{padding: 127px 0 0;font-size: 28px;line-height: 34px;}
  .subcontainer .topBanner.ranking h2 span{width: 30px;height: 26px;background-size: 30px;}

  #container .realRanking .inner{padding: 0 30px 20px;}
  .realRanking h3{font-size: 16px;line-height: 25px;word-break: keep-all;}
  .realRanking h3 span{font-size: 18px;line-height: 25px;}

  .rankBox{padding: 0;margin-bottom: 10px;}
  .rankBox::before{left: 3px;top: 3px;transform: none;-webkit-transform: none;-moz-transform: none;width: 20px;height: 20px;font-size: 16px;line-height: 20px;text-indent: -1px;}
    .rankBox.ranknum::before{    background: #758ECD;font-size:10px;letter-spacing:0;}
  .rankBox.rank1::before{background-size: 20px;}
  .rankBox.rank2::before{background-size: 20px;}
  .rankBox.rank3::before{background-size: 20px;}
  .rankBox dl{height: 92px;}
  .rankBox dt{width: 90px;height: 90px;}
  .rankBox dd{padding: 8px 6px;width: calc(100% - 26px - 90px);height: 62px;}
  .rankBox dd h4{font-size: 18px;line-height: 27px;}
  .rankBox dd ol{margin: 0 0 1px;}
  .rankBox dd ol li{font-size: 14px;line-height: 20px;}
  .rankBox dd ol li span{font-size: 14px;line-height: 20px;}
  .rankBox dd small{font-size: 14px;line-height: 20px;}
  .rankBox dd small span{font-size: 14px;line-height: 20px;}

}

.subcontainer .topBanner.media{ height: 208px;background-size: 200%;}
.subcontainer .topBanner.media{background: url(../images-v4/media_banner.png) no-repeat;background-size:cover;}
.subcontainer .topBanner.media h2{padding: 127px 0 0;font-size: 28px;line-height: 34px;font-weight: 500;letter-spacing: -1px;color: #322D4F;}

.mediaList{width:100%;padding:20px 20px 40px 20px;box-sizing:border-box;}
.mediaList > ul > li{position:relative;width:100%;display:block;padding-top:14px;border-bottom:1px solid #E1E1E1;}
.mediaList > ul > li .title{padding-bottom:14px;cursor:pointer;}
.mediaList > ul > li .title .tt{font-size:16px;color:#322D4F;line-height:26px;font-weight:500;word-break:keep-all;}
.mediaList > ul > li .title .date{margin-top:3px;font-size:12px;color:#7C7C7C;}
.mediaList > ul > li .title .date:after{content:'';position:absolute;right:10px;margin-top:5px;display:inline-block;width:14px;height:14px;background: url(../images-v4/md_plus.png) no-repeat center center;background-size:14px auto;}
.mediaList > ul > li .cont{display:none;padding-bottom:25px;font-size:14px;line-height:26px;color:#363636;}
.mediaList > ul > li.on .title .tt{color:#6131CE;}
.mediaList > ul > li.on .title .date:after{background: url(../images-v4/md_min.png) no-repeat center center;background-size:14px auto;}
.mediaList .more_btn{display:block;margin-top:10px;font-size:16px;color:#fff;line-height:46px;background:#7C7C7C;text-align:center;}

#container .realRanking .inner{width: calc(100% - 40px);padding:0 20px 20px;}
.realRanking h3{padding-bottom:15px;}
.rankTab{width:100%;max-width:300px;margin:0 auto;margin-bottom:15px;background:#fff;border-radius:20px;}
.rankTab li{display:inline-block;width:33.3333%;text-align:center;}
.rankTab li a{display:block;font-size:14px;line-height:38px;color:#7C7C7C;}
.rankTab li a.on{border-radius:20px;background:#CCD4E7;color:#322D4F;font-weight:500;}
/*.rankBox::before{left:10px;top:8px;}*/
/*.rankBox dd{width:calc(100% - 12px - 90px);}*/
.rankBox dd h4{padding-bottom:2px;}
.rankBox dt{padding:10px;box-sizing:border-box;}
.rankBox dd ol li{font-size:12px;margin-right:8px;color:#322D4F;}
.rankBox dd ol li span{margin-left:2px;}
.rankBox dd ol li.star span{padding-left: 14px;margin-left: 0;background: url(../images-v4/reviewStarBB2.png) no-repeat left center;background-size:auto 12px;}
.rankBox.ranknum::before{    background: #758ECD;letter-spacing:0;}

@media screen and (max-width:340px) {
	.rankBox dd ol li{font-size:11px;margin-right:5px;color:#322D4F;}
}