/*---------------------------------------------------------
    MAIN VISUAL
---------------------------------------------------------*/

#main_visual {
    display: block;
    margin:0;
    border-bottom: 3px solid #0344a1;
}

#main_visual .visual_list {
    display: block;
    margin:0;
    min-width:1400px;
    height:364px;
    position: relative;
    overflow: hidden;
}

#main_visual .visual_list .visual_item {
    display: block;
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    opacity: 0;
    transition: all 600ms;
}

#main_visual .visual_list .visual_item.active {
    opacity: 1;
    transition: all 600ms;
}

#main_visual .visual_list .visual_item .visual_bg {
    display: block;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    /*width:1600px;*/
    width:100%;
    height:364px;
    object-fit: none;
    object-position: center;
}

#main_visual .visual_list .visual_item .visual_entity {
    display: block;
    position:absolute;
    left:50%;
    bottom:-364px;
    width:800px;
    height:364px;
    margin-left:260px;
    object-fit:none;
    object-position: bottom right;
    transform: translate(-50%) scale(0.5);
    opacity: 0;
} 

#main_visual .visual_list .visual_item.active .visual_entity {
    transition-delay: 200ms;
    transition-property: all;
    transition-duration: 400ms;
    transform: translate(-50%) scale(1);
    bottom:0px;
    opacity: 1;
}

#main_visual .visual_list .visual_item .visual_label {
    display: block;
    position:absolute;
    left:50%;
    top:50%;
    width:800px;
    height:364px;
    margin-left:-600px;
    object-fit: none;
    object-position: left;
    transform: translate(-50%,-50%) scale(0.5);
    opacity: 0;
} 

#main_visual .visual_list .visual_item.active .visual_label {
    transition-delay: 400ms;
    transition-property: all;
    transition-duration: 400ms;
    margin-left:-260px;
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
}

#main_visual .visual_list .visual_item .visual_mask_left {
    display: block;
    position: absolute;
    /*right:50%;*/
	left:0;
    top:0px;
    bottom:0px;
    width:800px;
}

#main_visual .visual_list .visual_item .visual_mask_right {
    display: block;
    position: absolute;
    /*left:50%;*/
	right:0;
    top:0px;
    bottom:0px;
    width:800px;
}

#main_visual .visual_btns {
    position:absolute;
    display: flex;
    left:50%;
    height:0px;
    bottom:50px;
    transform: translate(-50%, -50%);
}

#main_visual .visual_btns .btn_circle {
    display: block;
    flex-shrink: 0;
    width:10px;
    height:10px;
    margin:10px;
    border-radius: 10px;
    background:#42425f;
    transform: translateY(-50%);
    cursor:pointer;
    transition: all 300ms;
}

#main_visual .visual_btns .btn_circle.active {
    background:#ffc967;
    box-shadow: 0px 0px 20px 5px #ffc967;
    width:16px;
    height:16px;
    border-radius:10px;
    transition: all 300ms;
}


/*---------------------------------------------------------
    MAIN LIVESPORTS
---------------------------------------------------------*/
#main_livesports {
    display: block;
    margin:0;
    min-width: 1400px;
    text-align: center;
    position: relative;
}

#main_livesports .titlebox {
    display: block;
    margin:0 auto;
    text-align: left;
    padding-left:20px;
    padding-right:20px;
    padding-top:20px;
    padding-bottom:20px;
    min-width: 1400px;
    max-width: 2200px;
}

#main_livesports .titlebox h3 {
    margin:0;
    padding:0;
    border:0;
    display: block;
    font-size:18px;
    color:#ffffff;
}


#main_livesports .inner_center {
    display: block;
    margin:0 auto;
    padding:0;
    border:0;
    text-align: left;
    min-width: 1400px;
    max-width: 2200px;
    padding-left:20px;
    padding-right:20px;
}

#main_livesports .gridbox {
    display: grid;
    grid-auto-flow: column;
    gap:5px;
    min-width: 1400px;
    max-width: 2200px;
    margin:0 auto;
    height:530px;
    text-align: left;
    padding-left:20px;
    padding-right:20px;
    grid-template: repeat(8, 1fr) / repeat(18, 1fr);
}

#main_livesports .gridbox .video_tab {
    grid-column: span 6;
    grid-row: span 1;
    height:62px;
    display: grid;
    grid-gap: 5px;
    grid-template: repeat(1, 1fr) / repeat(2, 1fr);
}

#main_livesports .gridbox .video_tab .tabitem {
    display: flex;
    justify-content: center;
    width: 100%;
    border: 3px solid #242424;
    cursor: pointer;
    border-radius: 10px;
}

#main_livesports .gridbox .video_tab .tabitem:hover,
#main_livesports .gridbox .video_tab .tabitem.active  {
    background: #29324b;
}

#main_livesports .gridbox .video_tab .tabitem .icon {
    object-fit: none;
    object-position: center;
    width:65px;
}

#main_livesports .gridbox .video_tab .tabitem .label {
    height:54px;
    line-height:54px;
    font-size:16px;
    margin-left:5px;
    font-family: 'Gmarket Sans';
    padding-top:4px;
}


