/* 주간미션 */
.pageWeekMission { position:relative; width:100%; height:100dvh; background-color:#1E0B3B }
.ms_header { position:relative; width:100%; height:80px; padding:0 20px; display:flex; align-items:center }
.ms_game_title { width:100%; display:flex; flex-direction:row; align-items:center; justify-content:space-between }
.ms_game_thumb { border-radius:10px; overflow:hidden; width: 60px; height: 60px; }
.ms_game_thumb img{ width: 100%; }
.ms_game_title_info { width:100%; display:flex; flex-direction:row; align-items:center }
.ms_game_title_info .tit { padding-left:14px; font-size:30px; font-weight:700; align-items: center; }
.ms_game_title_info .game_close { width:54px; height:54px; flex-shrink:0 }
.ms_game_title button.close{ width: 35px; height: 35px; }
.ms_game_title button.close img{width: 100%;}
.ms_section { height:calc(100% - 80px);}
.ms_section_inner { height:100%; width:100%; display:flex; flex-direction:row; padding: 0 10px 10px; }
.ms_game_wrap { width:calc(100% - 344px); position:relative;transition:all 0.3s ease }
.ms_game_wrap .ms_frame { aspect-ratio:16/9; width:100%; max-width:100%; height:100%; position:relative; background:#000; overflow:hidden; cursor:pointer }
.ms_game_wrap .ms_frame img { width:100%; height:100%; object-fit:cover }
.ms_game_wrap .ms_frame iframe { width:100%; height:100%; border:none; display:block }
.ms_game_wrap:fullscreen { background:#000; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease }
.ms_game_wrap:fullscreen .ms_frame { width:100vw; height:100vh; border-radius:0; max-width:100%; max-height:100% }

/* 주간미션 우측 사이드 */
.ms_side { overflow:hidden; width:344px; height:100%; padding:0 10px 0 15px; flex-shrink:0; position:relative; }
.ms_side_inner { overflow:auto; height:100%; width:100% }
.ms_side_inner::-webkit-scrollbar { display:none }
.ms_cont { width:100%; border-radius:10px; border:3px solid #A60CFF; background:#1E0B3B; padding:25px 15px }
.ms_cont + .ms_cont { margin-top:18px }
.ms_menu_cont { display:flex; flex-direction:row; align-items:center; justify-content:space-around }
.ms_menu_cont .mn { display:flex; justify-content:center; flex-direction:column; align-items:center }
.ms_menu_cont .mn span { display:block; text-align:center }
.ms_menu_cont .mn .img { border-radius:10px; width:60px; height:60px; display:flex; align-items:center; justify-content:center; background:rgba(255, 255, 255, 0.20) }
.ms_menu_cont .mn .tt { font-size:1.4rem; font-weight:700; margin-top:5px; color:#fff }
.ms_menu_cont .mn.active .img { background:#FF26B7 }
.ms_menu_cont .mn.active .tt { color:#FF26B7 }

.ms_side_open { display:none }

/* 탭 컨텐츠 */
.missionCont { display:flex }
.tournamentCont { display:none }

.tn_my_rank { width:100%; padding:15px; margin:16px 0 0; border-radius:10px; border:3px solid #E391FF; background:rgba(0, 0, 0, 0.40); text-align:center; font-size:1.8rem; font-weight:500 }
.tn_my_rank .tt { color:#FFBA00 }
.tn_my_rank .st { color:#fff; font-weight:900 }

/* 개임 플레이 중 - 미션 */
.check_mission { position:relative; border-radius:10px; padding:100px 15px 15px; border:3px solid #E391FF; background:rgba(0, 0, 0, 0.40) }
.check_diamond { position:absolute; top:-20px; left:50%; transform:translate(-50%, 0) }
.check_mission .txt { color:#fff; font-size:2rem; font-weight:700; text-align:center; margin-bottom:15px }

/* 프로그래스 바 */
.progress_wrap { width:100%; padding:16px 0; position:relative; margin-bottom:20px }
.progress_container { position:relative; width:calc(100% - 45px); height:28px; background:transparent; border:1px solid #fff; border-top-left-radius:28px; border-bottom-left-radius:28px; overflow:hidden }
.progress_container.complete { position:relative; width:100%; height:28px; background:transparent; border:1px solid #fff; border-radius:28px; overflow:hidden }
.progress_fill { position:absolute; left:0; top:0; height:100%; background:linear-gradient(-45deg, #EE4E40 25%, #F97D5B 25%, #F97D5B 50%, #EE4E40 50%, #EE4E40 75%, #F97D5B 75%); background-size:6px 6px; transition:width 0.5s ease; width:0% }
.progress_text { position:absolute; left:50%; top:50%; transform:translate(0%, -50%); color:#fff; font-size:1.6rem; font-weight:700; z-index:2 }
.progress_text2 { position:absolute; left:35%; top:50%; transform:translate(0%, -50%); color:#fff; font-size:1.6rem; font-weight:700; z-index:2 }
.progress_text.complete { position:relative; left:0%; top:50%; transform:translate(0%, -50%); color:#fff; font-size:1.6rem; font-weight:700; z-index:2; text-align:center }
.progress_text2.complete { position:relative; left:0%; top:50%; transform:translate(0%, -50%); color:#fff; font-size:1.6rem; font-weight:700; z-index:2; text-align:center }
.progress_gift { position:absolute; right:3px; top:0; width:45px; height:49px; z-index:3; cursor:pointer }
.gift_box .gift_ribbon { width:100%; height:100%; display:inline-block }
.gift_box img { width:100%; height:100% }

.progress_wrap.type_02 { padding:0 }
.progress_wrap.type_02 .progress_container { width:100%; border-radius:28px }
.progress_wrap.type_02 .progress_text { margin-left:-15px }
/* 미션 리워드 */
.mission_reward { display:flex; flex-wrap:wrap; justify-content:center }
.mission_reward p { width:100%; display:flex; margin-bottom:7px; color:#fff; font-size:1.6rem; font-weight:700; text-align:center; justify-content:center }
.mission_reward .rw { display:flex; justify-content:center; flex-direction:column; text-align:center }
.mission_reward .rw .rw_img { display:flex; justify-content:center; align-items:center; width:60px; height:60px; border-radius:5px; background:rgba(255, 255, 255, 0.20) }
.mission_reward .rw .rw_img img { width:41px }
.mission_reward .rw + .rw { margin-left:12px }
.mission_reward .rw em { display:block; font-weight:700; font-size:1.6rem; margin-top:4px }

/* 개임 플레이 중 - 토너먼트 */
.pageWeekMission .main_tournament_cont { background-image:none; flex-direction:column; justify-content:flex-end; height:auto; padding:0 }
.pageWeekMission .main_tournament_cont .tn_cont_l { width:100%; justify-content:center; align-items:center }
.pageWeekMission .main_tournament_cont .tn_cont_r { width:100%; background:transparent; padding:0; margin-top:40px }
.pageWeekMission .tn_end_time { width:100%; align-items:center; background:transparent; color:#fff; font-weight:800; font-size:1.8rem }
.pageWeekMission .tn_end_time em { display:inline-block; color:#FFBA00; font-weight:800; margin-left:5px }
.pageWeekMission .tn_game_title { width:100%; border-radius:5px; background:#2F1A50; height:57px; line-height:57px; font-size:2.4rem; text-align:center }
.pageWeekMission .tn_prize_pool strong { font-size:3rem }
.pageWeekMission .main_tournament_cont .tn_list_table .list_td ul { background:#2F1A50; padding:0 15px }
.pageWeekMission .tn_list_table.th_02 .list_th li { width:35%; padding-left:0; text-align:center }
.pageWeekMission .tn_list_table.th_02 .list_th li:nth-child(1) { width:65%; padding-left:0; text-align:left }
.pageWeekMission .tn_list_table.th_02 .list_td li { width:35%; justify-content:center }
.pageWeekMission .tn_list_table.th_02 .list_td li:nth-child(1) { width:65% }

/* 개임 플레이 중 - 퀘스트 */
.main_quest_cont .tt { margin-bottom:20px; font-size:2.6rem; text-align:center; font-weight:700 }
.quest_weekly { display:flex; flex-direction:row; align-items:flex-start; margin-bottom:8px }
.quest_weekly .thumb { width:60px; height:50px; border-radius:5px }
.quest_weekly .thumb img { width:100%; height:100% }
.quest_weekly .st { font-size:2rem; margin-left:10px; font-weight:700 }
.progress_wrap + .progress_wrap { margin-top:30px }
.main_quest_cont .empty_quest p{font-size: 16px;}
/* mission clear Popup */
.layer_mission_clear_wrap{position:fixed; z-index: 8000; bottom:30px; right:40px; width:auto; min-width:288px; display: flex; flex-direction:column; align-items:center; row-gap: 10px; }
.layer_mission_clear { z-index:9999; position:relative; padding:19px 20px; width:288px; border-radius:10px; border:3px solid #A60CFF; background:#1E0B3B; display:none }
.layer_mission_clear .btn_claim { position:absolute; z-index: 100; right:5px; bottom:5px; border-radius:30px; width:80px; height:42px; color:#fff; font-size:1.4rem; background:linear-gradient(180deg, #FF26B7 0%, #BD0084 100%); font-weight:700 }
.layer_mission_clear li { display:flex; flex-direction:row; font-size:1.6rem; color:#fff; align-items:center; font-weight:500 }
.layer_mission_clear li:nth-child(1) { font-size:2rem; font-weight:700 }
.layer_mission_clear li span:nth-child(2) { margin-top:15px; margin-left:14px }

/* Mission Clear Popup - 기능적 스타일만 추가 */
.layer_mission_clear.popup {  }
.layer_mission_clear.show {display:block; animation:slideInUp 0.3s ease-out }
.layer_mission_clear.hide {display:none; animation:slideOutDown 0.3s ease-out }

@keyframes slideInUp {
    from { transform:translateY(100px); opacity:0 }
    to { transform:translateY(0); opacity:1 }
}
@keyframes slideOutDown {
    from { transform:translateY(0); opacity:1 }
    to { transform:translateY(100px); opacity:0 }
}

/* side bar 추가 - common.css로 이동 */
.side_ms_wrap { margin-bottom:13px }
.side_ms_wrap .side_ms_item { width:100% }
.side_ms_item .ms_item { display:flex; flex-direction:row; width:100%; height:82px; justify-content:space-between; align-items:center }
.side_ms_item .ms_item span { display:flex }
.side_ms_item .ms_item .info { width:calc(100% - 82px); flex-direction:column; text-align:left }
.side_ms_item .ms_item .info em { display:block; color:#fff; font-size:1.6rem; font-weight:700 }
.side_ms_item .ms_item .info strong { display:block; color:#FF26B7; font-size:1.3rem; font-weight:700; line-height:1; margin-top:4px }
.side_ms_item .ms_item .thumb { display:flex; width:82px; height:100%; text-align:center; flex-shrink:0; align-items:center; justify-content:center }
.side_ms_item .ms_item .info .etc span { height:auto; display:block }
.side_ms_item .ms_item .info .etc .tt { font-size:1.1rem; color:#CDADFF; line-height:1 }
.side_ms_item .ms_item .info .etc .st { font-size:1.1rem; color:#FF9D02; line-height:1 }

.side_ms_item.msQuest { flex-direction:row; display:flex; justify-content:space-between; margin-bottom:12px }
.side_ms_item.msQuest .btn_quest + .btn_quest { margin-left:10px }
.side_ms_item.msQuest .btn_quest { position:relative; display:block; width:calc(50% - 5px); height:62px; border-radius:10px; padding-bottom:7px }
.side_ms_item.msQuest .btn_quest img { display:inline-block; margin-top:-8px }
.side_ms_item.msQuest .bq_01 { background:linear-gradient(180deg, #A907B5 0%, #7913B3 100%) }
.side_ms_item.msQuest .bq_02 { background:linear-gradient(180deg, #FFD400 0%, #E85200 100%) }

/* layer */
.popup_box.weeklyMissionLayer { width:1104px; overflow:hidden }
.popup_box.weeklyMissionLayer .close { right:44px; top:20px }
.weeklyMissionLayer .layer_common_body { padding:0 }
.weeklyMissionLayer .layer_common_cont { padding:0 }
.weeklyMissionLayer .layer_content { padding:34px 0; height:625px; background:url(/images/mission/bg_layer_mission.png) no-repeat; background-position:center; background-size:cover }
.layer_weekly_wrap .layer_common_cont .title { margin-bottom:0; line-height:64px; font-size:5.4rem; font-weight:900 }
.layer_weekly_wrap .layer_common_cont .s_title { display:block; font-size:1.6rem; font-weight:700; text-align:center }
.layer_weekly_wrap .layer_common_cont .s_title span { display:inline-block }
.layer_weekly_cont { overflow:hidden; width:100%; padding:0 50px 0 50px; margin:20px 0 0 0 }
.layer_weekly_cont .scroll_horizontal { width:100%; overflow-x:auto; overflow-y:hidden; padding-bottom:5px }

/* Webkit 브라우저 스크롤바 스타일링 */
/* .register_page.join .regi_form .form_area .top { scrollbar-color:transparent } */
.scroll_horizontal::-webkit-scrollbar { width:4px; height:5px; display:none } /* 스크롤 보이기 원할시 display:none 삭제 */
.scroll_horizontal::-webkit-scrollbar-track { background:transparent; border-radius:10px }
.scroll_horizontal::-webkit-scrollbar-thumb { background:rgba(22, 3, 51, 0.4); border-radius:10px }

.weekly_sec_wrap { display:flex; flex-wrap:nowrap; min-width:100%; justify-content:flex-start; gap:16px }
.weekly_sec_wrap::after { content:''; width:50px; flex-shrink:0 }
.weekly_sec_wrap:not(.overflow) { justify-content:center }
.weekly_sec { position:relative; width:238px; min-width:238px; flex-shrink:0 }
.weekly_sec .weekly_sec_inner { position:relative; width:100%; padding:22px 0 0 }
.weekly_sec .check_ms_img { z-index:1; position:absolute; top:-22px; left:50%; transform:translateX(-50%) }
.weekly_sec .check_mission { height:368px; display:flex; flex-direction:column; justify-content:space-between }

.weekly_sec .mission_reward { align-items:flex-start }
.weekly_sec .mission_reward .rw .rw_img.qs img { width:24px }
.weekly_sec .mission_reward .rw em { min-height:20px }

.weekly_complete { margin:22px 0 0; font-size:3rem; text-align:center; font-weight:700; color:#fff; line-height:1 }
.weekly_complete strong { color:#FFBA00 }

/* 미션 완료 */
.weekly_sec.complete:after { content:''; z-index:10; display:block; position:absolute; width:calc(100% - 6px); height:calc(100% - 30px); left:3px; top:25px; background-color:rgba(0,0,0,0.7); background-image:url(/images/mission/img_ms_check.png); background-repeat:no-repeat; background-size:58px 58px; background-position:center; border-radius:10px }

/* 모바일용 사이드 오픈 버튼 */
.ms_side_open { display:none; position:fixed; top:3px; left:3px; z-index:1000 }
.ms_side_open .msSideOpen { display:flex; align-items:center; justify-content:center; width:30px; height:30px; cursor:pointer;}
.ms_side_open .msSidecoin { position:fixed; bottom:20px;}

/* 풀스크린용 사이드 오픈 버튼 */
.full_size_open { display:none; position:fixed; top:60px; left:30px; z-index:9000 }

/* 반응형 미디어 쿼리 */
@media screen and (max-width:1190px){
    .popup_box.weeklyMissionLayer { width:70% }
}
@media screen and (max-width:767px){
    .popup_box.weeklyMissionLayer .close { display:block; right:20px; top:20px }
    .popup_box.weeklyMissionLayer { width:calc(100% - 32px); border:0 }
    .weeklyMissionLayer .layer_content { height:auto }
    .weekly_complete { font-size:2rem }
    .layer_weekly_wrap .layer_common_cont .title { font-size:3.2rem; line-height:38px }
    .layer_weekly_wrap .layer_common_cont .s_title { font-size:1.6rem; margin-top:6px }
    .layer_weekly_wrap .layer_common_cont .s_title span { display:block; line-height:1.2 }
    .layer_weekly_cont { padding:0 20px 0 20px; margin-top:16px }
    .weekly_sec_wrap { gap:10px }
    .weekly_sec_wrap::after { width:20px }
    .ms_header { display:none }
    .ms_section { height:100%; padding-bottom:0px }
    .ms_game_title { display:none }
    .ms_side_open { display:block; z-index:9000; }
    .msSideOpen { }
    .ms_game_wrap { width:100%; min-width:100%; min-height:100% }
    .ms_side { display:none; padding: 35px 0 10px; width: 100%; max-width: 320px; max-height: 98vh; overflow-y: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9000; }
    .ms_cont{ padding: 10px 5px;  }
    .ms_side.show { display:block }
    .ms_menu_cont { justify-content:space-around }
    .ms_menu_cont .mn + .mn { margin-left:10px }
    .ms_cont + .ms_cont { margin-top:-3px }
    .ms_cont.mob_padding { padding: 25px 10px 10px; min-height: 250px;}
    .main_tournament_cont { }
    .ms_menu_cont .mn .img{width: 40px; height: 40px; padding: 7px;}
    .ms_menu_cont .mn .img img{width: 100%; object-fit: contain;}
    .main_quest_cont { margin-top:-24px }
    .check_mission { padding:80px 15px 15px }
    .layer_mission_clear_wrap { position:fixed; bottom:76px; right:10px; width:auto; max-width:calc(100vw - 28px); z-index:10000; }
    .ms_section_inner{padding: 0;}
}
/* 그라데이션 텍스트 클래스 */
.text_gradient_gold { background:linear-gradient(180deg, #FFF941 0%, #F59F00 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }

/* daily wheel */
.dailyWheelLayer { width:550px; height:826px; border:0 }
.daily_wheel_wrap { width:100%; height:100%; padding:55px 0; background-image:url(/images/dailyWheel/bg_daily_wheel.png); background-size:cover; background-repeat:no-repeat }
.daily_wheel_cont { position:relative; width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center }
.daily_wheel_cont:before { content:''; position:absolute; left:18px; bottom:19px; z-index:1; display:block; width:507px; height:511px; background-image:url(/images/dailyWheel/bg_wheel_coin.png); background-size:cover; background-repeat:no-repeat }

.daily_wheel_cont .tt_01 { font-size:2.2rem; font-weight:900; line-height:26px }
.daily_wheel_cont .tt_02 { margin:18px 0 10px; font-size:54px; font-weight:900; background:linear-gradient(180deg, #FFFB7E 0%, #F59F00 76.44%, #F57200 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; filter:drop-shadow(4px 4px 4px #9C1206); line-height:1 }
.daily_wheel_cont .tt_03 { font-size:44px; font-weight:800; background:linear-gradient(180deg, #FFFFFF 28.85%, #9A9A9A 50%, #FFFFFF 72.12%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; line-height:1 }

.roulette_cont { position:relative; width:432px; height:430px; margin:22px 0 40px }
.roulette_cont:after { content:''; position:absolute; left:50%; top:0; z-index:1; margin:-20px 0 0 0; display:block; width:58px; height:67px; transform:translate(-50%, 0); background-image:url(/images/dailyWheel/ico_roulette_btn.png); background-size:cover; background-repeat:no-repeat }

.roulette { position:relative; width:100%; height:100%; display:flex; align-items:center; flex-direction:column; transition:transform 0.1s ease-out }
.roulette canvas { background:transparent; width:100%; height:100% }
.roulette.spinning { animation:rouletteSpin 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards }
@keyframes rouletteSpin {
    0% { transform:rotate(0deg) } 100% { transform:rotate(1800deg) }
}

.btn_roulette { z-index:1; position:relative; width:304px; height:54px; margin:0 auto; line-height:54px; border-radius:42px; background:#9A9A9A }
.btn_roulette .btn_rt { display:block; width:100%; height:100%; color:#fff; font-size:1.8rem; font-weight:700; border-radius:42px; text-align:center }
.btn_roulette.active .btn_rt { background:linear-gradient(180deg, #FF26B7 0%, #BD0084 100%); color:#fff }
/* 회전 중일 때 기본 스타일 (동적 애니메이션 사용) */
.roulette.spinning { transition:none }

.checkRewardLayer { margin-left:-3px; transform:scale(1); }
.layer_reward { width:550px; height:560px; padding:40px 0 0; background:linear-gradient(180deg, #292A7A 0%, #380F03 100%); border:0 }
.wheel_reward { padding-top:13px; margin-bottom:40px; display:flex; justify-content:center; flex-direction:column; align-items:center; color:#fff; font-size:3.4rem; font-weight:700; line-height:1 }
.reward_result { display:flex; flex-direction:row; justify-content:center; align-items:center; margin-top:10px; font-size:5.4rem; color:#FBD21A; font-weight:900; line-height:1 }
.reward_result img { margin-right:5px; width:55px; height:57px }

@media screen and (max-width: 768px) and (orientation: landscape) {
    .checkRewardLayer {
        transform:scale(0.5);
    }			
}

.wheel_use { position:absolute; left:20px; top:-36px; width:25px; height:25px; border-radius:20px; text-align:center; color:#fff; background-color:#7030A0; border-radius:50%; font-size:1.8rem; font-weight:900; line-height:25px; cursor:pointer }

/* layer :데일리 휠 사용 방법 */
.howWorksLayer { margin-left:-3px; width:550px; height:826px; border:0; background:transparent; padding:0 }
.howWorksLayer .close { top:28px; right:30px }
.how_works { position:relative; padding:25px 0 0; display:flex; flex-direction:column; justify-content:space-between; width:100%; height:100%; background:url(/images/dailyWheel/bg_daily_works.png) no-repeat; background-size:cover; background-position:center top }
.how_works_tt { font-size:2.2rem; font-weight:900; padding-left:30px }
.how_works_list { padding:20px; background-color:#190F57; box-shadow:0px -10px 4px 0px #00000040 }
.how_works_list .tt { font-size:4rem; font-weight:800; background:linear-gradient(180deg, #FFFFFF 28.85%, #9A9A9A 50%, #FFFFFF 72.12%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }
.how_works_list li { margin-top:10px; display:flex; flex-direction:row; align-items:center; height:98px; width:100%; padding:0 20px; border-radius:10px; background:#2C1F7C }
.how_works_list li .thumb { display:block; width:98px; height:98px; flex-shrink:0; margin-right:6px }
.how_works_list li .desc { font-size:2.1rem; color:#fff; font-weight:500; width:calc(100% - 98px - 6px); line-height:21px }


@media screen and (max-width:1190px) {}
@media screen and (max-width:767px){
    .dailyWheelLayer { width:calc(100% - 30px); height:auto; max-height:90vh }
    .daily_wheel_wrap { padding:30px 0 }
    .daily_wheel_cont:before { width:calc(100vw - 60px); height:calc(100vw - 60px); max-width:380px; max-height:380px; left:50%; bottom:80px; transform:translateX(-50%); background-size:contain }
    .daily_wheel_cont .tt_01 { font-size:2rem }
    .daily_wheel_cont .tt_02 { margin:10px 0 5px; font-size:3.6rem }
    .daily_wheel_cont .tt_03 { font-size:2.8rem }

    .roulette_cont { width:calc(100% - 30px); height:calc(100vw - 60px); max-width:350px; max-height:350px; margin:20px auto 20px }
    .roulette_cont:after { width:40px; height:46px; margin:-14px 0 0 0 }

    .btn_roulette { width:250px; height:45px; line-height:45px }
    .btn_roulette .btn_rt { font-size:1.6rem }

    .layer_reward { width:calc(100% - 30px); height:auto; padding:50px 0 }
    .wheel_reward { margin-bottom:26px }
    .reward_result { font-size:3.4rem }
    .reward_result img { width:33px; height:34px }
    .img_wheel_reward { width:220px; height:220px; margin:0 auto }
    .img_wheel_reward img { width:100%; height:100% }

    .howWorksLayer { width:calc(100% - 30px); height:auto }
    .how_works_tt { padding-bottom:220px }
    .how_works_list .tt { font-size:3rem; text-align:center }
    .how_works_list li { height:77px }
    .how_works_list li .thumb { width:64px; height:64px; margin-right:12px }
    .how_works_list li .thumb img { width:100%; height:100% }
    .how_works_list li .desc { font-size:1.6rem }

    .wheel_use { top:-5px }
}


/* support */
.support_wrap { width:100%; }
.support_title { font-size: 3rem; font-weight: 700; text-align: center; margin-bottom: 40px; }
.support_inner { background: #2F1A50; border-radius: 10px; }
.support_inner .support_content_title { padding:0 32px; height:73px; line-height:73px; font-size:1.8rem; font-weight: 700; border-bottom: 1px solid #484882; }
.support_inner .support_content { padding:60px 0 44px; display:flex; flex-direction: column; align-items: center; justify-content: center; }
.support_title_input { height:52px; border-radius: 5px; background-color: rgba(255,255,255,0.2); }
.support_msg_textarea { margin-top:12px; min-height:418px; max-height:600px; border-radius: 5px; background-color: rgba(255,255,255,0.2); }
.support_title_input input,.support_msg_textarea textarea { display:block; background-color:transparent; width:100%; height:100%; border:0; font-size:1.8rem; color:#fff; cursor:text; }
.support_title_input input { padding:0 24px; }

.support_msg_textarea textarea { padding:26px 24px; min-height:418px; max-height:600px; outline:none; resize:vertical; }
.support_title_input input::-webkit-input-placeholder,.support_msg_textarea textarea::-webkit-input-placeholder { color:#fff; font-size:1.8rem; font-weight:500; }
.support_title_input input:-ms-input-placeholder,.support_msg_textarea textarea:-ms-input-placeholder { color:#fff; font-size:1.8rem; font-weight:500; }
.support_title_input input::placeholder,.support_msg_textarea textarea::placeholder { color:#fff; font-size:1.8rem; font-weight:500; }

.support_title_input,.support_msg_textarea { width:900px; }
.support_send { width:100%; display: flex; justify-content: center; margin-top: 45px; }
.support_send .btn_send { width:208px; text-align: center; color:#fff; background-color: #A60CFF; height:47px; line-height: 47px; font-size: 1.8rem; border-radius: 10px; font-weight: 700; }

.sendSupportLayer { width:550px; height:530px; padding:40px 0 0; background:linear-gradient(180deg, #292A7A 0%, #380F03 100%); border:0 }
.l_support_cont { padding: 0 70px; height:100%; display:flex; align-items: center; flex-direction: column; justify-content: center; }
.l_support_cont li { text-align: center; width:100%; font-size: 2.4rem; }
.l_support_cont .img img { width:202px; height:130px; display: inline-block; }
.l_support_cont .tt { font-size: 3.4rem; font-weight: 700; color:#fff; margin:38px 0 5px }
.l_support_cont .st span { display:block; }

@media screen and (max-width:1190px) {.support_wrap { width:calc(100% + 40px); margin-left: -20px; }
    .support_inner { border-radius:0 }
    .support_title_input,.support_msg_textarea { width:100%; }
    .support_inner .support_content_title { font-size: 1.6rem; line-height: 18px; padding:20px 25px; height: auto; }
    .support_inner .support_content { padding:20px 20px 60px }
    .support_title_input input,.support_msg_textarea textarea { font-size: 1.6rem; }
    .support_title_input input::-webkit-input-placeholder,.support_msg_textarea textarea::-webkit-input-placeholder { font-size:1.6rem; }
    .support_title_input input:-ms-input-placeholder,.support_msg_textarea textarea:-ms-input-placeholder { font-size:1.6rem; }
    .support_title_input input::placeholder,.support_msg_textarea textarea::placeholder { font-size:1.6rem; }
    .support_send { margin-top:30px }
    .support_title_input input { padding:0 20px }
    .support_msg_textarea textarea { padding:18px 20px }
}
@media screen and (max-width:767px){
    .sendSupportLayer { width:90%; }
    .l_support_cont li { line-height:29px; }
    .l_support_cont .img img { width:160px; height:104px }
    .l_support_cont .tt span { display:inline-block }
}
/* common.css 추가 */
.popup_box .close img { width:100%; height:100% }
.popup_multi .close { z-index:9001; position:absolute; top:15px; right:20px; width:25px; height:25px }
.popup_multi .close img { width:100%; height:100% }

.btn_area { display:flex; justify-content:center; width:100%; margin:55px 0 0 }
.btn_area .btn { display:inline-block; width:263px; height:42px; line-height:42px; color:#fff; font-size:1.8rem; font-weight:700; text-align:center; border-radius:42px; background:linear-gradient(180deg, #5C5C5C 0%, #434343 100%) }
.btn_area .btn.active { background: linear-gradient(180deg, #FF26B7 0%, #BD0084 100%); }
@media screen and (max-width:767px){
    .btn_area { margin:40px 0 0 }
}
















/* **************************** 퀘스트 **************************** */

/* 퀘스트 */

.questLayer { display: none; position: fixed; top: 0; left: 0; width:100%; height:100%; align-items: center; justify-content: center; }
.questLayer.view { z-index:9000; display:flex }
.questLayer .close { z-index:9001; position:absolute; top:15px; right:20px; width:25px; height:25px }
.questLayer .close svg { width:100%; height:100% }
.quest_cont { flex: 0 0 auto; border:0; border-radius: 20px; width:1050px; height:700px; position:relative; overflow-x: auto; }
.quest_map { position:relative; width:100%; height:100%; margin:0 auto; border-radius: 20px; background-image: url("/images/quest/bg_quest_load.png"); background-repeat: no-repeat; background-size: contain; }
.quest_noti { position:absolute; left:20px; top:20px; width:60px; height:60px; cursor: pointer; }
.quest_noti img { width:100%; height:100%; }
/* 타이머 */
.quest_timer { position:absolute; top:20px; left:50%; transform:translateX(-50%); text-align:center; z-index:10; }
.quest_timer .timer_text { color:#433EC2; font-size:4rem; font-weight:900; margin-right:4px; }
.quest_timer .timer_value { color:#0F0C60; font-size:4rem; font-weight:900; }

/* 퀘스트 맵 - 배경 이미지를 기준으로 절대 위치 설정 */
/* 미션 아이템 기본 스타일 */
.mission_item { position:absolute; cursor: pointer; z-index:5; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 5px; }
.mission_item .mission_btn { opacity:1; width:108px; height:108px; border:0; background:transparent; cursor:pointer; transition:transform 0.3s ease; }
.mission_item .mission_btn img { width:100%; height:100%; object-fit:contain; }
.mission_item .mission_btn .misq_item_bg { display: block; width:100%; height:100%; background-repeat: no-repeat; background-size: cover; }
/* 미션 상태별 스타일 */
.mission_item.completed .mission_btn { }
.mission_item.completed .mission_btn:after { content:''; position:absolute; bottom:-11px; left:50%; transform:translateX(-50%); width:83px; height:65px; background-image:url('/images/quest/ico_quest_complete.png'); background-size:cover; background-repeat:no-repeat; display:flex; align-items:center; justify-content:center }

.mission_item.locked .mission_btn { cursor:not-allowed; opacity:1; }
.mission_item.locked .mission_btn img { filter:grayscale(100%) brightness(1); }
.mission_item.locked .mission_btn:after { content:''; width:44px; height:44px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background-image:url('/images/quest/ico_mission_locked.png'); background-size:cover; background-repeat:no-repeat; }
.mission_item.locked .mission_btn .misq_item_bg { filter: brightness(0.5); }
/* 펄스 애니메이션 */
@keyframes pulse {
    0% { box-shadow:0 0 0 0 rgba(255,38,183,0.7); } 70% { box-shadow:0 0 0 20px rgba(255,38,183,0); } 100% { box-shadow:0 0 0 0 rgba(255,38,183,0); }
}
/* PC - 배경 이미지 기준 미션 위치 설정 (퍼센트 기준) */
.mission_1 { top:50%; left:1%; }
.mission_2 { top:60%; left:13%; }
.mission_3 { top:62%; left:25%; }
.mission_4 { top:55%; left:37%; }
.mission_5 { top:47%; left:57%; }
.mission_item.reward .mission_btn { width: 215px; height: 150px; }
.mission_item.reward .mission_btn .misq_item_bg { position: relative; background-image: url('/images/quest/img_quest_finish.png'); background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform 0.3s ease; }
.mission_item.reward { top:38%; left:72%; }
.mission_item.reward.on .mission_btn .misq_item_bg::after { content: ""; position: absolute; inset: 0; background: url("/images/quest/img_quest_finish_unlock.png") center/contain no-repeat; opacity: 0; transition: opacity 0.5s ease; }
.mission_item.reward.on .mission_btn:hover .misq_item_bg { transform: scale(1.1); }
.mission_item.reward.on .mission_btn:hover .misq_item_bg::after { opacity: 1; }
.mission_item .mis_item_play { width: 100%; padding: 5px 0; background: linear-gradient(180deg, #FF26B7 0%, #BD0084 100%); color: #FFF; font-size: 13px; font-weight: 800; text-align: center; border-radius: 30px; }
.mission_item.claim_ready .mis_item_play { background: linear-gradient(180deg, #95fd73 0%, #197f3d 100%); }
.mission_item.completed .mis_item_play { display: none; }
.mission_item.reward.claimed .mission_btn .misq_item_bg { background: url("/images/quest/img_quest_finish_unlock.png") center/contain no-repeat; }

/* quest : your mission */
.qs_ms_layer { border: 0; width:750px; height:520px; background-color: rgba(0, 0, 0, 0.7); padding:40px 0 50px; background-image: none }
.qml_items { padding: 0 40px; }
.qml_items_inner { display: flex; align-items: center; justify-content: center; column-gap: 20px; }

.qs_ms_layer .qs_title { display: flex; flex-direction: row; justify-content: center; margin-bottom:25px; font-size: 4rem; font-weight: 900; }
.qs_ms_layer .qs_title .thumb { width:55px; height:55px; margin-right: 5px; }
.qs_ms_layer .qs_title .thumb img { width: 100%; height:100%; }
.qs_ms_wrap { overflow: hidden; width:100%; padding:0 0 0 63px; }
.qs_ms_cont { display:flex; flex-wrap: nowrap; min-width: 100%; justify-content: flex-start; gap:20px }
.qs_ms_cont:after { content:''; width:63px; flex-shrink: 0; }
.qs_ms_item { position:relative; width:194px; height:272px; display:flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.qs_ms_item:after { content:''; display: block; position:absolute; left:50%; top:50%; transform: translate(50%,50%); width: 72px; height: 72px; background-repeat: no-repeat; background-size: cover; margin:-45px 0 0 -70px }
.qs_ms_item.complete:after { background-image: url('/images/quest/img_qs_ms_check.png'); }
.qm_cont_thumb { overflow:hidden; display:block; height: 164px; width:100%; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.qm_cont_thumb img { width:100%; height:100%; }
.qs_ms_item .qm_cont_desc { width:100%; height:calc(100% - 164px); padding:30px 0 30px 0; text-align:Center; display: flex; flex-direction: column; align-items: center; justify-content: center; color:#333; background-color: #fff; font-size: 2rem; line-height: 1.2; font-weight: 700; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
.qs_ms_item.complete .qm_cont_desc { padding:40px 0 10px 0; }
.quest_ms_cont .btn_area { margin-top: 30px; }

.qs_ms_layer.questHowLayer { display: none; z-index: 1000; border-radius: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height:auto }
.qs_ms_layer.questHowLayer.view { display: block; }
.qs_ms_layer.questMissionLayer { display: none; z-index: 1000; border-radius: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height:auto }
.qs_ms_layer.questMissionLayer.view { display: block; }

.questHow_items { padding: 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; }
.qs_how_item { padding: 40px 0 10px; border-radius: 15px; overflow: hidden; width:100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 145px 80px; row-gap: 15px; align-items: center; background-image:url('/images/quest/bg_qs_how.png'); background-repeat: no-repeat; background-size: cover; }
.qs_how_item .qm_cont_thumb_wrap{ width: 100%; height: 100%; padding: 0 10px; }
.qs_how_item .qh_cont_thumb_bg{width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center;}
.qs_how_item .qh_cont_thumb_bg.ill_01{background-image: url("/images/quest/quest_guide_ill_01.png");}
.qs_how_item .qh_cont_thumb_bg.ill_02{background-image: url("/images/quest/quest_guide_ill_02.png");}
.qs_how_item .qh_cont_thumb_bg.ill_03{background-image: url("/images/quest/quest_guide_ill_03.png");}
.qs_how_item .qm_cont_desc { color:#000; font-size: 20px; font-weight: 700; text-align: center; padding: 0 15px; }

.questHowLayer .close img { width:100%; height:100% }
.questHowLayer .close { z-index:9001; position:absolute; top:15px; right:20px; width:25px; height:25px }
.questHowLayer .close img { width:100%; height:100% }
.questMissionLayer .close img { width:100%; height:100% }
.questMissionLayer .close { z-index:9001; position:absolute; top:15px; right:20px; width:25px; height:25px }
.questMissionLayer .close img { width:100%; height:100% }


@media screen and (max-width:1190px){
    .questLayer .quest_cont { width:840px; height:560px; }
    .quest_noti { width: 40px; height: 40px; }
    .quest_timer { }
    .quest_timer .timer_text,.quest_timer .timer_value { font-size: 3rem }
    .mission_item .mission_btn { width:85px; height:85px; }
    .mission_item.reward .mission_btn { width: 175px; height: 120px; }
    .mission_item.completed .mission_btn:after { width: 50px; height: 50px; background-size: contain; }
    .mission_item.locked .mission_btn:after { }

    .qs_ms_layer { width: 600px; height: 410px; }
    .qs_ms_wrap { padding: 0 0 0 53px; }
    .qs_ms_layer .qs_title { font-size: 3rem; margin-bottom: 20px; }
    .qs_ms_layer .qs_title .thumb { width: 40px; height: 40px; }
    .qs_how_item { padding: 25px 0 10px; grid-template-rows: 120px 50px; row-gap: 10px; }
    .qs_how_item .qm_cont_desc { font-size: 16px;}

    .qs_ms_item { width: 150px; height: 210px; }
    .qs_ms_item:after { width: 50px; height: 50px; background-size: contain; margin: -30px 0 0 -50px; }
    .qs_ms_item.complete:after { width: 50px; height: 50px; background-size: contain; }
    .qs_ms_item .qm_cont_desc { padding: 35px 0 40px 0; font-size: 1.5rem; line-height: 1; }
    .qs_ms_item.complete .qm_cont_desc { padding: 55px 0 30px 0; }
}
@media screen and (max-width:1024px){
	.quest_map {
		transform:scale(0.5);
	}
	@media screen and (orientation: portrait) {
    .quest_timer { width: 90%; top: 65px; }
    .quest_timer .timer_text, .quest_timer .timer_value { font-size: 24px; }
    .quest_noti { width: 30px; height: 30px; top: 15px; left: 15px; }
    .qs_ms_layer.questHowLayer { width: 90%; height: unset; padding: 35px 0; }
    .questHow_items { grid-template-columns: 1fr; row-gap: 15px; padding: 0 25px; }
    .qs_ms_wrap { padding: 0 0 0 53px; }
    .qs_ms_layer .qs_title { font-size: 3rem; margin-bottom: 20px; }
    .qs_ms_layer .qs_title .thumb { width: 40px; height: 40px; }
    .qs_how_item { display: grid; grid-template-columns: 90px 1fr;grid-template-rows:unset; padding: 10px; border-radius: 15px; width: 100%; background-image: url("/images/quest/bg_qs_how_mo.png"); height: 110px; column-gap: 10px; }
    .qs_how_item .qm_cont_thumb_wrap{padding: 0;}
    .qs_how_item .qm_cont_desc { font-size: 16px; text-align: center; }
    .qs_ms_layer.questMissionLayer { width: 90%; height: unset; padding: 35px 0; }
    .qml_items_inner { display: grid; grid-template-columns: 1fr; row-gap: 15px; }
    .qs_ms_item { display: grid; grid-template-columns: 100px auto; width: auto; height: auto; }
    .qs_ms_item:after { width: 35px; height: 35px; top:7px; left: 25%; background-size: contain; margin: 0; }
    .qm_cont_thumb { width: 100%; height: 100%; border-radius: 15px 0 0 15px; }
    .qs_ms_item.complete:after { width: 35px; height: 35px; top:7px; left: 25%; background-size: contain; }
    .qs_ms_item .qm_cont_desc { width: 100%; height: 100%; border-radius: 0 15px 15px 0; font-size: 16px; padding: 0 0 0 10px; }
    .quest_ms_cont .btn_area { margin-top: 15px }
    .quest_ms_cont .btn_area .btn { height: 30px; line-height: 30px; font-size: 16px; }

    .questLayer .quest_cont { width: 100%; max-width:375px; height: unset; max-height: 95vh; overflow-y: auto; }
    .quest_map { width: 100%; max-width:375px; height:812px; background-image: url("/images/quest/quest_load_map.png"); background-size: cover;transform:scale(0.8); }
    .mission_item .mission_btn { width: 75px; height: 75px; }
    .mission_1 { top: 80%; left: 47%; }
    .mission_2 { top: 76%; left: 20%; }
    .mission_3 { top: 62%; left: 15%; }
    .mission_4 { top: 48%; left: 8%; }
    .mission_5 { top: 45%; left: 35%; }
    .mission_item.reward { top: 32%; left: 35%; }
    .mission_item.reward .mission_btn { width: 130px; height: 90px; }	
	}
}


@media screen and (max-width:480px){
    .questLayer .quest_cont { width: 100%; max-width:480px; height: unset; max-height: 100vh; overflow-y: auto; border-radius: 0 }
    .quest_map { width: 100%; max-width:480px; height:812px; background-image: url("/images/quest/quest_load_map.png"); background-size: cover; border-radius: 0 }
    .mission_item .mission_btn { width: 75px; height: 75px; }
}




/* **************************** 퀘스트 **************************** */
































/* **************************** League **************************** */

.lgv_top_bnn_wrap{width: 100%;position: relative;margin-bottom: 45px;}
.lgv_top_bnn_wrap.pc{}
.lgv_top_bnn_wrap.mo{display: none;}
.lgv_top_bnn_inner{position: relative;display: block;cursor: default;padding-bottom: 240px;}
.lgv_top_bnn_bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-repeat: no-repeat;background-size: contain;background-position: center;}

.lgv_tab_area{width: 100%; max-width: 580px; margin: 0 auto 15px;}
.lgv_tab_grid{display: grid;grid-template-columns: repeat(2, 1fr); column-gap: 40px;}
.lgv_tab{position: relative; display: block; width: 100%; padding-bottom: 30%; }
.lgv_tab_ill{position: relative; z-index: 1; width: 100%; padding: 0 35px 50%; margin-bottom: 12px; }
.lgv_tab_ill_bg{position: absolute; top: 0;left: 0;width: 100%;height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center;}
.lgv_tab.my .lgv_tab_ill_bg{background-image: url('/images/league/lgv_tab_ill_my.png');}
.lgv_tab.rank .lgv_tab_ill_bg{background-image: url('/images/league/lgv_tab_ill_rank.png');}
.lgb_tab_lb{position: relative; z-index: 1; font-size: 30px; color: #FFF; font-weight: 900; text-align: center;}
.lgv_tab_bg{position: absolute; bottom: 0;left: 0;width: 100%;height: 75%;background: linear-gradient(180deg, #3934A6 0%, #1E0B3B 80.77%); border-radius: 10px 10px 0 0;}
.lgv_tab.on .lgv_tab_bg{background: linear-gradient(180deg, #FFBA00 0%, #1E0B3B 80.77%);}

.lgv_main { display: none; }
.lgv_main.on { display: block; }
.lgv_main.my_tab{margin-top: 50px}
.lgv_main.rank_tab{}
.lgv_main_inner { display: grid; grid-template-columns: 430px 1fr; column-gap: 20px; }
.lgv_main_info_area { }
.lgv_gem_box { display: grid; grid-template-columns: 1fr; border-radius: 10px; border: 1px solid #FFBA00; margin-bottom: 35px; }
.lgv_gem_box_inner { position: relative; width: 100%; height: 350px; }
.lgv_gem_bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background: radial-gradient(circle, rgba(255,255,255,0.8) 2px, transparent 3px) 0 0 / 120px 120px,radial-gradient(circle, rgba(255,255,255,0.6) 2px, transparent 1px) 40px 60px / 160px 160px,radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 2px) 80px 20px / 100px 100px; animation: glitterBlink 6s infinite linear; z-index: 1; mix-blend-mode: screen; pointer-events: none; border-radius: inherit; overflow: hidden; }
@keyframes glitterBlink { 0%, 100% { opacity: 0.6; filter: brightness(1); }
    10% { opacity: 1; filter: brightness(1.8); }
    20% { opacity: 0.3; filter: brightness(0.9); }
    40% { opacity: 0.8; filter: brightness(1.5); }
    70% { opacity: 0.4; filter: brightness(1.2); }
}
.lgv_gem_bg::before,
.lgv_gem_bg::after { content: ''; position: absolute; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.7) 1.5px, transparent 3px); background-size: 180px 180px; animation: particleFloat 12s linear infinite; opacity: 0.5; mix-blend-mode: screen; }
.lgv_gem_bg::after { background-size: 120px 120px; animation-duration: 16s; animation-direction: reverse; opacity: 0.35; }
@keyframes particleFloat {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-10px, -20px) rotate(30deg); }
    50% { transform: translate(10px, -10px) rotate(60deg); }
    75% { transform: translate(-15px, 10px) rotate(90deg); }
    100% { transform: translate(0, 0) rotate(120deg); }
}
.lgv_gem_box.quartz .lgv_gem_bg { filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)); }
.lgv_gem_box.emerald .lgv_gem_bg { background: radial-gradient(circle, rgba(180,255,200,0.8) 2px, transparent 3px) 0 0 / 120px 120px, radial-gradient(circle, rgba(140,255,170,0.6) 2px, transparent 1px) 40px 60px / 160px 160px, radial-gradient(circle, rgba(100,255,150,0.4) 1px, transparent 2px) 80px 20px / 100px 100px; }
.lgv_gem_box.ruby .lgv_gem_bg { background: radial-gradient(circle, rgba(255,150,150,0.8) 2px, transparent 3px) 0 0 / 120px 120px, radial-gradient(circle, rgba(255,100,100,0.6) 2px, transparent 1px) 40px 60px / 160px 160px, radial-gradient(circle, rgba(255,80,80,0.4) 1px, transparent 2px) 80px 20px / 100px 100px; }
.lgv_gem_box.sapphire .lgv_gem_bg { background: radial-gradient(circle, rgba(150,200,255,0.8) 2px, transparent 3px) 0 0 / 120px 120px, radial-gradient(circle, rgba(100,160,255,0.6) 2px, transparent 1px) 40px 60px / 160px 160px, radial-gradient(circle, rgba(80,120,255,0.4) 1px, transparent 2px) 80px 20px / 100px 100px; }
.lgv_gem_box.diamond .lgv_gem_bg { background: radial-gradient(circle, rgba(230,250,255,0.8) 2px, transparent 3px) 0 0 / 120px 120px, radial-gradient(circle, rgba(200,240,255,0.6) 2px, transparent 1px) 40px 60px / 160px 160px, radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 2px) 80px 20px / 100px 100px; }

.lgv_gem_ill_wrap{ position: relative; width: 100%; padding: 25px 0; }
.lgv_gem_ill_inner{ position: relative; padding-bottom: 70%; width: 100%;}
.lgv_gem_ill_bg{ position: absolute; top: 0;left: 0;width: 100%;height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center;}
.lgv_gem_box.quartz .lgv_gem_ill_bg{ background-image: url('/images/league/gem_quartz.png'); }
.lgv_gem_box.emerald .lgv_gem_ill_bg{ background-image: url('/images/league/gem_emerald.png'); }
.lgv_gem_box.ruby .lgv_gem_ill_bg{ background-image: url('/images/league/gem_ruby.png'); }
.lgv_gem_box.sapphire .lgv_gem_ill_bg{ background-image: url('/images/league/gem_sapphire.png'); }
.lgv_gem_box.diamond .lgv_gem_ill_bg{ background-image: url('/images/league/gem_diamond.png'); }

.lgv_gem_timer_wrap{ background-color: #FFBA00; border-radius: 8px; padding: 8px 0; }
.lgv_gem_timer_inner{ display: flex; align-items: center; justify-content: center; column-gap: 3px; }
.lgv_gem_timer_lb{ font-size: 23px; font-weight: 900; color: #FFF; }
.lgv_gem_timer_vals{ display: flex; align-items: center; }
.lgv_gem_timer_vals span{ text-align: center; min-width: 50px; font-size: 23px; font-weight: 900; color: #5D4608; }

.lgv_note_box{}
.lgv_note_box_lb{ font-size: 22px; font-weight: bold; color: #FFF; margin-bottom: 10px; }
.lgv_note_box_inner{ padding: 25px; background-color: #2F1A50; border-radius: 15px; }
.lgv_note_box_rows { }
.lgv_note_box_row{ margin-bottom: 25px;}
.lgv_note_box_row:last-child{ margin-bottom: 0; }
.lgv_note_box_row_tt{ font-size: 17px; color: #FFF; }
.lgv_note_box_row_desc{padding-left: 5px;}
.lgv_note_box_row_desc p{font-size: 16px; color: #cdcdcd;}

.lgv_main_ranking_area{}
.lgv_main_ranking_tbl{}
.lgv_main_ranking_tbl_inner{ position: relative;}
.lgv_mrr_thead{position: absolute; top: -45px; width: 100%; display: grid; grid-template-columns: 60px 1fr 120px; align-items: center; column-gap: 15px; padding: 0 50px; height: 45px;}
.lgv_mrr_thead_td{font-size: 18px; font-weight: bold; color: #FFF; text-align: center; }
.lgv_main_ranking_row{ background-color: #2F1A50; border-radius: 15px; display: grid; grid-template-columns: 60px 1fr 120px; align-items: center; column-gap: 15px; margin-bottom: 5px; padding: 0 50px; height: 64px; }
.lgv_main_ranking_row.curr{background-color: #A60CFF}
.lgv_mrr_col{font-size: 18px; color: #FFF; font-weight: bold; }
.lgv_mrr_col.nick{overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
.lgv_mrr_col.rank{text-align: center; font-size: 30px; }
.lgv_mrr_col.score{text-align: center;}
.lgv_mrr_col.rank.medal_1{color: #2F1A50; line-height: 58px; margin: 0 auto; width: 58px; height: 58px; background-image: url("/images/league/rank_01.png"); background-position: center; background-repeat: no-repeat; background-size: contain; }
.lgv_mrr_col.rank.medal_2{color: #2F1A50; line-height: 58px; margin: 0 auto; width: 58px; height: 58px; background-image: url("/images/league/rank_02.png"); background-position: center; background-repeat: no-repeat; background-size: contain; }
.lgv_mrr_col.rank.medal_3{color: #2F1A50; line-height: 58px; margin: 0 auto; width: 58px; height: 58px; background-image: url("/images/league/rank_03.png"); background-position: center; background-repeat: no-repeat; background-size: contain; }

.lgv_main_ranking_row_etc { display: flex; align-items: center; justify-content: center; height: 50px; }
.lgv_mrr_etc_lb { position: relative; font-size: 20px; font-weight: bold; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 3px; }
.lgv_main_ranking_row_etc.advance .lgv_mrr_etc_lb { color: #26FF2D; }
.lgv_main_ranking_row_etc.advance .lgv_mrr_etc_lb::before,
.lgv_main_ranking_row_etc.advance .lgv_mrr_etc_lb::after { content: ""; display: inline-block; width: 0; height: 0; border-radius: 3px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 9px solid #26FF2D; }
.lgv_main_ranking_row_etc.downgrade .lgv_mrr_etc_lb { color: #ED4F44; }
.lgv_main_ranking_row_etc.downgrade .lgv_mrr_etc_lb::before,
.lgv_main_ranking_row_etc.downgrade .lgv_mrr_etc_lb::after { content: ""; display: inline-block; width: 0; height: 0; border-radius: 3px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 9px solid #ED4F44; }

.lgv_mrr_more_btn_row { display: flex; align-items: center; justify-content: center; height: 50px; }
.lgv_mrr_more_btn_row .lgv_mrr_more { color: #FFF; position: relative; font-size: 18px; font-weight: bold; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 3px; }
.lgv_mrr_more_btn_row .lgv_mrr_more::after { content: ""; margin-top: 5px; display: inline-block; width: 0; height: 0; border-radius: 3px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 9px solid #FFF; }

.swiper-container.lgv_mrt_gem_box{overflow: hidden; margin-bottom: 30px; padding: 0 20px; border-radius: 10px;background-image: url("/images/league/lgv_mrt_gem_box_bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center; }
.swiper-wrapper.lgv_mrt_gem_box_inner{ position: relative;  padding: 40px 0; display: flex; justify-content: center; }
.swiper-wrapper.lgv_mrt_gem_box_inner .swiper-slide{width: auto; }
.lgv_mrt_gem_col{ display: block; width: 135px; padding: 12px 15px; text-align: center; border-radius: 30px; }
.lgv_mrt_gem_col.on{background-color: #FFBA00;}
.lgv_mrt_gem_bg{ width: 100%; height: 110px; background-repeat: no-repeat; background-position: center; background-size: contain; margin-bottom: 6px;}
.lgv_mrt_gem_bg.quartz{background-image: url("/images/league/gem_circle_quartz.png");}
.lgv_mrt_gem_bg.emerald{background-image: url("/images/league/gem_circle_emerald.png");}
.lgv_mrt_gem_bg.ruby{background-image: url("/images/league/gem_circle_ruby.png");}
.lgv_mrt_gem_bg.sapphire{background-image: url("/images/league/gem_circle_sapphire.png");}
.lgv_mrt_gem_bg.diamond{background-image: url("/images/league/gem_circle_diamond.png");}
.lgv_mrt_gem_lb{ font-size: 15px; color: #9783B5; }
.lgv_mrt_gem_col.on .lgv_mrt_gem_lb{color: #FFF; font-weight: bold;}

.lgv_mrt_tbl{}
.lgv_mrt_tbl_inner{ width: 100%; max-width: 675px; margin: 0 auto; }
.lgv_mrt_tbl_row{margin-bottom: 5px;height: 64px; text-align: center; display: grid; grid-template-columns: 60px 180px; align-items: center; justify-content: space-between; padding: 0 50px; border-radius: 15px; background-color: #2F1A50;  }
.lgv_mrt_tbl_row.rank_1{background-color: #FFBA00}
.lgv_mrt_tbl_col{font-size: 18px; color: #FFF; font-weight: bold; }
.lgv_mrt_tbl_col.rank{ }
.lgv_mrt_tbl_row.rank_1 .lgv_mrt_tbl_col.rank{font-size: 30px; color: #2F1A50; line-height: 58px; width: 58px; height: 58px; background-image: url("/images/league/rank_01.png"); background-position: center; background-repeat: no-repeat; background-size: contain; }
.lgv_mrt_tbl_row.rank_2 .lgv_mrt_tbl_col.rank{font-size: 30px; color: #2F1A50; line-height: 58px; width: 58px; height: 58px; background-image: url("/images/league/rank_02.png"); background-position: center; background-repeat: no-repeat; background-size: contain; }
.lgv_mrt_tbl_row.rank_3 .lgv_mrt_tbl_col.rank{font-size: 30px; color: #2F1A50; line-height: 58px; width: 58px; height: 58px; background-image: url("/images/league/rank_03.png"); background-position: center; background-repeat: no-repeat; background-size: contain; }
.lgv_mrt_tbl_col.reward span{ padding-left: 40px; position: relative; }
.lgv_mrt_tbl_col.reward span::before{content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 35px; height: 35px; background-image: url("/images/league/ico_bg_gold.png"); background-repeat: no-repeat; background-size: contain; background-position: center;}
.lgv_mrt_tbl_row.rank_1 .lgv_mrt_tbl_col.reward span{padding-left: 55px; font-size: 25px;}
.lgv_mrt_tbl_row.rank_1 .lgv_mrt_tbl_col.reward span::before{width: 50px; height: 50px;}
.lgv_mrt_tbl_row.rank_2 .lgv_mrt_tbl_col.reward span{padding-left: 50px; font-size: 23px; color:#FFBA00 }
.lgv_mrt_tbl_row.rank_2 .lgv_mrt_tbl_col.reward span::before{width: 45px; height: 45px;}
.lgv_mrt_tbl_row.rank_3 .lgv_mrt_tbl_col.reward span{padding-left: 45px; font-size: 21px; color:#FFBA00}
.lgv_mrt_tbl_row.rank_3 .lgv_mrt_tbl_col.reward span::before{width: 40px; height: 40px;}

/* 태블릿 반응형 - 80% 크기 */
@media screen and (max-width:1190px) {
    .swiper-wrapper.lgv_mrt_gem_box_inner{justify-content: start;}
    .lgv_top_bnn_wrap.pc{display: none;}
    .lgv_top_bnn_wrap.mo{display: block; max-width: 480px; margin: 0 auto 40px;}
    .lgv_top_bnn_wrap.mo .lgv_top_bnn_inner{padding-bottom: 66%;}
    .lgv_main.my_tab{margin-top: 0;}
    .lgv_tab_area{max-width: 480px;}
    .lgv_tab_grid{column-gap: 30px}
    .lgb_tab_lb{font-size: 22px;}
    .lgv_mrr_thead{position: relative; top: unset;}
    .lgv_main_inner{grid-template-columns: 1fr; row-gap: 20px;}
    .lgv_gem_box{width: 100%; max-width: 480px; margin: 0 auto 20px; grid-template-columns: 180px auto; }
    .lgv_gem_box_inner{height: 130px;}
    .lgv_gem_bg{width: 100%; height: 100%;}
    .lgv_gem_ill_wrap{padding: 10px 0;}
    .lgv_gem_ill_inner{padding-bottom: 60%;}
    .lgv_gem_timer_inner{flex-direction: column; height: 100%;}
    .lgv_note_box{width: 100%; max-width: 480px; margin: 0 auto;}
    .lgv_main_ranking_area{width: 100%; max-width: 480px; margin: 0 auto 20px;}
    .lgv_main_ranking_row{height: 50px;}
    .lgv_mrr_col.rank.medal_1,.lgv_mrr_col.rank.medal_2,.lgv_mrr_col.rank.medal_3{width: 40px;height: 40px;line-height: 40px;}
    .lgv_mrr_col.rank{font-size: 25px;}
    .lgv_mrr_col{font-size: 15px;}
    .lgv_main_ranking_row_etc{height: 40px;}
    .lgv_mrr_etc_lb{font-size: 15px;}
    .lgv_mrr_more_btn_row{height: 40px;}
    .lgv_mrr_more_btn_row .lgv_mrr_more{font-size: 15px;}
    .lgv_main_ranking_row_etc.advance .lgv_mrr_etc_lb::before,
    .lgv_main_ranking_row_etc.advance .lgv_mrr_etc_lb::after { border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #26FF2D; }
    .lgv_main_ranking_row_etc.downgrade .lgv_mrr_etc_lb::before,
    .lgv_main_ranking_row_etc.downgrade .lgv_mrr_etc_lb::after { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #ED4F44; }
    .lgv_mrr_more_btn_row .lgv_mrr_more::after { margin-top: 3px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #FFF; }

}
@media screen and (max-width:767px) {
    .lgv_tab_grid{column-gap: 20px}
    .lgb_tab_lb{font-size: 18px;}
    .lgv_tab_area{margin-bottom: 0;}
    .swiper-container.lgv_mrt_gem_box{margin-bottom: 20px;width: calc(100% + 40px); margin-left: -20px;}
    .swiper-wrapper.lgv_mrt_gem_box_inner{padding: 20px 0;}

    .lgv_mrt_tbl_row{height: 50px; padding: 0 30px;}
    .lgv_mrt_tbl_col{font-size: 15px;}
    .lgv_mrt_tbl_col.rank{ margin: 0 auto; }
    .lgv_mrt_tbl_row.rank_1 .lgv_mrt_tbl_col.rank{font-size: 25px; line-height: 45px; width: 45px; height: 45px; }
    .lgv_mrt_tbl_row.rank_2 .lgv_mrt_tbl_col.rank{font-size: 25px; line-height: 45px; width: 45px; height: 45px; }
    .lgv_mrt_tbl_row.rank_3 .lgv_mrt_tbl_col.rank{font-size: 25px; line-height: 45px; width: 45px; height: 45px; }
    .lgv_mrt_tbl_col.reward span{ padding-left: 30px;}
    .lgv_mrt_tbl_col.reward span::before{width: 25px; height: 25px;}
    .lgv_mrt_tbl_row.rank_1 .lgv_mrt_tbl_col.reward span{padding-left: 45px; font-size: 21px;}
    .lgv_mrt_tbl_row.rank_1 .lgv_mrt_tbl_col.reward span::before{width: 40px; height: 40px;}
    .lgv_mrt_tbl_row.rank_2 .lgv_mrt_tbl_col.reward span{padding-left: 40px; font-size: 19px;}
    .lgv_mrt_tbl_row.rank_2 .lgv_mrt_tbl_col.reward span::before{width: 35px; height: 35px;}
    .lgv_mrt_tbl_row.rank_3 .lgv_mrt_tbl_col.reward span{padding-left: 35px; font-size: 17px;}
    .lgv_mrt_tbl_row.rank_3 .lgv_mrt_tbl_col.reward span::before{width: 30px; height: 30px;}

}
@media screen and (max-width:480px) {
    .lgv_note_box_lb{font-size: 20px;}
    .lgv_note_box_row_tt{font-size: 16px;}
    .lgv_note_box_row_desc p{font-size: 15px;}
    .lgv_top_bnn_wrap.mo{margin: 0 auto 25px;}
    .lgv_tab_grid{column-gap: 10px}
    .lgb_tab_lb{font-size: 15px;}
    .lgv_gem_timer_lb{font-size: 18px}
    .lgv_mrr_col.rank{font-size: 20px;}
    .lgv_mrr_col{font-size: 14px;}
    .lgv_mrr_thead{height: 35px;}
    .lgv_main_ranking_row,.lgv_mrr_thead{padding: 0 5px; column-gap: 5px; grid-template-columns: 60px 1fr 120px;}
    .lgv_mrr_thead_td{font-size: 14px;}
    .lgv_gem_timer_vals span{font-size: 18px;width: 40px;min-width: 40px;}
    .lgv_mrr_col.rank.medal_1, .lgv_mrr_col.rank.medal_2, .lgv_mrr_col.rank.medal_3{width: 30px;height: 30px;line-height: 30px;}
    .lgv_note_box_inner{padding: 15px;}

    .lgv_mrt_tbl_row{height: 40px; padding: 0 10px;grid-template-columns: 60px 135px;}
    .lgv_mrt_tbl_col{font-size: 14px;}
    .lgv_mrt_tbl_col.rank{ margin: 0 auto; }
    .lgv_mrt_tbl_row.rank_1 .lgv_mrt_tbl_col.rank{font-size: 20px; line-height: 35px; width: 35px; height: 35px; }
    .lgv_mrt_tbl_row.rank_2 .lgv_mrt_tbl_col.rank{font-size: 20px; line-height: 35px; width: 35px; height: 35px; }
    .lgv_mrt_tbl_row.rank_3 .lgv_mrt_tbl_col.rank{font-size: 20px; line-height: 35px; width: 35px; height: 35px; }
    .lgv_mrt_tbl_col.reward span{ padding-left: 20px;}
    .lgv_mrt_tbl_col.reward span::before{width: 17px; height: 17px;}
    .lgv_mrt_tbl_row.rank_1 .lgv_mrt_tbl_col.reward span{padding-left: 35px; font-size: 19px;}
    .lgv_mrt_tbl_row.rank_1 .lgv_mrt_tbl_col.reward span::before{width: 30px; height: 30px;}
    .lgv_mrt_tbl_row.rank_2 .lgv_mrt_tbl_col.reward span{padding-left: 30px; font-size: 17px;}
    .lgv_mrt_tbl_row.rank_2 .lgv_mrt_tbl_col.reward span::before{width: 25px; height: 25px;}
    .lgv_mrt_tbl_row.rank_3 .lgv_mrt_tbl_col.reward span{padding-left: 25px; font-size: 15px;}
    .lgv_mrt_tbl_row.rank_3 .lgv_mrt_tbl_col.reward span::before{width: 20px; height: 20px;}

}
@media screen and (max-width:430px) {
    .lgv_gem_box{grid-template-columns: 150px auto;}
    .lgv_gem_ill_inner{padding-bottom: 74%}
}

/* **************************** League **************************** */








/* **************************** quest final reward pop **************************** */

.eve_notice_pop { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); align-items: center; justify-content: center; z-index: 9999; }
.eve_notice_pop.view{ }
.eve_notice_pop_inner { position: relative; background: #161740; max-width: 480px; width: 90%; max-height: 90vh; padding: 35px 40px; overflow-y: auto; border-radius: 10px; color: #fff; }
.eve_notice_pop_close { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; background: transparent; border: none; cursor: pointer; }
.eve_notice_pop_close::before,
.eve_notice_pop_close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: #fff; }
.eve_notice_pop_close::before { transform: translate(-50%, -50%) rotate(45deg); }
.eve_notice_pop_close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.eve_notice_pop_cont{}
.eve_notice_pop_tt{text-align: center; font-size: 30px; font-weight: bold; color: #FFF; margin-bottom: 6px;}
.eve_notice_pop_tt_sub{text-align: center; margin-bottom: 20px; font-size: 15px; color: #CDADFF; padding-bottom: 10px; border-bottom: 1px solid #CDADFF; }
.eve_notice_pop_reward_amt{ text-align: center; margin-bottom: 20px; }
.eve_notice_pop_reward_amt span{position: relative; padding-left: 55px; font-size: 40px; font-weight: bold; background: linear-gradient(#FFC72D, #FEFECF, #BF7F17, #97570E);-webkit-background-clip: text;-webkit-text-fill-color: transparent; }
.eve_notice_pop_reward_amt span::before{ content: ''; position: absolute; left: 0; top: 50%; transform:translateY(-50%); width: 50px; height: 50px; background-repeat: no-repeat; background-size: contain; background-position: center; }
.eve_notice_pop_reward_amt.bg span::before{ background-image: url("/images/ico_coin.svg")}
.eve_notice_pop_reward_amt.ec span::before{ background-image: url("/images/ico_sc.png")}
.eve_notice_pop_btn_wrap{ text-align: center; }
.eve_notice_pop_btn_wrap .eve_notice_pop_off{width: 100%; max-width: 250px; text-align: center; padding: 10px 0; border-radius: 30px; font-size: 17px; color: #FFF; background: linear-gradient(180deg, #FF9D02 0%, #FE5100 100%); }
/* **************************** quest final reward pop **************************** */