.body-box {
    overflow: hidden;
}

.footer {
    margin: 0;
}

.bk-body1 {
    background-color: #d2ffff;
}

.bk-body2 {
    background-image: url("../images/max/bk1.jpg?v1");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.body-player {
    width: 100%;
}

.body-this {
    max-width: 1150px;
}

.max-screen {
    display: flex;
    position: fixed;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh; 
    background-color: #000;
    align-items: center;
    overflow: hidden;
    z-index: 2000;
    left: 0px;
    top: 0px;    
}
.max-screen.max-page{
    position: relative;
}
.max-screen .playerbox{
    width: 100%;
    max-width: 100vw;
    max-height: 100vh;  
    overflow: hidden;    
    display: flex;    
    justify-content: center;
    align-items: center;
}
.max-screen.void {
    display: contents;
}
.max-screen.void .playerbox{
    max-width: none;
    max-height: none;
}


.main-player {
    padding: 20px 0px 0px 0px;
}

.main-player .playerbox-holder {
    display: flex;
}

.main-player .slogan {
    background-image: url(../images/home_tamenu.jpg);
    background-size: 100% 100%;
    display: flex;
    width: 100%;
    color: #fff;
    font-size: 1.5rem;
    box-sizing: border-box;    
    flex-wrap: wrap;
    padding: 12px 20px;
}

.main-player .playerbox {
    display: flex;
    justify-content: center;
    background-color: #000;
    align-items: center;
    width: 100%;
}
.main-player .playerbox .player-loading-container{
    position: absolute;
    width: 0%;
    height: 0%;
}


.playerbox .container-live {
    display: flex;
    width: 100%;
    height: 100%;
}

.playerbox iframe{
    border: 0px; 
    margin: 0px; 
    padding: 0px; 
    overflow: hidden;
}

/* youtube n is youtube class */
.playerbox .container-live-max[class*="n"] iframe { 
    aspect-ratio: 16 / 9;
}
.playerbox .container-live-max.n3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: repeat(3, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.n3 .item1{
    grid-column: 1 / 4;
    grid-row: 1 / 4;
}
.playerbox.full .container-live-max.n3 .item1{
    max-height: calc(100vh);
}
.playerbox.full .container-live-max.n3 [class^="item"]:not(.item1) {
    max-height: calc(100vh / 3 );
}


.playerbox .container-live-max.n4 {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    grid-template-rows: repeat(4, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.n4 .item1{
    grid-column: 1 / 5;
    grid-row: 1 / 5;
}
.playerbox.full .container-live-max.n4 .item1{
    max-height: calc(100vh);
}
.playerbox.full .container-live-max.n4 [class^="item"]:not(.item1) {
    max-height: calc(100vh / 4 );
}



.playerbox .container-live-max.n5 {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    grid-template-rows: repeat(5, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.n5 .item1{
    grid-column: 1 / 6;
    grid-row: 1 / 6;
}
.playerbox.full .container-live-max.n5 .item1{
    max-height: calc(100vh);
}
.playerbox.full .container-live-max.n5 [class^="item"]:not(.item1) {
    max-height: calc(100vh / 5 );
}



.playerbox .container-live-max.n6 {
    display: grid;
    grid-template-columns: repeat(7, 1fr); 
    grid-template-rows: repeat(6, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.n6 .item1{
    grid-column: 1 / 7;
    grid-row: 1 / 7;
}
.playerbox.full .container-live-max.n6 .item1{
    max-height: calc(100vh);
}
.playerbox.full .container-live-max.n6 [class^="item"]:not(.item1) {
    max-height: calc(100vh / 6 );
}


.playerbox .container-live-max.n7 {
    display: grid;
    grid-template-columns: repeat(8, 1fr); 
    grid-template-rows: repeat(7, 1fr);     
    width: 100%;
}

.playerbox .container-live-max.n7 .item1 {
    grid-column: 1 / 8;
    grid-row: 1 / 8;
}
.playerbox.full .container-live-max.n7 .item1{
    max-height: calc(100vh);
}
.playerbox.full .container-live-max.n7 [class^="item"]:not(.item1) {
    max-height: calc(100vh / 7 );
}

.playerbox .container-live-max.n8 {
    display: grid;
    grid-template-columns: repeat(9, 1fr); 
    grid-template-rows: repeat(8, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.n8 .item1 {
    grid-column: 1 / 9;
    grid-row: 1 / 9;
}
.playerbox.full .container-live-max.n8 .item1{
    max-height: calc(100vh);
}
.playerbox.full .container-live-max.n8 [class^="item"]:not(.item1) {
    max-height: calc(100vh / 8 );
}

.playerbox .container-live-max.n9 {
    display: grid;
    grid-template-columns: repeat(10, 1fr); 
    grid-template-rows: repeat(9, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.n9 .item1 {
    grid-column: 1 / 10;
    grid-row: 1 / 10;
}
.playerbox.full .container-live-max.n9 .item1{
    max-height: calc(100vh);
}
.playerbox.full .container-live-max.n9 [class^="item"]:not(.item1) {
    max-height: calc(100vh / 9 );
}

.playerbox .container-live-max.n10 {
    display: grid;
    grid-template-columns: repeat(11, 1fr); 
    grid-template-rows: repeat(10, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.n10 .item1 {
    grid-column: 1 / 11;
    grid-row: 1 / 11;
}
.playerbox.full .container-live-max.n10 .item1{
    max-height: calc(100vh);
}
.playerbox.full .container-live-max.n10 [class^="item"]:not(.item1) {
    max-height: calc(100vh / 10 );
}

.playerbox .container-live-max.n12 {
    display: grid;
    grid-template-columns: repeat(8, 1fr); 
    grid-template-rows: repeat(6, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.n12 .item1{
    grid-column: 1 / 7;
    grid-row: 1 / 7;
}
.playerbox.full .container-live-max.n12 .item1{
    max-height: calc(100vh);
}
.playerbox.full .container-live-max.n12 [class^="item"]:not(.item1) {
    max-height: calc(100vh / 6);
}


.playerbox .container-live-max.n20 {
    display: grid;
    grid-template-columns: repeat(12, 1fr); 
    grid-template-rows: repeat(10, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.n20 .item1{
    grid-column: 1 / 11;
    grid-row: 1 / 11;
}
.playerbox.full .container-live-max.n20 .item1{
    max-height: calc(100vh);
}
.playerbox.full .container-live-max.n20 [class^="item"]:not(.item1) {
    max-height: calc(100vh / 10);
}


.playerbox .container-live-max.n30 {
    display: grid;
    grid-template-columns: repeat(13, 1fr); 
    grid-template-rows: repeat(10, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.n30 .item1{
    grid-column: 1 / 11;
    grid-row: 1 / 11;
}
.playerbox.full .container-live-max.n30 .item1{
    max-height: calc(100vh);
}
.playerbox.full .container-live-max.n30 [class^="item"]:not(.item1) {
    max-height: calc(100vh / 10);
}

.playerbox .container-live-max.n40 {
    display: grid;
    grid-template-columns: repeat(14, 1fr); 
    grid-template-rows: repeat(10, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.n40 .item1{
    grid-column: 1 / 11;
    grid-row: 1 / 11;
}
.playerbox.full .container-live-max.n40 .item1{
    max-height: calc(100vh);
}
.playerbox.full .container-live-max.n40 [class^="item"]:not(.item1) {
    max-height: calc(100vh / 10);
}

.playerbox .container-live-max.n50 {
    display: grid;
    grid-template-columns: repeat(15, 1fr); 
    grid-template-rows: repeat(10, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.n50 .item1{
    grid-column: 1 / 11;
    grid-row: 1 / 11;
}
.playerbox.full .container-live-max.n50 .item1{
    max-height: calc(100vh);
}
.playerbox.full .container-live-max.n50 [class^="item"]:not(.item1) {
    max-height: calc(100vh / 10);
}



/* site player ,s is class */
.playerbox{

}
.playerbox .container-live-max.s3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: repeat(1, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.s3 .item1{
    grid-column: 1 / 4;
    grid-row: 1 / 2;
}

.playerbox .container-live-max.s4 {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    grid-template-rows: repeat(1, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.s4 .item1{
    grid-column: 1 / 5;
    grid-row: 1 / 2;
}

.playerbox .container-live-max.s5 {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    grid-template-rows: repeat(1, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.s5 .item1{
    grid-column: 1 / 6;
    grid-row: 1 / 2;
}

.playerbox .container-live-max.s6 {
    display: grid;
    grid-template-columns: repeat(7, 1fr); 
    grid-template-rows: repeat(1, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.s6 .item1{
    grid-column: 1 / 7;
    grid-row: 1 / 2;
}

.playerbox .container-live-max.s7 {
    display: grid;
    grid-template-columns: repeat(8, 1fr); 
    grid-template-rows: repeat(1, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.s7 .item1{
    grid-column: 1 / 8;
    grid-row: 1 / 2;
}

.playerbox .container-live-max.s8 {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    grid-template-rows: repeat(1, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.s8 .item1{
    grid-column: 1 / 5;
    grid-row: 1 / 2;
}
.playerbox .container-live-max.s8 .item2{
    grid-column: 5 / 7;
    grid-row: 1 / 2;
}

.playerbox .container-live-max.s9 {
    display: grid;
    grid-template-columns: repeat(10, 1fr); 
    grid-template-rows: repeat(1, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.s9 .item1{
    grid-column: 1 / 10;
    grid-row: 1 / 2;
}
.playerbox .container-live-max.s9 .item2{
    grid-column: 10 / 11;
    grid-row: 1 / 2;
}


.playerbox .container-live-max.s10 {
    display: grid;
    grid-template-columns: repeat(7, 1fr); 
    grid-template-rows: repeat(1, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.s10 .item1{
    grid-column: 1 / 6;
    grid-row: 1 / 2;
}
.playerbox .container-live-max.s10 .item2{
    grid-column: 6 / 8;
    grid-row: 1 / 2;
}

.playerbox .container-live-max.s12 {
    display: grid;
    grid-template-columns: repeat(8, 1fr); 
    grid-template-rows: repeat(1, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.s12 .item1{
    grid-column: 1 / 7;
    grid-row: 1 / 2;
}
.playerbox .container-live-max.s12 .item2{
    grid-column: 7 / 9;
    grid-row: 1 / 2;
}

.playerbox .container-live-max.s20 {
    display: grid;
    grid-template-columns: repeat(12, 1fr); 
    grid-template-rows: repeat(1, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.s20 .item1{
    grid-column: 1 / 11;
    grid-row: 1 / 2;
}
.playerbox .container-live-max.s20 .item2{
    grid-column: 11 / 13;
    grid-row: 1 / 2;
}

.playerbox .container-live-max.s30 {
    display: grid;
    grid-template-columns: repeat(13, 1fr); 
    grid-template-rows: repeat(1, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.s30 .item1{
    grid-column: 1 / 11;
    grid-row: 1 / 2;
}
.playerbox .container-live-max.s30 .item2{
    grid-column: 11 / 14;
    grid-row: 1 / 2;
}

.playerbox .container-live-max.s40 {
    display: grid;
    grid-template-columns: repeat(14, 1fr); 
    grid-template-rows: repeat(1, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.s40 .item1{
    grid-column: 1 / 11;
    grid-row: 1 / 2;
}
.playerbox .container-live-max.s40 .item2{
    grid-column: 11 / 15;
    grid-row: 1 / 2;
}

.playerbox .container-live-max.s50 {
    display: grid;
    grid-template-columns: repeat(15, 1fr); 
    grid-template-rows: repeat(1, 1fr);     
    width: 100%;
}
.playerbox .container-live-max.s50 .item1{
    grid-column: 1 / 11;
    grid-row: 1 / 2;
}
.playerbox .container-live-max.s50 .item2{
    grid-column: 11 / 16;
    grid-row: 1 / 2;
}



/* youtube max n */
.playerbox .container-maxn {
    width: 100%;
    align-items: center;
    display: flex;
    flex-wrap: wrap;    
}
.playerbox .container-maxn.n1 .max{
    width: 100%;
}

.playerbox .container-maxn.n2 .max,
.playerbox .container-maxn.n4 .max{
    width: 50%;
}

.playerbox .container-maxn.n3 .max,
.playerbox .container-maxn.n6 .max,
.playerbox .container-maxn.n9 .max{
    width: calc(100% / 3);
}
.playerbox .container-maxn.n8 .max,
.playerbox .container-maxn.n12 .max,
.playerbox .container-maxn.n16 .max{
    width: 25%;
}
.playerbox .container-maxn.n10 .max,
.playerbox .container-maxn.n20 .max,
.playerbox .container-maxn.n25 .max{
    width: 20%;
}
.playerbox .container-maxn.n36 .max{
    width: calc(100% / 6);
}
.playerbox .container-maxn.n49 .max{
    width: calc(100% / 7);
}

.playerbox .container-maxn.site .max {
    width: 100%;    
}


.main-player .play-list {
    background-color: #fff;
    width: 300px;
    padding: 10px 10px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.main-player .play-list .title-type {
    padding: 0px 0px 5px 0px;
    border-bottom: 3px solid #00aaff;    
    display: flex;
}

.main-player .play-list .title-type span {
    font-size: 1rem;
    font-weight: bold;
    flex: 1;
}

.main-player .play-list .full-screen {
    font-size: 1.4rem;
    font-weight: bold;
    color: #00aaff;
    cursor: pointer;
    margin-left: 15px;
}

.main-player .play-list .full-screen:hover {
    color: #000;
}



.main-player .play-list .list-box {
    display: flex;
    border-bottom: 1px solid #ddd;
    padding: 10px 0px;
    flex-wrap: wrap;
    color:#000;
    font-size: 0.9rem;
} 
.main-player .play-list .list-box:last-child {
    border-bottom: none;
} 

.main-player .play-list .list-box .title {    
    display: flex;    
    flex-shrink: 0;
    flex-grow: 1;
    max-width: 100%;
    align-items: center;
    cursor: pointer;
}
@media (hover: hover) {
    .main-player .play-list .list-box .title:hover { 
        color:#00aaff;
    }
}
.main-player .play-list .list-box .title.multiple{
    align-items: flex-start;

}
.main-player .play-list .list-box .title.multiple img{
    margin-top: 2px;
}
.main-player .play-list .list-box .title img {
    height: 25px;
    margin-right: 5px;
}

.main-player .play-list .list-box .title .subtitle {
    width: 100%;
    display: block;
    color:#999999;
    font-weight: normal;
    line-height: 1.3;
}
.main-player .play-list .list-box .btns{
    flex:1;
    display: flex;
    justify-content: right;
    margin-top: 5px;
}

.main-player .play-list .list-box .btn {
    display: flex;
    align-items: center;
    background-color: #eee;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 5px;
    white-space: nowrap;
}
.main-player .play-list .list-box .btn:hover {
    background-color: #ddd;
}
.main-player .play-list .list-box .btn .ico::before {
    font-size: 0.9rem;
    margin-left: 5px;
    color:#666;
}
.main-player .play-list .list-box .new {
    font-weight: bold;
    color: #f04714;
}
.main-player .play-list .list-box.current{
    background-color: #e7f5ff;
    border-bottom: 1px solid #9fcae9;
}

.main-player .play-list .list-box.current .btn-menu{
    background-color: #00aaff;
    color:#fff;
}
.main-player .play-list .list-box.current .btn-menu .ico::before{
    color:#fff;
}


.main-player .play-list .system-btns {
    display: flex;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    background-color: #eee;
    margin-bottom: 10px;
    overflow: hidden;
    justify-content: space-around;
}

.main-player .play-list .system-btns button {
    padding: 7px 0px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    flex-grow: 1;
    flex-basis: auto;
}

.main-player .play-list .system-btns button:hover {
    background-color: #ddd;
}

.main-player .play-list .system-btns .current:hover,
.main-player .play-list .system-btns .current {
    background-color: #00aaff;
    color: #fff;
}



.control-container-normal {    
    display: flex;
    justify-content: center;
    padding-top: 10px;
    min-height: 40px;    
    align-items: flex-start;
}
.control-container-normal-max-screen {
    position: absolute;
    left: 0px;
    bottom: 0px;
    display: flex;
    justify-content: center;
    width: 100%;
}
.control-container-normal .control-bar{
    position: static;
    overflow: hidden;
}

.control-container-normal .control-bar .container{ 
    background-color: rgba(70, 70, 70, 0.5);
    border-radius: 50px;
    width: auto;    
}

.control-bar{
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    left: 0px;
    bottom: 0px;   
    pointer-events: none;
    z-index: 100;
}

.control-bar .container{      
    backdrop-filter: saturate(180%) blur(10px); 
    background-color: rgba(70, 70, 70, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.4);    
    border-radius: 50px;
    padding: 5px 15px;
    font-size: 1.2rem;
    display: inline-flex;
    justify-content: center;            
    margin-bottom: 10px;       
    pointer-events: auto;
}
.control-container-normal .control-bar .container{ 
    margin-bottom: 0px;
    padding: 0px 10px;
}

.control-bar.max .container{       
    animation: show-control 0.5s linear;  
}

.control-bar.min .container{       
    animation: hide-control 0.5s linear;  
    height: 1px;
    overflow: hidden;
    padding: 0px;
    margin-bottom: -2px; 
    width: 100%;
    opacity: 0;    
}

.control-container-normal .control-bar.min .container{
    animation: hide-control-fade 0.5s linear;   
    opacity: 0;  
    width: auto;
    height: auto;
    margin-bottom: 0px; 
    padding: 0px 15px;
}
.control-container-normal .control-bar.max .container{
    animation: show-control-fade 0.5s linear;    
}

@keyframes hide-control-fade {
	0% {      
        opacity: 1;   
	}    
	100% {        
        opacity: 0;   
	}
}
 
@keyframes show-control-fade {
	0% {      
        opacity: 0;   
	}    
	100% {        
        opacity: 1;   
	}
}
 
@keyframes hide-control {
	0% {      
        margin-bottom: 10px;  
        width: auto;
        height: auto;
        padding: 5px 15px;
        opacity: 1;   
	}    
	100% {        
        margin-bottom: -60px;   
        width: auto;
        height: auto; 
        padding: 5px 15px;
        opacity: 1;   
	}
}
@keyframes show-control {
	0% {
        border-radius: 0px;
        width: auto;
        height: auto;
        margin-bottom: -60px;    
        opacity: 1;           
	}    
    100%{
        width: auto;
        height: auto;   
        margin-bottom: 10px;  
        opacity: 1;           
    }
}

.control-container-normal .control-bar .btn-min-control{
    display: none;
}
.control-bar .btn {
    font-size: 1.3rem;
    padding: 5px;
    margin-right: 10px;
    display: flex;
    color: #fff;
    cursor: pointer;
    overflow: hidden;    
    line-height: 1;
    align-items: center;
}
.control-bar .btn:last-child {
    margin-right: 0px;
}

.control-bar .btn span {
    font-size: 1rem;
    margin-left: 10px;
    font-family: 'font1-normal', 'Segoe UI', SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.control-bar .btn-max-control{
    display: none;    
}
.control-bar.min .btn-max-control{
    display: flex;
    position: absolute;
    top: -45px;
    padding: 30px 100px;    
    cursor: pointer;
    transition: all 0.2s;
    pointer-events: auto;
    margin-right: 0px;
}
.control-container-normal .control-bar.min .btn-max-control{  
    display: none;
}
.control-bar .btn.btn-max-control .ico{
    display: block;
    background-color: rgba(70, 70, 70, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);        
    padding: 0px 25px 10px 25px;    
    border-radius: 12px;    
    font-size: 0.9rem;
    transition: all 0.2s;
}
.control-bar.min .btn.btn-max-control .ico{
    animation: light-control 1s;
}
@keyframes light-control {
	0% {
        background-color: #00aaff;
        color:#fff;         
	}   
            
    100%{
        background-color: #00aaff;
        color:#fff;       
    }
}

.control-bar .ico-full-screen .full{
    display: block;
}
.control-bar .ico-full-screen .exit-full{
    display: none;
}
.control-bar .ico-exit-full-screen .full{
    display: none;
}
.control-bar .ico-exit-full-screen .exit-full{
    display: block;
}

@media (hover: hover) {
.control-bar.min:hover .btn-max-control .ico,
.control-bar.min .btn-max-control:hover .ico{
    background-color: #00aaff;
    color:#fff;
    scale: 1.5;
    transition: all 0.2s;
}    
.control-bar .btn:hover {
    color: rgba(255, 255, 255, 0.6);
}

}


.volume-container {
    width: 80px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider {
    --c: #fff;
    --g: 1px;
    --l: 3px;    
    width: 80px;
    height: 17px;
    /* needed for Firefox*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    cursor: pointer;
    overflow: hidden;    
}

.slider::-webkit-slider-thumb {
    height: 15px;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 0 0 0 8px inset var(--c);
    border-image: linear-gradient(90deg, var(--c) 50%, rgba(200,200,200,0.5) 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
    -webkit-appearance: none;
    appearance: none;
}

.slider::-moz-range-thumb {
    height: 15px;  
    background: none;
    border-radius: 50%;
    box-shadow: 0 0 0 8px inset var(--c);
    border-image: linear-gradient(90deg, var(--c) 50%, rgba(200,200,200,0.5) 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
    -moz-appearance: none;
    appearance: none;
}


.intro {
    font-size: 1.5rem;
    padding: 0px 0px 50px 0px;
}

.intro .name {
    text-align: right;
    color: #f79011;
}

.intro .name span {
    padding: 20px 0px 0px 0px;
    color: #069245;
}

.faqs {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding: 30px 0px 30px 0px;
    margin-bottom: 30px;
    font-size: 1.2rem;
}

.faqs .item {
    padding: 10px 0px;
    margin-bottom: 20px;
}

.faqs .title {
    font-weight: bold;
}

.faqs .text .ico-play::before {
    font-size: 0.8rem;
    padding-right: 5px;
}

.faqs .text .more {
    border: 1px solid #00aaff;
    padding: 2px 10px 3px 10px;
    border-radius: 20px;
    color: #00aaff;
    font-size: 1rem;
    line-height: 0;
}

.faqs .text .more:hover {
    background-color: #00aaff;
    color: #fff;
}

.gallery-max {
    padding-bottom: 100px;
}

.gallery-max .picnews1 .item .vbox {
    width: calc(20% - 16px);
    margin-bottom: 0px;
    border: none;
}

.gallery-max .picnews1 .item .vbox:nth-of-type(5n+5) {
    margin-right: 0px;
}

.float-menus .float-menu-maxn .btns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 0px;
    width: 180px;
    height: 150px;
    padding: 15px;
}

.float-menus .float-menu-maxn .btns button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 10px;
}

.float-menus .float-menu-maxn .btns button:hover {
    background-color: #00aaff;
    color: #fff;
}

.float-menus .float-menu-maxn .btns .current {
    background-color: #00aaff;
    color: #fff;
}


@media screen and (max-width: 970px) {

    .main-player {
        padding: 0px 0px 0px 0px;
    }

    .main-player .slogan {
        justify-content: center;
        text-align: center;
        font-size: 1.2rem;
        padding: 12px 15px;
        line-height: 1.4;
    }

    .main-player .playerbox-holder {
        display: block;
    }

    .main-player .play-list {
        width: 100%;
        padding: 20px 15px 20px 15px;
        background-color: transparent;
    }

    .main-player .play-list .title-type {
        text-align: center;
        border-bottom: none;
        position: relative;
    }
    .main-player .play-list .title-type span {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    .main-player .play-list .full-screen {
        display: none;
    }
    .main-player .play-list .list-box {
        font-size: 1.1rem;
        border-bottom: 1px solid #59dad5;
    } 
    .main-player .play-list .list-box.current {
        background-color: #fff;
        border-bottom: 1px solid #2fa39f;
    } 
    .main-player .play-list .system-btns {
        border-radius: 20px;
    }    
    .control-bar .container{      
        padding: 5px 15px;
    }    

    .control-bar .btn span{
        font-size: 1rem;
    }

    .control-bar .volume-container {
        display: none;
    }

    .control-bar .container{  
        border-left:none;
        border-right:none;
        border-bottom:none;
        width: 100%;
        box-sizing: border-box;
        border-radius: 0px;
        margin-bottom: 0px; 
    }
    .intro {
        font-size: 1.2rem;
        padding: 20px 15px 50px 15px;
    }

    .faqs {
        padding: 30px 0px 30px 0px;
        margin: 0px 15px 0px 15px;
        border-bottom: none;
    }

    .gallery-max {
        padding: 0px 15px 50px 15px;
        background-color: #fff;
    }

    .gallery-max .picnews1 {
        height: 520px;
        overflow: hidden;
    }

    .gallery-max .picnews1 .item .vbox {
        display: block;
        width: auto;
        margin: 0px;
        padding: 15px 0px 15px 0px;
        justify-content: space-between;
        border: none;
        border-bottom: 1px solid #dddddd;
        background-color: #ffffff;
        box-sizing: border-box;
    }

    .float-menus .float-menu-maxn .btns {
        width: auto;
    }


    @keyframes hide-control {
        0% {      
            margin-bottom: 0px;  
            width: 100%;
            height: auto;
            padding: 5px 15px;
            opacity: 1;
        }    
        100% {        
            margin-bottom: -60px; 
            width: 100%;  
            height: auto; 
            padding: 5px 15px;
            opacity: 1;
        }
    }
    @keyframes show-control {
        0% {
            border-radius: 0px;
            width: 100%;
            height: auto;
            margin-bottom: -60px;   
            opacity: 1;         
        }    
        100%{
            width: 100%;
            height: auto;   
            margin-bottom: 0px;    
            opacity: 1;      
        }
    }
}

@media screen and (max-width: 640px) {
    .bk-body2 {
        background-size: auto 1000px;
    }
}

@media screen and (min-width: 970px) {

}
.lang-ar .main-player .play-list .list-box .btns,
.lang-fa .main-player .play-list .list-box .btns,
.lang-ur .main-player .play-list .list-box .btns {
    justify-content: left;
}
.lang-ar .main-player .play-list .list-box .title img,
.lang-fa .main-player .play-list .list-box .title img,
.lang-ur .main-player .play-list .list-box .title img {    
    margin-left: 5px;
    margin-right: 0px;
}


.lang-ar .main-player .play-list .list-box .btn,
.lang-fa .main-player .play-list .list-box .btn,
.lang-ur .main-player .play-list .list-box .btn {
    margin-left: 0px;
    margin-right: 5px;
}

.lang-ar .main-player .play-list .list-box .btn .ico::before,   
.lang-fa .main-player .play-list .list-box .btn .ico::before,   
.lang-ur .main-player .play-list .list-box .btn .ico::before {   
    margin-left: 0px;
    margin-right: 5px;
}

.lang-ar .faqs .text .ico-play::before,
.lang-fa .faqs .text .ico-play::before,
.lang-ur .faqs .text .ico-play::before {
    padding-left: 5px;
    padding-right: 0px;
}


.lang-ur .list-box,
.lang-ar .list-box,
.lang-fa .list-box,
.lang-ur .faqs,
.lang-ar .faqs,
.lang-fa .faqs,
.lang-ur .main-player .slogan,
.lang-ar .main-player .slogan,
.lang-fa .main-player .slogan,
.lang-ur .intro,
.lang-ar .intro,
.lang-fa .intro {
    direction: rtl;
}