#main_livesports .gridbox .video {
    display: block;
    grid-column: span 6;
    grid-row: span 7;
    border:1px solid #313742;
    background:#000000;
    z-index:4;
    position: relative;
}

#main_livesports .gridbox .view {
    display: grid;
    grid-auto-flow: row;
    grid-template: repeat(8,1fr) / repeat(8,1fr);
    grid-column: span 5;
    grid-row: span 8;
    border: 3px solid #2f3c64;
    background: #11141d;
    z-index: 1;
    position: relative;
    border-radius: 10px;
}

#main_livesports .gridbox .category {
    display: flex;
    grid-column: span 7;
    grid-row: span 1;
    border:1px solid #313742;
    background:#11141d;
    z-index:3;
    height:62px;
}

#main_livesports .gridbox .list {
    display: block;
    grid-column: span 7;
    grid-row: span 7;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    z-index:2;
}

@media screen and (max-width: 2150px) {

    #main_livesports .gridbox {
        height:1200px;
        grid-template: repeat(11, 1fr) / repeat(18, 1fr);
    }

    #main_livesports .gridbox .video_tab {
        display: flex;
        grid-column: span 9;
        grid-row: span 1;
        margin-left:1px;
    }

    #main_livesports .gridbox .video {
        grid-column: span 9;
        grid-row: span 6;
        height:auto;
    }
    
    #main_livesports .gridbox .view {
        grid-column: span 9;
        grid-row: span 4;
        height:263px;
    }

    #main_livesports .gridbox .category {
        grid-column: span 9;
        grid-row: span 1;
        height:62px;
    }
    
    #main_livesports .gridbox .list {
        grid-column: span 9;
        grid-row: span 10;
    }
}

#main_livesports .gridbox .video .video_inner {
    position: relative;
    display: block;
    height:fit-content;
}

#main_livesports .gridbox .video span.video_txt {
	display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#main_livesports .gridbox .view .title {
    height: 61px;
    line-height: 60px;
    text-align: center;
    border-bottom: 4px solid #ef7c00;
    grid-row: span 1;
    grid-column: span 8;
    overflow: hidden;
    font-size: 28px;
    font-weight: 100;
    border-radius: 10px;    
}

#main_livesports .gridbox .view .title span {
    color:#ef7c00;
}

#main_livesports .gridbox .view .team {
    text-align: center;
    border-bottom: 5px solid #586e97;
    grid-row: span 5;
    grid-column: span 4;
    overflow: hidden;
    display: block;
    position: relative;
    border-radius: 10px;
}

#main_livesports .gridbox .view .team.team_home {
    border-right:1px solid #313742;
}


#main_livesports .gridbox .view .team.team_home .team_icon {
    width:100px;
    height:100px;
    position: absolute;
    display: block;
    right:100px;
    top:50%;
    transform: translate(0, -50%);
    border-radius:50px;
    background:radial-gradient(#0344a1 60%, #5f91d8 70%, #0344a1 80%);
    border:1px solid #313742;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    object-fit: scale-down;
    padding:10px;
}

#main_livesports .gridbox .view .team.team_away .team_icon {
    width:100px;
    height:100px;
    position: absolute;
    display: block;
    left:100px;
    top:50%;
    transform: translate(0, -50%);
    border-radius:50px;
    background:radial-gradient(#d70029 60%, #ff8da1 70%, #d70029 80%);
    border:1px solid #313742;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    object-fit: scale-down;
    padding:10px;
}

#main_livesports .gridbox .view .team.team_home .team_score {
    position: absolute;
    display: block;
    right:20px;
    top:50%;
    transform: translate(0,-50%);
    width:55px;
    margin-right:5px;
    text-align: center;
    color:#ffffff;
    font-weight:900;
    font-size:40px;
    font-family: 'Rajdhani';
}

#main_livesports .gridbox .view .team.team_away .team_score {
    position: absolute;
    display: block;
    left:20px;
    top:50%;
    transform: translate(0,-50%);
    width:55px;
    margin-right:5px;
    text-align: center;
    color:#ffffff;
    font-weight:900;
    font-size:40px;
    font-family: 'Rajdhani';
}

#main_livesports .gridbox .view .team .team_name {
    position: absolute;
    display: block;
    text-align:center;
    left:20px;
    right:20px;
    top:50%;
    margin-top:60px;
    color:#ffffff;
    font-weight:900;
    font-size:20px;
    font-family: 'Rajdhani';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#main_livesports .gridbox .view .bet {
    display: flex;
    border-bottom:1px solid #313742;
    grid-row: span 1;
    grid-column: span 8;
    overflow: hidden;
    margin-left:-1px;
    height:100px;
    position: relative;
}

#main_livesports .gridbox .view .bet .empty {
    display: block;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    font-size:16px;
}


#main_livesports .gridbox .view .bet .betgroup {
    display: block;
}

#main_livesports .gridbox .view .bet .betgroup.betgroup_winlose,
#main_livesports .gridbox .view .bet .betgroup.betgroup_handycap {
    display: block;
    width:200%;
    border-left:1px solid #313742;
}

