html { overflow-x: hidden; overflow-y: auto; }
body {
font-family: "Roboto",Arial,sans-serif;
}
* {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
}
.headerlink {
	opacity: 0.1;
}
.crumbs li{
	display: inline;
}
.index-more {
	background-color: #efefef;
	padding-top: 40px;
}
.index-more-item {
	background: #FFFEFE;
	border-radius: 3px;
	padding: 15px 22px;
}
.index-more-item h4 {
	font-family: Roboto-Condensed;
	font-size: 20px;
	color: #000000;
	letter-spacing: 0.43px;
}
.index-more-item p {
	font-family: Roboto-Light;
	font-size: 14px;
	color: #4A4A4A;
	letter-spacing: 0;
	line-height: 20px;
}
.p-faq {
	margin-top: 20px;
	font-family: Roboto-Light;
	font-size: 12.7px;
	color: #4A4A4A;
	letter-spacing: 0.27px;
}

@media screen and (min-width: 768px) {
	header {
		height: 250px;
		background-color: #000;
		background: url('img_background.png') no-repeat;
		background-size: cover;
		font-family: Roboto-Thin;
	}
	header * {
		display: inline-block;
	}
	.header {
		background-color:  #000;
		height: 80px;
	}
	.index-header {
		display: flex;
	    justify-content: space-between;
	    -moz-justify-content: space-between;
	    -webkit-justify-content: space-between;
	    align-items: center;
	}
	.logo {
		margin-left: -25px;
	}
	.header-title {
		text-align: center;
	}
	.header-title li{
		display: inline;
		font-family: Roboto-Thin;
		font-size: 16px;
		margin-right: 25px;
		position: relative;
	}
	.header-title li:last-child {
		margin-right: 0;
	}
	.header-title li a {
		color: #8a8787;
	}
	.header-title li .header-selected {
		color:  #fff;
	}
	.header-title .header-title-selected {
		width: 6px;
		height: 6px;
		display: block;
		background: #49B300;
		position: absolute;
		left: 50%;
		margin-left: -6px;
		bottom: -15px;
		border-radius: 50%;
	}
	.search-box {
		position: relative;
		margin-right: 4%;
	}
	.search-box input {
		border: 0;
		border-bottom: 1px solid #FFFFFF;
		background-color: transparent;
		font-size: 14px;
		color: #fff;
		width: 120px;
	}
	.search-box button{
		background-color: transparent;
		border: 0;
	}
	.search-box button {
		position: absolute;
		top: -3px;
		right: 2px;
	}
	.index-main-pic {
		margin-top: -150px;
	}
	.index-main-pic {
		margin-top: -150px;
	}
	.clear-margin {
		margin-left: 10px;
		margin-right: 10px;
	}
	.index-content {
		margin-top: 50px;
	}
	.index-content h2 {
		font-size: 36px;
		color: #4A4A4A;
		letter-spacing: 0.07px;
		margin-bottom: 30px;
	}
	.index-tag {
		display: inline-block;
		background: #FFDE00;
		width: 30px;
		height: 30px;
		margin-right: 10px;
		margin-top: 5px;
	}
	.index-content-text {
		font-size: 20px;
		color: #000000;
		letter-spacing: 0.01px;
		line-height: 30px;
		margin-bottom: 40px;
	}
	.index-more-item {
		background: #FFFEFE;
		border-radius: 3px;
		padding: 10px 20px;
	}
	.index-more .index-more-li {
		padding-left: 10px;
		padding-right: 10px;
	}
	.index-more-item {
		min-height: 350px;
	}
	.index-faq {
		margin-top: 60px;
		padding-bottom: 40px;
	}
	.index-faq-li {
		padding-left: 0;
		padding-right: 0;
	}
	.index-faq-li > img {
		width: 30px;
	}
	.index-link-logo {
		margin-right: 35px;
		margin-top: 20px;
	}
	.span-faq {
		font-size: 25.65px;
		color: #000000;
		letter-spacing: 0.55px;
		vertical-align: middle;
	}
	.index-shop-img {
		height: 40px;
		margin-bottom: 10px;
		border-radius: 5px;
		border:1px solid #ccc;
	}
	footer {
		min-height: 80px;
		background-color: #2F2F2F;
		font-size: 18px;
		color: #FFFFFF;
		letter-spacing: 0.11px;
	}
	.footer-block-item {
		color: #fff;
		margin-top: 25px;
		font-family: Roboto-Thin;
	}
}

