@import url(reset.css);
@import url(font.css);
@import url(common.css?ver=2024);
@import url(tooltip.css);
@import url(swiper-bundle.min.css);


/************* 시즌기록실 *************/
.top_banner {text-align: center; background-color: #fff;}
.top_banner a {display: block ;}

/* 대메뉴 */
.daps1_menu {display: flex; align-items: center; gap: 2.5rem; margin-bottom: 1rem; background: #fff;}
.daps1_menu li {}
.daps1_menu li a {display: block; font-size: 2rem; line-height: 1.3; letter-spacing: -.2rem; font-weight: 700; color: #bbb;}
.daps1_menu li a.active {color: #222;}

/* 소메뉴 */
.daps2_menu {display: flex; align-items: center; gap: 2.5rem;}
.daps2_menu li {}
.daps2_menu li a {display: block; font-size: 1.5rem; line-height: 1.33; letter-spacing: -.2rem; font-weight: 700; color: #bbb; padding: 1.6rem 0 1.2rem 0; position: relative; }
.daps2_menu li a.active {color: #222;}
.daps2_menu li a::before {content:''; display: block; width:0; height: 2px; background: #222; transition: .3s all; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-radius: .2rem;}
.daps2_menu li a.active::before,
.daps2_menu li a:hover::before {width: 100%; }
@keyframes item {
	0% {
		opacity: 0;
		width:100%;
		height:0;
	}
	100% {
		opacity: 1;
		width: 100%;
		height:70px;
	}
}
.menu_box {display: flex; align-items: center; justify-content: space-between; position: relative; }
.menu_box::before {content:''; display: block; width: 100%; height: .1rem; border-radius: .2rem; background-color: #f7f7f7; position: absolute; left: 0; bottom: 0; }


.initialize_btn.ini_off {border: none; font-size: 1.3rem; color: #bbbbbb; letter-spacing: -.2rem; font-weight: 600; display: flex; align-items: center; gap: .2rem; background-color: #fff; padding: 0;}
.initialize_btn.ini_off::before {content:''; display: block; width: 1.6rem; height: 1.6rem; background: url(../../images/icbox/icon_refresh.svg) no-repeat 0 0; background-size: 100%; }
.initialize_btn.ini_on {border: none; font-size: 1.3rem; color: #f08caa; letter-spacing: -.2rem; font-weight: 600; display: flex; align-items: center; gap: .2rem; background-color: #fff; padding: 0;}
.initialize_btn.ini_on::before {content:''; display: block; width: 1.6rem; height: 1.6rem; background: url(../../images/icbox/icon_refresh_on.svg) no-repeat 0 0; background-size: 100%; }



.search_box {border-radius: 1.6rem; border: solid 1.6px #f3f4f7; display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.search_box > div {width: 100%; }
.search_box input {background: #fff; border: none; }
.search_box input::placeholder {color: #bbb;}
.search_box button {width: 4.6rem; height: 4.6rem; background: url(../../images/icbox/icon_search.svg) no-repeat center; background-size: 2.4rem; border:none; font-size: 0;}



/* 메뉴 슬라이드 */
/*
.snbSwiper {padding: 2rem 0 1.4rem 0; overflow: hidden;}
.snbSwiper .swiper-slide { width: auto !important; }
.snbSwiper .swiper-slide a { display: block; padding: 1.2rem 1.5rem; border-radius: 1.8rem; background-color: #f6f7f9; color: #999; font-size: 1.3rem; font-weight: 600; margin-left: .6rem; }
.snbSwiper .swiper-slide:nth-child(1) a {margin-left: 0; }
.snbSwiper .swiper-slide.swiper-slide-active a {background-color: #e11956; color: #fff; }

.snbSwiper {padding: 2rem 0 1.4rem 0; overflow: hidden; margin-bottom: 1.4rem; }
.snbSwiper .swiper-slide { width: auto !important; }
.snbSwiper .swiper-slide a { display: inline-block; }
.snbSwiper .swiper-slide .text {padding: 1.2rem 1.5rem; border-radius: 1.8rem; background-color: #f6f7f9; color: #999; font-size: 1.3rem; font-weight: 600; margin-left: .6rem; }
.snbSwiper .swiper-slide.on .text {background-color: #e11956; color: #fff; }
*/

/*탭메뉴 스타일*/
.tab_nav_area {border-radius: .5rem; overflow: hidden; padding: 2rem 0 0 0;}
.tab_nav_area ul {width:100%; display: flex; flex-wrap: nowrap; overflow-x: auto; transition: all 2s; padding-bottom: 0.7rem; margin-bottom:0.7rem ;}
.tab_nav_area ul li { position: relative; flex: 0 0 auto; width: auto; }
.tab_nav_area ul li:nth-child(1) a {margin-left: 0; }
.tab_nav_area ul li a {display: block; padding: 1.2rem 1.5rem; border-radius: 1.8rem; background-color: #f6f7f9; color: #999; font-size: 1.3rem; font-weight: 600; margin-left: .6rem;}
.tab_nav_area ul li.active a {background-color: #e11956; color: #fff;}
.tab_nav_area ul::-webkit-scrollbar {width: .3rem; height: .3rem; background-color: transparent;}
.tab_nav_area ul::-webkit-scrollbar-thumb {background: transparent; border-radius: 10px; border: 8px solid transparent;}
.tab_nav_area ul::-webkit-scrollbar-track {background: transparent;}


.btn_box {display: flex; align-items: center; justify-content: center;}
.btn_box a.detailed_option {display: flex; align-items: center; justify-content: center;  background-image: linear-gradient(107deg, #e11956 48%, #ff62ac 100%); border-radius: 2.7rem; width: 100%; padding: 1.3rem 0; text-align: center; gap: .4rem; font-size: 1.4rem; font-weight: 600; color: #fff; margin-bottom: 1.4rem; }
.btn_box a.detailed_option::before {content:''; display: block; width: 2.4rem; height: 2.4rem; background: url(../../images/icbox/icon_filter.svg) no-repeat 0 0; background-size: 100%; }

.results_area {}
.search_results {display: flex;align-items: center; gap: .8rem 0; }
.search_results li {display: flex; align-items: center; flex: 0 0 auto; width: auto !important; margin-right: .6rem;}
.search_results li:last-child {margin-right: 0; }
.search_results li .items {display: flex; align-items: center; gap: .6rem; padding: .9rem 1.2rem .9rem 1.4rem; border: solid .1rem #ffedf3; background-color: #fff7fa;  border-radius: 1.8rem;}
.search_results li .items span {color: #222; font-size: 1.3rem; font-weight: 600; }
.search_results li .items em {width: 1.6rem; height: 1.6rem; background: url(../../images/icbox/icon_closed_gray.svg) no-repeat 0 0; background-size: 100%; font-size: 0; cursor: pointer; }

.search_results li.chipBtn_sy .items,
.search_results li.chipBtn_te .items,
.search_results li.chipBtn_po .items,
.search_results li.chipBtn_lt .items,
.search_results li.chipBtn_reg .items {border: solid .1rem #f3f4f7; background: #fff; padding: .4rem 1.2rem .4rem .4rem;}

.results_area ul::-webkit-scrollbar {width: .3rem; height: .3rem; background-color: transparent;}
.results_area ul::-webkit-scrollbar-thumb {background: transparent; border-radius: 10px; border: 4px solid transparent;}
.results_area ul::-webkit-scrollbar-track {background: transparent;}

.resultslider01 {} 
.resultslider02 {margin-top: .8rem;} 



.search_results li.chipBtn_sy .items::before  {content:''; display: block; border: solid .1rem #f3f4f7;  background: url(../../images/icbox/icon_calendar.png) no-repeat 0 0; background-size: 2.4rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;}
.search_results li.chipBtn_te .items::before  {content:''; display: block; border: solid .1rem #f3f4f7;  background: #002561 url(../../images/icbox/icon_kbo.png) no-repeat 0 0; background-size: 2.4rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;}
.search_results li.chipBtn_po .items::before  {content:''; display: block; border: solid .1rem #f3f4f7;  background: url(../../images/icbox/icon_gloves.png) no-repeat 0 0; background-size: 2.4rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;}
.search_results li.chipBtn_lt .items::before  {content:''; display: block; border: solid .1rem #f3f4f7;   background: url(../../images/icbox/icon_flag.png) no-repeat 0 0; background-size: 2.4rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;}
.search_results li.chipBtn_reg .items::before  {content:''; display: block; border: solid .1rem #f3f4f7; background: #408aec url(../../images/icbox/icon_qual.png) no-repeat 0 0; background-size: 2.4rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;}





/**** 상세옵션박스 *****/
.option_area {position: fixed; left: 50%; bottom: -100%; transform: translateX(-50%); height:calc(100% - 5rem); z-index: 300; background: #fff; max-width: 75rem; width: 100%; -webkit-border-top-left-radius: 16px; -webkit-border-top-right-radius: 16px; -moz-border-radius-topleft: 16px; -moz-border-radius-topright: 16px; border-top-left-radius: 16px; border-top-right-radius: 16px; overflow: hidden;}
.option_area .innder {padding: 6.4rem 1.5rem 7.3rem 1.5rem;  overflow-y: auto; height: 100%; }
.option_area .tit { font-size: 1.7rem; font-weight: 700; line-height: 1.29; color: #222; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.7rem;}
.option_area .tit .menu_close {display: block; width: 2.4rem; height: 2.4rem; background: url(../../images/icbox/icon_close.svg) no-repeat 0 0 ; font-size: 0; cursor: pointer; }
.option_area .tit span {display: flex;  align-items: center; gap: .2rem; }
.option_area .tit span.back {cursor: pointer; }
.option_area .tit span.back::before {content:''; display: block; width: 2.4rem; height: 2.4rem; background: url(../../images/icbox/icon_back.svg) no-repeat 0 0; background-size: 100%;}
.option_area .tit span.back.profile_close::before {display: none;}


.option_area .tit.subTit {justify-content: flex-start; gap: 1rem; }
.option_area .tit.subTit span {font-size: 1.2rem; }

.option_area .tit.fixed_top {position: fixed; left: 0; top: 0; z-index: 300;  width: 100%; padding: 2.3rem 1.5rem .6rem 1.5rem; margin-bottom: 0; background-color: #fff;}

.option_area .tit.fixed_top .share_con {display: flex; align-items: center; gap: 1.6rem; }
.option_area .tit .share_con span.openurl {display: block; font-size: 0; width: 2.4rem; height: 2.4rem; background: url(../../images/icbox/icon_share.svg) no-repeat 0 0 ;}

.option_area .option_menu_box {display: flex; gap: 1rem; margin-bottom: 3.6rem; }
.option_area .option_menu_box a {display: block; padding: 2rem 1.5rem; border-radius: 1.6rem; box-shadow: .2rem .2rem .8rem 0 rgba(0, 0, 0, 0.08); border: solid .1rem #f3f4f7; background-color: #fff; width: calc(50% - .5rem)}
.option_area .option_menu_box .txt {font-size: 1.7rem; font-weight: 700; color: #222; margin-bottom: .6rem; display: flex; align-items: center; gap: .2rem;}
.option_area .option_menu_box .txt::after {content:''; width: 2rem; height: 2rem; background: url(../../images/icbox/icon_right_black.svg) no-repeat 0 0; background-size: 100%;}
.option_area .option_menu_box a span {font-size: 1.3rem; font-weight: 500; line-height: 1.6; color: #bbb;} 

.option_area .option_con {}
.option_area .option_con .item {margin-bottom: 3.6rem; }
.option_area .option_con .item dt { font-size: 1.7rem; font-weight: 700; line-height: 1.29; color: #222; gap: .7rem; margin-bottom: 1rem; cursor: pointer; }
.option_area .option_con .item dt.tit {display: flex; align-items: center; justify-content: flex-start;}
.option_area .option_con .item dt.tit::after {content:''; width: 1.6rem; height: 1.6rem; background: url(../../images/icbox/icon_down_gray.svg) no-repeat center; background-size: 1.6rem; padding: .2rem; border: solid .1rem #f3f4f7; border-radius: .8rem; transform:rotate(0); transition: all 0.6s ease; display: none; }
.option_area .option_con .item dt.tit.selected::after { transform:rotate(-180deg);}
.option_area .option_con .item dt.selected + dd {display: block !important;}
.option_area .option_con .item dt.tit.no_js::after {display: none !important; }

.option_area .option_con .item dd {display: block; }
.option_area .option_con .item.option_js dd {display: block;}

.item_flex {display: flex; align-items: center; gap: 1rem;}
.item_flex .gap {font-size: 1.7rem; color: #bbb;}

.btn_radio {display: flex; gap: .8rem .6rem; flex-wrap: wrap;}
.border_radio {display: flex; align-items: center; gap: 3rem; margin: 1.7rem 0 3.6rem 0; }


.btn_op_area {display: flex; align-items: center; gap: .6rem;padding: 1rem 1.5rem;position: fixed;bottom: 0; left: 0;width: 100%;background: #fff;}
.btn {padding: 1.5rem; border-radius: 1.6rem; border: solid .1rem #f3f4f7; background-color: #fff; font-size: 1.6rem; font-weight: 600;}
.btn.type01 {flex: 1; border: solid .1rem #f3f4f7; background: #fff; color: #222;}
.btn.type02 {flex: 2; border: solid .1rem #e11956; background: #e11956; color: #fff;}

.player_name {}
.player_name > div {flex: 1;}
.player_name button {width: 7rem; flex: 0 !important; padding: 1.15rem 1.5rem;}
.player_name + .search_results {margin-top: 1rem; }


/** 프로필 **/

.profile_box {padding: 1.8rem 1.5rem 1.8rem 1.8rem; border-radius: 1.6rem; display: flex; margin-bottom: 2rem; position: relative; overflow: hidden; gap: 1rem; align-items: center; min-height: 17.1rem;}
.profile_box .photo {background-color: #fff; max-width: 10.2rem; border-radius: 1.6rem; overflow: hidden; line-height: 0; position: relative; z-index: 100; display: block; }
.profile_box .photo.off {display: none; transition: all .1s;}
.profile_box .player_i {color: #fff; width: 100%;  position: relative; z-index: 100; flex: 1;}
.profile_box .player_i .name {font-size: 2rem; font-weight: 700; line-height: 1.3; margin-bottom: 1.6rem; display: flex; align-items: center; gap: .6rem; }
.profile_box .player_i .name span {font-size: 1.5rem; font-family: SF Pro Display; font-weight: bold; display: flex; align-items: center;}
.profile_box .player_i .name span p {display: block; color: #fff; font-weight: 800; margin-top: 0.2rem;}
.profile_box .player_i .team {display: flex; align-items: center; gap: .6rem; font-size: 1.3rem;  font-weight: 500; margin-bottom: 1rem; }
.profile_box .player_i .team span {width: 2rem; height: 2rem; display: flex; align-items: center;}
.profile_box .player_i ul.Info {display: flex; gap: .6rem;  font-size: 1.3rem;  font-weight: 400;}
.profile_box .player_i ul.Info + ul.Info {margin-top: .8rem; }
.profile_box .player_i ul.Info li {display: flex; align-items: center; gap: .6rem; }
.profile_box .player_i ul.Info li + li {}
.profile_box .player_i ul.Info li + li::before {content:''; display:block; width: .1rem; height: 1rem; opacity: 0.3; background-color: #fff;}
.profile_box .player_i ul.Info li em {display: flex; align-items: center;}
.profile_box .player_i ul.Info li .point {display: flex; align-items: center; gap: .6rem;}

.profile_box::after {content:''; display: block; position: absolute; right: -7rem; top: 50%; width: 25rem; height: 25rem; opacity: .06; transform: translateY(-50%) translateZ(0); }
.profile_box.bg_1001::after {background: url(../../images/teams/logo/1001.png) no-repeat center; background-size: 100%;}

.profile_box.bg_2001::after {background: url(../../images/teams/2001.png) no-repeat center; background-size: 16rem;}
.profile_box.bg_2002::after {background: url(../../images/teams/logo/2002.png) no-repeat center; background-size: 100%;}

.profile_box.bg_3001::after {background: url(../../images/teams/logo/3001.png) no-repeat center; background-size: 100%;}

.profile_box.bg_4001::after {background: url(../../images/teams/4001.png) no-repeat center; background-size: 100%;}
.profile_box.bg_4002::after {background: url(../../images/teams/4002.png) no-repeat center; background-size: 100%;}
.profile_box.bg_4003::after {background: url(../../images/teams/4003.png) no-repeat center; background-size: 100%;}
.profile_box.bg_4004::after {background: url(../../images/teams/4004.png) no-repeat center; background-size: 100%;}

.profile_box.bg_5001::after {background: url(../../images/teams/5001.png) no-repeat center; background-size: 100%;}
.profile_box.bg_5002::after {background: url(../../images/teams/logo/5002.png) no-repeat center; background-size: 100%;}

.profile_box.bg_6001::after {background: url(../../images/teams/6001.png) no-repeat center; background-size: 100%;}
.profile_box.bg_6002::after {background: url(../../images/teams/logo/6002.png) no-repeat center; background-size: 100%;}


.profile_box.bg_7001::after {background: url(../../images/teams/7001.png) no-repeat center; background-size: 100%;}
.profile_box.bg_7002::after {background: url(../../images/teams/logo/7002.png) no-repeat center; background-size: 100%;}

.profile_box.bg_8001::after {background: url(../../images/teams/8001.png) no-repeat center; background-size: 100%;}

.profile_box.bg_9001::after {background: url(../../images/teams/9001.png) no-repeat center; background-size: 100%;}
.profile_box.bg_9002::after {background: url(../../images/teams/logo/9002.png) no-repeat center; background-size: 100%;}

.profile_box.bg_10001::after {background: url(../../images/teams/logo/10001.png) no-repeat center; background-size: 100%;}
.profile_box.bg_11001::after {background: url(../../images/teams/logo/11001.png) no-repeat center; background-size: 100%;}
.profile_box.bg_12001::after {background: url(../../images/teams/logo/12001.png) no-repeat center; background-size: 100%;}


/** 프로필 **/

.con_itembox {margin-bottom: 3.6rem;}
.con_itembox .tit {font-size: 1.7rem; font-weight: 700; line-height: 1.29; color: #222; margin-bottom: 1.7rem;}
.con_itembox .inner {margin: 3.9rem ;}



.pre_game {display: flex; align-items: center; justify-content: center; gap: .6rem; padding-bottom: 1.3rem; margin-bottom: 2rem; border-bottom: solid .1rem #f3f4f7; }
.pre_game .team {display: flex; align-items: center; gap: .6rem; width: calc((100% - 11rem) / 2); justify-content: center;}
.pre_game .team .name {font-size: 1.5rem; color: #222;  font-weight: 700; line-height: 2rem;}
.pre_game .team .name span {display: block; font-size: 1.1rem; color: #999; font-weight: 400;}
.pre_game .team .t_img {width: 4rem; display: flex; align-items: center;}
.pre_game .team.away {text-align: right; } 
.pre_game .score_con {width: 11rem; }
.pre_game .score_con .time {font-size: 1.1rem; color: #222; text-align: center; line-height: 1.4rem; padding-bottom: 0.5rem;}
.pre_game .score {width: 11rem; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.pre_game .score .item {font-size: 3.2rem; color: #222; font-weight: 700; width: 4.5rem; text-align: center; line-height: 1; }
.pre_game .score .dahed {font-size: 2.4rem; font-weight: 700; color: #d7d7d7; width: 1.2rem;}


.pre_game_info {}
.pre_game_info ul {display: flex; gap: 1rem; }
.pre_game_info ul li {text-align: center; font-size: 1.7rem; font-weight: 700; color: #222; width: 25%; }
.pre_game_info ul li span {display: block; font-size: 1.3rem; font-weight: 400; color: #999; margin-bottom: 1.2rem;}

.team_type01 {display: flex; align-items: center; gap: .6rem; }
.team_type01 span {display: flex; align-items: center; width: 2.4rem; height: 2.4rem; background: #fff; position: relative; }
.team_type01 strong {}

.major_record {border-radius: 1.2rem; border: solid 0.1rem #f3f4f7; overflow: hidden;}
.major_record .tit {background: #f6f7f9; display: flex; gap: 1rem; padding:0 1.5rem; margin-bottom: 0 !important; }
.major_record .tit .itme { font-size: 1.3rem; vertical-align: middle; text-align: center;  padding: 1rem 0; color: #999; font-weight: 500; flex: 1; }
.major_record .cont {background: #fff; display: flex; gap: 1rem; padding:1.4rem 1.5rem 1.6rem 1.5rem;}
.major_record .cont .record_c {color: #000; font-size: 1.2rem; min-height: 3.6rem; vertical-align: middle; text-align: center;  flex: 1;}
.major_record .cont .record_c .reco_tit {font-size: 1.7rem; font-weight: 700; color: #222; margin-bottom: .6rem; }
.major_record .cont .record_c span {font-size: 1.3rem; font-weight: 400; color: #999; display: block; }
.major_record .record_c span.text_1001 {color: #3572bc;}
.major_record .record_c span.text_2002 {color: #db2b4a;}
.major_record .record_c span.text_3001 {color: #343d71;}
.major_record .record_c span.text_5002 {color: #e03461;}
.major_record .record_c span.text_6002 {color: #2c2e44;}
.major_record .record_c span.text_7002 {color: #ff703a;}
.major_record .record_c span.text_9002 {color: #f94d4d;}
.major_record .record_c span.text_10001 {color: #ad2d5e;}
.major_record .record_c span.text_11001 {color: #274c82;}
.major_record .record_c span.text_12001 {color: #272727;}

.con_itembox .game em.text_1001 {color: #3572bc;}
.con_itembox .game em.text_2002 {color: #db2b4a;}
.con_itembox .game em.text_3001 {color: #343d71;}
.con_itembox .game em.text_5002 {color: #e03461;}
.con_itembox .game em.text_6002 {color: #2c2e44;}
.con_itembox .game em.text_7002 {color: #ff703a;}
.con_itembox .game em.text_9002 {color: #f94d4d;}
.con_itembox .game em.text_10001 {color: #ad2d5e;}
.con_itembox .game em.text_11001 {color: #274c82;}
.con_itembox .game em.text_12001 {color: #272727;}

.con_itembox .bet td.text_1001 {color: #3572bc;}
.con_itembox .bet td.text_2002 {color: #db2b4a;}
.con_itembox .bet td.text_3001 {color: #343d71;}
.con_itembox .bet td.text_5002 {color: #e03461;}
.con_itembox .bet td.text_6002 {color: #2c2e44;}
.con_itembox .bet td.text_7002 {color: #ff703a;}
.con_itembox .bet td.text_9002 {color: #f94d4d;}
.con_itembox .bet td.text_10001 {color: #ad2d5e;}
.con_itembox .bet td.text_11001 {color: #274c82;}
.con_itembox .bet td.text_12001 {color: #272727;}

/* 통산수상내역 */
.award_details {}
.award_details li {display: flex; align-items: center; gap: 1rem; }
.award_details li.no_award {justify-content: center;     font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.23;
    text-align: center;
    color: #999;
    padding: 5rem 0;
    font-family: AppleSDGothicNeo;}
.award_details li + li {margin-top: 2rem; }
.award_details li span.photo {display: block; width: 2.4rem; height: 2.4rem; background: #fff; position: relative; }
.award_details li span.photo img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; margin: auto; }
.award_details li .list {}
.award_details li .list strong {display: block; font-size: 1.3rem; margin-bottom: .6rem; }
.award_details li .list > div {display: flex; gap:.5rem; }
.award_details li .list > div span {font-size: 1.1rem; color: #999; }
.award_details li .list > div span::after {content:','; }
.award_details li .list > div span:last-child::after {display: none;  }
   

/* 프로필 기록 */


.ranking_box {background: #fff; }
.ranking_box .tit {text-align: center;font-size:1.8rem; font-weight: 700; color:#000; padding:1rem; }
.ranking_box .p_box { display:flex; flex-wrap: wrap; align-items: end; }
.ranking_box .p_box .item {padding:1rem 1.3rem; width:calc(100% / 3); }
.ranking_box .p_box .item span {font-size:1.2rem; color:#000; text-align:center; display: block;}

.ranking_box .p_box .item .rang_info {position: relative; height:3rem;}
.ranking_box .p_box .item .rang_info::before {content:''; display:block; width: 100%; height:.3rem; background:#d7d7d7; position: absolute; left:0; top:50%; transform: translateY(-50%); border-radius: 1rem;}
.ranking_box .p_box .item .rang_info span {display:block; font-size:1rem; width:2.4rem; height:2.4rem; line-height: 2.2rem; border:solid .1rem #000; text-align: center; border-radius: 50%; position: absolute; top:50%; transform: translate(-1rem, -50%); z-index: 10;}
.ranking_box .p_box .item .rang_info span:hover {z-index:100;}

.ranking_box .p_box .item .rang_info::after {content:''; display:block; width:.8rem; height:.8rem; background: #d7d7d7;  border-radius: 50%; position: absolute; left:0; top:50%; transform: translateY(-50%);}
.ranking_box .p_box .item .rang_info .point_bg::before {content:''; display:block; width:.8rem; height:.8rem; background: #d7d7d7;  border-radius: 50%; position: absolute; right:0; top:50%; transform: translateY(-50%);}
.ranking_box .p_box .item .rang_info .point_bg::after {content:''; display:block; width:.8rem; height:.8rem; background: #d7d7d7;  border-radius: 50%; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);}
 


.chart_box {}
.chart_box.black_box { background: url(../../images/bg_ground.jpg) repeat 0 0;}
.chart_box.black_box .tit {color: #d9b991; border-bottom: solid .1rem #d9b991; background:#111;}
.chart_box.black_box .statcast_box .items .inner {position:relative; z-index:10;}
.chart_box.black_box .statcast_box .items { background-color: transparent;}

.statcast_box {}
.statcast_box .tit {text-align: center;font-size:1.8rem; font-weight: 700; color:#000; padding:1rem; }
.statcast_box .items {background: #fff; display: flex; align-items: center; justify-content: space-around;}
.statcast_box .items .inner {padding:1.5rem; position: relative;  margin: 0; }

.statcast_box .items .tit_box {padding: 0 1rem; width: 10rem;}
.statcast_box .items .tit_box p { font-size:1.3rem; color:#000; margin-bottom:1rem;}
.statcast_box .items .tit_box ul { display: flex; flex-direction: column; background: #fff; padding: 15px 10px; border-radius: 0.5rem; box-shadow: 0 0 1rem #000;}
.statcast_box .items .tit_box ul li {position: relative; font-size:1rem; color:#222; padding-left:1.5rem; width: 100%; font-weight: 600; }
.statcast_box .items .tit_box ul li + li { margin-top:1rem; }
.statcast_box .items .tit_box ul li span {position: absolute; left:0; top:50%; transform: translateY(-50%); border-radius: 50%; width:1rem; height: 1rem; z-index: 1; box-shadow: .1rem .2rem .2rem rgb(0, 0, 0, .5);}
 
.course {}
.course span {position: absolute; border-radius: 50%; width:1rem; height: 1rem; transition: .3s; box-shadow: .1rem .1rem .1rem rgb(0, 0, 0, .5); border: solid .1rem rgb(255 255 255 / 20%); opacity: .7;}
.course span em.tip {display: none; padding:.5rem;  border-radius: .5rem; box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35); background: #333; color: #fff; line-height: 1.3; position:absolute; left: 50%; bottom:1.5rem	; transform: translateX(-50%)}
.course span em.tip::before {content: '▼'; color:#333; font-size:1rem; line-height:1;  position: absolute; bottom:-.7rem; left: 50%; transform: translateX(-50%);text-transform: none;}
.course span:hover em.tip {display:inline-block; }
.course span:hover {z-index:100; opacity: 1; border:solid .1rem #000; background: rgb(0, 0, 0, .6) !important;}


.single span {background: #ff8cbd; border: solid .1rem #ffc8e0; box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.1);}
.double span {background: #5ae077 ; border: solid .1rem #88ffa2; box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.1);}
.triple span {background: #73bdff; border: solid .1rem #c8e5ff; box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.1);}
.home_run span {background: #ff6243; border: solid .1rem #ffcfc6; box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.1);}

.chart_box_area canvas{width:100%; }





/*메인 타입 2 */
.statcast_cont {background: #fff;  border-radius: 1.2rem; padding: 2rem 1.5rem; border: solid .1rem #f3f4f7; overflow: hidden; margin-bottom: 1rem; }
.statcast_cont dt {display: flex; align-items: center; justify-content: space-between;}
.statcast_cont dt .player {display: flex; align-items: center;}
.statcast_cont dt .player .photo {border-radius: 50%; overflow: hidden; width:3.5rem; margin-right: 1rem; border: solid 0.1rem #000; box-shadow: 0px 0.2rem 0.4rem #999;}
.statcast_cont dt .player .photo img {}

.statcast_cont dt .player .tit {font-size:1.5rem; font-weight:600; color:#222;}
.statcast_cont dt .player .tit span {display: block; margin-top:.5rem; font-size: 1.2rem; color:#999; font-weight: 400; } 

.statcast_cont dt .ball_tit {font-size:1.6rem; font-weight: 700;}
.statcast_cont dt .ball_tit span {display: block; margin-top:.5rem; font-size: 1.2rem; color:#999; font-weight: 400; } 

.statcast_cont dd {}

.statcast_items {display: flex; align-items: center; justify-content: center;}
.statcast_items .inner {padding:2rem; position: relative;}

.statcast_items .tit_box { }
.statcast_items .tit_box p { font-size:1.2rem; color:#000; margin-bottom:1rem;}
.statcast_items .tit_box ul {}
.statcast_items .tit_box ul li {position: relative; font-size:1rem; color:#000; padding-left:1.5rem; margin-bottom:1rem;  }
.statcast_items .tit_box ul li span {position: absolute; left:0; top:50%; transform: translateY(-50%); border-radius: 50%; width:1rem; height: 1rem; z-index: 1; box-shadow: .1rem .2rem .2rem rgb(0, 0, 0, .5);}




@media (max-width: 320px) {
	 
	.pre_game .team .t_img {width: 3rem; display: flex; align-items: center;}
	.pre_game .score {display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; justify-content: center; }
	.pre_game .score .item {font-size: 2.2rem; color: #222; font-weight: 700; width: 3rem; text-align: center; }
	.pre_game .score .dahed {font-size: 1.4rem; font-weight: 700; color: #d7d7d7; width: 1.2rem;}


}