.ranking_content { padding-top: 86px; }
.top-sect { position: fixed; left: 0; top: 0; width: 100%; }

.ranking_new {  }
.ranking_new h3 { padding: 0; }
.ranking_new img { width: auto; max-width: 100%; vertical-align: top; }
.ranking_new a,
.ranking_new button { cursor: pointer; }
.ranking_new *:focus { outline-color: transparent; }

.ranking_tabs { position: fixed; left: 0; top: 0; width: 100%; z-index: 10; margin-top: 47px; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; border-bottom: 1px solid #ff7b1c; background-color: #fff; }
.ranking_tabs > a { flex: 0 0 auto; -webkit-flex: 0 0 auto; text-align: center; font-size: 14px; line-height: 37px; color: #9c9c9c; border-bottom: 1px solid #fff; font-weight: 700; margin-left: 10px; }
.ranking_tabs:lang(en) > a {}
.ranking_tabs:lang(ja) > a {flex: 0.3; -webkit-flex: 0.3}
.ranking_tabs:lang(zh) > a {}
.ranking_tabs > a:first-child { margin-left: 0; }
.ranking_tabs > a.active { color: #ff7b1c; border-color: #ff7b1c; }

.ranking_detail { padding: 9px 6px; }
.ranking_detail ul { counter-reset: ranking; }
.ranking_detail ul:after { display: block; content: ''; clear: both; }
.ranking_detail ul > li { float: left; box-sizing: border-box; }
.ranking_detail ul > li > a { display: block; position: relative; }

.select_ranking_week_month { position: relative; text-align: center; margin-bottom: 9px; }
.select_ranking_week_month > div { margin: 0 auto; color: #ff7b1c; font-size: 0; }
.select_ranking_week_month > div h3 { font-weight: 900; color: inherit; font-size: 15px; line-height: 1; display: inline-block; vertical-align: middle; }
.select_ranking_week_month:lang(en) > div h3 {font-size:12px;}
.select_ranking_week_month:lang(ja) > div h3 {}
.select_ranking_week_month:lang(zh) > div h3 {}
.select_ranking_week_month > div .prev_week { padding: 10px; color: inherit; font-size: 12px; transform: scale(-1); -webkit-transform: scale(-1); vertical-align: middle; }
.select_ranking_week_month > div .next_week { padding: 10px; color: inherit; font-size: 12px; vertical-align: middle; }
.select_ranking_week_month .btn_ranking_benefit { position: absolute; top: 50%; right: 0px; padding: 10px; color: #ff7b1c; font-size: 12px; font-weight: 700; line-height: 1; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); }
.select_ranking_week_month .btn_ranking_benefit i { color: #fff; background-color: #ff7b1c; width: 12px; height: 12px; display: inline-block; vertical-align: middle; border-radius: 50px; font-size: 10px; }

/* 실시간 */
.ranking_realtime li { width: 32%; margin: 2% 0 0 2%; background-color: #fff; border: 1px solid #d7d7d7;  }
.ranking_realtime li:nth-child(-n+3) { margin-top: 0; }
.ranking_realtime li:first-child,
.ranking_realtime li:nth-child(3n+4) { margin-left: 0; }
.ranking_realtime li { border-radius: 15px; background-color:#fff; }
.ranking_realtime li[class^='rank_'] { border: 1px solid #52b6e7; padding: 11px; }
.ranking_realtime li > a > dfn { position: absolute; left: 0; top: 0; z-index: 5; }
.ranking_realtime li > a > dfn:before { position: absolute; left: 7px; top: 7px; content: counter(ranking); counter-increment: ranking; width: 27px; height: 27px; color: #fff; background-color: #52b6e7; font-size: 13px; line-height: 27px; text-align: center; font-style: oblique; text-indent: -5px; font-weight: 700; border-radius: 100px; }
.ranking_realtime li[class^='rank_'] > a > dfn:before { content: counter(ranking); font-size: 0; line-height: 0; width: 0; height: 0; overflow: hidden; }
.ranking_realtime li[class^='rank_'] > a > dfn > img { width: 31px; }
.ranking_realtime li .thum { background-size: cover; background-position: center 0; background-repeat: no-repeat; border-radius: 15px 15px 0 0; }
.ranking_realtime li[class^='rank_'] .thum { position: relative; border: 5px solid #52b6e7; border-radius: 30px; }
.ranking_realtime li .thum img { border-radius: 15px; }
.ranking_realtime li.rank_1 .thum img,
.ranking_realtime li.rank_2 .thum img,
.ranking_realtime li.rank_3 .thum img {  }
.ranking_realtime li.rank_1 .thum:after { content: ''; position: absolute; left: 0; bottom: -10px; width: 100%; height: 38px; background: url('/asset/common/images/ranking/icon_rank1_blue.png') no-repeat center bottom; background-size: 100%; }
.ranking_realtime li.rank_2 .thum:after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 32px; height: 38px; margin-left: -32px; background: url('/asset/common/images/ranking/icon_rank2.png') no-repeat center bottom; background-size: 100%; }
.ranking_realtime li.rank_3 .thum:after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 32px; height: 38px; margin-left: -32px; background: url('/asset/common/images/ranking/icon_rank3.png') no-repeat center bottom; background-size: 100%; }
.ranking_realtime li dl { text-align: center; padding: 0 6px 11px 6px; margin-top: 7px; }
.ranking_realtime li[class^='rank_'] dl { padding: 0; }
.ranking_realtime li dt { margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #808080; font-size: 16px; font-weight: 700; line-height: 1.2; }
.ranking_realtime li dd { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap;  }
.ranking_realtime li dd div { font-size: 12px; line-height: 1; letter-spacing: -0.5px; color: #818181; }
.ranking_realtime li dd div img { height: 12px; }
.ranking_realtime > p { margin:5px 3px; }

/* 신입 */
.ranking_support li { width: 32%; margin: 2% 0 0 2%; background-color: #fff; border: 1px solid #d7d7d7;  }
.ranking_support li:nth-child(-n+3) { margin-top: 0; }
.ranking_support li:first-child,
.ranking_support li:nth-child(3n+4) { margin-left: 0; }
.ranking_support li { border-radius: 15px; background-color:#fff; }
.ranking_support li[class^='rank_'] { border: 1px solid #52b6e7; padding: 11px; }
.ranking_support li > a > dfn { position: absolute; left: 0; top: 0; z-index: 5; }
.ranking_support li > a > dfn:before { position: absolute; left: 7px; top: 7px; content: counter(ranking); counter-increment: ranking; width: 27px; height: 27px; color: #fff; background-color: #52b6e7; font-size: 13px; line-height: 27px; text-align: center; font-style: oblique; text-indent: -5px; font-weight: 700; border-radius: 100px; }
.ranking_support li[class^='rank_'] > a > dfn:before { content: counter(ranking); font-size: 0; line-height: 0; width: 0; height: 0; overflow: hidden; }
.ranking_support li[class^='rank_'] > a > dfn > img { width: 31px; }
.ranking_support li .thum { background-size: cover; background-position: center 0; background-repeat: no-repeat; border-radius: 15px 15px 0 0; background-color: #f0f0f0; }
.ranking_support li[class^='rank_'] .thum { position: relative; border: 5px solid #52b6e7; border-radius: 30px; }
.ranking_support li .thum img { border-radius: 15px; }
.ranking_support li.rank_1 .thum img,
.ranking_support li.rank_2 .thum img,
.ranking_support li.rank_3 .thum img {  }
.ranking_support li.rank_1 .thum:after { /*content: '';*/ position: absolute; left: 0; bottom: -10px; width: 100%; height: 38px; background: url('/asset/common/images/ranking/icon_rank1_blue.png') no-repeat center bottom; background-size: 100%; }
.ranking_support li.rank_2 .thum:after { /*content: '';*/ position: absolute; left: 50%; bottom: -10px; width: 32px; height: 38px; margin-left: -32px; background: url('/asset/common/images/ranking/icon_rank2.png') no-repeat center bottom; background-size: 100%; }
.ranking_support li.rank_3 .thum:after { /*content: '';*/ position: absolute; left: 50%; bottom: -10px; width: 32px; height: 38px; margin-left: -32px; background: url('/asset/common/images/ranking/icon_rank3.png') no-repeat center bottom; background-size: 100%; }
.ranking_support li dl { text-align: center; padding: 0 6px 11px 6px; margin-top: 7px; }
.ranking_support li[class^='rank_'] dl { padding: 0; }
.ranking_support li dt { margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #808080; font-size: 16px; font-weight: 700; line-height: 1.2; }
.ranking_support li dd { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap;  }
.ranking_support li dd div { font-size: 12px; line-height: 1; letter-spacing: -0.5px; color: #818181; }
.ranking_support li dd div img { height: 12px; }
.ranking_support > p { margin:5px 3px; }

/* 주간 */
.ranking_application li { width: 32%; margin: 2% 0 0 2%; background-color: #fff; border: 1px solid #d7d7d7;  }
.ranking_application li:nth-child(-n+3) { margin-top: 0; }
.ranking_application li:first-child,
.ranking_application li:nth-child(3n+4) { margin-left: 0; }
.ranking_application li { border-radius: 15px; background-color:#fff; }
.ranking_application li[class^='rank_'] { border: 1px solid #ff7b1c; padding: 20px 7px 11px 7px; }
.ranking_application li > a > dfn { position: absolute; left: 0; top: 0; z-index: 5; }
.ranking_application li > a > dfn:before { position: absolute; left: 7px; top: 7px; content: counter(ranking); counter-increment: ranking; width: 27px; height: 27px; color: #fff; background-color: #ff7b1c; font-size: 13px; line-height: 27px; text-align: center; font-style: oblique; text-indent: -5px; font-weight: 700; border-radius: 100px; }
.ranking_application li[class^='rank_'] > a > dfn:before { content: counter(ranking); font-size: 0; line-height: 0; width: 0; height: 0; overflow: hidden; }
.ranking_application li[class^='rank_'] > a > dfn > img { width: 31px; }
.ranking_application li .thum { background-size: cover; background-position: center 0; background-repeat: no-repeat; border-radius: 15px 15px 0 0; }
.ranking_application li[class^='rank_'] .thum { position: relative; border-radius: 30px; margin-bottom: 15px; }
.ranking_application li[class^='rank_'] .thum:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('/asset/common/images/ranking/bg_octagon.png') no-repeat center / 100%; }
.ranking_application li[class^='rank_'] .thum > div {overflow: hidden;transform: rotate(45deg);-webkit-transform: rotate(45deg) scale(0.9);transform-origin: center;-webkit-transform-origin: center;border-radius: 36%;}
.ranking_application li[class^='rank_'] .thum > div p { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform-origin: center; -webkit-transform-origin: center; background-size: cover; background-repeat: no-repeat; background-position: center; }
.ranking_application li .thum img { border-radius: 15px; /* max-width: calc(100% - 18px); max-width: -webkit-calc(100% - 18px);  */}
.ranking_application li.rank_1 .thum img,
.ranking_application li.rank_2 .thum img,
.ranking_application li.rank_3 .thum img {  }
.ranking_application li.rank_1 .thum:after { content: ''; position: absolute; left: 0; bottom: -10px; width: 100%; height: 58px; background: url('/asset/common/images/ranking/icon_rank1_red.png') no-repeat center bottom; background-size: 100%; }
.ranking_application li.rank_2 .thum:after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 32px; height: 38px; margin-left: -32px; background: url('/asset/common/images/ranking/icon_rank2.png') no-repeat center bottom; background-size: 100%; }
.ranking_application li.rank_3 .thum:after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 32px; height: 38px; 2017-11-07margin-left: -32px; background: url('/asset/common/images/ranking/icon_rank3.png') no-repeat center bottom; background-size: 100%; }
.ranking_application li dl { position: relative; text-align: center; padding: 0 6px 11px 6px; margin-top: 7px; }
.ranking_application li[class^='rank_'] dl { padding: 0; }
.ranking_application li dt {margin-bottom: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #ff7b1c;font-size: 12px;font-weight: 700;text-align: center;padding-right: 35px;line-height: 1.2;}
.ranking_application li dd { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap;  }
.ranking_application li dd div { font-size: 12px; line-height: 1; letter-spacing: -0.5px; color: #818181; }
.ranking_application li dd div:first-child { position: absolute; top: 1px; right: 10px; line-height: 1; }
.ranking_application li[class^='rank_'] dd div:first-child { right: 0; }
.ranking_application li dd div img { height: 12px; }

/* 월간 */
.ranking_monthly li { width: 32%; margin: 2% 0 0 2%; background-color: #fff; border: 1px solid #d7d7d7;  }
.ranking_monthly li:nth-child(-n+2) { margin-top: 0; width: 49%; }
.ranking_monthly li:first-child,
.ranking_monthly li:nth-child(3n+3) { margin-left: 0; }
.ranking_monthly li { border-radius: 15px; background-color:#fff; }
.ranking_monthly li[class^='rank_'] { border: 1px solid #ff7b1c; padding: 20px 7px 11px 7px; }
.ranking_monthly li.rank_1,
.ranking_monthly li.rank_2 { padding: 11px 20px; }
.ranking_monthly li > a > dfn { position: absolute; left: 0; top: 0; z-index: 5; }
.ranking_monthly li > a > dfn:before { position: absolute; left: 7px; top: 7px; content: counter(ranking); counter-increment: ranking; width: 23px; height: 23px; color: #fff; background-color: #ff7b1c; font-size: 16px; line-height: 23px; text-align: center; font-style: oblique; text-indent: -5px; font-weight: 700; border-radius: 100px; }
.ranking_monthly li[class^='rank_'] > a > dfn:before { content: counter(ranking); font-size: 0; line-height: 0; width: 0; height: 0; overflow: hidden; }
.ranking_monthly li[class^='rank_'] > a > dfn > img { width: 31px; }
.ranking_monthly li.rank_1 > a > dfn,
.ranking_monthly li.rank_2 > a > dfn { width: 45px; left: -5px; top: -5px; }
.ranking_monthly li.rank_1 > a > dfn > img,
.ranking_monthly li.rank_2 > a > dfn > img { width: 45px; }
.ranking_monthly li .thum { background-size: cover; background-position: center 0; background-repeat: no-repeat; border-radius: 15px 15px 0 0; }
.ranking_monthly li[class^='rank_'] .thum { position: relative; border-radius: 30px; margin-bottom: 15px; }
.ranking_monthly li[class^='rank_'] .thum:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('/asset/common/images/ranking/bg_octagon.png') no-repeat center / 100%; }
.ranking_monthly li[class^='rank_'] .thum > div {overflow: hidden;transform: rotate(45deg) scale(0.9);-webkit-transform: rotate(45deg) scale(0.9); transform-origin: center;-webkit-transform-origin: center;border-radius: 36%;}
.ranking_monthly li[class^='rank_'] .thum > div p { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform-origin: center; -webkit-transform-origin: center; background-size: cover; background-repeat: no-repeat; background-position: center; }
.ranking_monthly li .thum img { border-radius: 15px; /* max-width: calc(100% - 18px); max-width: -webkit-calc(100% - 18px);  */}
.ranking_monthly li.rank_1 .thum img,
.ranking_monthly li.rank_2 .thum img,
.ranking_monthly li.rank_3 .thum img {  }
.ranking_monthly li.rank_1 .thum:after { content: ''; position: absolute; left: 0; bottom: -10px; width: 100%; height: 70px; background: url('/asset/common/images/ranking/icon_rank1_red.png') no-repeat center bottom; background-size: 100%; }
.ranking_monthly li.rank_2 .thum:after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 50px; height: 70px; margin-left: -50px; background: url('/asset/common/images/ranking/icon_rank2.png') no-repeat center bottom; background-size: 100%; }
.ranking_monthly li.rank_3 .thum:after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 32px; height: 38px; margin-left: -32px; background: url('/asset/common/images/ranking/icon_rank3.png') no-repeat center bottom; background-size: 100%; }
.ranking_monthly li.rank_4 .thum:after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 32px; height: 38px; margin-left: -32px; background: url('/asset/common/images/ranking/icon_rank4.png') no-repeat center bottom; background-size: 100%; }
.ranking_monthly li.rank_5 .thum:after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 32px; height: 38px; margin-left: -32px; background: url('/asset/common/images/ranking/icon_rank5.png') no-repeat center bottom; background-size: 100%; }
.ranking_monthly li dl { position: relative; text-align: center; padding: 0 6px 11px 6px; margin-top: 7px; }
.ranking_monthly li[class^='rank_'] dl { padding: 0; }
.ranking_monthly li dt {margin-bottom: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #ff7b1c;font-size: 12px;font-weight: 700;text-align: center;padding-right: 30px;line-height: 1.2;}
.ranking_monthly li.rank_1 dt,
.ranking_monthly li.rank_2 dt { font-size: 16px; }
.ranking_monthly li dd { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap;  }
.ranking_monthly li dd div { font-size: 12px; line-height: 1; letter-spacing: -0.5px; color: #818181; }
.ranking_monthly li dd div:first-child { position: absolute; top: 1px; right: 10px; line-height: 1; }
.ranking_monthly li:not(:nth-child(-n+2)) dd div {min-width: 36px;}
.ranking_monthly li[class^='rank_'] dd div:first-child { right: 0; }
.ranking_monthly li.rank_1 dd div:first-child,
.ranking_monthly li.rank_2 dd div:first-child { top: 5px; }
.ranking_monthly li dd div img { height: 12px; }

/* 랭킹혜택 팝업 */
#ps_ranking_benefit { }
#ps_ranking_benefit .popup_schedule_wrap { border-radius: 10px; border: 1px solid #ed7190; }
#ps_ranking_benefit .popup_schedule_head h4 { font-size: 21px; color: #7a7a7a; padding-bottom: 3px; border-bottom: 1px solid #ed7190; font-weight: 700; text-align: left; padding-left: 7px; }
#ps_ranking_benefit .popup_schedule_head i { background-color: #ed7190; color: #fff; text-align: center; display: inline-block; width: 20px; height: 20px; line-height: 20px; font-size: 16px; border-radius: 50px; font-weight: 400; margin-right: 4px; }
#ps_ranking_benefit .popup_schedule_body { padding-bottom: 0; word-break: keep-all; }
#ps_ranking_benefit .popup_schedule_body li { color: #ff7b1c; font-size: 12px; font-weight: 700; line-height: 1.4; text-align: left; margin-bottom: 10px; }
#ps_ranking_benefit .popup_schedule_body li:last-child { margin-bottom: 0; }
#ps_ranking_benefit .popup_schedule_body li dfn { display: block; }
#ps_ranking_benefit .popup_schedule_body p { text-align: right; color: #999; font-size: 8px; line-height: 1; margin-top: 20px; padding-bottom: 10px; }
#ps_ranking_benefit .popup_schedule_body p em { font-style: normal; font-size: inherit; }

@media all and (orientation: landscape) {
	.ranking_detail li .thum:after {height: 70px !important;background-size: auto 100% !important;width: 100% !important;left: 0 !important;}

	.ranking_detail li dd { justify-content: space-around; -webkit-justify-content: space-around; }
	.ranking_detail li dd > div { margin-left: 10px; }
	.ranking_detail li dd > div:first-child { margin-left: 0; }
	.ranking_monthly li.rank_1 .thum,
	.ranking_monthly li.rank_2 .thum { height: 75.6vh; }
	.ranking_monthly li[class^='rank_'] .thum > div { width: 100%; height: 100%; }
	.ranking_monthly li[class^='rank_'] .thum > div p { width: 100%; height: 100%; }
}

@media all and (orientation: landscape) and (max-width: 568px ) {
	.ranking_monthly li.rank_1 .thum,
	.ranking_monthly li.rank_2 .thum { height: 73vh; }
}

@media all and (max-width: 375px) {
    .ranking_monthly li:not(:nth-child(-n+2)) dd div:first-child { position: static; }
	.ranking_monthly li:not(:nth-child(-n+2)) dt { padding-right: 0; }
    .ranking_monthly li:not(:nth-child(-n+2)) dd div:first-child { position: static; }
	.ranking_monthly li:not(:nth-child(-n+2)) dd div { margin: 3px 0; }
	.ranking_monthly li.rank_1 dt,
	.ranking_monthly li.rank_2 dt { font-size: 14px; }
	.ranking_application li dt { padding-right: 0; }
    .ranking_application li dd div:first-child { position: static; }
	.ranking_application li dd div { margin: 3px 0; }

	.ranking_support li dd div dfn,
	.ranking_realtime li dd div dfn { display: block; }
	.ranking_support li dt,
	.ranking_realtime li dt { font-size: 14px; }
}

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

@media all and (max-width: 320px) {
	.ranking_support li dt,
	.ranking_realtime li dt { font-size: 12px; }

	.ranking_monthly li.rank_1 dt,
	.ranking_monthly li.rank_2 dt { font-size: 12px; }
	.ranking_monthly li.rank_1 dd div:first-child,
	.ranking_monthly li.rank_2 dd div:first-child { top: 3px; }
	.ranking_monthly li:nth-child(-n+2) dd div:not(:first-child) dfn { display: block; }

	.ranking_realtime li[class^='rank_'],
	.ranking_support li[class^='rank_'],
	.ranking_application li[class^='rank_'],
	.ranking_monthly li[class^='rank_']  { padding-left: 10px; padding-right: 10px; padding-top: 10px; }

	.ranking_monthly li:nth-child(-n+2) dd { justify-content: center; -webkit-justify-content: center; }
	.ranking_monthly li:nth-child(-n+2) dd > div { margin-left: 10px; }
	.ranking_monthly li:nth-child(-n+2) dd > div:first-child { margin-left: 0; }
}