#main_livesports .gridbox .view .bet .betgroup.betgroup_windrawlose {
    display: block;
    width:300%;
    border-left:1px solid #313742;
}

#main_livesports .gridbox .view .bet .betgroup.betgroup_overunder {
    display: block;
    width:250%;
    border-left:1px solid #313742;
}

#main_livesports .gridbox .view .bet .betgroup .bet_type {
    display: block;
    border-bottom: 2px solid #313742;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #a8a8a8;
    font-weight: 600;
    font-size: 14px;
    border-radius: 10px;
}

#main_livesports .gridbox .view .bet .betgroup .bet_list {
    display: flex;
}

#main_livesports .gridbox .view .bet .betgroup .bet_list .bet_item {
    display: block;
    width:100%;
    text-align: center;
    border-left:1px solid #313742;
    margin-left:-1px;
    height:64px;
    cursor:pointer;
    transition: all 300ms;
    border-top:2px solid transparent;
}

#main_livesports .gridbox .view .bet .betgroup .bet_list .bet_item.activable.active,
#main_livesports .gridbox .view .bet .betgroup .bet_list .bet_item.activable:hover {
    background: #29324b;
    border-top:2px solid #ef7c00;
    transition: all 300ms;
}

#main_livesports .gridbox .view .bet .betgroup .bet_list .bet_item .label {
    display: block;
    text-align: center;
    border-bottom:1px solid #313742;
    height:32px;
    line-height: 32px;
    color:#a8a8a8;
    font-size:13px;
}

#main_livesports .gridbox .view .bet .betgroup .bet_list .bet_item .odds {
    display: block;
    text-align: center;
    line-height: 32px;
    height:32px;
    color:#a8a8a8;
    font-size:13px;
}
#main_livesports .gridbox .view .bet .betgroup .bet_list .bet_item.bet_item_option {
    width:50%;
}
#main_livesports .gridbox .view .bet .betgroup .bet_list .bet_item .option {
    display: block;
    text-align: center;
    padding-top:17px;
    line-height: 15px;
    height:15px;
    color:#ef7c00;
    font-size:13px;
}

#main_livesports .gridbox .view .bet .betgroup .bet_list .bet_item.activable.active .label,
#main_livesports .gridbox .view .bet .betgroup .bet_list .bet_item.activable:hover .label,
#main_livesports .gridbox .view .bet .betgroup .bet_list .bet_item.activable.active .odds,
#main_livesports .gridbox .view .bet .betgroup .bet_list .bet_item.activable:hover .odds   {
    color: #ffffff;
}

#main_livesports .gridbox .view .btn_betting {
    display: block;
    text-align: center;
    height:100px;
    line-height: 100px;
    grid-row: span 1;
    grid-column: span 8;
    font-weight: 600;
    font-size:28px;
    cursor:pointer;
}

#main_livesports .gridbox .view .btn_betting:hover {
    background: #29324b;
    transition: all 200ms;
    color:#ffffff;
}

@media screen and (max-width: 2150px) {

    #main_livesports .gridbox .view .title {
        grid-column: span 8;
        grid-row: span 1;
        order:1;
    }

    #main_livesports .gridbox .view .team.team_home {
        grid-column: span 2;
        grid-row: span 3;
        order:2;
    }

    #main_livesports .gridbox .view .bet {
        grid-column: span 6;
        grid-row: span 3;
        order:3;
    }

    #main_livesports .gridbox .view .team.team_away {
        grid-column: span 2;
        grid-row: span 3;
        order:4;
        border-right:1px solid #313742;
    }

    #main_livesports .gridbox .view .btn_betting {
        grid-column: span 6;
        grid-row: span 3;
        order:5;
    }

    #main_livesports .gridbox .view .team.team_home .team_score {
        position: absolute;
        display: block;
        right:15px;
        left:95px;
        top:15px;
        transform: translate(0,0);
        text-align: center;
        color:#ffffff;
        width: auto;
        font-weight:900;
        font-size:40px;
        font-family: 'Rajdhani';
    }

    #main_livesports .gridbox .view .team.team_away .team_score {
        position: absolute;
        display: block;
        right:15px;
        left:95px;
        top:15px;
        width: auto;
        transform: translate(0,0);
        text-align: center;
        color:#ffffff;
        font-weight:900;
        font-size:40px;
        font-family: 'Rajdhani';
    }

    #main_livesports .gridbox .view .team.team_home .team_icon {
        width:50px;
        height:50px;
        position: absolute;
        display: block;
        left:15px;
        right:auto;
        top:10px;
        transform: translate(0,0);
        border-radius:30px;
        background:radial-gradient(#0344a1 60%, #5f91d8 70%, #0344a1 80%);
        border:1px solid #313742;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
        object-fit: scale-down;
        padding:10px;
    }
        
    #main_livesports .gridbox .view .team.team_away .team_icon {
        width:50px;
        height:50px;
        position: absolute;
        display: block;
        left:15px;
        right:auto;
        top:10px;
        transform: translate(0, 0);
        border-radius:30px;
        background:radial-gradient(#d70029 60%, #ff8da1 70%, #d70029 80%);
        border:1px solid #313742;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
        object-fit: scale-down;
        padding:10px;
    }

    #main_livesports .gridbox .view .team .team_name {
        position: absolute;
        display: block;
        text-align:center;
        left:20px;
        right:20px;
        top:auto;
        bottom:5px;
        color:#ffffff;
        font-weight:900;
        font-size:16px;
        font-family: 'Rajdhani';
    }
}

