@charset "utf-8";

/****************************************************************************************************************************************
스포츠 공통
*****************************************************************************************************************************************/
.sport-wrap {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; gap:15px;}

/****************************************************************************************************************************************
sport-left
*****************************************************************************************************************************************/
.sport-left {position: relative; z-index: 10; margin:0 auto;}
.sportLeft-inner {position: relative; width: 250px; height: calc(100vh - 50px); display: flex; flex-direction: column; background: #1f262f;}
ul.type-list {position: relative; margin:0 auto; width: 100%; height: 100%; display: flex; flex-direction: column; overflow-y: auto;}
ul.type-list > li {position: relative; width: 100%; height: 48px; display: flex; align-items: center; cursor: pointer;}
ul.type-list > li:nth-child(2n) {background: #1d232c;}
ul.type-list > li.faded {background:#0e121b;}
ul.type-list > li.faded .sport-icon {background:#0e121b;}
ul.type-list > li.faded .sport-icon > img {filter: brightness(0.2); opacity: 0.5;}

ul.type-list::-webkit-scrollbar {width: 5px; height: 3px; border-radius: 3px;}
ul.type-list::-webkit-scrollbar-track {background-color:#222a33; border-radius: 3px;}
ul.type-list::-webkit-scrollbar-thumb {border-radius: 3px; background-color: #53647a;}
ul.type-list::-webkit-scrollbar-button {width: 0; height: 0;}

.sport-icon {margin:0; padding:0; width: 50px; height: 48px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; background: #1f262f;}
.sport-icon > img {flex-shrink: 0; width: 22px; height: 22px; filter: brightness(0.3);}

.type-label {position: relative; width: 100%; display: flex; align-items: center;}
.type-label > h3 {margin:0 auto; padding:0; width:150px; text-align: left; font-weight: 600; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; text-wrap: nowrap; color: #455365;}
.type-label > p {margin:0 auto; width: 30px; font-weight: 500; text-align: center; font-size: 13px; color: #59626c;}

.open-toggle {position:sticky; bottom:0; width: 100%; height: 50px; display: flex; justify-content: flex-end; flex-shrink: 0; background: #293340; box-shadow: 0 -5px 15px rgba(0, 0, 0, .35);}
.toggle-btn {width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.toggle-btn > img {width: 30px; height: 30px; transform: rotate(180deg); filter: brightness(2); transition: all .3s;}

/* active */
.sportLeft-inner.active {width: 50px; background: transparent;}
.sportLeft-inner.active ul.type-list {width: 50px;}

.sportLeft-inner.active ul.type-list::-webkit-scrollbar {width: 0; height: 0; border-radius: 0;}
.sportLeft-inner.active ul.type-list::-webkit-scrollbar-track {background-color:transparent; border-radius: 0;}
.sportLeft-inner.active ul.type-list::-webkit-scrollbar-thumb {border-radius: 0; background-color: transparent;}
.sportLeft-inner.active ul.type-list::-webkit-scrollbar-button {width: 0; height: 0;}

.sportLeft-inner.active .type-label {opacity: 0; pointer-events: none; position: absolute; top: 0; left: 50px; padding:0 5px;  width: 200px; height: 48px; line-height: 48px; background: #12161d; transition: all 50ms;}

.sportLeft-inner.active ul.type-list > li:nth-child(2n) {background: transparent;}
.sportLeft-inner.active ul.type-list > li.faded {background: transparent;}

ul.type-list > li.active .sport-icon > img {filter: brightness(1);} 
ul.type-list > li.active .type-label > h3 {color: #d4d6da;} 
ul.type-list > li.active .type-label > p {color: #16bdf9;} 

.sportLeft-inner.active .open-toggle {width: 50px;}
.sportLeft-inner.active .open-toggle .toggle-btn > img {transform: rotate(0deg);}

@media (hover: hover) and (pointer: fine) {
    ul.type-list > li:hover .type-label > h3 {color: #d4d6da;} 
    ul.type-list > li:hover .type-label > p {color: #16bdf9;} 
    ul.type-list > li:hover .sport-icon > img {filter: brightness(1);}

    ul.type-list > li.faded:hover .sport-icon > img {filter: brightness(0.2); opacity: 0.5;}

    .sportLeft-inner.active:hover {margin-right: -250px; transition: all 0ms; width: 300px;}
    .sportLeft-inner.active:hover ul.type-list {width: 300px;}
    .sportLeft-inner.active:hover ul.type-list > li:hover .type-label {width: 200px; opacity: 1; transition: all .3s; transition-delay: .2s;} 

    .sportLeft-inner.active ul.type-list > li:hover .sport-icon {background: #12161d;} 
    .sportLeft-inner.active ul.type-list > li:hover .sport-icon > img {filter: brightness(1);}
} 

/****************************************************************************************************************************************
sport-con
*****************************************************************************************************************************************/
.sport-con {position: relative; margin:0 auto; padding:0; width: 100%;}
.sport-inner {position: relative; width: 100%; height: calc(100% - 50px); display: flex; flex-direction: column; align-items: center;}

/* sport-top */
.sport-top {position: relative; margin:15px auto 0 auto; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center;}
ul.sport-menu {position: relative; margin:0; padding:0; display: flex; gap:30px; justify-content: flex-start; align-items: center;}
ul.sport-menu > li {position: relative; margin:0; padding:0; height: 40px; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 600; color: #d6d6d6; cursor: pointer;}
ul.sport-menu > li::before {content: ''; position: absolute; bottom:0; left:0; width: 100%; height: 2px;}

ul.sport-menu > li.active {color: #16bdf9;}
ul.sport-menu > li.active::before {content: ''; position: absolute; bottom:0; left:0; width: 100%; height: 2px; background: #16bdf9; border-radius: 2px;}

@media (hover: hover) and (pointer: fine) {
    ul.sport-menu > li:hover {color: #16bdf9;}
    ul.sport-menu > li:hover::before {content: ''; position: absolute; bottom:0; left:0; width: 100%; height: 2px; background: #16bdf9; border-radius: 2px;}
}

.sport-search {position:relative; margin:0; padding:0; width: 350px; height: 40px; display: flex; justify-content: center; align-items: center; background: #1b222c; border-radius: 5px;}
.sport-search > i {margin: 0; padding:0 10px; font-size: 18px; font-weight: 600; color:#aaa;}
.sport-search > input {margin: 0; padding:0 5px; width:100%; color:#aaa; background: #1b222c; border: none;}
.sport-search > input::placeholder {color:#757575;}
.sport-search > input:focus {outline: none;}

/* sport-bonus */
ul.sport-bonus {position: relative; margin:10px 0 20px 0; padding:0; width: 100%; display: flex; gap:10px; justify-content: center; align-items: center;}
ul.sport-bonus > li {position:relative; margin:0; padding:0 15px; width: 100%; height: 40px; display: flex; justify-content:space-between; align-items: center; font-weight: 600; color: #6a7178; border: 2px solid #6a7178;}
ul.sport-bonus > li > span {font-weight: 600;}
ul.sport-bonus > li.bonus1.active {color:#0d8e2f; border: 2px solid #0d8e2f;}
ul.sport-bonus > li.bonus2.active {color:#2579ce; border: 2px solid #2579ce;}
ul.sport-bonus > li.bonus3.active {color:#9345de; border: 2px solid #9345de;}

/****************************************************************************************************************************************
sport-pan
*****************************************************************************************************************************************/
/* sport-pan 공통 */
.sport-pan {position: relative; margin:0; padding:0; width: 100%; height:100%; display: flex; gap:10px; justify-content: space-between; align-items: flex-start;}
.left-pan,
.right-pan {padding:0 5px 0 0; width: calc(100% / 2 - 10px); height: 720px; overflow-y: auto;}

/* left-pan */
.left-group {position: relative; margin: 0; padding:0; width: 100%;}

/* game-league */
ul.game-league {position:relative; margin:0 0 5px 0; padding:0 10px; width: 100%; height: 40px; display: flex; justify-content:space-between; align-items: center; background: #212935;box-shadow: inset 0px 1px 0 rgb(255, 255, 255, 0.15);}
ul.game-league > li {position:relative; display: flex; align-items: center;}
ul.game-league > li > img {margin-right:5px; width: 20px;}
ul.game-league > li > span {font-weight:600; color: #aaa;}
ul.game-league > li.clock {color: #16bdf9;}
ul.game-league > li.clock > img {width: 20px; filter: invert(49%) sepia(84%) saturate(1516%) hue-rotate(174deg) brightness(102%) contrast(102%);}
ul.game-league > li > .mo-leagueImg {display: none;}

/* game-tit */
ul.game-tit {position: relative; margin:5px 0; padding:10px 10px; width: 100%; display: flex; gap:5px; align-items: center; background: #171d26; border: 2px solid #171d26; border-radius: 5px;}
ul.game-tit > li {position: relative; margin:0; padding:10px 10px; flex: 0.5; text-align: center; font-weight: 500; color: #e3e3e3; background: rgba(0,0,0,0.6); border: 1px solid #283243; border-radius: 5px;}
ul.game-tit > li.tit-team {flex: 2;}
ul.game-tit > li.tit-more {margin-left: auto; background: #673ab7; border: 1px solid #7a48d1; cursor: pointer;}

ul.game-tit.active {background: #321d57; border: 2px solid #a36fff;}
ul.game-tit.active > li.tit-more {cursor: default;}

@media (hover: hover) and (pointer: fine) {
    ul.game-tit > li.tit-more:hover {background: #512d91;}
    ul.game-tit.active > li.tit-more:hover {background: #673ab7;}
}

/* game-choice */
ul.game-choice {position: relative; margin:5px 0; padding:6px 10px; width: 100%; display: flex; justify-content: space-between; align-items: center; background: #171d26; border-radius: 5px;}
ul.game-choice > li {position: relative;}
ul.game-choice > li:first-child {margin-right: auto;}
ul.game-choice > li:last-child {flex: 3; display: flex; justify-content: flex-end; align-items: center; gap:5px;}

ul.game-choice > li > span {position: relative; display: inline-block; padding:10px 10px; min-width: 110px; text-align: center; font-weight: 500; color: #dad5df; background:#0c1019; border: 1px solid transparent; border-radius: 5px;}
ul.game-choice > li > span.game-ing {cursor: pointer;}
ul.game-choice > li > span.gameOn {color: #61d0ff; background: rgba(22, 189, 249, .149); border: 1px solid #16bdf9;}

ul.game-choice > li > span > svg {position: absolute; right:10px; z-index: 1;}
.fa-caret-up {top:8px; color:#ff6262;}
.fa-caret-down {bottom:8px; color:#46afff;}
.arrow-hid {display:none;}

@media (hover: hover) and (pointer: fine) {
    ul.game-choice:hover {background: #222934;}
    ul.game-choice > li > span.game-ing:hover,
    ul.game-choice > li > span.gameOn:hover {color: #61d0ff; background: rgba(22, 189, 249, .149); border: 1px solid #16bdf9;}
}

/* right-pan */
.btn-rightOpen {display: none;}

ul.right-tab {position: relative; margin:0 auto; padding:0 0 8px 0; width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap:5px;}
ul.right-tab::-webkit-scrollbar {width: 5px; height: 3px; border-radius: 3px;}
ul.right-tab::-webkit-scrollbar-track {background-color:#000; border-radius: 3px;}
ul.right-tab::-webkit-scrollbar-thumb {border-radius: 3px; background-color: #6a7178;}
ul.right-tab::-webkit-scrollbar-button {width: 0; height: 0;}

ul.right-tab > li {position: relative; margin:0; padding:8px 12px; text-align: center; background: #32373e; border: 1px #444a53 solid; border-radius: 5px; cursor: pointer;}
ul.right-tab > li.active {background: #e8630a; border: 1px #f27e31 solid;}

@media (hover: hover) and (pointer: fine) {
    ul.right-tab > li:hover {background: #6d2d03; border: 1px #e8630a solid;}
    ul.right-tab > li.active:hover {background: #e8630a; border: 1px #f27e31 solid;}
}

/* right-league */
ul.right-league {position:relative; margin:10px 0; padding:0 10px; width: 100%; height: 40px; display: flex; justify-content:space-between; align-items: center; background: #212935;box-shadow: inset 0px 1px 0 rgb(255, 255, 255, 0.15);}
ul.right-league > li {position:relative; display: flex; align-items: center;}
ul.right-league > li > img {margin-right:5px; width: 20px;}
ul.right-league > li > span {font-weight:600; color: #aaa;}
ul.right-league > li.right-time {color: #16bdf9;}

/* right-video */
.right-video {position: relative; margin:10px 0; padding:0; width: 100%; text-align: center;}
.right-video > p {line-height: 100px; background: #1b222c;}

/* right-group */
.right-group {position: relative; width: 100%;}
.right-type {margin:0 auto; padding:0; width: 100%; height: 40px; line-height: 40px; text-align: left; color: #becde3;}

ul.right-choice {position: relative; margin: 0; padding:5px 5px; width: 100%; display: flex; flex-wrap: wrap; justify-content:flex-start; align-items: center; background: #1b222c;}
ul.right-choice > li {padding:0 10px; height: 40px; display:flex; justify-content: space-between; align-items: center; color: #becde3; background: #0d121b; border: 1px solid #222a33; cursor: pointer;}
ul.right-choice > li > span {font-size: 12px; font-weight: 500;}
ul.right-col-3 > li {width: calc(100% / 3);}
ul.right-col-2 > li {width: calc(100% / 2);}

ul.right-choice > li.active {background: #041e28; border: 1px solid #16bdf9;}
ul.right-choice > li.active > span {color:#16bdf9;}

@media (hover: hover) and (pointer: fine) {
    ul.right-choice > li:hover {background: #041e28; border: 1px solid #16bdf9;}
    ul.right-choice > li:hover > span {color:#16bdf9;}
}

/* sport-pageNumber */
.sport-pageNumber {position: sticky; bottom: 0; z-index: 30; margin-top: 20px; width: 100%; padding:20px 0; background: rgba(11, 14, 24, 0.3); backdrop-filter: blur(10px);}
.sport-pageNumber .pagination {padding:0; background: none;}


/****************************************************************************************************************************************
inplay game
*****************************************************************************************************************************************/
.inplay-inner {position: relative; margin:0; padding:20px 0; width: 100%; height: 100%; display: flex; gap:10px; justify-content: space-between; align-items: flex-start;}

.left-inplay,
.right-inplay {padding:0 5px 0 0; width: calc(100% / 2 - 10px); height: 820px; background: #0b0e18; overflow-y: auto; overflow-x: hidden;}

/* left-inplay */
.inplay-top {position: relative; margin:0; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center;}
ul.sort {position: relative; margin:0; padding:0; display: flex; gap:20px; justify-content: flex-start; align-items: center;}
ul.sort > li {display: flex; justify-content: flex-start; align-items: center; cursor: pointer;}
ul.sort > li > span {line-height:1; font-size:16px; font-weight: 500; color: #59626c;}
ul.sort > li > i {margin:4px 2px 0 0; font-size:26px; font-weight: 500; color: #59626c;}
ul.sort > li.active > span,
ul.sort > li.active > i {color: #16bdf9;}

.inplay-search {margin:0; padding:0 10px; height: 45px; display: flex; justify-content: flex-start; align-items: center; background: #1b222c;}
.inplay-search > i {padding:0 3px; font-size: 18px; color:#6b819c;}
.inplay-search > input {margin:0; padding:0 10px; width: 100%; min-width: 240px; text-align: left; color: #6c829d; background: none; border: none; outline: none;}

@media (hover: hover) and (pointer: fine) {
    ul.sort > li:hover > span,
    ul.sort > li:hover > i {color: #16bdf9;}
}

/* inplay-group */
.inplay-group {margin-top: 5px; width: 100%; background: #1b222c; border-radius: 10px; transition: all .2s; cursor: pointer;}

/* inplay-league */
ul.inplay-league {position:relative; margin:0; padding:10px 10px; width: 100%; height: 42px; display: flex; justify-content:space-between; align-items: center;}
ul.inplay-league > li {position:relative; display: flex; align-items: center;}
ul.inplay-league > li > img {margin-right:3px; width: 18px;}
ul.inplay-league > li > span {margin-left:3px; font-weight:600; color: #becdd8;}
ul.inplay-league > li:nth-child(2) {justify-content: flex-end;}
.playing-none {margin-right:5px; padding:0; width: 50px; line-height: 22px; text-align: center; font-size:12px; color: #abb2be; background: #353535; border-radius: 5px; }
.playing-now {margin-right:5px; padding:0; width: 50px; line-height: 22px; text-align: center; font-size:12px; color: #fff; background: #f00;  border-radius: 5px; }
.time {margin:0 auto; padding:0 10px; line-height: 22px; text-align: center; font-size: 12px; color: #77808e;background: #0f0f0f; border-radius: 5px;}

/* inplay-choice */
.inplay-choice {padding:0 10px 10px 10px; display: flex; gap: 5px;}
.inplay-choice > div {padding: 10px 10px; height: 74px; display: flex; flex-direction: column; justify-content: center; background: #131822; border-radius: 5px;}

.inplay-match {display: flex; flex-grow: 1;}
.team-home,
.team-away {display: flex; justify-content: flex-start; align-items: center;}
.team-icon {margin-right: 10px; width: 22px; height: 22px; display: flex; justify-content: center; align-items: center; border: 1px solid #0a0d11; border-radius: 12px;}
.team-icon > img {width: 100%;}
.team-name {font-size:12px; color: #becde3;}

.inplay-count {width: 70px; text-align: center; color: #16bdf9; cursor: pointer;}
.inplay-home,
.inplay-draw,
.inplay-away {width: 70px; text-align: center; cursor: pointer;}
.inplay-home > p,
.inplay-draw > p,
.inplay-away > p {font-size:12px; color: #99a0ab;}
.inplay-draw.vs {color: #16bdf9;}
.mo-plus {display: none !important; justify-content: center; align-items: center;}
.mo-plus > i {font-size: 16px; color: #16bdf9;}

.none {color: #818181; cursor: text !important;}
.none > i {font-size: 16px; color: #818181;}

@media (hover: hover) and (pointer: fine) {
    .inplay-group:hover {filter: brightness(1.3);}   

    .inplay-count:hover {background: rgba(22, 189, 249, .149); border: 1px solid #16bdf9;}
    .inplay-home:hover,
    .inplay-draw:hover,
    .inplay-away:hover {background: #041e28; border: 1px solid #16bdf9;}
    .inplay-home:hover > p,
    .inplay-draw:hover > p,
    .inplay-away:hover > p {color: #16bdf9;}
    .none:hover {background: #131822; border: none; cursor: text !important;}
}


/* inplay-slide */
.inplay-slide {position:relative; margin-top: 5px; padding:5px 10px; width: 100%; background: #1b222c; border-radius: 10px; overflow-x: hidden;}
.inplay-list {position: relative; margin: 0; padding:0; width: 100%; overflow: hidden;}
.inplay-list .swiper-slide {width: 100% !important;}
.inplay-menu {position: relative; margin: 0 auto; padding:3px 0; width:calc(100% - 40px); text-align: center; font-size: 16px; font-weight: 500; background: #171d26; border-radius: 5px;} 
ul.game-choice > li > span {padding:10px 5px; min-width: 85px;}


.inplay-prev,
.inplay-next {margin-top: -18px; width:35px; height: 35px; color:#fff; background: #262f41;}
.inplay-prev {left:0;}
.inplay-next {right:0;}
.inplay-prev::after,
.inplay-next::after {font-size: 12px; font-weight: 600;} 



/****************************************************************************************************************************************
right-inplay
*****************************************************************************************************************************************/
/* mo-backBtn */
.mo-backBtn {display: none;}

/* detail-league */
ul.detail-league {position:relative; margin:0; padding:0; width: 100%; height: 45px; display: flex; justify-content:space-between; align-items: center;}
ul.detail-league > li {position:relative; display: flex; align-items: center;}
ul.detail-league > li > img {margin-right:3px; width: 30px;}
ul.detail-league > li > span {margin-left:3px; font-size:14px; font-weight:600; color: #becdd8;}
ul.detail-league > li:nth-child(2) {justify-content: flex-end;}

/* detail-match */
ul.detail-match {position:relative; margin:0 0 10px 0; padding:10px 10px; width: 100%; display: flex; gap:15px; justify-content: center; align-items: center; background: #1b222c; border-radius: 10px;}
ul.detail-match > li {display: flex; gap:15px; align-items: center;}
ul.detail-match > li:nth-child(1) {justify-content:flex-end;}
ul.detail-match > li:nth-child(2) {color: #16bdf9;}
ul.detail-match > li:nth-child(3) {justify-content:flex-start;}
ul.detail-match > li > span {color: #becde3;}
.detail-icon {margin: 0; padding:5px 5px; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center;border-radius: 20px; box-shadow: 0 0 5px #11151f; border-radius: 50%;}
.detail-icon > img {object-fit: contain}

/* detail-live */
.detail-live {position:relative; margin:0 auto; padding: 20px; width: 100%; background: #1b222c; border-radius: 10px;}

.detail-info {position:relative; margin:0 auto; padding:0 0 10px 0; width: 100%; display: flex; gap:10px; align-items: center; font-size: 13px; color: #becde3; border-bottom:1px #373d46 solid;}
.detail-info > span {line-height:1; font-size: 13px; color: #becde3;}
ul.detail-score {position:relative; margin:20px auto 0 auto; padding:5px 0; width: 100%; display: flex; justify-content: space-around; align-items: center;}
ul.detail-score > li {width:100%; text-align: center;}
ul.detail-score > li > img {width: 60px;}
ul.detail-score > li > p {margin:2px 0; font-size: 13px;}

/* detail-group */
.detail-group {position: relative; width: 100%;}
.detail-result {margin:0 auto; padding:0; width: 100%; height: 40px; line-height: 40px; text-align: left; color: #becde3;}

ul.detail-choice {position: relative; margin: 0; padding:5px 5px; width: 100%; display: flex; flex-wrap: wrap; justify-content:flex-start; align-items: center; background: #1b222c;}
ul.detail-choice > li {padding:0 10px; height: 40px; display:flex; justify-content: space-between; align-items: center; color: #becde3; background: #0d121b; border: 1px solid #222a33; cursor: pointer;}
ul.detail-choice > li > span {font-size: 12px; font-weight: 500;}
ul.choice-col-3 > li {width: calc(100% / 3);}
ul.choice-col-2 > li {width: calc(100% / 2);}

/* 추가 */
ul.detail-choice > li.active {background: #041e28; border: 1px solid #16bdf9;}
ul.detail-choice > li.active > span {color:#16bdf9;}

@media (hover: hover) and (pointer: fine) {
    ul.detail-choice > li:hover {background: #041e28; border: 1px solid #16bdf9;}
    ul.detail-choice > li:hover > span {color:#16bdf9;}
}

/****************************************************************************************************************************************
sport-cart
*****************************************************************************************************************************************/
.sport-cart {position: relative; z-index: 9; width: 300px; display: flex; flex-shrink: 0; flex-direction: column;}
.sport-cart::-webkit-scrollbar {width: 2px; height: 2px; border-radius: 2px;}
.sport-cart::-webkit-scrollbar-track {background-color:#0b0e18; border-radius: 2px;}
.sport-cart::-webkit-scrollbar-thumb {border-radius: 2px; background-color: #0b0e18;}
.sport-cart::-webkit-scrollbar-button {width: 0; height: 0;}

.cart-inner {position: relative; height: 100%; display: flex; flex-direction: column;}

/* sport-cartTit */
.sport-cartTit {position: relative; margin:0 auto; padding:0 10px; width: 100%; height: 45px; display: flex; justify-content: space-between; align-items: center; background: #1e252e; border: 1px #6a7178 solid;}
.sport-cartTit > img {width: 20px; filter: invert(53%) sepia(90%) saturate(2600%) hue-rotate(3deg) brightness(102%) contrast(102%);}

/* cartList */
.cartList-box {padding:0; height: 180px; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto;}
.cartList-box::-webkit-scrollbar {width: 2px; height: 2px; border-radius: 2px;}
.cartList-box::-webkit-scrollbar-track {background-color: #000; border-radius: 2px;}
.cartList-box::-webkit-scrollbar-thumb {border-radius: 2px; background-color: #cf651f;}
.cartList-box::-webkit-scrollbar-button {width: 0; height: 0;} 

ul.cart-list {position: relative; margin:2px auto; padding:10px 10px; width: 100%; background: #252e3b; border: 1px solid #3e4247;}
ul.cart-list > li {position: relative; margin:0; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center;}
ul.cart-list > li span {font-size: 12px; font-weight: 500; color:#cdced1; overflow: hidden; white-space: nowrap;}
.left-group > img {width: 18px; border-radius: 2px; overflow: hidden;}
.left-group > .team-name {font-size: 12px; font-weight: 600; color: #aaa;}
.left-group > .result-name,
.left-group > .item_odds {color: #ffa66b;}

.cartList-close {cursor: pointer;}
.cartList-close > i {font-weight:600; color: #aaa;}

@media (hover: hover) and (pointer: fine) {
    .cartList-close:hover > i {color: #ffa66b;}
} 

/* cart-box */
.cart-box {margin:0 auto; padding:5px 5px; width: 100%; background: #222a33; border-top: 1px #6a7178 solid;}
ul.cartInfo {position: relative; padding:0; width:100%;}
ul.cartInfo > li {margin:0; padding:0 5px; width: 100%; height: 32px; display: flex; justify-content: space-between; align-items: center; background: #1b222c;}
ul.cartInfo > li:last-child {border: 1px solid #ffab72;}
ul.cartInfo > li > span {font-size: 12px; font-weight: 500; color: #aaa;}
ul.cartInfo > li > span:nth-child(2) {color: #ffab72;}
ul.cartInfo > li > input {margin:0; padding:0; width: 50%; height: 30px; text-align: right; font-size: 12px; font-weight: 500; color: #ffab72; background: #1b222c; border: none;}
ul.cartInfo > li > input:focus {outline: none;}

/* cart-txt */
ul.cart-txt {position: relative; margin:0 auto; padding:8px 8px; width: 100%; background: #1b222c; border: 1px #36455a solid;}
ul.cart-txt > li {position: relative; list-style: none; padding-left:10px; width: 100%; text-align: left; font-size: 13px; color:#c1daff;}
ul.cart-txt > li::before {content: '-'; position: absolute; left:0; top:0; font-size: 14px; color:#c1daff;}

/* cart-moneyBox */
ul.cart-moneyBox {position: relative; margin:10px 0; padding:0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
ul.cart-moneyBox > li {margin:0; padding:8px 0; width:calc(100% / 3); text-align: center; font-size: 13px; font-weight: 500; color: #fff; background: #3a4653; border: 1px solid #1b222c; cursor: pointer;}

.btn-betGo {position: relative; margin:0; padding:0; width: 100%; line-height: 40px; text-align: center; font-weight: 600; color: #fff; background: #ff771c;}

@media (hover: hover) and (pointer: fine) {
    ul.cart-moneyBox > li:hover {background: #607d8b;}
    .btn-betGo:hover {filter: brightness(120%);}
}


/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 800px) {   
    .sport-wrap {flex-direction: column; gap:0;}

    /* sport-left */
    .sport-left {width: 100%; padding:10px 0 0 0; z-index: 0;}
    .sportLeft-inner {padding:0; width: 100%; height: auto; background: transparent;}
    .open-toggle {display: none;}

    ul.type-list {padding:0 5px 5px 5px; flex-direction: row; gap:8px; overflow-x:unset;}
    ul.type-list > li {flex-direction: column; height: unset; min-width: 50px;}
    ul.type-list > li:nth-child(2n), 
    ul.type-list > li.faded {background:transparent;}  
    .sport-icon, 
    ul.type-list > li.faded .sport-icon {width: 45px; height: 30px; display: flex; justify-content: center; align-items: center; background:transparent; border: 0;}
    ul.type-list > li .sport-icon > img,
    ul.type-list > li.faded .sport-icon > img {filter: brightness(0.6);}

    .type-label {flex-direction: column;}
    .type-label > h3 {margin:0 auto; width: 100%; text-align: center; font-size: 11px; color:#999; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap;}
    .type-label > p,
    ul.type-list > li.active .type-label > p {color: #f2d516;}

    ul.type-list > li.active .sport-icon, 
    ul.type-list > li.active.faded .sport-icon,
    ul.type-list > li.active .sport-icon > img {filter: brightness(1);}

    ul.type-list > li.active .type-label > h3 {color:#fff;}
    
    /* sport-con */
    .sport-con {padding:0; width: 100%;}
    .sport-inner {padding:0 5px; max-width: 100%; height: 100%;}

    .sport-top {margin:10px auto; gap:10px; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
    ul.sport-menu {gap: 10px;}
    ul.sport-menu > li {height:45px; font-size: 13px; font-weight: 500;}

    .sport-search {width: 100%; height: 35px;}
    .sport-search > input {height: 35px;}

    /* sport-bonus */
    ul.sport-bonus {gap:5px; margin: 10px 0;}
    ul.sport-bonus > li {padding:0 5px; height: 40px;}
    ul.sport-bonus > li, 
    ul.sport-bonus > li > span {font-size: 11px;}

    /* game-league */
    ul.game-league {margin:0; padding: 0 5px; height: 37px; background: #333e4f;}
    ul.game-league > li {display: flex; align-items: center;}
    ul.game-league > li > img {width: 18px;}
    ul.game-league > li > span {display:inline-block; margin-left:5px; text-align: left; font-size: 12px; width: 120px; color: #e0e0e0; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap;}
    ul.game-league > li.clock {font-size: 11px; color: #becdd8;}
    ul.game-league > li.clock > img {display: none;}

    /* sport-pan 공통 */
    .sport-pan {justify-content: center; gap:0;}
    .left-pan, 
    .right-pan {width: 100%; height: auto;}

    /* game-tit  */
    ul.game-tit {padding: 5px 5px; gap:3px;}
    ul.game-tit > li {padding:5px 5px; font-size: 11px;}
    ul.game-tit > li.tit-team {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
       
    /* game-choice */
    ul.game-choice {padding:5px 5px; border: 1px solid #171d26;}
    ul.game-choice > li > span {padding:7px 5px; min-width: 60px; font-size: 12px;}
    ul.game-choice > li > span > svg {right:3px;}
    .fa-caret-up {top:4px; color:#ff6262;}
    .fa-caret-down {bottom:4px; color:#46afff;}

    /* right-pan */
    .right-pan {position: fixed; top:0; z-index: 2; padding:85px 5px 80px 5px; height:100%; background: #0b0e18;}
    .right-pan.active {display: block;}
    .btn-rightOpen {display: block; margin:5px auto 8px auto; padding:10px 10px; width: 100%; text-align: center; font-weight: 600; background: #3f51b5; border-radius: 5px; cursor: pointer;}

    /* right-tab */
    ul.right-tab > li {font-size: 13px;}

    /* right-league */
    ul.right-league {margin:10px 0; padding: 0 5px; height: 37px; background: #333e4f;}
    ul.right-league > li {display: flex; align-items: center;}
    ul.right-league > li > img {width: 18px;}
    ul.right-league > li > span {display:inline-block; margin-left:5px; text-align: left; font-size: 12px; width: 120px; color: #e0e0e0; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap;}
    ul.right-league > li.right-time {font-size: 11px; color: #becdd8;}

    /* right-group */
    .right-type {color:#fff;}
    ul.right-choice {background: #242d39;}
    ul.right-choice > li {padding:0 5px; height: 35px;}
    ul.right-choice > li > span {font-size: 11px;}
    ul.right-choice > li > span.long-txt {width:75px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

    /* inplay */
    .inplay-inner {padding:10px 5px; justify-content: center; gap:0;}
    .left-inplay, 
    .right-inplay {padding:0; width: 100%; height: auto;}

    /* left-inplay */
    .inplay-top {flex-direction: column; justify-content: center; align-items: flex-start;}
    ul.sort {gap:10px; width: 100%;}
    ul.sort > li > span {font-size: 13px;}
    ul.sort > li > i {font-size: 16px;}

    .inplay-search {margin-top:5px; padding:0 5px; width: 100%; height: 35px;}
    .inplay-search > i {padding:0; font-size: 14px;}
    .inplay-search > input {padding:0 0 0 5px; min-width: unset; width: calc(100% - 16px);}

    ul.inplay-league {padding:5px 5px; height: 35px;}
    ul.inplay-league > li > span {font-size: 11px;}
    ul.inplay-league > li > img {margin-right: 2px; width: 16px;}
    .time {font-size: 11px; letter-spacing: -1px;}
    .playing-now,
    .playing-none {width: 40px; line-height: 20px; font-size: 11px;}

    .inplay-choice {gap: 3px; padding:0 5px 5px 5px;}
    .inplay-count {display: none !important;}
    .inplay-choice > div {padding:5px 5px; width: 45px; height: 50px;}
    .inplay-home > p, 
    .inplay-draw > p, 
    .inplay-away > p {font-size: 11px;}
    .mo-plus {display: flex !important;}

    .inplay-list {overflow: hidden;}
    .inplay-slide {padding:5px 5px; background: #263242;}
    .inplay-menu {padding:0 20px; width: 100%;}

    .inplay-menu ul.game-choice > li > span.game-type {display: block; width: 70px; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; overflow: hidden;}

    .inplay-prev, 
    .inplay-next {margin-top: -12px; width: 25px; height:25px; background: #7c4b02;}
    .inplay-prev::after, 
    .inplay-next::after {font-size: 11px;}

    /* right-inplay */
    .right-inplay {display:none;}

    .mo-backBtn {display: block; margin:5px auto 8px auto; padding:10px 10px; width: 100%; text-align: center; font-weight: 600; background: #8d3fb5; border-radius: 5px; cursor: pointer;}
    
    ul.detail-league > li > img {width: 20px;}
    ul.detail-league > li > span {font-size: 11px;}
    
    ul.detail-match {padding:5px 5px; gap: 5px;}
    ul.detail-match > li,
    ul.detail-match > li > span {font-size: 11px;}
    ul.detail-match > li > span.detail-long {width: 100px; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; overflow: hidden;}
    .detail-icon {width: 20px; height:20px;}

    .detail-live {padding:10px 10px;}
    .detail-info {font-size: 11px;}

    ul.detail-score {margin:5px 0 0 0;}
    ul.detail-score > li > img {width: 40px;}

    .detail-result {font-size: 12px;}

    ul.detail-choice {padding:5px 0;}
    ul.detail-choice > li > span {font-size: 11px;}

    /* sport-cart */
    .sport-cart {display: none;}
    .sport-cart.active  {display:block; position: fixed; top:80px; bottom:0; z-index: 999; margin:0 auto; padding-bottom: 65px; width:100%; height:auto; background: #1b222c; border-top:5px #16baf5 solid;} 
   
    .sport-cartTit {border-top:none;}

    .cartList-box {order:1;}
    ul.cart-list {margin:2px auto; padding:5px 10px; background: #283241;}
    .team-name {min-width: 250px; width: unset;}
    ul.cart-list > li span {overflow: unset; text-overflow: unset; white-space: unset;}

    .cart-box {order:3; position:relative; display: flex; flex-direction: column; height: auto;}
    ul.cartInfo {order:2; margin:5px 0; display:flex; justify-content: center; align-items: center; flex-wrap: wrap; gap:2px;}
    ul.cartInfo > li {width: calc(100% / 2 - 2px); height: 28px;}
    ul.cartInfo > li > input {height: 26px;}
    ul.cart-moneyBox {order: 1; margin:0;}
    ul.cart-moneyBox > li {padding:5px 0; background: #394558;}

    .btn-betGo {order: 3;}

    .sport-pageNumber {position: relative;}
}/* 미디어쿼리문 끝 */

@media (max-width: 639px) {
    .team-name {width: 100px; text-align: left; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; overflow: hidden;}
}

@media (max-width: 400px) {
    .inplay-list .swiper-slide {height: auto;}
}/* 미디어쿼리문 끝 */