/* 메인표시 부분*/

.main_more { background: #f1f1f1;padding:2px 0; text-align: center;font-weight: bold; }

.toprank { padding:1px 3px; background: #ff2600; color:white; margin-right:3px;border-radius: 3px; }
.normalrank { padding:1px 3px; background: #5c5d61; color:white; margin-right:3px;border-radius: 3px; }
.m_spo_title { background:red;color:white;font-size:12px;padding:2px 4px; }

.m_timg { display:flex;flex-wrap: nowrap;align-items:center;padding:5px 0;border-bottom: 1px solid #e2e2e2;cursor:pointer; }
.m_timg .width { width:100px; }
.m_subject { width:100%;text-align:left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }
.m_subject .title { font-size:15px;font-weight:bold; }
.m_star { color:rgba(255,0,81,0.95); }
.m_date { width:100px;margin-left:5px; }

.m_timg .img { width:100px;margin-right:5px; }
.m_timg .rank_title { width:100%;text-align:left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }
.rank_title .w_title { font-size:15px;font-weight:bold; }
.rank_title .w_subtitle { font-weight:normal;font-size:11px; }
.m_img { display: grid;width: 100%;place-items: center;grid-template-columns: repeat(4, 24%);justify-content:space-between;cursor: pointer; }
.m_img .title { text-align: center;line-height: 27px;width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }
.m_img .width { width:100%; }
/* 탭관련 */
.swiper-container {
    width: 100%;
    height: 100%;

}

.swiper-slide {
    margin-top: 40px;
    background: #ffffff;
    color: #333;
    font-size: 1.8rem;
    height: 100%;
    text-align: left;

}

.swiper-container-horizontal > .swiper-pagination {
    top: 0;
    bottom: auto;
    text-align: left;

}

.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {
    margin: 0;
}

.active-mark {
    background: #006cd9;
    height: 3px;
    position: absolute;
    top: 37px;
}

.swiper-pagination-bullet {
    background-color: #ffffff;
    border-radius: 0;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
    opacity: 1;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.swiper_tab4.swiper-pagination-bullet:nth-of-type(1).swiper-pagination-bullet-active ~ .active-mark {
    left: 0%;
}

.swiper_tab4.swiper-pagination-bullet:nth-of-type(2).swiper-pagination-bullet-active ~ .active-mark {
    left: 25%;
}

.swiper_tab4.swiper-pagination-bullet:nth-of-type(3).swiper-pagination-bullet-active ~ .active-mark {
    left: 50%;
}

.swiper_tab4.swiper-pagination-bullet:nth-of-type(4).swiper-pagination-bullet-active ~ .active-mark {
    left: 75%;
}

.swiper_tab2.swiper-pagination-bullet:first-of-type.swiper-pagination-bullet-active ~ .active-mark {
    left: 0;
}

.swiper_tab2.swiper-pagination-bullet:nth-of-type(1).swiper-pagination-bullet-active ~ .active-mark {
    left: 0%;
}

.swiper_tab2.swiper-pagination-bullet:nth-of-type(2).swiper-pagination-bullet-active ~ .active-mark {
    left: 50%;
}

.swiper_tab2.swiper-pagination-bullet:first-of-type.swiper-pagination-bullet-active ~ .active-mark {
    left: 0;
}

.swiper_tab4 { width:25% }
.swiper_tab2 { width:50% }

.swiper-pagination-bullet-active {
    font-weight: bold;
}

/*.backdiv img {*/
/*    object-fit: cover;*/
/*    width: 100px;*/
/*    height: 50px;*/
/*}*/

.card {
    height: 25rem;
    width: 25rem;
    position: relative;
    overflow: hidden;
    float: left;
}

/* My image inside the above div wrapper */

.cardsize {
    width: 70px !important;
}

.youtubesize {
    width: 120px !important
}

.Thum_img {
    width: 100% !important;
}

.card img {
    top: 50%;
    left: 50%;
    position: relative;
    height: auto;
    width: auto;
    transform: translate(-50%, -50%);
}

/* To display vertical block */

.card.vertical {
    width: 70px;
    height: 40px;
}

.card.vertical1 {
    width: 100%;
    height: 130px;
}

.card.vertical2 {
    width: 100%;
    height: 75%;
}