#main_livesports .gridbox .category .btn_left,
#main_livesports .gridbox .category .btn_right {
    display: block;
    flex-shrink: 0;
    width:30px;
    border-left:1px solid #313742;
    position:relative;
    cursor:pointer;
}

#main_livesports .gridbox .category .btn_left span,
#main_livesports .gridbox .category .btn_right span {
    display: block;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%) scaleX(0.6);
    font-size:24px;
    font-weight: 600;
    color:#a8a8a8;
}

#main_livesports .gridbox .category .btn_left:hover,
#main_livesports .gridbox .category .btn_right:hover {
    background: #29324b;
    transition: all 300ms;
    animation: beat .25s infinite alternate;
}

#main_livesports .gridbox .category .btn_left:hover span,
#main_livesports .gridbox .category .btn_right:hover span {
    color:#ffffff;
    text-shadow: 
        0 0 5px #cfff5e,
        0 0 10px #ffb25e,
        0 0 20px #ef7c00;
}

#main_livesports .gridbox .category .ipt_search_box {
    display: block;
    flex-shrink: 0;
    width:120px;
    border-left:1px solid #313742;
    position:relative;
}

#main_livesports .gridbox .category .ipt_search_box input {
    position: absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    background: transparent;
    border:0px;
    padding-left:10px;
    padding-right:10px;
    font-size:16px;
}

#main_livesports .gridbox .category .btn_search {
    display: block;
    flex-shrink: 0;
    width:60px;
    border-left:1px solid #313742;
    position:relative;
    cursor:pointer;
}

#main_livesports .gridbox .category .btn_search span {
    display: block;
    position: absolute;
    right:15px;
    top:50%;
    transform: translate(0, -50%);
    font-size:16px;
    font-weight: 600;
    color:#a8a8a8;
}

#main_livesports .gridbox .category .btn_search input ,
#main_livesports .gridbox .category .btn_search img {
    display: block;
    position: absolute;
    margin-top:2px;
    left:15px;
    top:50%;
    transform: translate(0, -50%);
    filter: grayscale(1);
}

#main_livesports .gridbox .category .btn_search:hover {
    background: #29324b;
    color:#ef7c00;
    border:1px solid #29324b;
    transition: all 300ms;
    animation: beat .25s infinite alternate;
}

#main_livesports .gridbox .category .btn_search:hover span {
    color:#ffffff;
    text-shadow: 
        0 0 5px #cfff5e,
        0 0 10px #ffb25e,
        0 0 20px #ef7c00;
}

#main_livesports .gridbox .category .btn_search:hover input ,
#main_livesports .gridbox .category .btn_search:hover img {
    filter: grayscale(0);
}

#main_livesports .gridbox .category .sort {
    display: block;
    list-style: none;
    flex-shrink: 0;
    width:100px;
    position:relative;
    cursor:pointer;
}

#main_livesports .gridbox .category .sort li {
    list-style: none;
    position:absolute;
    display: block;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    border-left:1px solid #313742;
    transition: all 300ms;
}

#main_livesports .gridbox .category .sort li span.value {
    display: block;
    position: absolute;
    padding-left:15px;
    line-height:59px;
    left:0;
    right:0;
    bottom:0;
    top:0;
    font-size:16px;
    font-weight: 600;
    color:#a8a8a8;
    z-index:3;
    transition: all 300ms;
}

#main_livesports .gridbox .category .sort li span.arrow {
    display: block;
    position: absolute;
    right:15px;
    top:50%;
    transform: translate(0, -50%) scaleX(0.6);
    font-size:24px;
    font-weight: 600;
    color:#a8a8a8;
    z-index:2;
    transition: all 300ms;
}

#main_livesports .gridbox .category .sort li:hover,
#main_livesports .gridbox .category .sort li.active {
    background: #29324b;
    color:#ef7c00;
    border:1px solid #29324b;
    transition: all 300ms;
    animation: beat .25s infinite alternate;
}

#main_livesports .gridbox .category .sort li:hover span.value,
#main_livesports .gridbox .category .sort li.active span.value {
    color:#ffffff;
    transition: all 300ms;
    text-shadow: 
    0 0 5px #cfff5e,
    0 0 10px #ffb25e,
    0 0 20px #ef7c00;
}

#main_livesports .gridbox .category .sort li:hover span.arrow,
#main_livesports .gridbox .category .sort li.active span.arrow {
    color:#ffffff;
    transform: translate(0, -50%) scaleY(0.7) rotate(90deg);
    transition: all 300ms;
    text-shadow: 
    0 0 5px #cfff5e,
    0 0 10px #ffb25e,
    0 0 20px #ef7c00;
}


