@charset "utf-8";
:root {
	--txt-family:  "Microsoft Yahei", sans-serif，tahoma;
	--color-primary: white;
	--color-bg:black;
    --txt-little:.75rem;
    --txt-normal:1rem;
    --txt-big:1.25rem;
    --border-radius:.4rem;

	font-size:16px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
	cursor: default;
	font-family: var(--txt-family);
	border-spacing: 0;
	font-style: normal;
}
header,main,footer{width: 100% ;}
/*可选*/
html,body {width: 100%;height: 100%;font-size: 1rem;margin: 0 !important;font-family: var(--txt-family);text-align: right;background-color: #333;}
var,area,map,bdo,dfn,font,ins,sup,time,tt,small{display:none;}
/*行内块元素*/
input,button,img {
	border: 0 none;
	outline-style: none;
	max-width: 100%;
	max-height: 100%;
	display: block;
	object-fit: cover;
}
/* 使用伪元素清除浮动 */
.clearfix::before, .clearfix::after {
	content: "";
	height: 0;
	line-height: 0;
	display: block;
	visibility: none;
	clear: both;
}

.clearfix {clear: both;}
span,a {display: block;text-decoration: none;color:var(--color-primary);}
a:hover {text-decoration: none;cursor: pointer;}
.bshadow {box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px 0px;}
.nowrap {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: right;}
.nowrap2 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;display: -moz-box;-moz-box-orient: vertical;word-wrap: break-word;word-break: break-all;white-space: normal;max-height: 3rem;text-align: right;}
.emp {border: none !important;height: 0 !important;padding: 0 !important;margin: 0 !important;}
.hide {display: none !important;}
.bd {border: 1px solid red}
.brds {border-radius: var(--border-radius)}
::placeholder {color: var(--color-bg)}
::-webkit-scrollbar {display: none;}
.sticky {position: sticky;top: 0;z-index: 666;}
div.mask {position: fixed;top: 0;bottom: 0;z-index: 2;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.2);display: none;transition: display .2s, opacity 1.2s;}
div.mask_active {display: block;}
.ltxt{font-size: var(--txt-little);}
.btxt{font-size:var(--txt-big)}

h1{font-size:var(--txt-big)}
h2,h3{font-size:var(--txt-normal)}



html{
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}
/* header,main,footer{width: 1200px;margin:0 auto;} */
header{display: none;background-color: var(--color-bg);}
.w1200{
    width: 100%;
    margin:0 auto;
    max-width: 1200px;
}
header > div.w1200{
    display: grid;
    /* grid-template-columns:  auto 1fr; */
    grid-template-columns:  auto;
    grid-template-rows:  2fr ;
    justify-items: end;
    justify-content:end ;
    align-items: center;
    gap:1rem;
    height: 4rem;
    position: relative;
}
header > div.w1200 > h1{margin-right:1rem;}
header > div.w1200 > nav.mbmenulist {
    position: absolute;
    top:-100rem;
    left: 0;
    right: 0;
    width: 100%;
    padding: 1rem;
    transition: all .5s; 
    background-color: rgba(0, 0, 0, 0.8);
    z-index: -1;
}
header > div.w1200 > img.menuicon{
    transform: rotate(90deg);
}
header > div.w1200 > nav.mbmenulist_active{top:0;z-index: 999;}

header > div.w1200 > nav.mbmenulist > button{
    width: 2rem;
    line-height: 3rem;
    background: url(../blackbg/imgs/arrow-left.svg) no-repeat left center;
    background-size: 2rem 2rem;
    height: 2rem;    
    transform: rotate(270deg);
}
header > div.w1200 > nav.mbmenulist > ul{
    display: grid;
    width: 100%;   
    overflow: scroll;
    gap: 0;
}
header > div.w1200 > nav.mbmenulist > ul > li{
    line-height: 3rem;
    text-align: center;

}

header > div.w1200 > nav.mbmenulist > ul > li > a{
    overflow: hidden;
    padding: 0 .4rem;
    color:white;
    font-weight: bold;
}
header > div.w1200 > img{height: 3rem; width: 3rem;display: none;width: 2rem; height: 2rem;margin-left:1rem;}

main{
    display: grid;    
    background: url(../blackbg/imgs/bg.png) repeat top center;
    background-size: cover;
    background-size: 100% 30rem;
}

