main { overflow: hidden; zoom: 1 }

/*title*/
.title { justify-content: space-between; align-items: center; width: 100%; height: 60px; line-height: 60px; border-bottom: 1px solid #d8d8d8 }
.title h3 { display: inline-flex; align-items: center; position: relative; height: 100%; line-height: 50px; font-weight: 600; font-size: 18px; color: var(--color) }
.title h3::after { position: absolute; bottom: 0; content: ""; display: block; width: 100%; height: 3px; border-radius: 4px; background: var(--hover-color) }
.title h3 svg { color: var(--hover-color) }
.title h3 span { margin-left: 10px }
.title a { display: flex; align-items: center; font-size: 16px; color: #9e9e9e; transition: color .3s ease-in-out }
.title a:hover { color: var(--hover-color) }
.title a svg { margin-left: 3px }
.title-key { height: 60px; line-height: 60px }
.title-key h3 { display: flex; align-items: center; position: relative; height: 100%; line-height: 50px; font-weight: 600; font-size: 24px; color: var(--color) }
@media(max-width:768px) {
	.title h3 { font-size: 20px }
	.title h3::after { height: 3px }
}

/*position*/
.positionbox .position { }
.position { height: 80px; justify-content: flex-end; align-items: center; font-size: 14px; color: #888 }
.position svg { margin-right: 11px; font-size: 16px; color: var(--hover-color) }
.position i { border-left: 5px solid #b6b6b6; border-right: 0 solid transparent; border-top: 4px solid transparent; border-bottom: 4px solid transparent }
.position a { padding: 0 9px; color: rgba(0, 0, 0, .65) }
.position a:hover { color: var(--hover-color) }

.mainbox { padding: 0 0 66px }

/*sidebar*/
.sidebar { }
.sidenav { background: #f6f7f9 }
.sidenav-title { justify-content: center; align-items: center; width: 100%; height: 70px; padding: 0 24px; line-height: 70px; text-align: center; color: var(--white); background: var(--hover-color) }
.sidenav-title h2 { position: relative; height: 60px; line-height: 60px; font-weight: 600; font-size: 24px }
.sidenav-title h2::after { position: absolute; left: 0; bottom: 0; content: ""; display: block; width: 100%; height: 1px; background: var(--hover-color) }
.sidenav-title a { font-size: 14px; color: #888 }
.sidenav-title a:hover { color: var(--hover-color) }
.sidenav-title .sidenav-cross { display: none }

.sidenav ul { padding: 24px }
.sidenav ul li { margin-top: 15px }
.sidenav ul li:first-child { margin-top: 0 }
.sidenav ul li a { display: block; padding: 15px 0; position: relative; color: #333; font-weight: 400; font-size: 18px; transition: color .3s ease-in-out; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-bottom: 1px dashed #b9b9b9 }
.sidenav ul li:last-child a { border-bottom: none }
.sidenav ul li a svg { margin: 0 15px 0 22px }
.sidenav ul li a:hover, .sidenav ul li.active a { color: var(--hover-color); background: #d7e9f8; border-bottom: 1px dashed transparent }

/*content*/
.content { }
.listbox { padding: 10px 20px 30px; background: #f6f7f9 }

/*list*/
.list { margin-top: 25px }
.list li { display: flex; align-items: center; height: 60px; line-height: 60px; color: var(--color); border-bottom: 1px dashed #b9b9b9 }
.list li a { display: block; position: relative; padding-left: 25px; padding-right: 25px; color: var(--color); font-size: 16px; transition: color .3s ease-in-out; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.list li a:hover { color: var(--hover-color) }
.list li a::before { content: ""; display: block; position: absolute; top: 50%; left: 10px; width: 4px; height: 4px; transform: translateY(-50%); background: var(--color); border-radius: 100%; transition: color .3s ease-in-out }
.list li a:hover::before { background: var(--hover-color) }
.list li time { font-family: Arial; font-size: 14px }

/*article*/
.content { }
.article { position: relative; width: 100%; padding: 0 35px; background: #f6f7f9 }
.article-tit { padding-top: 30px; padding-bottom: 30px; border-bottom: 1px dashed #b9b9b9; text-align: center }
.article-tit h1 { padding: 20px 0; font-weight: 600; font-size: 30px; line-height: 46px; color: var(--color); word-wrap: break-word; word-break: break-all }
.article-tit .profile { font-size: 16px; color: var(--color); line-height: 24px }
.article-tit .profile span + span { margin-left: 24px }
.article-tit .profile span i { margin-right: 5px; font-style: normal }
.article-info { overflow: hidden; padding-top: 42px }
.article-info .info { padding-bottom: 50px; line-height: 1.8; font-size: 16px; border-bottom: 1px solid #f9f9f9 }
.article-info .info p { text-indent: 0; line-height: 32px; color: var(--color) }
.article-info .info img { max-width: 100%; height: auto; vertical-align: top }
.article-info .info a { color: var(--color) }
.article-info .info a:hover { text-decoration: underline }
.article-info .info strong, .article-info .info th { font-weight: bold }
.article-info video { width: 100%; max-width: 100% }
.fanye { justify-content: space-between; margin-bottom: 10px; padding: 44px 0; line-height: 32px; font-size: 16px; color: var(--color); border-top: 1px solid #f4f4f4 }
.fanye strong { color: var(--color); font-weight: normal }
.fanye a { color: var(--color) }
.fanye a:hover { color: var(--hover-color) }
.fanye-left, .fanye-right { flex: 0 0 48%; max-width: 48%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.fanye-right { text-align: right }

/*pages*/
.pagebar { margin-top: 33px; padding: 27px 0 }
.pagebar .pagination { display: flex; justify-content: center; border-radius: 6px; overflow: hidden }
.pagebar .pagination>li { min-width: 50px; height: 40px; line-height: 40px }
.pagebar .pagination>li>a, .pagebar .pagination>li>span { display: flex; align-items: center; justify-content: center; position: relative; height: 100%; padding: 0 14px; text-decoration: none; color: #666; background-color: #fff; border: 1px solid #dcdcdc; margin-left: -1px }
.pagebar .pagination>li:first-child>a, .pagebar .pagination>li:first-child>span { margin-left: 0; border-bottom-left-radius: 4px; border-top-left-radius: 4px }
.pagebar .pagination>li.page-first:first-child>a::before, .pagebar .pagination>li:first-child>span::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 15px; background: url(../images/chevron_left.svg) no-repeat }
.pagebar .pagination>li:last-child>a, .pagebar .pagination>li:last-child>span { border-bottom-right-radius: 4px; border-top-right-radius: 4px }
.pagebar .pagination>li.page-last:last-child>a::after, .pagebar .pagination>li:last-child>span::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 15px; background: url(../images/chevron_right.svg) no-repeat }
.pagebar .pagination>li>a:focus, .pagebar .pagination>li>a:hover, .pagebar .pagination>li>span:focus, .pagebar .pagination>li>span:hover { z-index: 2; color: var(--color); background-color: #eee; border-color: #dcdcdc }
.pagebar .pagination>.active>a, .pagebar .pagination>.active>a:focus, .pagebar .pagination>.active>a:hover, .pagebar .pagination>.active>span, .pagebar .pagination>.active>span:focus, .pagebar .pagination>.active>span:hover { z-index: 3; color: #fff; background-color: var(--hover-color); border-color: var(--hover-color); cursor: default }
.pageno { text-align: center; color: var(--text-color) }

/*grid*/
@media (max-width:1600px) { }
@media (max-width:1440px) { }
@media (max-width:1280px) { }
@media (max-width:1024px) {
	.sidebar{ flex: 0 0 30%; max-width: 30% }
	.content{ flex: 0 0 70%; max-width: 70% }

	/*article*/
	.article { padding: 0 24px }

	/*pages*/
	.pagebar { margin-top: 20px }
	.pagebar .pagination { justify-content: center }
	.pagebar .page-num { display: none }
}
@media (max-width:768px) {
	.sidebar, .content { flex: 0 0 100%; max-width: 100% }
	.sidenav-title { justify-content: space-between; height: 60px; line-height: 60px }
	.sidenav-title h2 { position: relative; height: 50px; line-height: 50px; font-weight: 600; font-size: 20px }
	.sidenav-cross { position: relative; display: block !important; width: 24px; height: 24px; margin-top: 5px; transition: all .4s }
	.sidenav-cross::before, .sidenav-cross::after { content: ""; display: block; position: absolute; top: 72%; width: 16px; height: 2px; z-index: 9; border: none; background: var(--white); transition: transform .3s cubic-bezier(0.86, 0, 0.07, 1), transform-origin .3s cubic-bezier(0.86, 0, 0.07, 1) }
	.sidenav-cross::before { right: 50%; border-radius: 1px; transform-origin: 100% 100%; transform: rotate(42deg) scaleY(1.1) }
	.sidenav-cross::after { left: 50%; border-radius: 1px; transform-origin: 0% 100%; transform: rotate(-42deg) scaleY(1.1) }
	.sidenav-reduce .sidenav-cross { transform: translateY(-45%) }
	.sidenav-reduce .sidenav-cross::before { transform-origin: 100% 0%; transform: rotate(-42deg) scaleY(1.1) }
	.sidenav-reduce .sidenav-cross::after { transform-origin: 0% 0%; transform: rotate(42deg) scaleY(1.1) }
	.sidenav-list { position: relative; display: none; margin-top: 0; overflow: hidden }
	.content { margin-top: 20px }

	/*article*/
	.article-tit { padding-bottom: 20px }
	.article-tit h1 { padding: 5px 0; line-height: 32px; font-size: 22px }
	.article-tit .profile { margin-top: 10px }
	.article-info { padding-top: 28px }
	.article-info .info img { max-width: 100% !important; height: auto !important; vertical-align: top }
	.article-info .info table { width: 100% !important; margin: 0 !important; }
	.fanye { padding: 30px 0; font-size: 16px; flex-direction: column }
	.fanye-left, .fanye-right { flex: 0 0 100%; max-width: 100% }
	.fanye-right { margin-top: 10px; text-align: left }

	/*pages*/
	.pagebar .pagination>li { min-width: 42px; height: 42px; line-height: 42px }
	.pagebar .pagination>li>a, .pagebar .pagination>li>span { font-size: 14px }
}
@media (max-width:576px) {
	.list li a { padding-right: 15px; font-size: 14px }

	/*article*/
	.fanye { padding: 20px 0; font-size: 14px }

	/*pages*/
	.pagebar .pagination>li>a, .pagebar .pagination>li>span { padding: 0 8px }
	.pagebar .pagination>li:first-child>a>svg, .pagebar .pagination>li:first-child>span>svg { margin-right: 10px }
	.pagebar .pagination>li:last-child>a>svg, .pagebar .pagination>li:last-child>span>svg { margin-left: 10px }
}