@charset "utf-8";
:root {
	--txt-family:  "Microsoft Yahei", sans-serif，tahoma;
	--color-primary: white;
	--color-bg: rgba(0, 0, 0, 0.2);
    --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;}
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: var(--color-bg);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{
    background: url("../gridtemp3/imgs/bg.png") repeat,#002f45;
    color: white;
/* 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.7);
    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(../gridtemp3/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:var(--color-primary);
    font-weight: bold;
}
header > div.w1200 > img{height: 3rem; width: 3rem;display: none;width: 2rem; height: 2rem;margin-left:1rem;}

main{
    display: grid;    
}

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;
   
    
    min-height: 50rem;
}
main > div.content > div.mainblock{
    position: relative;    
}
section.newslist{
    display: grid;
    grid-template-columns: repeat(3,33.33%);
    padding: 1rem;
}
section.newslist > a{height: 20rem;position: relative;padding: .5rem;}
section.newslist > a > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
section.newslist > a > div{
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3rem 2rem;
    display: grid;
    grid-template-rows: 4fr 1fr;
}
section.newslist > a > div > h3{cursor: pointer;}
section.newslist > a > div:hover{
    background-color:  rgba(0, 0, 0, 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: 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);
	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;
    gap:1rem;
    color:var(--color-primary);
   
}
div.stickypcmenu > a{
    color:var(--color-primary);
    line-height: 5rem;    
    padding: 0 1rem;
    position: relative;
    margin-bottom: .2rem;
    font-weight: bold;
}

div.matchs{
    margin:0 1rem;
    background-color: var(--color-bg);
    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 ;
}
@media (max-width: 1200px) {
	
}
@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;
    } */
    main > div.content > div.rightslide{
        grid-row-start: 2;
        grid-row-end: 3;
    }
    section.newslist > a{
        height: 14rem;
    }
    
}
@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.newslist > a{height: 12rem;}
    section.newslist > a > div{padding: 1rem;}
    
}
@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.newslist {
        grid-template-columns: repeat(2, 50%);
    }
}