#main_livesports .gridbox .category .sort li ul {
    display: block;
    list-style: none;
    overflow: hidden;
    max-height: 0px;
    position: absolute;
    left:-1px;
    right:-1px;
    top:59px;
    transition: all 300ms;
    z-index:1;
	height:60px;
}

#main_livesports .gridbox .category .sort li ul li {
    display: block;
    background:#11141d;
    height:60px;
    line-height:60px;
    border-top:1px solid #313742;
    text-align: center;
    z-index:1;
}

#main_livesports .gridbox .category .sort.active li ul {
    display: block;
    max-height: 130px;
    border:1px solid #313742;
    transition: all 300ms;
}

#main_livesports .gridbox .category .sort.active li ul li:hover,
#main_livesports .gridbox .category .sort.active li ul li.active {
    background:#344474;
}

#main_livesports .gridbox .category .swipebox {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    flex-grow: 1;
    margin-bottom:-3px;
}

#main_livesports .gridbox .category .swipebox::-webkit-scrollbar {
    height:3px;
}

#main_livesports .gridbox .category .swipebox::-webkit-scrollbar-track {
    background: #888888;
}

#main_livesports .gridbox .category .swipebox::-webkit-scrollbar-track {
    background: #444444;
}

#main_livesports .gridbox .category .swipebox .ca_item {
    width:65px;
    flex-shrink: 0;
    overflow: hidden;
    border-right:1px solid #313742;
    display: block;
    position: relative;
    background: transparent;
    transition: background 300ms;
    cursor:pointer;
}

#main_livesports .gridbox .category .swipebox .ca_item img {
    filter:brightness(0.6);
    position: absolute;
    display: block;
    bottom:38px;
    left:50%;
    transform: translate(-50%, 50%);
    width:20px;
    height:20px;
    object-fit: scale-down;
    object-position: center;
    transition: all 300ms;
}

#main_livesports .gridbox .category .swipebox .ca_item span {
    position:absolute;
    bottom:8px;
    left:50%;
    transform: translate(-50%);
    color:#a8a8a8;
    font-weight:600;
    font-size:9px;
    letter-spacing: -1px;
    transition: all 300ms;
}

#main_livesports .gridbox .category .swipebox .ca_item:hover,
#main_livesports .gridbox .category .swipebox .ca_item.active {
    border-top:2px solid #ef7c00;
    background:#29324b;
    transition: background 300ms;
}

#main_livesports .gridbox .category .swipebox .ca_item:hover img,
#main_livesports .gridbox .category .swipebox .ca_item.active img {
    filter:brightness(1);
    transition: all 300ms;
}

#main_livesports .gridbox .category .swipebox .ca_item:hover span,
#main_livesports .gridbox .category .swipebox .ca_item.active span {
    color:#ffffff;
    transition: all 300ms;
}

#main_livesports .gridbox .list::-webkit-scrollbar {
    width:3px;
}

#main_livesports .gridbox .list::-webkit-scrollbar-track {
    background: #444444;
}

#main_livesports .gridbox .list::-webkit-scrollbar-thumb {
    background: #888888;
}

#main_livesports .gridbox .list .item {
    background-color: #003e6a;
    stroke: #177099;
    background-image: url('/images/1bet1/main_livesports/list_item_bg.svg');
    margin-right:5px;
    margin-bottom:5px;
    height:150px;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: inset 0px 0px 20px rgba(255,255,255,0.3);
    filter:grayscale(1) brightness(0.5);
    cursor:pointer;
    position: relative;
    transition: all 100ms;
}

#main_livesports .gridbox .list .item:hover {
    filter:grayscale(0) brightness(1);
    transition: all 100ms;
}

#main_livesports .gridbox .list .item.active{
    filter:grayscale(0) brightness(1);
    transition: all 100ms;
}


#main_livesports .gridbox .list .item .league_name {
    background: url('/images/1bet1/main_livesports/list_item_league_name_bg.png'), linear-gradient(#436592 0%, #1f344f 15%) ;
    background-repeat: no-repeat;
    background-position:left;
    height:50px;
    line-height:50px;
    text-align: center;
    font-size:18px;
    font-weight:600;
    color:#ffffff;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}

#main_livesports .gridbox .list .item .game_home_icon {
    position: absolute;
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    left:50%;
    top:100px;
    margin-left:-100px;
    background:radial-gradient(#0344a1 60%, #5f91d8 70%, #0344a1 80%);
    border:1px solid #313742;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    object-fit: scale-down;
    padding:10px;
    transform: translate(-50%,-50%);
} 

#main_livesports .gridbox .list .item .game_away_icon {
    position: absolute;
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    left:50%;
    top:100px;
    margin-left:100px;
    background:radial-gradient(#d70029 60%, #ff8da1 70%, #d70029 80%);
    border:1px solid #313742;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    object-fit: scale-down;
    padding:10px;
    transform: translate(-50%,-50%);
}

#main_livesports .gridbox .list .item .game_home_name {
    position: absolute;
    display: block;
    right:50%;
    top:100px;
    transform: translate(0,-50%);
    margin-right:150px;
    text-align: right;
    color:#ffffff;
    font-weight:600;
    font-size:16px;
    left:20px;
}

