@charset "utf-8";
/* CSS Document */

html {
	font-size: 60%;
        
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-rendering: optimizelegibility;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
}
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
	display: block;
}
audio, canvas, video {
	display: inline-block;
}
body, button, input, select, textarea {
	font: normal 1em/1.8 sans-serif, PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans;
}
button::-moz-focus-inner, input::-moz-focus-inner {
padding:0;
border:0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset, img {
	border: 0;
}
a {
	text-decoration: none;
}
a:link {
}
a:visited {
}
a:hover {
	text-decoration: none;
}

@font-face {
	font-family: 'fonts-diy1';
	src: url('../fonts/OPPO-OS.woff2') format('woff');
   }

@font-face {
	font-family: 'fonts-diy2';
	src: url('../fonts/OPPO-OS.woff2') format('woff');
   }

body{background: #D3D3D3;}
header{background: #fff;width:100%;padding: 20px 5px;}
.container{max-width:1180px;
display: flex;
    flex-wrap: wrap;
margin:0 auto;overflow: hidden;margin-bottom: 40px;}
header .logo {
    padding-left: 360px;
    font-size: 2em;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    height: 25px;
    display: flex;
    line-height: 25px;
}
.mr-10{
  margin-right: 10px;
}
.mt-16{
	margin-top: 16px;
}
.banner {
    background-color: white;
    margin-top: 20px;padding: 30px;border: 0px solid black;margin-bottom: 20px;
	border-radius: 15px;
}

.banner h2 {
    font-size: 1.5em;
    font-family: fonts-diy2;
}
.banner span {
    font-size: 18px;
    font-family: fonts-diy2;
}
.content{
    background-color: white;
    border-radius: 15px;
    padding: 0;
    margin-right: 16px;
    width: 70%;
 }

.content ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}	

.content li {
    font-family: fonts-diy2;
    font-size: 15px;
    list-style: none;
    font-weight: 600;
    padding: 10px 15px;
    border-top: 1px solid #ccc; /* 只添加顶部的边框 */
}


.content li:first-child{
    border-top: none;
}
.content li:last-child {

    border-bottom: none; 
}
.content li a {
    text-decoration: none;
    color: #000;
    width: 80%;
    display: inline-block;
}
.content li span {
    color: rgb;
    white-space: nowrap;
	text-align: right;
    display: inline-block;
    width: 20%;
}
.sidebar {
    width: 25%;
    
}
.sidebar img{ width:100%; height:auto;border-radius: 15px;}

footer {
    padding: 25px 5px;
    background: black;
	text-align:center;
	clear:both;
}
footer span {
    color: #F5F5F5;
}
footer a {
    color: #F5F5F5;
}
@media screen and (max-width: 1180px) {
header {
    padding: 20px 5px;padding: 10px;
	text-align:center
}
header .logo {
    padding-left: 0px;
    font-size: 1.5em;
	display: inline-flex;
}
/* .banner {
    margin-top: 20px;
    padding: 15px;
    border: 3px solid black;
    margin-bottom: 20px;
} */
.content {
    float: none;
    margin-right: 0px;
    padding-right: 0px;
    width: 100%;
}
.content h2 {
    font-size: 1.5em;
}
.sidebar {
    float: none;
    margin-left: 0px;
    width: 100%;
    position: relative;text-align: center;
}
}
@media screen and (max-width: 520px) {
.content li a {
    width: 70%;
}
.content li span {
    width: 30%;
}
}
@media screen and (max-width: 400px) {
.sidebar img{ width:100%; height:auto;}
.container {
    
    margin-left: 10px;
    margin-right: 10px;
}
}