body,html {padding: 0;margin: 0;background-color: transparent;} body{
	background-clip:"border-box";background-orign:"padding-box";
	background-position:"center top";
	background-image: url(https://picsum.photos/1000/800/);
	background-size:cover;background-attachment: fixed;}.page {top: 20px;width: 70vw;height: auto;padding: 50px;overflow: hidden;max-width: 900px;position: relative;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);margin: 0px auto;background: #F0FBFF;}.page h1 {margin-bottom: 2.5em;}.page p {text-indent: 2em;line-height: 1.7em;font-family: serif sans-serif "微软雅黑";font-size: 16px;color: #222;padding: 15px;letter-spacing: 0.1em;}.redbelt {position: absolute;background-color: red;right: -100px;top: 20px;width: 250px;height: 30px;text-align: center;color: white;font-size: 1.2em;padding-top: 0.5em;transform: rotate(45deg);}#btn_change_article {margin: 50px 0 10px 0;}
	.type_wrap {background:rgba(0,0,0,0.5);z-index:100;padding-bottom:10px;position: fixed;top: 35%;left: 5px;width: 60px;text-align: center;}.article_type {position: relative;display: inline-block;width: 40px;height: 40px;font-size: 0.9em;padding-top: 1em;margin-top: 10px;color: white;background-color: rgba(0, 0, 0, 0.5);cursor: pointer;border: solid 1px yellow;}.article_type:first-child {transform: scale(1.1);border-radius: 100px;color: blue;background-color: rgba(255, 255, 0, 1);}.article_type:hover {transform: scale(1.1);background-color: rgba(255, 255, 0, 1);color: deepskyblue;}
	#list_article {display: none;margin: 0;padding: 0px 60px 0 60px;text-align: center;}#list_article .col-md-2,#list_article .col-xs-3,#list_article .navbar-default {padding: 0;}
	#content_list{position:relative;display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;}
	.list_box {width:calc(33% - 36px);max-width:350px;margin:18px;}.list_box a.text-info {display: block;margin: 5px 0;padding: 0;position: relative;height: 1.1em;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;}.list_box .author {display: block;margin: 5px 0;padding: 0;position: relative;height: 1.3em;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;}.list_box .thumbnail {padding: 0;margin-bottom: 5px;}.list_box .thumbnail img {height: 100%;width: 100%;position: relative;}.list_box .thumbnail i {position: absolute;display: none;height:100%;width: 100%;text-align: center;left: 0;padding: 4em;}#list_article .list_box:hover .thumbnail i {display: inline-block;color: white;background-color: rgba(0, 0, 0, 0.5);}div.load_con {text-align: center;margin: 40px 0 0;}span.buttonLoad {padding-top: 5px;height: 40px;display: inline-block;width: 10em;text-align: center;background-color: #000000;border-radius: 5px;cursor: pointer;color: #00BFFF;}.buttonLoad:hover {background-color: #00BFFF;color: yellow;}footer {margin-top: 100px;}
	@media screen and (min-width:810px) and (max-width:1005px) {.page {padding: 10px 30px 30px 30px;}}
	@media screen and (min-width:430px) and (max-width:810px) {.page {padding: 10px 2px 2px 2px;margin-left: 70px;width: 75vw;}.page p {font-size: 16px;}.list_box {margin: 18px;width: 31vw;}.list_box .thumbnail i {height: 80px;}.list_box .thumbnail img {height: 80px;}#list_article {padding: 30px 0px 0 70px;width: auto;overflow: hidden;}span.buttonLoad {width: 7em;}}
	@media screen and (min-width:0px) and (max-width:430px) {body,html {background: none;}.type_wrap{display: none;}.page {padding: 10px 2px 2px 2px;width: 97vw;}.page p {font-size: 14px;}.list_box {margin: 5px 0;width: 62vw;}.list_box .thumbnail i {height: 100px;}.list_box .thumbnail img {height: 100px;}#list_article {padding: 30px 0px 0 70px;width: auto;overflow: hidden;}span.buttonLoad {width: 7em;}}
#progressReadBar{position:absolute;top:0px;left:0;height:3px;width: 100%;z-index: 200;background: #fff;}#rollingBar{position:absolute;display: inline-block;background:deepskyblue;height:3px;width:0%;}