#main_livesports .gridbox .list .item .game_away_name {
    position: absolute;
    display: block;
    left:50%;
    top:100px;
    transform: translate(0,-50%);
    margin-left:150px;
    text-align: left;
    color:#ffffff;
    font-weight:600;
    font-size:16px;
    right:20px;
}

#main_livesports .gridbox .list .item .game_home_score {
    position: absolute;
    display: block;
    right:50%;
    top:100px;
    transform: translate(0,-50%);
    width:55px;
    margin-right:5px;
    text-align: center;
    color:#ffffff;
    font-weight:900;
    font-size:30px;
    font-family: 'Rajdhani';
}

#main_livesports .gridbox .list .item .game_away_score {
    position: absolute;
    display: block;
    left:50%;
    top:100px;
    transform: translate(0,-50%);
    width:55px;
    margin-left:5px;
    text-align: center;
    color:#ffffff;
    font-weight:900;
    font-size:30px;
    font-family: 'Rajdhani';
}

#main_livesports .gridbox .list .item .game_vs_score {
    position: absolute;
    display: block;
    left:50%;
    top:98px;
    color:#ffffff;
    transform: translate(-50%,-50%);
    font-weight:900;
    font-size:30px;
    font-family: 'Rajdhani';
}

#main_livesports .gridbox .list .item .game_datetime {
    position: absolute;
    right:10px;
    top:5px;
    height:40px;
    line-height:15px;
    padding:5px;
    padding-left:10px;
    padding-right:10px;
    background: #192a3f;
    font-weight:600;
    font-size:13px;
    border-radius:10px;
    border-bottom:2px solid #6e7c8d;
    border-left:2px solid #18283c;
    border-top:2px solid #18283c;
    border-right:2px solid #18283c;
}

#main_livesports .gridbox .list .empty {
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

#main_livesports .gridbox .list .empty img {
    margin-bottom:15px;
}

#main_livesports .gridbox .list .empty span {
    font-size:24px;
    color:#ef7c00;
}

/*---------------------------------------------------------
    MAIN SERVICES
---------------------------------------------------------*/
#main_services {
    display: block;
    min-width: 1400px;
    margin:0px;
    text-align: center;
}

#main_services .titlebox {
    display: flex;
    justify-content: space-between;
    margin:0 auto;
    text-align: left;
    padding-left:20px;
    padding-right:20px;
    margin-top:40px;
    min-width: 1400px;
    max-width: 2200px;
    height:30px;
}

#main_services .titlebox h3 {
    margin:0;
    padding:0;
    border:0;
    display: block;
    font-size:20px;
    line-height:30px;
    color:#ffffff;
    cursor:pointer;
    height:30px;
}

#main_services .titlebox .btn_more {
    display: block;
    font-size:16px;
    line-height:30px;
    font-weight: 600;
    color:#ef7c00;
    height:30px;
    cursor: pointer;
}

#main_services .titlebox .btn_more:hover {
    color:#ffffff;
    text-shadow: 
        0 0 5px #cfff5e,
        0 0 10px #ffb25e,
        0 0 20px #ef7c00;
    transition: all 300ms;
}

#main_services .titlebox .btn_more span {
    color:#ef7c00;
    font-size:16px;
    font-weight: 900;
    line-height:30px;
    height:30px;
}

#main_services .titlebox .btn_more:hover span{
    color:#ffffff;
    transition: all 300ms;
}

#main_services .gridbox {
    display: grid;
    margin:0 auto;
    text-align: left;
    gap:20px;
    padding:20px;
    grid-template: repeat(2,1fr) / repeat(4,1fr);
    grid-auto-flow: row;
    min-width: 1400px;
    max-width: 2200px;
}

#main_services .gridbox .service_item {
    display: block;
    width: 100%;
    height: 130px;
    border:1px solid #313742;
    border-radius: 10px;
    background: linear-gradient(#070a0f, #10131c);
    overflow: hidden;
    position: relative;
    cursor:pointer;
}

#main_services .gridbox .service_item.wide_off {
    display: none;
}

@media screen and (max-width: 1600px) {
    #main_services .gridbox {
        grid-template: repeat(2,1fr) / repeat(3,1fr);
    }

    #main_services .gridbox .service_item.mini_off {
        display: none;
    }
}


#main_services .gridbox .service_item .label {
    filter: grayscale(0.8) brightness(0.6);
    position: absolute;
    display: block;
    left:10px;
    top:15px;
}

#main_services .gridbox .service_item .bg {
    position: absolute;
    right:0px;
    bottom:0px;
    filter: grayscale(0.6) brightness(0.6);
}

#main_services .gridbox .service_item:hover {
    background: linear-gradient(#002867, #000001);
}

#main_services .gridbox .service_item:hover .label {
    filter: grayscale(0) brightness(1);
    transition: all 300ms;
}

#main_services .gridbox .service_item:hover .bg {
    filter: grayscale(0) brightness(1);
    transition: all 300ms;
}

/*---------------------------------------------------------
    MAIN ESPORTS
---------------------------------------------------------*/
#main_esports {
    margin-top:40px;
    display: block;
    min-width: 1400px;
    background: linear-gradient(#0e1520 0px, #070a0f 200px);
    text-align: center;
    overflow: hidden;
}

