/* 갑작스런 튕김/라버밴드 방지 */
html, body {overscroll-behavior: none;}
html,body {}
img {max-width: 100%;}
body {width: 100%; margin: 0 auto; }
.all_bg {background:rgba(0, 0, 0, 0.8); width:100%; height: 100%; position: fixed; left:0; top:0; display: none; z-index: 301;}
.wrap02 {}
.wrap02 .wrap02_inner {max-width: 548px; margin: 0 auto;  position: relative; padding: 50px 20px;}
.noscroll {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}

header {position: relative;}
header .h1_tit {text-align: center; font-size: 20px; font-weight: 700; color: #ffdc64;}
header .join_btn {position: absolute; right: 17px; top: 20px;}
header .join_btn a {font-size: 12px; font-weight: 700; color: #C6B64D; display: block; line-height: 24px;}
header .join_btn a.logout {display: flex; align-items: center; gap: 6px;}
header .join_btn a.logout::before {content:''; display: block; width: 10px; height: 24px; background: url(../images/logout_icon.svg) no-repeat 0 6px;}

header .all_menu_btn {border: none; background: url(../images/all_menu.svg) no-repeat center; font-size: 0; width: 29px; height: 19px; position: absolute; right: 0; top: 50%;
 transform: translateY(-50%); cursor: pointer;}
header .all_menu {display: none; position: fixed; right: -100%; top: 0; height: 100vh; background: #F3F4F8; z-index: 400; width: 80%; }
header .all_menu .close_area {background: #fff; height: 60px; display: flex; align-items: center;  justify-content: end; padding: 0 20px;}
header .all_menu .close_area .all_menu_close {background: url(../images/close_btn.svg) no-repeat center; font-size: 0; width: 30px; height: 30px; border: none; cursor: pointer; }

header .all_menu .login_area { margin-top: 13px;}
header .all_menu .login_area .logon_box {padding: 40px 27px; background: #fff; }
header .all_menu .login_area .logon_box > a {display: flex; align-items: center; justify-content: center; margin: 40px 0; width: 100%; border-radius: 6px; background: #FBDB5A; font-size: 14px; line-height: 171%; font-weight: 700; padding: 12px 0; }

header .all_menu .login_area .sub_menu_inner {}
header .all_menu .login_area .sub_menu_inner .h_menu {background: #fff; padding: 0 27px;}
header .all_menu .login_area .sub_menu_inner .h_menu ~ .h_menu {margin-top: 13px; }
header .all_menu .login_area .sub_menu_inner .h_menu ul {}
header .all_menu .login_area .sub_menu_inner .h_menu ul li {border-top: solid 10px #F3F4F8;} 
header .all_menu .login_area .sub_menu_inner .h_menu ul li a {display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; color: #273B27; line-height: 24px; padding: 13px 0 13px 10px;  } 
header .all_menu .login_area .sub_menu_inner .h_menu ul li a::after {content:''; display: block; width: 20px; height: 20px; background: url(../images/gap_icon.svg) no-repeat center; }

.nickname_area {}
.nickname_area .items {display: flex; align-items: center; }
.nickname_area .items strong {display: block; font-size: 14px; font-weight: 700; color: #273B27; max-width: 140px; }
.nickname_area .items em {font-size: 14px; font-weight: 400; margin-left: 18px;}
.nickname_area .items button {border: none; width: 18px; height: 18px; background: url(../images/modify_icon.svg?ver=0.1) no-repeat center; font-size: 0 ; margin-left:3px; }
.nickname_area .items .btn {display: flex; align-items: center; gap: 9px; margin-left: 15px;}
.nickname_area .items .btn a {color: #273B27; font-size: 14px; font-weight: 500; line-height: 24px; border-radius: 4px; background: #FBDB5A; padding: 4px 12px; }
.nickname_area .items .btn a.type01 {background: #D9D9D9;}
.nickname_area .items input {max-width: 140px; width: 100%; border-radius: 4px; border: 1px solid #D9D9D9; background: #F3F4F8; line-height: 24px; outline: none; padding: 0 12px 0 7px; height: 32px; }
.nickname_area .erro_txt {display: block; margin-top: 12px; color: #DD4D4D; font-size: 110px; font-weight: 500; }



.bingo_box {background: #F4F3F2; border-radius: 8px; padding: 20px 0 0 0; }

.tab_area01 {margin: 30px 0 20px 0;}
.tab_area01 ul {display: flex; align-items: center; gap: 33px;  }
.tab_area01 ul li.on {}
.tab_area01 ul li.on a {color: #c80000;  font-weight: 600; }
.tab_area01 ul li a {display: block; text-align: center; color: #CDCDCD; font-size: 14px; }


/*카운트다운*/
.countdown_box {background: #FBDB5A; border-radius: 8px; padding: 15px 43px; margin-bottom: 23px;  } 
.countdown {display: flex; align-items: center; justify-content: space-between; gap: 32px;}
.countdown::before {content: ''; display: block; width: 139px; background: url(../images/deadline_txt.svg) no-repeat center; height: 26px;} 
.countdown h3 {font-size: 27px; line-height: 30px; font-weight: 700; color:#161616; text-align:center; width: 250px; }
.countdown_area.on .countdown_box {background: #AC0000; }
.countdown_area.on .countdown_box h3 {color:#fff;}
.countdown_area.on .countdown::before {content: ''; display: block; width: 139px; background: url(../images/deadline_txt02.svg) no-repeat center; height: 26px;} 

/* 빙고 개수 */
.bingo_num {background: #F4F3F2; border-radius: 8px; padding: 12px 0; margin-bottom: 13px;  }
.bingo_num .bingo_txt {display: flex; align-items: center; justify-content: center;}
.bingo_num .bingo_txt h3 {font-size: 20px; line-height: 20px; font-weight: 600; color:#161616; text-align:center; min-width: 104px; display: flex; align-items: center; justify-content: center; gap: 10px;}
.bingo_num .bingo_txt h3.score {color: #D31313; }
.bingo_num .bingo_txt h3.correct::before {content: '정답'; display: block; font-size: 12px;  color: #161616; font-weight: 500;}
.bingo_num .bingo_txt h3.bingo::before {content: '빙고'; display: block; font-size: 12px;  color: #161616; font-weight: 500;}  
.bingo_num .bingo_txt h3.score::before {content: '오늘의 점수'; display: block; font-size: 12px;  color: #D31313; font-weight: 500;}  


/* 오늘의 경기 */
.today_game {margin-bottom: 12px; }
.today_game a {display: flex; align-items: center; justify-content: center; gap: 10px;   font-size: 14px; color: #FBDB5A; line-height: 24px;  }
.today_game a::after {content: ''; display: block; width: 9px; height: 9px; border-radius: 100%; background: #FBDB5A; }


.top_days {margin-bottom: 15px; position: relative; max-width: 420px;  margin: 0 6%;}
.day_box {text-align: center; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.day_box .tit {font-size: 20px; line-height: 1; color: #454545; display: flex; align-items: center; margin:0 8px;  font-weight: 700;}
.day_box .tit span {display: none; font-size:10px; line-height: 1; width:18px; height:18px; background:#B9C1DB; color:#484F68;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-left: 5px; padding-top: 5px;}
.day_box > span {display: block; width: 40px; height: 40px; text-indent: -999em; cursor: pointer;}
.day_box span.prev {background: url(../images/day_prev_btn.svg) no-repeat center; background-size: 40px; }
.day_box span.next {background: url(../images/day_next_btn.svg) no-repeat center; background-size: 40px; }
.top_days .auto_select {position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; font-size: 14px; color: #454545;line-height: 30px; cursor: pointer;  }
.top_days .auto_select::before {content: ''; display: block; width: 18px; height: 18px; background: url(../images/Isolation_icon.svg) no-repeat center; border-radius: 100%; }

.top_days .today_select {position: absolute; left: 18px; top: 50%; transform: translateY(-46%); display: flex; align-items: center; gap: 6px; font-size: 14px; color: #454545;line-height: 30px; cursor: pointer;  }
.top_days .today_select::before {content: ''; display: block; width: 20px; height: 20px; background: url(../images/today_icon.svg) no-repeat center; border-radius: 100%; background-size: 15px; }

.top_days .all_reset {position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; font-size: 14px; color: #454545;line-height: 30px;}
.top_days .all_reset::before {content: ''; display: block; width: 14px; height: 14px; background: url(../images/reset_icon.svg) no-repeat center; background-size: 100%; }




.bingo_area {width: 100%; border-radius: 10px;  margin-bottom: 40px;}
.bingo_area .inner {position: relative; z-index: 100; max-width: 420px;  margin: 0 auto;}
.bingo_area .bingo_board {display: flex; flex-wrap: wrap; gap: 22px; }
.bingo_area .bingo_board .cell {flex: 0 0 calc((100% - 44px) / 3); position: relative; background: url(../images/Player_select.svg) no-repeat center; background-size: 100%; border-radius: 100%; overflow: hidden; }
.bingo_area .bingo_board .cell.on {background: url(../images/Player_bg01.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.fixed {background: url(../images/club_select.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.fixed.on {background: url(../images/club_bg.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell:nth-child(5) {background: url(../images/club_select.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell:nth-child(5).on {background: url(../images/club_bg.svg) no-repeat center; background-size: 100%;}

.bingo_area .bingo_board .cell.on.checked {background: url(../images/p_check_bg01.svg) no-repeat center; background-size: 100%;} 
.bingo_area .bingo_board .cell.on.checked.bingo {background: url(../images/p_check_bg01.svg) no-repeat center; background-size: 100%;} 
.bingo_area .bingo_board .cell::after {content: ''; display: block; padding-bottom: 100%;} 
.bingo_area .bingo_board .cell .card, 
.bingo_area .bingo_board .cell .team {position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700;  color: #F0F8F0; padding-top: 0; flex-direction: column; line-height: 22px;}
.bingo_area .bingo_board.cell_move .cell .card,
.bingo_area .bingo_board.cell_move .cell .team {color: #161515; }
.bingo_area .bingo_board .cell .team {font-size: 0; line-height: 42px; }

.bingo_area .bingo_board .cell.on.checked .card, 
.bingo_area .bingo_board .cell.on.checked .team {}
.bingo_area .bingo_board .cell.on.checked.bingo .card {color: #264725; }

.bingo_area .bingo_board .cell.on .card::after {content:''; display: none; width: 16px; height: 16px; background: url(../images/p_plus_icon.svg) no-repeat center; background-size: 16px; margin-top: 6px; }
.bingo_area .bingo_board .cell.on.fixed .team::after {content:''; display: none; width: 16px; height: 16px; background: url(../images/p_plus_icon.svg) no-repeat center; background-size: 16px; margin-top: 6px; }

.bingo_area .bingo_board.cell_cp .cell.on .card {color: #161515; }

.bingo_area .bingo_board.cell_cp .cell .card,
.bingo_area .bingo_board .cell.checked .team,
.bingo_area .bingo_board.cell_cp .cell .team {padding-top: 0; }
.bingo_area .bingo_board.cell_cp .cell .card::after,
.bingo_area .bingo_board.cell_cp .cell .team::after {display: none !important; }

.bingo_area .bingo_board .cell.on.t_1001:nth-child(5) {background: url(../images/t_1001.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.on.t_2002:nth-child(5) {background: url(../images/t_2002.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.on.t_3001:nth-child(5) {background: url(../images/t_3001.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.on.t_5002:nth-child(5) {background: url(../images/t_5002.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.on.t_6002:nth-child(5) {background: url(../images/t_6002.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.on.t_7002:nth-child(5) {background: url(../images/t_7002.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.on.t_9002:nth-child(5) {background: url(../images/t_9002.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.on.t_10001:nth-child(5) {background: url(../images/t_10001.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.on.t_11001:nth-child(5) {background: url(../images/t_11001.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.on.t_12001:nth-child(5) {background: url(../images/t_12001.svg) no-repeat center; background-size: 100%;}

.bingo_area .bingo_board .cell.checked.t_1001:nth-child(5) {background: url(../images/t_1001_on.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.checked.t_2002:nth-child(5) {background: url(../images/t_2002_on.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.checked.t_3001:nth-child(5) {background: url(../images/t_3001_on.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.checked.t_5002:nth-child(5) {background: url(../images/t_5002_on.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.checked.t_6002:nth-child(5) {background: url(../images/t_6002_on.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.checked.t_7002:nth-child(5) {background: url(../images/t_7002_on.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.checked.t_9002:nth-child(5) {background: url(../images/t_9002_on.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.checked.t_10001:nth-child(5) {background: url(../images/t_10001_on.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.checked.t_11001:nth-child(5) {background: url(../images/t_11001_on.svg) no-repeat center; background-size: 100%;}
.bingo_area .bingo_board .cell.checked.t_12001:nth-child(5) {background: url(../images/t_12001_on.svg) no-repeat center; background-size: 100%;}

.bingo_area .bingo_board .cell.starting::before {content:'선발'; position: absolute; left: 0; bottom: 15px; width: 100%; font-size: 12px; font-weight: 600; text-align: center; color: #D31313;}

.notice_txt {text-align: center; font-size: 12px; color: #000; padding-top: 20px; font-weight: 600;  }

.save_btn {display: flex; align-items: center; justify-content: center; padding: 10px 20px 20px;}
.save_btn button {border: none; border-radius: 8px; background: #860000; color: #fff; font-size: 15px; font-weight: 700; padding: 7px 10px; cursor: pointer; width: 100%; }
.save_btn button.change {background: #ffdc64; color: #000;}
.save_btn button.ing {background: #A7A7A7;  color: #fff;}
.save_btn button.end {background: #353434;  color: #fff;}


.bingo_board.cell_move .cell[draggable="true"] { cursor: grab; }
.bingo_board.cell_move .cell.dragging { opacity: 0.6; cursor: grabbing; }
.bingo_board.cell_move .cell.drag-over { outline: 3px dashed #ff0000; }
.bingo_board.cell_move .cell.fixed { cursor: auto; position: relative; }
.bingo_area .bingo_board .cell.t_1001.checked .card,
.bingo_area .bingo_board .cell.t_2002.checked .card,
.bingo_area .bingo_board .cell.t_3001.checked .card,
.bingo_area .bingo_board .cell.t_5002.checked .card,
.bingo_area .bingo_board .cell.t_6002.checked .card,
.bingo_area .bingo_board .cell.t_7002.checked .card,
.bingo_area .bingo_board .cell.t_9002.checked .card,
.bingo_area .bingo_board .cell.t_10001.checked .card,
.bingo_area .bingo_board .cell.t_11001.checked .card,
.bingo_area .bingo_board .cell.t_12001.checked .card {flex-direction: column; line-height: 22px; color: #161515;}

.bingo_area .bingo_board .cell .card::before {content:' '; font-size: 14px; }
.bingo_area .bingo_board .cell.t_1001 .card::before {content:'삼성'; display: block; }
.bingo_area .bingo_board .cell.t_2002 .card::before {content:'KIA'; display: block;}
.bingo_area .bingo_board .cell.t_3001 .card::before {content:'롯데'; display: block;}
.bingo_area .bingo_board .cell.t_5002 .card::before {content:'LG'; display: block;}
.bingo_area .bingo_board .cell.t_6002 .card::before {content:'두산'; display: block;}
.bingo_area .bingo_board .cell.t_7002 .card::before {content:'한화'; display: block;}
.bingo_area .bingo_board .cell.t_9002 .card::before {content:'SSG'; display: block;}
.bingo_area .bingo_board .cell.t_10001 .card::before {content:'키움'; display: block;}
.bingo_area .bingo_board .cell.t_11001 .card::before {content:'NC'; display: block;}
.bingo_area .bingo_board .cell.t_12001 .card::before {content:'KT'; display: block;}


/* 드래그 중 터치 제스처를 브라우저가 가로채지 않도록 */
.bingo_board .cell {touch-action: none;}
/* 드래그 중 스크롤 잠금 (JS에서 body.no-touch-scroll 토글) */
body.no-touch-scroll {overflow: hidden; overscroll-behavior: contain;}

/* 만약 셀 내부 요소가 터치 타깃을 가로챈다면 */
.bingo_board .cell a,
.bingo_board .cell img {pointer-events: none; }



/* Modal Styles */
.modal {background: #fff; padding: 24px 18px 20px 18px; border-radius: 20px;  position: fixed; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 999; width: calc(100% - 20px); height: 85%; max-width: 620px; overflow: hidden; display: none; }
.modal .modal-content {border-radius: 10px; }

.list_save {border: none; border-radius: 8px; background: #ffdc64; color: #333; font-size: 16px; font-weight: 700; padding: 12px 20px; text-align: center; width: 100%;
 display: block; margin: 15px auto 10px auto}

.play_larea {overflow-y: auto;}

/* 선수선택 */
.play_list ul {}
.play_list ul li {display: flex; flex-direction: column; align-items: start; border-radius: 12px; gap: 5px; background: #F8F8F8;padding: 8px 10px; cursor: pointer; }
.play_list ul li ~ li {margin-top: 12px; }
.play_list ul li .player_info {display: flex; align-items: center; gap: 17px;}
.play_list ul li .player_info .selec {position: relative;}
.play_list ul li .player_info .selec .player_img {width: 64px; height: 72px; overflow: hidden; border-radius: 5px; background: #fff; }
.play_list ul li .player_info .selec .selec_in {width: 20px; height: 20px; background: #B51023; font-size: 10px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 100%; position: absolute; right: -7px; bottom: -5px;}
.play_list ul li .player_info .p_name_box {}
.play_list ul li .player_info .p_name_box .p_inner {display: flex; gap: 10px; }
.play_list ul li .player_info .p_name_box .name {font-size: 20px; font-weight: 700; color: #414141; line-height: 20px;  }
.play_list ul li .player_info .p_name_box .team {font-size: 0; font-weight: 700; color: #414141; display: flex; align-items: center; gap: 7px; }
.play_list ul li .player_info .p_name_box .b_ave {display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.play_list ul li .player_info .p_name_box .b_ave .item {font-size: 16px; font-weight: 300; color: #161616; }
.play_list ul li .player_info .p_name_box .b_ave .item.top {color: #B51023; display: flex; align-items: center; }
.play_list ul li .player_info .p_name_box .b_ave .item em {font-size: 14px; color: #161616; margin-right: 5px; }
.play_list ul li .player_info .p_name_box .b_ave .item span {font-size: 14px; color: #B51023; display: block; width: 50px; text-align: right; }
.play_list ul li .player_info .p_name_box .p_inner .m_type {display: none; }



.play_list ul li .player_info .p_name_box .team::before {content:''; display: block; width: 20px; height: 20px; border-radius: 100%; background-size: contain !important;}
.play_list ul li .player_info .p_name_box .team.t_1001::before {background: url(/data/team/ci/2025/1001.svg) no-repeat center;}
.play_list ul li .player_info .p_name_box .team.t_2002::before {background: url(/data/team/ci/2025/2002.svg) no-repeat center;}
.play_list ul li .player_info .p_name_box .team.t_3001::before {background: url(/data/team/ci/2025/3001.svg) no-repeat center;}
.play_list ul li .player_info .p_name_box .team.t_5002::before {background: url(/data/team/ci/2025/5002.svg) no-repeat center;}
.play_list ul li .player_info .p_name_box .team.t_6002::before {background: url(/data/team/ci/2025/6002.svg) no-repeat center;}
.play_list ul li .player_info .p_name_box .team.t_7002::before {background: url(/data/team/ci/2025/7002.svg) no-repeat center;}
.play_list ul li .player_info .p_name_box .team.t_9002::before {background: url(/data/team/ci/2025/9002.svg) no-repeat center;}
.play_list ul li .player_info .p_name_box .team.t_10001::before {background: url(/data/team/ci/2025/10001.svg) no-repeat center;}
.play_list ul li .player_info .p_name_box .team.t_11001::before {background: url(/data/team/ci/2025/11001.svg) no-repeat center;}
.play_list ul li .player_info .p_name_box .team.t_12001::before {background: url(/data/team/ci/2025/12001.svg) no-repeat center;}


.play_list ul li .game_box {display: flex; align-items: center; gap: 10px;}
.play_list ul li .game_box .g_item {width: 20px; height: 20px; font-size: 0; background-size: contain !important;}
.play_list ul li .game_box .g_item.failed {background: url(../images/x_icon.svg) no-repeat center;}
.play_list ul li .game_box .g_item.pass {background: url(../images/triangle_icon.svg) no-repeat center;}
.play_list ul li .game_box .g_item.succ {background: url(../images/circle_icon.svg) no-repeat center;}

/* 선수선택 활성화 */
.play_list ul li.active {background: #FBDB5A; }
.play_list ul li.active .player_info .p_name_box .b_ave {background: transparent;}

/* 선수선택 비활성화 */
.play_list ul li.disabled {pointer-events: none; opacity: 0.5; user-select: none;  }
.play_list ul li.disabled .game_box .g_item.failed {background: url(../images/x_icon.svg) no-repeat center;}
.play_list ul li.disabled .game_box .g_item.succ {background: url(../images/circle_icon.svg) no-repeat center;}
.play_list ul li.disabled .player_info .p_name_box .b_ave {background: transparent;}


.tit_area {display: none; align-items: center; justify-content: space-between; margin-bottom: 8px;}
.tit_area .item {color: #6B8D6A; font-size: 12px; border-radius: 8px; line-height: 24px; width: 55px; text-align: center;}
.game_list {}
.game_item {display: flex; width: 100%; align-items: center; justify-content: space-between; border-radius: 8px; background: #F8F8F8; position: relative; overflow: hidden; }
.game_item ~ .game_item {margin-top: 10px; }
.game_item .item {flex: 1; padding: 18px; cursor: pointer; }
.game_item .item .i_inner {display: flex; align-items: center; gap: 17px; }
.game_item .item .i_inner .team_photo {width: 55px; height: 55px; border-radius: 100%; display: flex; align-items: center; justify-content: center; background-size: contain !important;}
.game_item .item .i_inner .t_info {}
.game_item .item .i_inner .t_info .t_name {font-size: 16px; font-weight: 700; color: #161616; line-height: 1;  }
.game_item .item .i_inner .t_info .l_game {display: flex; align-items: center; font-size: 14px; font-weight: 300; min-width: 100px; line-height: 16px; padding: 5px 0; gap: 10px; }
.game_item .item .i_inner .t_info .l_game.l_end {justify-content: end;}
.game_item .item .i_inner .t_info .l_game span {display: block; font-size: 12px; color: #161616; font-weight: 700;}
.game_item .item .i_inner .t_info .t_point {display: flex; align-items: center; font-size: 12px; color: #B51023; font-weight: 700; gap: 10px; }
.game_item .item .i_inner .t_info .t_point span {font-size: 12px; display: block; color: #B51023; }
.game_item .vs {width: 88px; color: #161616; font-size: 12px; text-align: center; position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%; font-weight: 600; }
.game_item .vs::after {content:'VS'; display: block; font-size: 16px; font-weight: 700; color: #B51023; margin-top: 6px; }

.game_item .item.home .i_inner {justify-content: end;}
.game_item .item.home .i_inner .t_info .t_name {text-align: right; }


/* 팀선택시 */
.game_item.select_game {background: #F8F8F8;}
.game_item.select_game {}
.game_item.select_game .item.active {background: #FBDB5A; }
.game_item.select_game .item.active .i_inner .t_info .l_game {background: transparent;}
.game_item.select_game .item.active .i_inner .t_info .t_name {color: #161616; }
.game_item.select_game .item.active .i_inner .t_info .l_game {color: #161616; background: transparent;}
.game_item.select_game .item.active .i_inner .t_info .l_game span {color: #161616;}

/*
.game_item.select_game .item .item .i_inner .team_photo::before {color: #919191; }
.game_item.select_game .item .i_inner .t_info .t_name {color: #919191; }
.game_item.select_game .item .i_inner .t_info .l_game {color: #919191; background: transparent;}
.game_item.select_game .item .i_inner .t_info .l_game span {color: #A19256;}
*/

.game_item .item .i_inner .team_photo::before {content:''; font-size: 16px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.game_item .item .i_inner .team_photo.t_1001 {background: url(/data/team/ci/2025/1001.svg) no-repeat center;}
.game_item .item .i_inner .team_photo.t_2002 {background: url(/data/team/ci/2025/2002.svg) no-repeat center;}
.game_item .item .i_inner .team_photo.t_3001 {background: url(/data/team/ci/2025/3001.svg) no-repeat center;}
.game_item .item .i_inner .team_photo.t_5002 {background: url(/data/team/ci/2025/5002.svg) no-repeat center;}
.game_item .item .i_inner .team_photo.t_6002 {background: url(/data/team/ci/2025/6002.svg) no-repeat center;}
.game_item .item .i_inner .team_photo.t_7002 {background: url(/data/team/ci/2025/7002.svg) no-repeat center;}
.game_item .item .i_inner .team_photo.t_9002 {background: url(/data/team/ci/2025/9002.svg) no-repeat center;}
.game_item .item .i_inner .team_photo.t_10001 {background: url(/data/team/ci/2025/10001.svg) no-repeat center;}
.game_item .item .i_inner .team_photo.t_11001 {background: url(/data/team/ci/2025/11001.svg) no-repeat center;}
.game_item .item .i_inner .team_photo.t_12001 {background: url(/data/team/ci/2025/12001.svg) no-repeat center;}




.select_player {}
.select_player .tit {text-align: center; font-size: 18px; font-weight: 700; margin-bottom: 10px; color: #161616; line-height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative;}
.select_player .tit a {display: flex; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 70px; }
.select_player .tit::before,
.select_player .tit::after {content:''; display: block; width: 56px; height: 6px; background: url(../images/tit_point.svg) no-repeat center;}
.select_player .tit span {color: #161616;}
.select_player .select_div {width: 100%; }
.select_player .select_div select {padding: 10px; outline: none;}

#bingo-lines {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.line {position: absolute; border-radius: 4px; /*background: #FBDB5A;*/ }
.line.row-0, .line.row-1, .line.row-2 { height: calc((100% - 44px) / 3); width: 90%;left: 50%; transform: translateX(-50%);}
.line.row-0 { top: 0; }
.line.row-1 { top: 50%; transform: translate(-50%, -50%);}
.line.row-2 { bottom: 0; }
.line.col-0, .line.col-1, .line.col-2 {width: calc((100% - 44px) / 3); height: 70%; top: 50%; transform: translateY(-50%); }
.line.col-0 { left: 0; }
.line.col-1 { left: 50%;  transform: translate(-50%, -50%);}
.line.col-2 { right: 0%; }
.line.diag-0 {width: 100%; height: calc((100% - 44px) / 3); top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); transform-origin: center; }
.line.diag-1 {width: 100%; height: calc((100% - 44px) / 3); top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); transform-origin: center; }
.line.row-0::after, 
.line.row-1::after, 
.line.row-2::after {content: ''; display: block; height: 20px; width: 100%; background: #D31313; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.line.col-0::after,
.line.col-1::after,
.line.col-2::after {content: ''; display: block; height: 100%; width: 20px; background: #D31313; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.line.diag-0::after,
.line.diag-1::after {content: ''; display: block; height: 20px; width: 100%; background: #D31313; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }



.login_befor {display: flex; width: 100%; position: relative; border-radius: 16px; background: rgba(59, 93, 58, 0.40); margin-top: 34px; }
.login_befor::after {content: ''; display: block; padding-bottom: 100%;}
.login_befor .btn_inner {position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.login_befor .btn_inner a { font-size: 20px; font-weight: 700; display: block; margin: 0 11%;}

.submit_box {display: flex; width: 100%; position: relative; border-radius: 16px; }
.submit_box::after {content: ''; display: block; padding-bottom: 100%;}
.submit_box .no_txt {position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #161616; }

.player_select_box {display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; }

.select_sarea {display: flex; align-items: center; gap: 10px; }
.select_box01 {position: relative; margin-right: 6px; min-width: 66px;}
.select_box01 select {-webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none;  font-size: 14px; height: 36px; line-height: 36px; outline: none; width: 100%; color: #414141; padding: 0 25px 0 10px;}
.select_box01 select option {background: #fff; color: #747474; outline: none; box-shadow: 0 0 5px rgba(0, 0, 0, 0.45); }
.select_box01::before {content: ""; position: absolute; top: 0; right: 0; display: block; width: 25px; height: 35px; background: url(../images/select_down.svg) no-repeat 0 center; z-index: -1;}
.select_box01 select::-ms-expand {display: none;}
.select_box01 select option:hover {box-shadow: 0 0 10px 100px red inset !important; color:white;}
.select_box01 select option:checked {box-shadow: 0 0 10px 100px red inset !important;}
  
.check_box {}
.check_box input[type="checkbox"]{display: none;}
.check_box input[type="checkbox"] + label{display: inline-block; position: relative; padding-left: 25px; color: #414141; font-size: 12px; line-height: 36px;}
.check_box input[type="checkbox"] + label::before{display:block; content:''; width: 20px; height: 20px; line-height:20px; text-align: center; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: url(../images/checkbox_off.svg) no-repeat center; }
.check_box input[type="checkbox"]:checked + label::before{ background: url(../images/checkbox_on.svg) no-repeat center;}


/* 랭킹 */

.table_area01 {background: #fff; }
.table_area01 table {width:100%;table-layout: fixed; }
.table_area01 table th {padding:13px 0; color: #161616;  font-size:13px; line-height: 1;  font-weight: 700;  background: #E9E9E9; }
.table_area01 table tbody tr td {vertical-align:middle; border-bottom: solid 1px #E9E9E9; font-size:13px;}
.table_area01 table tbody tr td p {display:flex; align-items:center; justify-content: center;}
.table_area01 table tbody tr td span {display:flex; align-items:center;justify-content: center; font-size: 12px; margin-top: 2px;   font-weight: 700;}
.table_area01 table tbody tr td span.up {color:#F4267C;}
.table_area01 table tbody tr td span.down {color:#2CA0F4;}
.table_area01 table tbody tr td.nickname div {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: left;   font-weight: 400; font-size: 13px; color: #fff; }
.table_area01 table tbody tr td span.up::before {content:""; width:16.5px; height:16px; background:url(../images/icon_arrow_up.svg) no-repeat 0 0; background-size:16.5px 16px;}
.table_area01 table tbody tr td span.down::before {content:""; width:16.5px; height:16px; background:url(../images/icon_arrow_down.svg) no-repeat 0 0; background-size:16.5px 16px;}
.table_area01 table tbody tr td.no_txt {text-align: center; height: 300px; font-size: 13px; color: #000; border-bottom:none; }



.table_area01 table td .new_rank {display: flex; align-items: center; padding: 6px 5px; background: #fff; text-align:center; font-size: 13px; line-height:16px; color:#454545;  font-weight: 400; position:relative;}
.table_area01 table td .new_rank .new_ranking {width: 18%;; color: #161616;}
.table_area01 table td .new_rank .new_nickname {width: 57%; text-align: left; color: #161616;}
.table_area01 table td .new_rank .new_nickname em {display:block; color: #161616; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.table_area01 table td .new_rank .new_point {width: 25%; color: #161616;}
.table_area01 table tr.loginUser .new_rank {background: #FBDB5A;}



.rank_top {position: relative; }
.rank_top .tit {font-size: 20px; line-height: 1; color: #161616; text-align: center; font-weight: 700;  display: flex; justify-content: center; background: #FBDB5A; border-radius: 6px; padding: 8px 0; margin-bottom: 10px;}
.rank_top .tit .txt {font-size: 20px; color: #161616; padding-top: 13px;}
.rank_top .select_area {display: flex; justify-content: end;}
.rank_top span.prev {display: block; width: 40px; height: 40px; text-indent: -999em; cursor: pointer; font-size: 0; background: url(../images/day_prev_btn02.svg) no-repeat center; background-size: 40px;}
.rank_top span.next {display: block; width: 40px; height: 40px; text-indent: -999em; cursor: pointer; font-size: 0; background: url(../images/day_next_btn02.svg) no-repeat center; background-size: 40px;}

/*셀렉트박스*/
.select_box {background: transparent; position: relative; min-width: 100px; }

.select_box:before { content: ""; position: absolute; top: 50%; right: 10px; width: 12px; height: 35px; background: url(../images/select_down02.svg) no-repeat 0 center; transition: transform 0.3s ease; transform:rotate(0deg) translateY(-50%)}
.select_box.disable:before { content: ""; position: absolute; top: 50%; right: 10px; width: 12px; height: 35px; background: none; transition: transform 0.3s ease; transform:rotate(0deg) translateY(-50%)}

.select_box label { position: absolute; top: 0; left: 0;  z-index:0; width: 100%; padding-left:16px; font-size:12px; color: #454545; padding-right: 10px; overflow: hidden; font-weight: 500; display: block; line-height: 35px;}
.select_box select {width: 100%; height: 100%; opacity: 0; filter:alpha(opacity=0); -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box;    height: 35px; padding: 0 25px 0 10px; }
.select_box.rotate:before {transform: rotate(180deg);}


/* 가이드 */

.guide_area {margin: 0 0 25px 0; }
.guide_area .g_inner {text-align: center; }
.guide_area .g_inner + .g_inner {margin-top: 70px; }
.guide_area .g_inner ul {}
.guide_area .g_inner ul li {margin-top: 20px; }


/*페이징*/
.paging {display: flex; align-items: center; justify-content: center;  margin-top: 20px; gap: 10px; }
.paging button {width:28px; height:28px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; border:none; font-size: 0; cursor: pointer; }
.paging button.prevPage {background: url(../images/prev_btn02.svg) no-repeat 0 0; background-size:28px;}
.paging button.nextPage {background: url(../images/next_btn02.svg) no-repeat 0 0; background-size:28px;}
.paging a {width:28px; height:28px; line-height: 28px; font-size: 14px;  text-align: center; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; color:#fff;  font-weight: 500; display: flex; align-items: center; justify-content: center; }
.paging a.nowPage {font-weight: 700; color: #102a0f; background: #FBDB5A;}


.event_link {display: flex; align-items: center; justify-content: end; padding: 0 20px 20px;}
.event_link a {display: flex; align-items: center; font-size: 15px; color: #333; gap: 5px;  }
.event_link a::after {content: '>';  font-size: 15px; color: #333; }



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

/* header { padding: 25px 0;} */
header .h1_tit {width: 71%; margin: 0 auto;}
header .join_btn {right: 0;}


header .all_menu {width: 100%; }


.top_days {position: relative; max-width: 420px; }
.day_box { margin-bottom: 15px;}
.day_box .tit {font-size: 16px; line-height: 1; margin:0 ; padding-top: 5px; }
.day_box > span {display: block; width: 30px; height: 30px; text-indent: -999em; cursor: pointer;}
.day_box span.prev {background: url(../images/day_prev_btn.svg) no-repeat center; background-size: 30px; }
.day_box span.next {background: url(../images/day_next_btn.svg) no-repeat center; background-size: 30px; }
.top_days .auto_select {left: 0; }
.top_days .all_reset {right: 0;}


.tab_area01 ul li a {font-size: 12px; line-height: 1;}

/*카운트다운*/

.countdown_box {border-radius: 8px; padding: 8px 0; margin-bottom: 15px;  } 
.countdown {padding: 0 20px; }
.countdown h3 {font-size: 18px; line-height: 30px; font-weight: 700; text-align:center; width: 50%; }
.countdown_area.on .countdown_box {}
.countdown_area.on .countdown_box h3 {color:#fff;}

.countdown::before {content: ''; display: block; width: 107px; background: url(../images/deadline_txt.svg) no-repeat center; height: 20px; background-size: contain;} 
.countdown_area.on .countdown::before {content: ''; display: block; width: 107px; background: url(../images/deadline_txt02.svg) no-repeat center; height: 20px; background-size: contain;}
 


/* 빙고 개수 */
.bingo_num { border-radius: 8px; padding: 8px 0; margin-bottom: 15px;  }
.bingo_num .bingo_txt h3 {font-size: 18px; line-height: 30px; font-weight: 700; text-align:center; min-width: 104px;}




.bingo_area {}
.bingo_area .inner { margin: 0 20px;}
.bingo_area .bingo_board .cell .card, 
.bingo_area .bingo_board .cell .team { font-size: 14px; }
.bingo_area .bingo_board .cell .team {font-size: 0; line-height: 32px; }

.bingo_area .bingo_board .cell .card::before {content:''; display: block; font-size: 12px; line-height: 1; }

.bingo_area .bingo_board .cell.on .card::after {content:''; display: none; width: 10px; height: 10px; background: url(../images/p_plus_icon.svg) no-repeat center; background-size: 10px; margin-top: 2px; }
.bingo_area .bingo_board .cell.on.fixed .team::after {content:''; display: none; width: 10px; height: 10px; background: url(../images/p_plus_icon.svg) no-repeat center; background-size: 10px; margin-top: 2px; }



/* 선수선택 */

.play_list ul li {flex-wrap: wrap; padding: 5px 10px;}
.play_list ul li .game_box {margin-top: 0; margin-left:  47px; }
.play_list ul li .player_info {gap: 8px; }
.play_list ul li .player_info .selec {font-size: 12px;}
.play_list ul li .player_info .selec .player_img {width: 36px; height: 40px; overflow: hidden; border-radius: 5px;}
.play_list ul li .player_info .p_name_box {}
.play_list ul li .player_info .p_name_box .name {font-size: 14px; }
.play_list ul li .player_info .p_name_box .team {font-size: 0; gap: 0; }
.play_list ul li .player_info .p_name_box .b_ave {margin-top: 5px;}
.play_list ul li .player_info .p_name_box .b_ave .item em {font-size: 14px; }

.play_list ul li .game_box .g_item {width: 18px; height: 18px; font-size: 0; }
.play_list ul li .game_box .g_item.failed {background-size: 100%;}
.play_list ul li .game_box .g_item.succ {background-size: 100%;}

.play_list ul li .player_info .p_name_box .p_inner .m_type {display: none; }
.play_list ul li .player_info .p_name_box .p_inner .m_type .m_game_box {display: flex; gap: 3px; align-items: center;}
.play_list ul li .player_info .p_name_box .p_inner .m_type .m_game_box > div {width: 14px; height: 14px; font-size: 0 }
.play_list ul li .player_info .p_name_box .p_inner .m_type .succ {background: url(../images/circle_icon.svg) no-repeat center; background-size: 100%;}
.play_list ul li .player_info .p_name_box .p_inner .m_type .pass {background: url(../images/triangle_icon.svg) no-repeat center; background-size: 100%;}
.play_list ul li .player_info .p_name_box .p_inner .m_type .failed {background: url(../images/x_icon.svg) no-repeat center; background-size: 100%;}

.select_player .tit::before,
.select_player .tit::after {content:''; display: block; width: 43px; height: 8px; background: url(../images/tit_point.svg) no-repeat 0 0;}



.modal {padding: 24px 3% 20px 3%; }
.tit_area {display: none; align-items: center; justify-content: space-between; margin-bottom: 8px;}
.tit_area .item {color: #6B8D6A; font-size: 12px; border-radius: 8px; line-height: 24px; width: 55px; text-align: center; border: solid 10px #153013; }
.game_list {}
.game_item {display: flex; width: 100%; align-items: center; justify-content: space-between; border-radius: 8px;}
.game_item ~ .game_item {margin-top: 10px; }
.game_item .item {flex: 1; padding: 10px; }
.game_item .item .i_inner {display: flex; gap: 5px; }
.game_item .item .i_inner .team_photo {width: 25px; height: 25px;}
.game_item .item .i_inner .team_photo::before {font-size: 12px; }
.game_item .item .i_inner .t_info {flex: 1;}
.game_item .item .i_inner .t_info .t_name {font-size: 12px;}
.game_item .item .i_inner .t_info .l_game {flex-wrap: wrap; min-width: 80px; gap: 5px;  font-size: 12px; }
.game_item .item .i_inner .t_info .l_game span {font-weight: 300; display: block; font-size: 12px; }
.game_item .vs {width: 50px; font-size: 12px; text-align: center; flex: 1; }
.game_item .vs::after {content:'VS'; display: block; font-size: 16px; font-weight: 700; margin-top: 6px; }



/* 가이드 */

.guide_area {margin-top: 25px; }
.guide_area .g_inner {text-align: center; }
.guide_area .g_inner + .g_inner {margin-top: 35px; }
.guide_area .g_inner ul {}
.guide_area .g_inner ul li {}

.login_befor {margin-top: 25px; }




.table_area01 table td .new_rank {display: flex; align-items: center; padding: 10px 5px; background: #fff; text-align:center; font-size: 13px; line-height:16px; color:#454545;  font-weight: 400; position:relative;}
.table_area01 table td .new_rank .new_ranking {width: 18%;; color: #161616 ;font-size:13px;}
.table_area01 table td .new_rank .new_nickname {width: 57%; text-align: left; color: #161616; font-size:13px;}
.table_area01 table td .new_rank .new_nickname em {display:block; color: #161616; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:13px;}
.table_area01 table td .new_rank .new_point {width: 25%; color: #161616; font-size:13px;}
.table_area01 table tr.loginUser .new_rank {background: #FBDB5A; font-size:13px;}



.rank_top {position: relative; }
.rank_top .tit {font-size: 16px; line-height: 1; color: #161616; text-align: center; font-weight: 700;  display: flex; justify-content: center; background: #FBDB5A; border-radius: 6px; padding: 8px 0; margin-bottom: 10px;}
.rank_top .tit .txt {font-size: 16px; color: #161616; padding-top: 9px;}
.rank_top .select_area {display: flex; justify-content: end;}
.rank_top span.prev {display: block; width: 30px; height: 30px; text-indent: -999em; cursor: pointer; font-size: 0; background: url(../images/day_prev_btn02.svg) no-repeat center; background-size: 40px;}
.rank_top span.next {display: block; width: 30px; height: 30px; text-indent: -999em; cursor: pointer; font-size: 0; background: url(../images/day_next_btn02.svg) no-repeat center; background-size: 40px;}

.game_item .item .i_inner .t_info .t_point {flex-direction: column; gap: 2px; align-items: flex-start; }
.game_item .item.home .i_inner.type01 {justify-content: end;}
.game_item .item.home .i_inner.type01 .t_point { align-items: end;}


}