@charset "utf-8";

/* 내용관리 */
#ctt {margin:10px 0 20px;padding:0;background:#fff}
.ctt_admin {text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0;line-height:1.6em}
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}

.pageNotice {color:#fff;font-size:16px;background:#2d2d38;border-radius:6px;padding:18px 22px;display:flex;align-items:start;line-height:1.5;margin-bottom:30px;}
.pageNotice i {margin-right:9px;color:#ff0000;font-size:22px;}

.rankTab {margin-bottom:24px;}
.rankTab .rankTabBtn {font-size:24px;font-weight:700;color:#9f9f9f;text-decoration:underline;display:inline-block;margin-right:12px;background:transparent;}
.rankTab .rankTabBtn.on {color:#ff0000;}

.slideTabWrap {position:relative;padding:0 24px;margin-bottom:16px;}
.slideTabWrap .swiper-button-next {width:auto;right:2px;color:#000;}
.slideTabWrap .swiper-button-prev {width:auto;left:2px;color: #000;}
.slideTabWrap .swiper-button-next:after,
.slideTabWrap .swiper-button-prev:after {font-size:18px;}
.slideTabWrap .slideTab .swiper-slide {width:auto;}
.slideTabWrap .slideTabBtn {font-size:14px;height:32px;line-height:32px;padding:0 14px;border:1px solid #2d2d38;border-radius:100px;background-color:#fff;display:flex;align-items:center;}
.slideTabWrap .slideTabBtn.on {color:#fff;background-color: #ff0000;border-color:#ff0000;}
.slideTabWrap .slideTabBtn.on:before {content:'';width:9px;height:12px;background:url(/img/slide_tab_btn_on.png) no-repeat center/contain;margin-right:6px;}

.rankSearch {display:flex;align-items:center;width: 300px;position:relative;max-width:100%;margin-bottom:32px;}
.rankSearch:after {content:'';width:18px;height:18px;display:inline-block;position:absolute;right:12px;background:url(/img/search_icon.png) no-repeat center/contain;top:50%;transform:translateY(-50%);}
.rankSearch .searchInput {width:100%;padding:0 40px 0 15px;height:34px;border:1px solid #2d2d38;background:#FFF;border-radius: 100px;}

.rankTable table {width:100%;text-align:center;border-collapse:separate;border-spacing:0 5px;}
.rankTable thead th {background-color: #2d2d38;color:#fff;font-size:14px;height:52px;}
.rankTable tbody tr {border:1px solid #f2f2f2;box-shadow:0 0 3px 0 rgba(120, 120, 120, .1);}
.rankTable tbody tr:nth-child(1) {border:0;background-color:#f8f0d2;}
.rankTable tbody tr:nth-child(2) {border:0;background-color:#f2f2ef;}
.rankTable tbody tr:nth-child(3) {border:0;background-color:#f1ebe4;}
.rankTable tbody tr:nth-child(1) td:first-child:before {content:'';position:absolute;width:8px;left: 0;top:0;bottom:0;background-color: #deb51f;}
.rankTable tbody tr:nth-child(2) td:first-child:before {content:'';position:absolute;width:8px;left: 0;top:0;bottom:0;background-color: #bdbdbd;}
.rankTable tbody tr:nth-child(3) td:first-child:before {content:'';position:absolute;width:8px;left: 0;top:0;bottom:0;background-color: #bb9d77;}
.rankTable tbody td {font-size:14px;height: 52px;font-weight:500;position: relative;border:1px solid #f2f2f2;border-width:1px 0;letter-spacing: 1px;word-break:break-word;}
.rankTable tbody td:first-child {border-left-width:1px;}
.rankTable tbody td:last-child {border-right-width:1px;}
.rankTable tbody .total {color:#ff0000;}
.rankTable tbody .blue_txt {color:#1e90ff;font-weight:700;}
.rankTable tbody .purple_txt {color:#8b5cf6;font-weight:700;}
@media all and (max-width:1024px){
    .rankContainer {padding:0 16px 24px;}
    .pageNotice { font-size: 13px;padding: 12px 12px;margin-bottom: 24px;}
    .pageNotice i {margin-right:6px;font-size:20px;}

    .rankTab {margin-bottom:20px;;}
    .rankTab .rankTabBtn {font-size:20px;margin-right:8px;}

    .slideTabWrap {margin-bottom:24px;}
    .slideTabWrap .swiper-button-next:after,
    .slideTabWrap .swiper-button-prev:after {font-size:14px;}
    
    .rankSearch {width:100%;}

    .rankTable thead th {font-size:12px;height:46px;}
    .rankTable tbody td {font-size:12px;height:46px;padding:7px 0;}
    .rankTable tbody td img {height:26px;}

    .rankTable tbody tr:nth-child(1) td:first-child:before {width:4px;}
    .rankTable tbody tr:nth-child(2) td:first-child:before {width:4px;}
    .rankTable tbody tr:nth-child(3) td:first-child:before {width:4px;}
}

@media all and (max-width:520px){
}