/* ranking_wrap */
.ranking_wrap { background-color: #f4f5f9; min-height: 100vh; position: relative; padding-bottom: 60px;}
.ranking_wrap #header-back { background-color: #f4f5f9;}
.ranking_wrap main { padding-bottom: 60px;}

.ranking_wrap .title_area {text-align: center; padding-top: 40px; display: flex; flex-direction: column; gap:20px}
.ranking_wrap .title_area span { font-size: 30px; font-weight: 500; color: #757575;}
.ranking_wrap .title_area h3 { font-size: 46px; font-weight: 600; letter-spacing: -0.4px;}
.ranking_wrap .title_area p { font-size: 30px; color: #757575;}

.ranking_wrap .con_area { display: flex; align-items: center; flex-direction: column; margin-top: 40px;}
.ranking_wrap .fuel_ranking_tabs { display: flex; align-items: center; gap: 1.9rem;}
.ranking_wrap .fuel_ranking_tab {border-radius: 100px; padding: 16px 30px; background-color: #fff; font-size: 2.8rem; color: #8894a2; font-weight: 500; letter-spacing: -0.1rem;}
.ranking_wrap .fuel_ranking_tab.active { background-color: #24274a; color: #fff;}

.ranking_wrap .fuel_ranking_panel { display: none; margin-top: 100px;}
.ranking_wrap .fuel_ranking_panel.active { display: block;}
.ranking_wrap .fuel_ranking_panel .fuel_ranking_list { display: flex; flex-direction: column; gap: 36px;}
.ranking_wrap .fuel_ranking_panel .fuel_ranking_item { display: flex;  align-items: center; font-size: 28px;}
.ranking_wrap .fuel_ranking_panel .fuel_ranking_item .car { display: flex; align-items: center; flex: 1; min-width: 0; gap: 14px;}
.ranking_wrap .fuel_ranking_panel .fuel_ranking_item .rank { font-weight: 500; color: #757575; min-width: 2ch;}
.ranking_wrap .fuel_ranking_panel .fuel_ranking_item .model { flex: 1; min-width: 0; font-weight: 500;  letter-spacing: -1.8px; padding-right: 10px;  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.ranking_wrap .fuel_ranking_panel .fuel_ranking_item .fuel { color: #939393;  letter-spacing: -1px; font-size: 26px;}



.ranking_wrap .top_ranking_list { display: flex; align-items: end; gap: 8px; }
.ranking_wrap .top_ranking_list .top_rank { background: #fff; border-radius: var(--border-radius); padding: 30px 30px 30px; display: flex; align-items: center; justify-content: end; flex-direction: column; min-width: 0; position: relative; box-shadow: var(--box-shadow);}
.ranking_wrap .top_ranking_list .top_rank.rank_1 { width: 240px; flex-shrink: 0; order: 2; height: 340px;}
.ranking_wrap .top_ranking_list .top_rank.rank_1::after {content: url('../../img/icon_ranking_01.png'); position: absolute; top: 0; left: 50%; transform: translate(-50%, -44px)}
.ranking_wrap .top_ranking_list .top_rank.rank_2 { flex: 1; order: 1; height: 320px;}
.ranking_wrap .top_ranking_list .top_rank.rank_2::after {content: url('../../img/icon_ranking_02.png'); position: absolute; top: 0; left: 50%; transform: translate(-50%, -14px)}
.ranking_wrap .top_ranking_list .top_rank.rank_3 { flex: 1; order: 3; height: 320px;}
.ranking_wrap .top_ranking_list .top_rank.rank_3::after {content: url('../../img/icon_ranking_03.png'); position: absolute; top: 0; left: 50%; transform: translate(-50%, -14px)}

.ranking_wrap .top_ranking_list .top_rank .model { font-size: 28px; text-align: center; word-break: keep-all; font-weight: 500; line-height: 1.36; margin-top: 16px; font-weight: 600; color: #24274a; letter-spacing: -1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 76px;}
.ranking_wrap .top_ranking_list .top_rank .fuel { font-size: 24px; color: #adadad; margin-top: 16px; }
.ranking_wrap .top_ranking_list .top_rank.rank_1 .car_img { margin-top: 16px;}
.ranking_wrap .top_ranking_list .top_rank.rank_2 .car_img,
.ranking_wrap .top_ranking_list .top_rank.rank_3 .car_img { margin-top: 8px;}

.ranking_wrap .fuel_ranking_list { background-color: #fff; border-radius: var(--border-radius); padding: 40px 30px; box-shadow: var(--box-shadow); margin-top: 35px;}