main > div.leftslide > ul.leftmenu{
    text-align: center;
    letter-spacing: .4rem;
    font-size:var(--txt-big);
    line-height: 3rem;
}
main > div.leftslide > ul.leftmenu>li>a{
    color:var(--color-primary);
}
main > div.leftslide > ul.leftmenu>li:hover{
    font-weight: bold;
}
main > div.content{
    display: grid;
    grid-template-columns:  1fr 3fr;
    min-height: 50rem;
    gap:1rem;
    padding-bottom: 1rem;;
}
main > div.content2{
    /* grid-template-columns: 3fr 5fr; */
    gap:1rem;
}
div.rightslide > section.txtnews{
    grid-template-columns: 1fr;
}


main > div.content > div.mainblock{
    position: relative;    
    padding-bottom: 1rem;
}

 div.location{
    display: grid;
    grid-template-columns: minmax(10%,60%) auto auto auto auto auto ;
    justify-items: end;
    padding: 1rem;
    background-color: var(--color-bg);
}
footer{text-align: center;padding: 1rem;background-color: var(--color-bg);color: var(--color-primary);}
div.pagelist{
    display: grid;
    grid-template-columns: repeat(auto-fill,10%);
    margin:0 auto;
    width: 80%;
    justify-items: center;
}
div.pagelist > a {
    background-color: var(--color-bg);
    border-radius: var(--border-radius);
    padding: .5rem 1rem;   
    margin-top:1rem; 
}
div.updownpage{
    display: grid;
    grid-template-columns: repeat(2,50%);
    justify-items: center;
    margin:2rem auto;
}
div.updownpage > a{
    background-color: var(--color-bg);
    border-radius: var(--border-radius);
    padding: .5rem 1rem;
    max-width:90%;
}
section.article{
	text-align: right;
	background-color: var(--color-bg);
    color: var(--color-primary);
	width: 100%;
    padding: 1rem;
    word-break: break-all;
}
section.article>h1{
	margin:1rem auto;	
}
section.article>span{
	line-height: 3rem;
	color:#888;
	border-bottom: 2px dashed #eee;
	font-size: var(--txt-size-little);
}
section.article>div{
	margin:1rem;
	text-align:right;
}
section.article>div img{
	max-width:50%;	
}

section.article>div > p{
	margin:.8rem 0;
	line-height:1.8rem;
    display: grid;
    justify-items: end;
    word-break: break-all;
}

section.pagelist > a{
    background-color: #eee;
    padding: .5rem 1rem;
    border-radius: var(--border-radius);
}
div.topnav{ background-color: var(--color-bg)}
div.stickypcmenu{
    display: flex;
    justify-content: end;
    color:var(--color-primary);
   
}
div.stickypcmenu > a{
    color:var(--color-primary);
    line-height: 4rem;    
    padding: 0 1rem;
    position: relative;
    margin-bottom: .2rem;
    font-weight: bold;
}


div.matchs{
    border-radius: .4rem;
    margin-top:1rem;
}

div.matchs > section.matchblock{
    display: grid;
    grid-template-columns: 8fr 2fr;  
    padding: .4rem;  
    background-color: var(--color-bg);
    margin-bottom: 1rem;
}
div.matchs > section.matchblock:last-child{
    border: none;
}
div.matchs > section.matchblock > div.right{
    display: grid;
    justify-items: end;
    gap:.6rem;
}
div.matchs > section.matchblock > div.left{
    display: grid;
    grid-template-columns: 4fr 1fr 4fr;
    justify-items: center;
    align-items: center;
}
div.matchs > section.matchblock > div.left > div{
    width: 100%;
    text-align: center;
    display: grid;
    justify-items: center;
    align-items: center;
    
}
div.matchs > section.matchblock > div.left > div > img{width: 2rem; height: 2rem;}
div.matchs > section.matchblock > div.left > div:first-child{
    text-align: right;
    grid-template-columns: 3fr 1fr; 
}
div.matchs > section.matchblock > div.left > div > span{
    width: 100%;
}
div.matchs > section.matchblock > div.left > div:nth-child(2){
    display: grid;
    gap:.6rem;
    justify-items: center;
    align-items: center;
}
div.matchs > section.matchblock > div.left > div:nth-child(2) > div{
    display: grid;
    grid-template-columns: 1fr 1fr;
  
}
div.matchs > section.matchblock > div.left > div:nth-child(2) > div > span{
    width: 2rem;
    font-weight: bold;
}
div.matchs > section.matchblock > div.left > div:nth-child(2) > div > span:first-child{
    border-right: 2px solid #eee;
}
div.matchs > section.matchblock > div.left > div:last-child{
    text-align: left;
    grid-template-columns: 1fr 3fr ;
}

section.slidenews{
   margin:1rem 1rem auto 1rem;
   display: grid;
   gap: 1rem;
}

section.slidenews > a > h3{
    margin-top:.6rem;
}




