@charset "utf-8";			

/********
 헤더
*/
#rankingPageHeader{width:960px;margin:0 auto;padding-top:64px;}
#rankingPageHeader .page_title{line-height:38px;}
#rankingPageHeader .rank_category_wrap{margin-top:38px;line-height:27px;border-bottom:solid 1px #ebeff8;}
#rankingPageHeader .rank_category_wrap a{display:inline-block;}
#rankingPageHeader .rank_category_wrap .category_item{padding-bottom:8px;margin:0 10px;border-bottom:solid 2px transparent;transition:color 0.15s linear, border 0.15s linear;user-select:none;}
#rankingPageHeader .rank_category_wrap a:first-child .category_item{margin-left:0;}
#rankingPageHeader .rank_category_wrap .category_item.selected{color:#031827;border-bottom:solid 2px #3f9dff;}
#rankingPageHeader .rank_subcategory_wrap{margin-top:16px;line-height:31px;}
#rankingPageHeader .rank_subcategory_wrap a{margin-right:8px;}
#rankingPageHeader .rank_subcategory_wrap a:last-child{margin-right:0px;}
#rankingPageHeader .rank_subcategory_wrap .subcategory_item{display:inline-block;border-radius:4px;background:#ebeff8;padding:0 8px;cursor:pointer;transition:color 0.1s linear, background 0.1s linear;user-select:none;}
#rankingPageHeader .rank_subcategory_wrap .subcategory_item.selected{background:#3f9dff;color:#FFF;}
@media only screen and (max-width:1000px) and (min-width:600px) {
	.mobile_width #rankingPageHeader{width:calc(100% - 32px);}
}
@media only screen and (max-width:599px) {
	#rankingPageHeader{width:100%;padding-top:46px;}
	#rankingPageHeader .page_title{display:none;}
	#rankingPageHeader .rank_category_wrap{margin-top:0px;line-height:44px;font-size:16px;position:fixed;top:44px;left:0;background:#FFF;z-index:10;}
	#rankingPageHeader .rank_category_wrap .category_item{width:25vw;padding-bottom:0px;margin:0;text-align:center;}
	#rankingPageHeader .rank_subcategory_wrap{line-height:29px;font-size:14px;padding:0 16px;}
	#rankingPageHeader .rank_subcategory_wrap .subcategory_item{padding:0 6px;}	
}

#rankingBody #feedRow.ranking_feed{padding-top:40px;padding-bottom:100px;overflow:unset;}
@media only screen and (max-width:1000px) and (min-width:600px) {
	.mobile_width #rankingBody #feedRow.ranking_feed{padding-left:16px;padding-right:16px;}
}
@media only screen and (max-width:599px) {
	#rankingBody #feedRow.ranking_feed{padding-top:16px;}
}

#rankingBody .feed_title .title_row .title{display:inline-block;line-height:29px;}
#rankingBody .feed_title .sort_wrap{float:right;vertical-align:top;}
#rankingBody .feed_title .sort_wrap .sort_text{line-height:24px;margin-top:5px;}
#rankingBody .feed_title .sort_wrap .input_select_box{margin-top:5px;}
#rankingBody .feed_title .sort_wrap .select_option_wrap{width:120px;}
#rankingBody .feed_title .sort_wrap .select_option_scroll_wrap{max-height:194px;overflow:auto;}
#rankingBody .feed_title .sort_wrap .calendar_select_box{margin-top:5px;}
@media only screen and (max-width:599px) {
	#rankingBody .feed_title .title_row{height:24px;padding:0 16px;}
	#rankingBody .feed_title .title_row .title{display:none;}
	#rankingBody .feed_title .sort_wrap{float:none;}
	#rankingBody .feed_title .sort_wrap .sort_text{line-height:24px;margin-top:0px;}
	#rankingBody .feed_title .sort_wrap .input_select_box{margin-top:0px;}
	#rankingBody .feed_title .sort_wrap .calendar_select_box{margin-top:0px;}
}
#rankingBody #rankingTopAd{margin-top:20px;display:none;}
@media only screen and (max-width:599px) {
	#rankingBody #rankingTopAd{margin:16px auto 0 auto;width:calc(100% - 32px);}
}
#rankingBody .feed_list{margin-top:20px;}
@media only screen and (max-width:599px) {
	#rankingBody .feed_list{margin-top:8px;}
}

