@charset "utf-8";
body,ul,li,h1,h3,h4,header,footer,dl,dd{margin:0;padding:0;}
:root{
--color:purple;
--color2:purple;
--color-gray:gray;
--fontcolor:white;
--black:black;
}

a{
color:var(--fontcolor);
text-decoration:none;
}
}
a:visited{
color:var(--fontcolor);
}

li{list-style:none;}
header{
margin:0 0 5px 0;
padding-left:5%;
background:var(--color);
color:var(--fontcolor);
height:auto;
--line-height:60px;
}
.logo{
display:inline-block;
width:300px;
}
header h1{padding:0 5px;font-size:40px;text-align:center;}
header .website{

letter-spacing:3px;
padding-left:5px;

text-align:center;
line-height:15px;
font-size:12px;

color:var(--fontcolor);
font-style:italic;
}

.banner{
display:inline-block;
color:white;
font-weight:bold;
width:700px;
font-size:20pt;
height:50px;
line-height:50px;
letter-spacing:10px;
text-align:center;
}

.menu{
padding:5px 5%;
height:30px;
line-height:30px;
background:var(--color);
}
.menu li{
display:inline-block;
font-size:14pt;
font-weight:bold;
text-align:center;
width:100px;
}

.menu li a, a:hover, a:visited{
color:var(--fontcolor);
}
/*------*/
.menu li{}
.menu li > ul{position: absolute;display:none;font-size:10pt;}
.menu li > ul li{display:block;background:var(--color);}

/*---menu button--*/
.menuButton{
display:none;
position:absolute;
top:15px;
right:10px;
}
.icon{
font-size:25pt;
margin-right:5px;
}

/*--menuMobile-*/
.menuMobile{
display:block;
/*position:absolute;
top:68px;
left:0px;
*/
padding-left:5px;
width:100%;
height:auto;
line-height:35px;
background:var(--color);

}


.menuMobile ul li{
padding-left:10px;
height:30px;
line-height:30px;
width:100%;
border-bottom:solid white 1px;
background:var(--color2);
}
/*list*/
article ul li a,a:visited{color:black;}

/*end list*/
/*article*/
article{
margin:5px 5%;
padding:0 5px;
background:#F0FFF0;
min-height:500px;
}
article a, article a:hover, article a:visited{
color:var(--black);
}
.position, .position a{
color:var(--color-gray);
font-size:12pt;
width:100%;
height:20px;
line-height:20px;
}

.title{
width:100%;
height:auto;
line-height:auto;
font-size:16pt;
text-align:center;

}
.click{
margin-top:10px;
color:var(--color-gray);
width:100%;
height:auto;
line-height:auto;
font-size:12pt;
text-align:center;

}

.content p{text-indent:2em;}


.previousNext{
        margin:0 auto;
    border-top:1px solid blue;
    text-align: left;
    font-size: 12pt;
    height: 30px;
    width: 100%;

}
.previousNext li{
display:inline;
    font-size: 12pt;
    width: 50%;
    height:30px;
    line-height: 30px;
    text-align: left;
color:var(--color-gray);
    white-space:nowrap; 
    text-overflow:ellipsis; 
    overflow: hidden; 

}

.previousNext li a{color:var(--color-gray);font-size:12pt;}

dl,dd a{color:var(--color-gray);font-size:12pt;}
.recommended{
border:1px dashed gray;
}
dt{border-bottom:1px dashed gray;font-size:12pt;}
dd a{color:var(--color-gray);font-size:12pt;}

/*end article*/
footer{
background:var(--color);
color:var(--fontcolor);
height:60px;
line-height:60px;
text-align:center;
}

/* 手机屏 当页面宽度小于750px*/
@media only screen and (max-width:750px){
.banner,.menu,.previousNext {display:none;}
.menuButton{
display:block;
}
.menuMobile li > ul{
display:none;
}

article{margin:0 5px;padding-left:5px;}

}//@media
/* pc端 适配 当页面宽度大于750px 小于1900px*/
@media screen and (min-width:750px) and (max-width:1900px){


}