@charset "utf-8";
:root {
	--txt-family:  "Microsoft Yahei", sans-serif，tahoma;
	--color-primary: #000;
	--color-bg: white;
	--color-border: #f5f5f5;
    --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;
}

/*可选*/
html,body {width: 100%;height: 100%;font-size: 1rem;margin: 0 !important;font-family: var(--txt-family);}
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:#000;}
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)}


/* div.test{
	display: grid;
	grid-template-columns:  repeat(3,33.3%);
    grid-template-rows:  2fr 3fr 4fr;
	justify-content: center;
}
div.test > div:first-child{	
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 4;
	justify-self: center;
	align-self: center;
} */
/* 

justify-items   属性设置单元格内容的水平位置（左中右），
justify-content 属性是整个内容区域在容器里面的水平位置（左中右），

align-items 属性设置单元格内容的垂直位置（上中下）。
align-content 属性是整个内容区域的垂直位置（上中下）。

*/
html{background-color: #eee;}
header,main,footer{width: 1200px;margin:0 auto;}
header{
    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;
    border-bottom: 1px solid var(--color-border);   
    position: relative;
}
header > h1{margin-right:1rem;}
header > nav.mbmenulist {
    position: absolute;
    top:-100rem;
    left: 0;
    right: 0;
    width: 100%;
    padding: 1rem;
    transition: all .5s; 
    background-color: var(--color-bg);
    z-index: -1;
}
header > img.menuicon{
    transform: rotate(90deg);
}
header > nav.mbmenulist_active{top:0;z-index: 999;}

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

    background-color: var(--color-bg);
}

header > nav.mbmenulist > ul > li > a{
    overflow: hidden;
    padding: 0 .4rem;
    color:var(--color-primary);
    letter-spacing: 1rem;
    font-weight: bold;
}
header > img{height: 3rem; width: 3rem;display: none;width: 2rem; height: 2rem;margin-left:1rem;}

main{
    display: grid;
    gap:1rem;
}

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;
}
main > div.content > div.mainblock{
    position: relative;
}
main > div.content > div.rightslide{
}
section.titlenewsblock{
}
section{width: 100%;}
section.titlenewsblock > span{
    border-left: 3px solid red;
    padding-left: 1rem;
    font-size: var(--txt-big);     
}
section.titlenewsblock > div{

}
section.titlenewsblock > div > a.titlenews {
    line-height: 3rem;
    position: relative;
    padding-left: 1rem;
}
section.titlenewsblock > div > a.titlenews::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 20px;
    background-color: #ccc;
    position: absolute;
    left:0;
    top: 45%;
  
}

section.titlenewsblock > div.imgnews{
    display: grid;
    grid-template-columns: repeat(4,auto);
    gap:1rem;
    padding: 0 .4rem;
}

section.titlenewsblock > div.imgnews_lr{
    grid-template-columns: repeat(2,auto);
}
section.titlenewsblock > div.imgnews > a{
    display: grid;        
    gap: 1rem;
    font-size: var(--txt-normal);
    text-align: right;
}
section.titlenewsblock > div.imgnews > a > section > h2{
    margin:1rem 0;
}
section.titlenewsblock > div.imgnews > a > h3{
    font-weight: 400;
    margin:1rem;
}

section.titlenewsblock > div.imgnews > a{
    background-color: white;
    margin-bottom: 1rem;
    border-radius: 1rem;    
}

section.titlenewsblock > div.big4 > a:first-child{
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
    
}
section.titlenewsblock > div.big4 > a:first-child > img{
    width: 100%;
    height: 100%;
    max-height: 26rem;
}
section.titlenewsblock > div.big4 > a:first-child > h3{
    line-height: 1.5rem;
}

section.titlenewsblock > div.imgnews > a > img{
    width: 100%;
    height: 10rem;
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
    object-fit: cover;
}

section.titlenewsblock > div.imgnews_lr > a{
    grid-template-columns: 6fr 4fr;
    justify-items:stretch;
    justify-content: end;
    height: 8rem;
    overflow: hidden;    
}
section.titlenewsblock > div.imgnews_lr > a > img{
    height: 8rem;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-top-left-radius: 0;

}
 div.location{
    display: grid;
    grid-template-columns: minmax(10%,60%) auto auto auto auto auto ;
    justify-items: end;
    padding: 1rem;
}
footer{text-align: center;padding: 1rem;}
div.pagelist{
    display: grid;
    grid-template-columns: repeat(auto-fill,10%);
    margin:0 auto;
    width: 80%;
    justify-items: center;
}
div.pagelist > a {
    background-color: white;
    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: #eee;
    border-radius: var(--border-radius);
    padding: .5rem 1rem;
    max-width:90%;
}
section.article{
	text-align: right;
	background-color: white;
	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.stickypcmenu{
    display: flex;
    justify-content: end;
    gap:1rem;
    background-color: #1d1d1d;
}
div.stickypcmenu > a{
    color:#fff;
    line-height: 4rem;    
    padding: 0 1rem;
    position: relative;
    margin-bottom: .2rem;;
}
div.stickypcmenu > a:last-child::after{
    border-bottom: .3rem solid #ffda47;
    content: "";
    color: yellow;
    position: absolute;
    left: 25%;
    width: 50%;
    bottom: 0;
}
div.matchs > section.matchblock{
    display: grid;
    grid-template-columns: 8fr 2fr;  
    padding: .4rem;  
    background-color: white;
    border-bottom: 1px solid #eee;
    margin:1rem auto;
}
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 ;
}
@media (max-width: 1200px) {
	header,main,footer{width: 100% ;} 
}
@media (max-width: 1024px) {
    /* main > div.content > div.rightslide{ display: none;} */
    main > div.content{
        grid-template-columns:auto;    
    }
    section.titlenewsblock > div.big4 > a:first-child{
        grid-column-start:auto;
        grid-column-end: auto;
        grid-row-start: auto;
        grid-row-end: auto;
    }
   
}
@media (max-width: 768px) {
    #ballnew{margin-top:5rem;margin-bottom:-2rem;}
	header{height: 3.5rem; grid-template-columns:  auto 1fr; }
    header > img{display: block;}
    main > div.leftslide{display: none;}
    main{grid-template-columns: auto;}
    header{position: fixed;top: 0;z-index: 666;background-color: white;}
    main > div.content > div.mainblock{margin-top:4.5rem;}
    section.titlenewsblock > div.imgnews > a > img{height: 8rem;}
    section.article>div img{max-width: 100%;}
    div.stickypcmenu{display: none;}
    section.titlenewsblock > div.imgnews{grid-template-columns: repeat(3,minmax(30%,33%));}
    section.titlenewsblock > div.imgnews_lr{grid-template-columns: repeat(2,auto);}
}
@media (max-width: 576px){
    section.titlenewsblock > div.imgnews > a > img{height: 6rem;}
    section.titlenewsblock > div.imgnews{grid-template-columns: repeat(2,minmax(46%,50%));}
    section.titlenewsblock > div.imgnews_lr{grid-template-columns: auto;}  
    section.titlenewsblock > div.imgnews_lr > a > img{height: 100%;}  
    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;
        background-color: #eee;
    }
}