#rankingBody .feed_game_rank{width:100%;height:auto;border:none;border-top:solid 1px #ebeff8;border-radius:0px;margin:0;transition:background 0.15s ease-out;}
#rankingBody a + .feed_game_rank{border-top:none;}
#rankingBody .feed_display_ad_wrap + .feed_game_rank{border-top:none;}
#rankingBody .feed_game_rank:first-child{border-top:none;}
#rankingBody .feed_game_rank.show_chart{background:#f3f5fa;}
#rankingBody .game_rank_feed_item{width:100%;height:72px;padding:12px 0;}
@media only screen and (max-width:599px) {
	#rankingBody .feed_game_rank{border-top:none;}
	#rankingBody .game_rank_feed_item{height:80px;padding:0px 16px 12px 16px;}
}

#rankingBody .game_rank_feed_item .rank_info_wrap{width:84px;margin-right:10px;vertical-align:top;}
#rankingBody .game_rank_feed_item .rank_info_wrap.no_diff{width:50px;margin-right:0px;}
#rankingBody .game_rank_feed_item .rank_number{line-height:48px;width:50px;text-align:center;vertical-align:top;}
#rankingBody .game_rank_feed_item .rank_diff{line-height:48px;width:34px;text-align:center;vertical-align:top;}
#rankingBody .game_rank_feed_item .rank_diff img{height:5px;vertical-align:top;margin:22px 2px 0 0;}
#rankingBody .game_rank_feed_item .cover_image{display:inline-block;width:72px;height:48px;border-radius:8px;vertical-align:top;margin-right:16px;}
#rankingBody .game_rank_feed_item .cover_image.mobile_cover{width:48px;}
#rankingBody .game_rank_feed_item .game_info{display:inline-block;width:calc(100% - 472px);padding-top:3px;vertical-align:top;padding-right:12px;}
#rankingBody .game_rank_feed_item .game_info.no_diff{width:calc(100% - 374px);}
#rankingBody .game_rank_feed_item .game_info.mobile_cover{width:calc(100% - 448px);}
#rankingBody .game_rank_feed_item .game_info.mobile_cover.no_diff{width:calc(100% - 350px);}
#rankingBody .game_rank_feed_item .game_info .game_name{line-height:22px;}
#rankingBody .game_rank_feed_item .game_info .game_name .mobile_icon_new{height:20px;margin:1px 4px 0 0;vertical-align:top;}
#rankingBody .game_rank_feed_item .game_info .game_name .no_game_data{display:inline;}
#rankingBody .game_rank_feed_item .game_info .game_company{line-height:18px;margin-top:2px;}
#rankingBody .game_rank_feed_item .user_list_wrap{display:inline-block;position:relative;width:200px;height:48px;line-height:48px;margin-right:12px;vertical-align:top;}
#rankingBody .game_rank_feed_item .user_list_wrap .user_profile_image{width:18px;height:18px;border-radius:9px;border:solid 1px #ced8e5;position:absolute;top:15px;left:0;cursor:pointer;vertical-align:top;background:#FFF;}
#rankingBody .game_rank_feed_item .user_list_wrap .user_cnt_text{position:absolute;top:0;vertical-align:top;max-width:calc(100% - 48px);}
#rankingBody .game_rank_feed_item .button_group{display:inline-block;width:78px;height:48px;vertical-align:top;padding-top:12px;text-align:right;position:relative;}
#rankingBody .game_rank_feed_item .button_group.no_diff{width:24px;}
#rankingBody .game_rank_feed_item .button_group .library_state_button_n{height:24px;padding:2px;cursor:pointer;}
#rankingBody .game_rank_feed_item .button_group .graph_button{height:24px;padding:2px;margin:0 14px;cursor:pointer;}
#rankingBody .game_rank_feed_item .button_group .option_button{height:24px;padding:2px;cursor:pointer;}
#rankingBody .game_rank_feed_item .button_group .menu_option_wrap{position:absolute;width:184px;line-height:44px;background:#FFF;border-radius:8px;box-shadow:0 3px 12px 0 rgba(61, 65, 77, 0.2);top:calc(100% + 8px);right:0;display:none;text-align:left;z-index:5;}
#rankingBody .game_rank_feed_item .button_group .menu_option_wrap.open{display:block;}
#rankingBody .game_rank_feed_item .button_group .menu_option{padding-left:14px;}
#rankingBody .game_rank_feed_item .button_group .menu_option img{height:20px;vertical-align:top;margin-top:12px;margin-right:8px;}
@media only screen and (max-width:599px) {
	#rankingBody .game_rank_feed_item .rank_info_wrap{width:42px;margin-right:0px;vertical-align:top;padding-top:18px;border-top:solid 1px #ebeff8;}
	#rankingBody .feed_game_rank:first-child .game_rank_feed_item .rank_info_wrap{border-top:none;}
	#rankingBody a + .feed_game_rank .game_rank_feed_item .rank_info_wrap{border-top:none;}
	#rankingBody .feed_display_ad_wrap + .feed_game_rank .game_rank_feed_item .rank_info_wrap{border-top:none;}
	#rankingBody .game_rank_feed_item .rank_number{display:block;line-height:25px;width:100%;font-size:17px;}
	#rankingBody .game_rank_feed_item .rank_diff{line-height:15px;width:100%;margin-top:4px;}
	#rankingBody .game_rank_feed_item .rank_diff img{margin:5px 1px 0 0;}
	#rankingBody .game_rank_feed_item .cover_image{float:left;width:56px;height:56px;margin-right:0px;margin-top:12px;}
	#rankingBody .game_rank_feed_item .cover_image.mobile_cover{width:56px;}
	#rankingBody .game_rank_feed_item .game_info{width:calc(100% - 150px);padding-top:20px;border-top:solid 1px #ebeff8;}
	#rankingBody .feed_game_rank:first-child .game_rank_feed_item .game_info{border-top:none;}
	#rankingBody a + .feed_game_rank .game_rank_feed_item .game_info{border-top:none;}
	#rankingBody .feed_display_ad_wrap + .feed_game_rank .game_rank_feed_item .game_info{border-top:none;}
	#rankingBody .game_rank_feed_item .game_info.no_diff{width:calc(100% - 126px);}
	#rankingBody .game_rank_feed_item .game_info.mobile_cover{width:calc(100% - 150px);}
	#rankingBody .game_rank_feed_item .game_info.mobile_cover.no_diff{width:calc(100% - 126px);}
	#rankingBody .game_rank_feed_item .game_info .game_name .mobile_icon_new{margin:1px 2px 0 0;}
	#rankingBody .game_rank_feed_item .user_list_wrap{display:none;}	
	#rankingBody .game_rank_feed_item .button_group{width:52px;padding-top:30px;border-top:solid 1px #ebeff8;height:68px;}
	#rankingBody .feed_game_rank:first-child .game_rank_feed_item .button_group{border-top:none;}
	#rankingBody a + .feed_game_rank .game_rank_feed_item .button_group{border-top:none;}
	#rankingBody .feed_display_ad_wrap + .feed_game_rank .game_rank_feed_item .button_group{border-top:none;}
	#rankingBody .game_rank_feed_item .button_group.no_diff{width:20px;}
	#rankingBody .game_rank_feed_item .button_group .library_state_button_n{height:20px;padding:0px;margin-left:12px;}
	#rankingBody .game_rank_feed_item .button_group.no_diff .library_state_button_n{margin-left:0px;}
	#rankingBody .game_rank_feed_item .button_group .graph_button{height:20px;padding:0px;margin:0;}
	#rankingBody .game_rank_feed_item .button_group .option_button{height:20px;padding:0px;margin-left:12px;}
	#rankingBody .game_rank_feed_item .button_group.no_diff .option_button{margin-left:0px;}
}