#main_esports .titlebox{
    display: block;
    margin:0 auto;
    min-width: 1400px;
    max-width: 2200px;
    height:200px;
    position: relative;
}

#main_esports .titlebox img {
    display: block;
    position: absolute;
    left:50%;
    top:40px;
    transform: translate(-50%);
}

#main_esports .slidebox {
    display: flex;
    margin:0 auto;
    min-width: 1400px;
    max-width: 2200px;
    padding-left:20px;
    padding-right:20px;
    overflow: hidden;
}

#main_esports .slidebox .slideitem {
    display: block;
    overflow: hidden;
    transition: all 500ms;
    opacity: 0;
    position: relative;
    aspect-ratio: 182/269;
    width:0px;
    cursor: pointer;
}

#main_esports .slidebox .slideitem.show {
    display: block;
    max-width: auto;
    transition: all 500ms;
    opacity: 1;
    width:100%;
}

#main_esports .slidebox .slideitem img {
    position: absolute;
    display: block;
}

#main_esports .slidebox .slideitem img.base {
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    width:70%;
}

#main_esports .slidebox .slideitem img.visual {
    transform: translate(-48.5%);
    left:50%;
    width:67%;
    bottom:28%;
    filter: grayscale(0.6) brightness(0.5);
    transition: all 300ms;
}

#main_esports .slidebox .slideitem img.label {
    transform: translate(-50%);
    left:50%;
    height:40%;
    bottom:12%;
    object-fit: scale-down;
    filter: grayscale(1) brightness(0.6);
    transition: all 300ms;
}

#main_esports .slidebox .slideitem:hover img.visual {
    filter: grayscale(0) brightness(1);
    transition: all 300ms;
}

#main_esports .slidebox .slideitem:hover img.label {
    filter: grayscale(0) brightness(1);
    transition: all 300ms;
}

/*---------------------------------------------------------
    MAIN CASINO
---------------------------------------------------------*/
#main_casino {
    display:block;
    min-width:1400px;
    margin:0px;
    position: relative;
}

#main_casino .titlebox {
    display: flex;
    justify-content: space-between;
    margin:0 auto;
    text-align: left;
    padding-left:20px;
    padding-right:20px;
    margin-top:40px;
    min-width: 1400px;
    max-width: 2200px;
    height:50px;
}

#main_casino .titlebox h3 {
    margin:0;
    padding:0;
    border:0;
    display: block;
    font-size:18px;
    color:#ffffff;
}

@keyframes main_casino_titlebox_h3_img {
    0% {
        filter: grayscale(0.6) brightness(0.8);
        transform: scale(1);
    }
    50% {
        filter: grayscale(0) brightness(1);
        transform: scale(1.1);
    }
    100% {
        filter: grayscale(0.6) brightness(0.8);
        transform: scale(1);
    }
}


#main_casino .titlebox h3 img {
    margin-left:5px;
    filter: brightness(0.5);
    animation: main_casino_titlebox_h3_img 0.8s infinite;
}


#main_casino .titlebox .btn_more {
    display: block;
    font-size:16px;
    line-height:30px;
    font-weight: 600;
    color:#ef7c00;
    height:30px;
    cursor: pointer;
}

#main_casino .titlebox .btn_more:hover {
    color:#ffffff;
    text-shadow: 
        0 0 5px #cfff5e,
        0 0 10px #ffb25e,
        0 0 20px #ef7c00;
    transition: all 300ms;
}

#main_casino .titlebox .btn_more span {
    color:#ef7c00;
    font-size:16px;
    font-weight: 900;
    line-height:30px;
    height:30px;
}

#main_casino .titlebox .btn_more:hover span{
    color:#ffffff;
    transition: all 300ms;
}

#main_casino .slidebox {
    display: flex;
    margin:0 auto;
    min-width: 1400px;
    max-width: 2200px;
    padding-left:20px;
    overflow: hidden;
}


#main_casino .slidebox .slideitem {
    display: block;
    overflow: hidden;
    transition: all 1000ms;
    opacity: 0;
    position: relative;
    aspect-ratio: 400/170;
    width:0px;
    cursor: pointer;
    overflow: hidden;
}

#main_casino .slidebox .slideitem.show {
    display: block;
    max-width: auto;
    transition: all 1000ms;
    opacity: 1;
    width:100%;
    margin-right:15px;
    border:2px solid transparent;
}

#main_casino .slidebox .slideitem:hover {
    border:2px solid #ef7c00;
}

#main_casino .slidebox .slideitem img.bg {
    position: absolute;
    left:0px;
    top:0px;
    bottom:0px;
    right:0px;
    display: block;
    width: 100%;
    filter:grayscale(0.6) brightness(0.6);
    transition: all 300ms;
}

#main_casino .slidebox .slideitem img.label {
    position: absolute;
    display: block;
    left:30px;
    top:50%;
    width:40%;
    transform: translate(0, -60%);
    filter:grayscale(1) brightness(0.8);
    transition: all 300ms;
}

