@charset "utf-8";

/****************************************************************************************************************************************
스포츠 공통
*****************************************************************************************************************************************/
.sport-wrap {position: relative; margin:0; padding:0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 10px;}

.x-scrollable {position: relative; margin: 0 auto; width: auto; white-space: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;}
.x-scrollable::-webkit-scrollbar {width: 3px; height: 3px; border-radius: 12px;}
.x-scrollable::-webkit-scrollbar-thumb {background: #b7b7b7; border-radius: 12px;}
.x-scrollable::-webkit-scrollbar-thumb:hover {background: #a0a0a0;}

/****************************************************************************************************************************************
left-스포츠
*****************************************************************************************************************************************/
.left-sport {position: relative; margin:0; padding:10px 10px; width: calc(100% - 260px); height: 100%; background: var(--sport-bg); border: 1px var(--board-sport) solid;}
.left-sport::-webkit-scrollbar {width: 3px; height: 3px; background: #d5e0f7; border-radius: 12px;}
.left-sport::-webkit-scrollbar-thumb {background: #adb5d0; border-radius: 12px;}

/* game-cate */
ul.game-cate {position:relative; margin:5px auto; padding:0; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap:10px;}
ul.game-cate > li {margin:0; padding:8px 20px; font-weight: 600; color: var(--red-color); background: transparent; border:1px var(--red-bg) solid; border-radius: 5px; cursor: pointer;}
ul.game-cate > li.active {color:var(--white-color); background:var(--red-bg);}

@media (hover: hover) and (pointer: fine) {
    ul.game-cate > li:hover {color:var(--white-color); background:var(--red-bg);}
}

/* game-type */
.game-type {position: relative; margin: 0 auto 20px auto; padding:0; width: 100%;}
ul.game-type-list {position: relative; margin:15px 0; padding:0; width: 100%; display: flex; gap:5px; justify-content:flex-start; align-items: center; flex-wrap: nowrap; white-space: nowrap; scroll-behavior: smooth;}
ul.game-type-list > li {position: relative; min-width: 14%}
ul.game-type-list > li > a {position: relative; margin:0; padding:0 10px; height: 40px; display: flex; align-items: center; font-size: 13px; font-weight: 500; color:var(--gray-color); background: var(--bg-layer1); border: 1px var(--board-sport) solid; border-radius: 5px;}    
ul.game-type-list > li > a > svg {margin-right:5px; font-size: 18px; color:var(--gray-color);}
ul.game-type-list > li > a > .sport-count {position: absolute; top:10px; right:10px; width: 28px; line-height: 20px; text-align: center; font-size:12px;  font-weight: 500; letter-spacing: -1px; color:var(--white-color); border-radius: 3px; background:var(--th-bg);}
ul.game-type-list > li.active > a {color:var(--white-color); background:var(--blue-bg);}
ul.game-type-list > li.active > a > .sport-count {color:#0c5ccd; background: #adcfff;}
ul.game-type-list > li.active > a > svg {color:var(--white-color);}

@media (hover: hover) and (pointer: fine) {
    ul.game-type-list > li > a:hover {color:var(--white-color); background:var(--blue-bg);}
    ul.game-type-list > li > a:hover > a {color:var(--white-color);}
    ul.game-type-list > li > a:hover > svg {color:var(--white-color);}
    ul.game-type-list > li > a:hover > .sport-count {color:#0c5ccd; background: #adcfff;}
}

/* sport-bonus */
.sport-bonus {position: relative; margin: 20px auto; padding:0; width: 100%;}
.bonus-tit {position: relative; margin: 0 auto; padding:0; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap:5px;}
.bonus-tit > h3 {font-size: 16px; font-weight: 600; color:var(--color);}
.bonus-tit > span,
.bonus-tit > span > em {font-style: normal; font-weight: 600; color:var(--gray-color);}

ul.bonus-list {position: relative; margin:15px 0; padding:0; width:100%; display: flex; justify-content: center; align-items: center; gap:10px;}
ul.bonus-list > li {position:relative; margin:0; padding:10px; width:calc(100% / 3 - 10px); height:40px; display: flex; justify-content: space-between; align-items: center; font-size:13px; font-weight: 500; color:#333; border: 1px transparent solid; border-radius:3px; cursor: pointer;}
ul.bonus-list > li > span {font-size: 14px; font-weight: 600;}
ul.bonus-list > li.bonus1 {background:#b7e4ff;}
ul.bonus-list > li.bonus2 {background:#b7c0ff;}
ul.bonus-list > li.bonus3 {background:#b7ffbc;}
ul.bonus-list > li.bonus1 > span.bonus-right {color:#006ada;}
ul.bonus-list > li.bonus2 > span.bonus-right {color:#5f6cc2;}
ul.bonus-list > li.bonus3 > span.bonus-right {color:#078f11;}

ul.bonus-list > li.bonus-on {background:#ffc9c9; border: 1px solid #ff7474;}

@media (hover: hover) and (pointer: fine) {
    ul.bonus-list > li:hover {background:#ffc9c9; border: 1px solid #ff7474;}

}

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

.league-tit {position: relative; margin:10px auto; padding:0 10px; width: 100%; height: 40px; display: flex; justify-content: space-between; align-items: center; 
    background: linear-gradient(135deg, rgb(236, 241, 253) 0%, rgb(255, 255, 255) 15%, rgb(239, 243, 254) 20%, rgb(239, 243, 254) 100%);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    box-shadow: 1px 2px 5px #d4deff; 
    cursor: pointer;
}
.left-tit {display: flex; justify-content: flex-start; align-items: center; gap:5px;}
.left-tit > .ball-img {width: 22px;}
.left-tit > .flag-img {height: 22px;}
.left-tit > span {font-weight: 600; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

.mo-time {display: none;}


/* league-list */
ul.league-list {position: relative; margin:0 auto; padding:3px 0; width: 100%; height: 40px; display: flex; justify-content: center; align-items: center; gap:5px; background: var(--bg-layer1);}
ul.league-list > li {position: relative; margin:0; padding:0; min-width: 50px; height: 100%; display: flex; justify-content: center; align-items: center; font-weight: 500; border: 1px var(--board-sport) solid; cursor: pointer;}
ul.league-list > li > div {font-weight: 500;}
ul.league-list > li.pc-time {min-width: 140px; cursor: default;}
ul.league-list > li.sport-ing {padding:0 5px; flex:1; justify-content: space-between;}
ul.league-list > li.sport-result {cursor: default;}
ul.league-list > li.sport-on {background: var(--sport-on-bg); border: 1px solid var(--board-sport-on);}

ul.league-list > li > .left-odd,
ul.league-list > li > .right-odd {display: flex; align-items: center; gap:3px;}

ul.league-list > li > .left-name,
ul.league-list > li > .right-name {text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}


.sport-hot {margin:0 5px; font-size: 13px; font-weight: 600; color: #fa1111; animation: hot 0.8s infinite;}
@keyframes hot {
    5% {color:#fff;}
    100% {color:#fa1111;}
}

ul.league-list > li > .plus-click {display: block; margin:0 auto; padding:0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
ul.league-list > li > .plus-click.active {color:var(--white-color); background:var(--red-bg); border:1px solid var(--red-bg);}
.sub-league-list {display: none; position: relative;}
.sub-league-list.active {display: block;}

/* 마감경기 */
ul.end-leagu-list > li {opacity: 0.6; cursor:default !important;}

@media (hover: hover) and (pointer: fine) {
    ul.league-list > li.sport-ing:hover {background: var(--sport-on-bg); border: 1px solid var(--board-sport-on);}
    ul.end-leagu-list > li.sport-ing:hover {background: var(--bg-layer1); border: 1px var(--board-sport) solid;}
}


/****************************************************************************************************************************************
right-cart
*****************************************************************************************************************************************/
.right-cart {position: relative; margin:0; padding:10px 10px; width: 250px; background:var(--sport-bg); border: 1px var(--board-sport) solid;}
.cart-inner {position: relative; width: 100%;}

/* cart-tit */
.cart-tit {position: relative; margin:0; padding: 8px 10px; width: 100%; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color:var(--white-color); background:var(--blue-bg);}
.cart-tit > a {margin:0; padding: 2px 5px; display: flex; justify-content: center; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--black-color); background:var(--bg-layer1); border-radius: 3px;}
.cart-tit > a > svg {font-size:13px; font-weight: 600; color: var(--black-color);}

@media (hover: hover) and (pointer: fine) {
    .cart-tit > a:hover,
    .cart-tit > a:hover > svg {color:var(--blue-color)}
}


/* cart-list */
#cartList-box {position: relative;}
ul.cart-list {position: relative; margin: 8px auto; padding:0; width: 100%; background:var(--bg-layer1); border-radius: 3px; box-shadow: 1px 2px 5px #d4deff;}
ul.cart-list > li {position: relative; margin:0; padding:5px 8px; width: 100%; display: flex; justify-content: space-between; align-items: center;}   
ul.cart-list > li > span {font-size: 13px; font-weight: 500; color:#40455a; letter-spacing: -0.5px;}
ul.cart-list > li > span.blue-txt {color:var(--blue-color); font-weight: 600;}

ul.cart-list > li > .cart-list-close {position: absolute; top: 0; right: 5px; cursor: pointer} 
ul.cart-list > li > .cart-list-close > svg {color:#40455a;} 
  
@media (hover: hover) and (pointer: fine) {
    ul.cart-list > li > .cart-list-close > svg:hover {color:var(--black-color);}
}

/* cart-money */
.cart-money {position: relative; margin: 8px auto; padding:10px 10px; background:var(--bg-layer1); border-radius: 3px; box-shadow: 1px 2px 5px #d4deff}
.cart-input {position: relative; margin: 0 auto; padding:0 10px; width: 100%; height: 40px; display: flex; justify-content: space-between; align-items: center; gap:5px; font-size: 20px; border:1px var(--blue-bg) solid; border-radius: 5px;}
.cart-input > input {margin:0 auto; padding: 0; width: calc(100% - 25px); font-size: 18px; text-align: right; font-weight: 500; color:var(--blue-bg);}
.cart-input > a {position:relative; display: flex; justify-content: center; align-items: center;}
.cart-input > a > svg {font-size:16px; color:var(--blue-bg); cursor: pointer;}

/* cart-money-list */
ul.cart-money-list {position: relative; padding:5px 0; width:100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
ul.cart-money-list > li {position: relative; width: calc(100% / 4);}
ul.cart-money-list > li > a {display: block; margin:2px 2px; width:calc(100% - 4px); line-height: 30px; font-weight: 600; text-align: center; color:var(--white-color); background: var(--blue-bg); border-radius: 3px;}
ul.cart-money-list > li > a.reset,
ul.cart-money-list > li > a.max {background: var(--red-bg);}

@media (hover: hover) and (pointer: fine) {
    ul.cart-money-list > li > a:hover {filter: brightness(120%);}
}

/* cart-table */
ul.cart-table {position: relative; margin: 8px auto; padding:10px 10px; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; background:var(--bg-layer1); border-radius: 3px; box-shadow: 1px 2px 5px #d4deff}
ul.cart-table > li {position: relative; padding: 0 10px; width: calc(100% / 2); height: 30px; line-height: 30px; font-size: 13px; border-bottom: 1px var(--board-sport) solid;}
ul.cart-table > li:nth-child(1n) {text-align: left; font-weight: 600; color:var(--th-bg);}
ul.cart-table > li:nth-child(2n) {text-align: right; font-weight: 600;  color:var(--black-color);}
ul.cart-table > li.red-txt {color: var(--red-color);}

/* cart-betting */
.cart-betting {position: relative; margin:0; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center; gap:5px;}
.cart-betting > button {margin:0 auto; padding:8px 0; width: calc(100% / 2 - 5px); text-align: center; font-size: 15px; font-weight: 600; color:var(--white-color); border-radius: 5px;}
.cart-betting > button.betting-now {background: var(--red-bg);}
.cart-betting > button.all-cencel {background: var(--blue-bg);}

@media (hover: hover) and (pointer: fine) {
    .cart-betting > button:hover {filter: brightness(120%);}
}

.mo-cart-close,
.mo-cart-icon {display: none;}


/****************************************************************************************************************************************
 미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1300px) {
    /* 공통 */
    .sport-wrap {gap: unset; height: auto; overflow-y: unset;}
    .left-sport {margin-bottom:30px;}

    /* left-sport */
    .left-sport {width: 100%;}

    ul.game-type-list > li > a {flex-direction: column; padding:5px 5px; height: auto; gap:3px;}
    ul.game-type-list > li > a > svg {margin:0 auto;}
    ul.game-type-list > li > a > .sport-count {position: relative; top:unset; left:unset; right:unset; width: 100%;}

    /* right-cart */
    .right-cart {display: none;}
    .right-cart.active {display:block; position: fixed; bottom:0; z-index: 99999; margin:0 auto; width:100%; height: auto;}
    
    /* #cartList-box */
    #cartList-box {height: 140px; overflow-y: auto; overflow-x: hidden;}

    /* cart-table */
    ul.cart-table {justify-content: flex-start;}
    ul.cart-table > li {width: calc(100% / 4);}


     /* 모바일 카트 */
    .mo-cart-close {display: block; margin:5px auto 0 auto; padding:10px 0; text-align: center; font-size:16px; font-weight:600; color:var(--white-color); background:var(--green-bg); border-radius: 5px; cursor: pointer;}

    .mo-cart-icon {display: block; position: fixed; bottom:65px; right:10px; z-index: 99; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; background: var(--blue-bg); border-radius: 50%; cursor: pointer;}
    .mo-cart-icon > svg {position:relative; font-size:25px; color:var(--white-color);}
    .cart-count {position:absolute; top:-5px; right:5px; margin:0 auto; padding:0; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: -0.5px; color:var(--white-color); background: var(--red-bg); border-radius: 50%; cursor: pointer;}

}/* 미디어쿼리문 끝 */


@media (max-width:992px) {
    ul.league-list > li > .left-name{flex: 1; padding-right:10px; text-align: left;}
    ul.league-list > li > .right-name {flex: 1; padding-left:10px; text-align: right;}
}/* 미디어쿼리문 끝 */

@media (max-width:797px) {
    /* 공통 */
    .sport-wrap {padding:15px 0;}
}/* 미디어쿼리문 끝 */

@media (max-width:767px) {
    /* left-sport */
    .left-sport {padding:5px 5px;}

    /* game-cate */
    ul.game-cate > li {padding:5px 0; font-size: 13px;}

    /* bonus */
    .bonus-tit > h3,
    .bonus-tit > span {font-size: 13px; letter-spacing: -1px;}
    .bonus-tit > span > em {display:none;}

    ul.bonus-list {gap:3px;}
    ul.bonus-list > li {padding:5px 5px; width: calc(100% - 3px); height: auto; flex-direction: column;}
    ul.bonus-list > li > span {font-size: 12px;} 

    /* league-tit */
    .league-tit {padding: 0 5px;}
    .left-tit > .flag-img {height: 16px;}
    .left-tit > span {font-size: 13px; letter-spacing: -1px;}
    .mo-time {display:block; font-size: 12px; font-weight: 500; letter-spacing: -1px;}

    /* league-list */
    ul.league-list > li.pc-time {display: none;}
    ul.league-list > li {min-width: 30px;}
    ul.league-list > li,
    ul.league-list > li > div {font-size: 13px;}    

    .sport-hot {font-size: 11px;}

}/* 미디어쿼리문 끝 */

@media (max-width:639px) { 
    /* game-cate */
    ul.game-cate {gap:5px;}
    ul.game-cate > li {width: calc(100% - 5px);}

    /* game-type */
    ul.game-type-list > li {min-width: 80px;}
    ul.game-type-list {margin:5px 0 10px auto;}
    ul.game-type-list > li {min-width: 60px;}
    ul.game-type-list > li > a {font-size: 12px; gap:1px;}
    ul.game-type-list > li > a > svg {font-size: 15px;}

    /* league */
    ul.league-list > li.mo-bet-hid {display:none;}

    /* .mo-cart-icon */
    .mo-cart-icon {width: 40px; height: 40px;}
    .mo-cart-icon > svg {font-size: 18px;}
    .cart-count {right:0;}

    /* cart-table */
    .cart-money,
    ul.cart-table {padding:5px 5px;}
    ul.cart-table > li {padding:5px 5px; font: 12px;}
    ul.cart-table > li:nth-child(1n) {font: 11px; letter-spacing: -1px;}

    /* league-list */
    ul.league-list {gap: 3px;}

    ul.league-list > li {min-width: 30px;}
    ul.league-list > li,
    ul.league-list > li > div {font-size:12px; letter-spacing: -1px;}
    ul.league-list > li.sport-ing {padding:0 3px;}

    ul.league-list > li > .left-odd,
    ul.league-list > li > .right-odd {gap:0; min-width: 25px;}
    ul.league-list > li > .left-odd > img,
    ul.league-list > li > .right-odd > img {width: 10px;}

    .sport-hot {letter-spacing: -1px;}
}/* 미디어쿼리문 끝 */