#rankingBody .feed_game_rank .chart_wrap{width:100%;height:0px;overflow:hidden;transition:height 0.15s ease-out;}
#rankingBody .feed_game_rank.show_chart .chart_wrap{height:417px;}
#rankingBody .feed_game_rank .chart_wrap .rank_chart_box{width:100%;height:417px;padding:32px 36px 40px 36px;}
#rankingBody .feed_game_rank .chart_wrap .rank_chart_box .rank_chart_header{height:28px;padding:0 12px;}
#rankingBody .feed_game_rank .chart_wrap .rank_chart_box .rank_chart_header .rank_chart_tab{line-height:20px;padding-bottom:6px;border-bottom:2px solid transparent;margin-right:24px;transition:color 0.15s linear, border 0.15s linear;user-select:none;cursor:pointer;}
#rankingBody .feed_game_rank .chart_wrap .rank_chart_box .rank_chart_header .rank_chart_tab:nth-last-child(2){margin-right:0px;}
#rankingBody .feed_game_rank .chart_wrap .rank_chart_box .rank_chart_header .rank_chart_tab.selected{font-weight:700;color:#031827;border-bottom:2px solid #3f9dff;}
#rankingBody .feed_game_rank .chart_wrap .rank_chart_box .rank_chart_header .max_rank{line-height:20px;float:right;vertical-align:top;}
#rankingBody .feed_game_rank .chart_wrap .rank_chart_box .rank_chart_area{margin-top:26px;width:100%;height:291px;}
#rankingBody .feed_game_rank .chart_wrap .rank_chart_box .rank_chart_area canvas{width:100%;height:100%;}
@media only screen and (max-width:599px) {
	#rankingBody .feed_game_rank.show_chart .chart_wrap{height:294px;}
	#rankingBody .feed_game_rank .chart_wrap .rank_chart_box{height:294px;padding:28px 10px 32px 10px;}
	#rankingBody .feed_game_rank .chart_wrap .rank_chart_box .rank_chart_header{height:25px;padding:0 6px;font-size:13px;}
	#rankingBody .feed_game_rank .chart_wrap .rank_chart_box .rank_chart_header .rank_chart_tab{padding-bottom:3px;margin-right:20px;}
	#rankingBody .feed_game_rank .chart_wrap .rank_chart_box .rank_chart_header .max_rank{font-size:12px;}
	#rankingBody .feed_game_rank .chart_wrap .rank_chart_box .rank_chart_area{margin-top:20px;height:189px;}
}