@media screen and (min-width: 992px) {
	header {
		height: 350px;
	}
	.index-main-pic {
		margin-top: -220px;
	}
	.index-more-item {
		min-height: 320px;
	}
}

@media screen and (min-width: 1200px) {
	header {
		height: 422px;
	}
	.index-main-pic {
		margin-top: -300px;
	}
	.index-more-item {
		min-height: 270px;
	}
}

@media screen and (max-width: 767px) {
	header {
		min-height: 70px;
		background-color: #000;
		font-family: Roboto-Thin;
	}
	.index-header {
		padding: 0;
	}
	.logo img {
		height: 50px;
		margin: 10px 18px;
	}
	.header-title li {
		text-align: center;
		line-height: 35px;
	}
	.index-header .navbar-header {
		border-bottom: 1px solid #555;
	}
	.header-title li a {
		color: #fff;
	}
	.navbar-header button {
		margin-top: 20px;
	}
	.navbar-toggle .icon-bar {
		background-color: #fff;
	}
	.header-phone-selected {
		background-color: #555;
	}
	.index-main-pic img {
		width: 100%;
	}
	.index-content h2{
		font-family: Roboto-Condensed;
		font-size: 15.75px;
		color: #000000;
		letter-spacing: 0.03px;
		font-weight: 600;
	}
	.index-content > div {
		margin: 35px;
		margin-bottom: 20px;
		text-align: center;
	}
	.index-content-text {
		font-family: Roboto-Light;
		font-size: 10px;
		color: #000000;
		letter-spacing: 0;
		line-height: 20px;
		margin-top: 10px;
	}
	.index-shop-img {
		height: 40px;
		margin-bottom: 15px;
	}
	.index-shop-logo-ul {
		margin-top: 30px;
		margin-bottom:20px;
	}
	.index-more-li {
		margin: 0 30px 30px 30px;
	}
	.index-faq-li {
		margin: 0 30px 30px 30px;
	}
	.span-faq {
		font-family: Roboto-Condensed;
		font-size: 22px;
		color: #000000;
		letter-spacing: 0.47px;
		vertical-align: middle;
	}
	.index-faq-li > img {
		width: 22px;
	}

	footer {
		padding: 25px;
		background-color: #000;
		color: #fff;
		position: relative;
	}
	.footer-item1 {
		font-family: Roboto-Light;
		font-size: 11px;
		letter-spacing: 0.07px;
		line-height: 18px;
		width: 70%;
	}
	.footer-item2 {
		font-family: .PingFangSC-Regular;
		font-size: 11px;
		letter-spacing: 0.46px;
		line-height: 30px;
	}
	.footer-div1 {
		width: 70%;
	}
	.footer-div2 {
		position: absolute !important;
		bottom: 30px;
		right: 30px;
	}
	.footer-div2 img {
		width: 57px;
	}
}