#main_casino .slidebox .slideitem:hover img.bg {
    filter:grayscale(0) brightness(1);
    transition: all 300ms;
}

#main_casino .slidebox .slideitem:hover img.label {
    filter:grayscale(0) brightness(1);
    transition: all 300ms;
}



/*---------------------------------------------------------
    MAIN SLOT
---------------------------------------------------------*/
#main_slot {
    display:block;
    min-width:1400px;
    margin:0px;
    margin-bottom:40px;
    position: relative;
}

#main_slot .titlebox {
    display: flex;
    justify-content: space-between;
    margin:0 auto;
    text-align: left;
    padding-left:20px;
    padding-right:20px;
    margin-top:40px;
    min-width: 1400px;
    max-width: 2200px;
    height:50px;
}

#main_slot .titlebox h3 {
    margin:0;
    padding:0;
    border:0;
    display: block;
    font-size:18px;
    color:#ffffff;
}

@keyframes main_slot_titlebox_h3_img {
    0% {
        filter: grayscale(0.6) brightness(0.8);
        transform: scale(1);
    }
    50% {
        filter: grayscale(0) brightness(1);
        transform: scale(1.1);
    }
    100% {
        filter: grayscale(0.6) brightness(0.8);
        transform: scale(1);
    }
}


#main_slot .titlebox h3 img {
    margin-left:5px;
    filter: brightness(0.5);
    animation: main_slot_titlebox_h3_img 0.8s infinite;
}


#main_slot .titlebox .btn_more {
    display: block;
    font-size:16px;
    line-height:30px;
    font-weight: 600;
    color:#ef7c00;
    height:30px;
    cursor: pointer;
}

#main_slot .titlebox .btn_more:hover {
    color:#ffffff;
    text-shadow: 
        0 0 5px #cfff5e,
        0 0 10px #ffb25e,
        0 0 20px #ef7c00;
    transition: all 300ms;
}

#main_slot .titlebox .btn_more span {
    color:#ef7c00;
    font-size:16px;
    font-weight: 900;
    line-height:30px;
    height:30px;
}

#main_slot .titlebox .btn_more:hover span{
    color:#ffffff;
    transition: all 300ms;
}

#main_slot .slidebox {
    display: flex;
    margin:0 auto;
    min-width: 1400px;
    max-width: 2200px;
    padding-left:20px;
    overflow: hidden;
}


#main_slot .slidebox .slideitem {
    display: block;
    overflow: hidden;
    transition: all 1000ms;
    opacity: 0;
    position: relative;
    width:0px;
    height:168px;
    cursor: pointer;
    overflow: hidden;
}

#main_slot .slidebox .slideitem.show {
    display: block;
    max-width: auto;
    transition: all 1000ms;
    opacity: 1;
    width:100%;
    margin-right:15px;
    border:2px solid transparent;
}

#main_slot .slidebox .slideitem:hover {
    border:2px solid #ef7c00;
}

#main_slot .slidebox .slideitem .title {
    height:120px;
    background: #11141d;
    display: block;
    position: relative;
}

#main_slot .slidebox .slideitem .title img.bg {
    position: absolute;
    display: block;
    right:-20px;
    bottom:-2px;
    height:122px;
    filter:grayscale(0.6) brightness(0.4);
    transition: all 300ms;
}

#main_slot .slidebox .slideitem .title img.label {
    position: absolute;
    display: block;
    left:30px;
    top:50%;
    transform: translate(0,-50%);
    filter:grayscale(0.6) brightness(0.4);
}

#main_slot .slidebox .slideitem:hover .title img.bg {
    filter:grayscale(0) brightness(1);
    transition: all 300ms;
}

#main_slot .slidebox .slideitem:hover .title img.label {
    filter:grayscale(0) brightness(1);
    transition: all 300ms;
}


#main_slot .slidebox .slideitem .info {
    height:48px;
    display: flex;
    position: relative;
    background: #0d1930;
    transition: all 300ms;
}


#main_slot .slidebox .slideitem:hover .info {
    height:48px;
    display: flex;
    position: relative;
    background-color: #0d1930;
    stroke: #1d2f4b;
    background-image: url('/images/1bet1/main_livesports/list_item_bg.svg');
    transition: all 300ms;
}


#main_slot .slidebox .slideitem .info .name {
    display: block;
    width:50%;
    line-height: 48px;
    color:#c8c8c8;
    font-size:16px;
    font-weight:400;
    padding-left:30px;
    margin-right:10px;
    white-space: nowrap;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: all 300ms;
}

#main_slot .slidebox .slideitem:hover .info .name {
    text-shadow: 
        0 0 5px #517dce,
        0 0 10px #577ac2,
        0 0 20px rgb(194, 209, 235);
    color:#ffffff;
    transition: all 300ms;
}

#main_slot .slidebox .slideitem .info .credit {
    display: block;
    width:50%;
    line-height: 48px;
    color:#c8c8c8;
    font-size:16px;
    font-weight:400;
    padding-right:30px;
    margin-left:10px;
    white-space: nowrap;
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: all 300ms;
}


#main_slot .slidebox .slideitem:hover .info .credit {
    color:#ffffff;
    transition: all 300ms;
}