#rankingBody .ranking_banner{margin-top:16px;border-radius:13px;overflow:hidden;width:100%;height:88px;}
#rankingBody .feed_list .ranking_banner{margin:16px 0;}
#rankingBody .ranking_banner .banner_content_wrap{position:relative;height:100%;}
#rankingBody .ranking_banner .background_image{position:absolute;height:100%;top:0;}
#rankingBody .ranking_banner .banner_text_wrap{position:absolute;top:20px;}
#rankingBody .ranking_banner .title{line-height:24px;}
#rankingBody .ranking_banner .text_button{line-height:19px;margin-top:4px;opacity:0.7;}
@media only screen and (max-width:599px) {
	#rankingBody .ranking_banner{margin:16px auto 0 auto;width:calc(100vw - 32px);}
	#rankingBody .feed_list .ranking_banner{margin:16px auto;}
	#rankingBody .ranking_banner .banner_text_wrap{position:relative;top:unset;padding:21px 24px 0 24px;}
	#rankingBody .ranking_banner .title{line-height:22px;font-size:15px;}
}
@media only screen and (max-width:349px) {
	#rankingBody .ranking_banner .background_image{transform:translateX(46px);}
	#rankingBody .ranking_banner .banner_text_wrap{position:relative;top:unset;padding:21px 20px 0 20px;}
}