/************doc css****************/
@media screen and (min-width: 768px) {
	#example-navbar-collapse {
		overflow-y: auto !important;
	}
	.doc-content {
		margin-top: 80px;
	}
	.doc-header {
		position: fixed;
		top: 0;
		height: 80px;
		width: 100%;
		z-index: 10;
	}
	.crumbs {
		height: 55px;
		font-family: Roboto-Light;
		font-size: 17px;
		color: #4A4A4A;
		margin-top: 30px;
		border-bottom:  1px solid #BEBCBF;;
	}
	.doc-title {
		font-family: Roboto-Condensed;
		font-size: 25px;
		color: #333333;
		height: 45px;
		margin-top: 20px;
	}
	.toctree-l1>a{
		font-family: Roboto-Thin;
		font-size: 16px;
		color: #4A4A4A;
	}
	.toctree-l1 {
		margin-top: 20px;
	}
	.toctree-l1 > ul {
		margin-left: 1.8em;
	}
	.toctree-l2 > a {
		font-family: Roboto-Light;
		font-size: 14px;
		color: #4A4A4A;
	}
	.toctree-l2{
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.toctree-l2 > ul {
		margin-left: 1.8em;
	}
	.toctree-l3 > a {
		font-family: Roboto-Regular;
		font-size: 12px;
		color: #737373;
	}
	.toctree-l3{
		margin-top: 15px;
		margin-bottom: 15px;
	}
	.body h1,.body h2,.body h3,.body h4,.body h5,.body  h6 {
		margin-bottom: 20px;
	}
	.left-menu {
		position: fixed;
		width: 18%;
	}
	.sidebar {
		max-height: 500px;
		overflow-x: hidden; 
		overflow-y: auto;
	}
	.to-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	#thanks-these-guys-who-are-contributing .image-reference img{
		margin: 0;
	}
	.doc-header {
		background-color: #000;
	}
	.sidebar {
		background-color: #000;
	}
	.sidebar a {
		color: #fff;
	}
	.content-main {
		padding-left: 0 !important;
		padding-right:  0 !important; 
	}
	.toctree-l1>a{
		font-family: Roboto-Thin;
		font-size: 20px;
		font-weight: 600;
	}
	.toctree-l1 {
		margin-top: 10px;
	}
	.toctree-l2 > a {
		font-family: Roboto-Bold;
		font-size: 16px;
	}
	.toctree-l2{
		margin-top: 12px;
		margin-bottom: 12px;
	}
	.toctree-l3 > a {
		font-family: Roboto-Regular;
		font-size: 14px;
	}
	.toctree-l3{
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.toctree-l2 ul>li:last-child {
		margin-bottom: 25px;
	}
	.search-phone {
		position: relative;
		margin-right: 4%;
		margin-top: 25px;
		margin-bottom: 25px;
	}
	.search-phone input {
		border: 0;
		border-bottom: 1px solid #eee;
		background-color: transparent;
		font-size: 14px;
		color: #fff;
		width: 100%;
	}
	.search-phone button{
		background-color: transparent;
		border: 0;
	}
	.search-phone button {
		position: absolute;
		top: -3px;
		right: 2px;
	}
	.sidebar {
		padding-left: 35px !important;
	}
	.left-menu {
		margin: -15px;
		/*margin-bottom: 15px;*/
	}
	.doc-content {
		padding: 15px;
	}
	/*.doc-content {
		margin-top: 80px;
		padding: 15px;
	}
	.doc-header {
		position: fixed;
		top: 0;
		height: 70px;
		width: 100%;
		z-index: 10;
	}
	html {
		background-color: #000;
	}
	body {
		background-color: #fff;
	}
	.document {
		padding-top: 20px;
	}*/
	.crumbs {
		margin-top: 20px;
	}
}

	.body h1 {
		font-family: Roboto-Bold;
		font-size: 22px;
		color: #4A4A4A;
		font-weight: 600;
	}
	.body h2 {
		font-family: Roboto-Bold;
		font-size: 18px;
		color: #4A4A4A;
		font-weight: 600;
	}
	.body img {
		max-width: 100%;
		margin: 15px auto;
	}
	.body p {
		line-height: 25px;
	}
	.simple li{
		line-height: 25px;
		margin-bottom: 10px;
		letter-spacing: 0.5px;
	}
	.simple  {
		margin-left: 1.8em;
	}
	.search {
		margin-bottom: 80px;
	}
	.search li {
	    	padding: 20px 0;
	    	border-bottom: 1px solid #ccc;
	}
	.highlight {
	    	background: #EFEFEF !important;
	    	color: #93A1A1;
	}
	.highlight pre {
	    	padding: 1em;
	}
	.highlight .p {
	    	color: #93A1A1;
	}
	.highlight span {
	    	line-height: 24px;
	}