main{
font-size: 14px;
}
main .navs {
display: grid;
grid-template-columns: 160px 810px 190px;
grid-template-rows: 400px 80px;
gap:20px;
place-content: center;
margin: 30px 0;
}
main .navs>*{
background-color: #fff;
border-radius: 20px;
}
main .navs .botton-left{
grid-column: span 2;
}
main .navs .slider img {
width: 100%;
border-radius:20px;
}
main .navs .left {
display: grid;
place-items: center;
padding: 20px 0;
}
main .navs .left a:hover {
color:red;
background-color: rgb(250,223,227);
}
main .navs .left a {
border-radius: 20px;
padding: 10px 20px;
}
main .navs .botton-left {
display: grid;
grid-template-columns: 100px 1fr;
}
main .navs .botton-left .desc {
display: grid;
place-items: center;
padding:16px;
}
main .navs .botton-left .detail img{
width: 100%;
grid-row: span 2;
}
main .navs .botton-left .detail {
display: flex;
place-items: center;
place-content: space-between;
}
main .navs .botton-left .detail li {
display: grid;
grid-template-columns: 36px 85px;
gap:0 10px;
place-items: center start;
}
main .navs .botton-left .detail li a {
font-size: 14px;
}
main .navs .botton-left .detail li a:hover {
color:red;
}
main .navs .botton-left .detail li span,
main .navs .botton-left .desc span {
font-size: 12px;
color:#999;
}
main .navs .right {
display: grid;
grid-template-rows: 140px 1fr;
}
main .navs .right .userinfo{
display: grid;
grid-template-columns: 70px 1fr;
grid-template-rows: 41px 40px 34px 1fr;
place-items: center start;
padding: 10px 15px;
}
main .navs .right .userinfo a:nth-of-type(1){
grid-row: span 2;
place-self: center;
}
main .navs .right .userinfo .img{
width: 40px;
height: 40px;
border-radius: 50%;
}
main .navs .right .userinfo a:nth-of-type(2){
font-size: 18px;
font-weight: bolder;
float: left;
margin-top: 10px;
}
main .navs .right .userinfo span{
height: 16px;
line-height: 16px;
overflow: hidden;
font-size: 12px;
color: #999999;
place-self: start;
}
main .navs .right .userinfo a:nth-of-type(2):hover{
color: red;
}
main .navs .right .userinfo .xuexi {
display: block;
width: 150px;
height: 34px;
color: #fff;
grid-column: span 2;
background-color: #e11717;
border-radius: 100px;
line-height: 34px;
text-align: center;
}
main .navs .right .userinfo .xuexi:hover{
background-color: #d80101;
}
main .navs .right .wdsq{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(7,1/7fr);
border-top-style:solid;
border-top-color: rgb(190, 190, 188);
border-top-width:thin;
padding: 10px 15px;
}
main .navs .right .wdsq marquee{
height: 2rem;
width: 110px;
font-size: 12px;
}
main .navs .right .wdsq .toutiao{
display:flex;
}
main .navs .right .wdsq span{
font-size: 14px;
font-family:”微软雅黑”;
font-weight:bolder;
padding-right: 1em;
color: rgb(104, 103, 103);
}
main .navs .right .wdsq .title a{
display: inline-block;
width: 31px;
height: 16px;
background: #ff583d;
border-radius: 2px;
font-size: 12px;
color: #ffffff;
line-height: 16px;
text-align: center;
}
main .navs .right .wdsq a:hover{
color: #f11717;
}
main .navs .right .wdsq .title a:hover{
color: #ffffff;
}
main .navs .bottom-rifht ul{
display: grid;
grid-template-columns: 95px 95px;
place-items: center;
}
main .navs .bottom-rifht ul li{
float: left;
width: 70px;
margin-top: 13px;
text-align: center;
}
main .navs .bottom-rifht ul li span{
font-size:30px;
color:#999999;
}
main .navs .bottom-rifht ul li h2{
font-size: 12px;
font-weight: bold;
height: 16px;
line-height: 16px;
overflow: hidden;
margin-top: 5px;
}
main .navs .bottom-rifht ul li h2:hover{
color: #e11717;
}
main .navs .bottom-rifht ul li fieldset{
display: grid;
grid-template-columns: 95px;
grid-template-rows: 95px,20px;
place-items: center;
position:absolute;
top:650px;
right:110px;
}
main .navs .bottom-rifht ul li fieldset img{
width: 95px;
}