section.txtnews{
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: space-around;
    background-color: var(--color-bg);
    margin:.5rem auto;
    justify-items: end;
}
section.txtnews > a{
    padding: 1rem;
    display: grid;
    grid-template-columns:  10rem auto;
    gap:1rem;
    align-items: center;
    width: 100%;
}
section.txtnews > a > img{
    width: 10rem;    
    height: 8rem;
    border-radius: var(--border-radius);
}
div.rightslide > section.txtnews > a {
    grid-template-columns: auto;
}
div.rightslide > section.txtnews > a > img{height: 6rem;}
section.txtnews > a > section{
    display: grid;
    gap:1rem;
    justify-content: end;
    justify-items: end;
    width: 100%;
    height: 100%;
}
section.txtnews > a > section > p,section.txtnews > a > section > span{line-height: 1.5rem;}

section.txtnews > a > section > span{font-size: var(--txt-little);}

section.tbnews{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap:1rem;
    background-color: var(--color-bg);
    padding: 1rem;
    margin:1rem auto;
}
section.tbnews > a > img{
    height: 12rem;
    width: 100%;
    object-fit: cover;
}
section.tbnews > a > h3{
    margin:1rem auto
}
section.tbnews > a > span{
    font-size:var(--txt-little);
}

@media (max-width: 1200px) {
	
}
@media (max-width: 1024px) {
    main > div.content{
        grid-template-columns:auto;    
    }
 
    main > div.content > div.rightslide{
        grid-row-start: 2;
        grid-row-end: 3;
    }
    
    section.slidenews{
        margin:0 1rem;        
        grid-template-columns: repeat(3,minmax(26%,32%));
     }
     section.slidenews > a > img{
        width: 100%;
        height: 14rem;
        object-fit: cover;
     }
     section.slidenews{margin-top:1rem;}    
     div.rightslide > section.txtnews{
        grid-template-columns: repeat(2,1fr);
    }
}
@media (max-width: 768px) {
    #ballnew{margin-top:5rem;margin-bottom:-2rem;}
    header{display: grid;}
	header > div.w1200{height: 3.5rem; grid-template-columns:  auto 1fr; }
    header > div.w1200 > img{display: block;}
    main > div.leftslide{display: none;}
    main{grid-template-columns: auto;}
    header{position: fixed;top: 0;z-index: 666;}
    main > div.content > div.mainblock{margin-top:4.5rem;}
    section.article>div img{max-width: 100%;}
    div.topnav{display: none;}
   
    section.slidenews > a > img{height: 12rem;}
    section.txtnews{
        grid-template-columns: 100%;       
    }
    div.rightslide > section.txtnews{
        grid-template-columns: auto;
        justify-items: end;
    }
    
section.tbnews{
    grid-template-columns: repeat(2,1fr);
}

}
@media (max-width: 576px){
    div.matchs > section.matchblock{grid-template-columns: auto;}
    div.matchs > section.matchblock > div.right{
        grid-template-columns: repeat(3,3rem);
    }
    div.matchs > section.matchblock > div.left{
        grid-template-columns: auto ;        
    }
    div.matchs > section.matchblock > div.left>div:nth-child(1){
        grid-row-start: 2;
        /* grid-row-end: 3; */
        grid-column-start: 3;
        grid-column-end: 4;
        margin-top: 1rem;
    }
    div.matchs > section.matchblock > div.left>div:nth-child(2){
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 4;
        display: grid;
        grid-template-columns: repeat(3,3rem);
    }
    div.matchs > section.matchblock > div.left>div:nth-child(2) > div{
        display: grid;
        grid-template-columns: 1fr;
    }
    div.matchs > section.matchblock > div.left > div:nth-child(2) > div > span{
        padding: .5rem 0;
    }
    div.matchs > section.matchblock > div.left > div:nth-child(2) > div > span:first-child{
        border-right: none;
        border-bottom: 2px solid #eee;
    }
    div.matchs > section.matchblock > div.left>div:nth-child(3){
        grid-column-start: 3;
        grid-column-end: 4;  
        grid-template-columns: 3fr 1fr;

    }    
    div.matchs > section.matchblock > div.left>div:nth-child(3) > img{
        grid-column-start: 2;
    }
    div.matchs > section.matchblock > div.left>div:nth-child(3) > span{
        grid-column-start: 1;
        grid-row-start: 1;
        text-align: right;
    }
    div.matchs > section.matchblock{
        border: none;
        margin-bottom: 1rem;
        border-radius: .8rem;
    }
    div.matchs{
        margin:1rem 0.4rem;
    }
   

    section.slidenews{
        grid-template-columns: auto;
    }
    section.tbnews > a > img{
        height: 8rem;
    }
}