.item {
	color: #717b8b;
	margin: .25em .45em .25em -2em;
	padding: .3em 0 .3em 2em;
	cursor: pointer
}

.left-indentation-sm {
	padding-left: 2em
}

.left-indentation-md {
	padding-left: 4em
}

.item:hover {
	background-color: #f7f7f7;
	color: #717b8b
}

.selected-item,.selected-item:hover {
	color: #156DA4
}

.flex-vertical {
	display: flex;
	flex-direction: column;
	justify-content: flex-start
}

.flex-horizontal {
	display: flex;
	flex-direction: row;
	justify-content: space-between
}

.title-content-margin {
	margin-left: 5px
}

.title-icon-margin {
	margin-left: -13px;
	color: #d9d9d9
}

.title-icon-margin-mo {
	margin-left: 8px;
	color: #d9d9d9
}

.title-icon-margin-sub {
	margin-left: -12px;
	margin-right: 2px;
	color: #d9d9d9
}

.sub-list {
	margin: .5em .5em 1em 0
}

.sub-list-title {
	color: #a8aeb7;
	padding: .5em 0;
	margin-top: 1em;
	font-weight: 700;
    color: #525e71;
    font-size: 1.1em;
}

.sub-list-mobile-active {
	z-index: 99;
	width: 100%;
	height: 260px;
	overflow-y: scroll;
	overflow-x: hidden;
	position: absolute;
	left: 0;
	padding-left: 23px;
	display: block;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 5px 5px 10px hsla(0,0%,76%,.5)
}

.sub-list-mobile-deactive {
	z-index: 99;
	position: absolute;
	display: none
}

.group {
	position: relative;
	margin-bottom: 45px
}

.search-icon {
	font-size: 18px;
	position: absolute;
	top: 10px;
	color: #156DA4;
}

.article-footer {
	max-height: 180px;
	min-height: 180px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 300;
	z-index: 1
}

.previous-article {
	justify-content: flex-start;
	border-right: 1px solid #e5e5e5
}

.next-article,.previous-article {
	display: flex;
	min-width: 50%;
	min-height: 30px
}

.next-article {
	justify-content: flex-end
}

.flex-link {
	display: flex;
	align-items: center;
	margin: 0 5px;
	line-height: 1.5
}

.line-height {
	line-height: 30px;
	margin-top: 2px;
	height: 30px
}

.line-height-more {
	line-height: 30px;
	margin-top: 3px;
	height: 30px
}

.help-section {
	border-bottom: 1px solid #e5e5e5;
	min-height: 100px;
	padding: 40px 100px
}

.hover-red:hover {
	color: #fff!important;
	background-color: #f55d54
}

.spe-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	font-size: 24px;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
	cursor: pointer
}

.red-icon {
	stroke: #f55d54;
	fill: #f55d54!important
}

.border-icon {
	border: 1px solid #f55d54;
	padding: 2px;
	text-align: center
}

.article-footer a img {
	display: none
}

.article-footer a:hover img {
	display: block
}

.qrcode {
	left: 50%;
	height: 200px;
	width: 200px;
	max-width:200px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.2);
	-webkit-transform: translateX(-40%) translateY(-245px);
	transform: translateX(-40%) translateY(-245px);
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-pixelated;
	image-rendering: pixelated
}

.left-border {
	padding-left: 42px;
	padding-right: 40px;
	border-color: #e5e5e5;
	border-width: 0 0 0 1px;
	border-style: none none none solid
}

.article-footer li a {
	position: relative;
	padding: 0;
	color: #1D537C;
	width: 32px;
	height: 32px;
	font-size: 24px;
	transition: all .2s ease-in
}

.flex-link {
	display: flex;
	align-items: center;
	margin: 0 5px;
	line-height: 1.5
}

.line-height {
	line-height: 30px;
	margin-top: 2px;
	height: 30px
}

.line-height-more {
	line-height: 30px;
	margin-top: 3px;
	height: 30px
}

.help-section {
	border-bottom: 1px solid #e5e5e5;
	min-height: 100px;
	padding: 40px 100px
}

.hover-red:hover {
	color: #ffffff !important;
	background-color: #1D537C;
}

.spe-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	font-size: 24px;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
	cursor: pointer;
	color:#1D537C;
}
.hover-red:hover .spe-icon
{
	color:#fff;
}
.red-icon {
	stroke: #f55d54;
	fill: #f55d54 !important
}

.border-icon {
	border: 1px solid #1D537C;
	padding: 2px;
	text-align: center
}

.article-footer a img {
	display: none
}

.article-footer a:hover img {
	display: block
}

.mb-postContent video {
	width: 100%;
	height: 100%
}

@media screen and (max-width:360px) {
	.mb-postContent {
		margin-left: 55px;
		margin-right: 55px;
		text-align: center
	}

	.navigation-section {
		min-height: 80px;
		text-align: center;
		padding: 30px 55px 25px
	}
}

@media screen and (min-width:361px) and (max-width:540px) {
	.mb-postContent {
		margin-left: 60px;
		margin-right: 60px
	}

	.navigation-section {
		min-height: 80px;
		text-align: center;
		padding: 30px 60px 25px
	}
}

@media screen and (min-width:541px) and (max-width:959px) {
	.mb-postContent {
		margin-left: 80px;
		margin-right: 80px
	}

	.navigation-section {
		min-height: 80px;
		text-align: center;
		padding: 30px 80px 25px
	}

	.left-border {
		padding-left: 0;
		padding-right: 0;
		border: none
	}
}

@media screen and (min-width:960px) and (max-width:1366px) {
	.navigation-section {
		min-height: 80px;
		text-align: center;
		padding: 30px 100px 25px
	}
}

@media screen and (min-width:1367px) {
	.navigation-section {
		min-height: 80px;
		text-align: center;
		padding: 30px 100px 25px
	}
}

a {
	color: #717b8b;
	text-decoration: none
}

a:hover {
	color: #156DA4
}

input {
	font-size: 12px;
	margin-left: 27px;
	padding: 10px 10px 4px 2px;
	display: block;
	width: 80%;
	border: none;
	border-bottom: 1px solid #e5e5e5;
	color: #717b8b
}

input::-webkit-input-placeholder {
	color: #bec2c9;
	font-weight: 300;
	font-size: 12px
}

input:-ms-input-placeholder,input::-ms-input-placeholder {
	color: #bec2c9;
	font-weight: 300;
	font-size: 12px
}

input::placeholder {
	color: #bec2c9;
	font-weight: 300;
	font-size: 12px
}

input:focus {
	outline: none
}

.go-top-button {
	position: fixed;
	right: 50px;
	top: 75%;
	cursor: pointer
}

.rotated {
	position: fixed;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg)
}

.default-tutorial-container {
	padding: 0;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	width: inherit
}

.tutorial-section {
	flex: 1;
	padding: 0 0 0 10px;
	margin: 10px 0 20px
}

.tutorial-section-title {
	margin: 8px 0 0
}

.video-cards {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0 0 10px
}

.video-card {
	margin: 20px 20px 0 0;
	width: 175px;
	height: 160px;
	background-color: #fafad2;
	color: #717b8b;
	box-shadow: 0 0 .5em gray
}

.video-card:hover {
	box-shadow: 0 0 1em gray
}

.selected-tutorial-list-section {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 600px
}

.selected-tutorial-list-subsection {
	margin-right: 10em;
	display: flex;
	flex-direction: column;
	justify-content: flex-start
}

.bin {
	margin-top: 2em
}

.half-bin {
	margin-top: 1em
}

.tutorial-footer-icon {
	margin: 0 5px 0 10px
}

.tutorial-footer-icon,.tutorial-footer-nav-icon {
	color: #f55d54;
	text-align: center;
	font-size: 20px;
	padding-top: 5px;
	width: 30px;
	height: 30px
}

.tutorial-footer-nav-icon {
	margin: 0 10px
}

.border {
	border: 1px solid #f55d54
}

@media screen and (max-width:959px) {
	.flex-container {
		justify-content: space-between;
		height: 100%;
		color: #27364e;
		align-items: center
	}

	.left-panel {
		max-width: 270px;
		min-width: 200px;
		font-size: 14px
	}

	.right-content {
		background-color: #fff;
		padding-top: 5px;
		text-align: center
	}

	.rotated-icon {
		font-size: 36px;
		color: #f55d54;
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg)
	}
}

@media screen and (min-width:960px) {
	.flex-container {
		padding: 10px 70px 10px 80px;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		height: 100%;
		color: #27364e
	}

	.left-panel {
		flex: 1;
		max-width: 270px;
		min-width: 200px;
		padding: 0 0 0 25px;
		font-size: 14px
	}

	.right-content {
		flex: 1;
		background-color: #fff;
		min-width: 600px;
		padding-top: 5px
	}

	.rotated-icon {
		font-size: 36px;
		color: #f55d54;
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg)
	}
}

.mobile-search-box {
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	padding-top: 17px;
	padding-bottom: 17px;
	display: flex;
	justify-content: space-between
}

@media screen and (max-width:360px) {
	.left-panel {
		margin-left: -25px
	}
}

@media screen and (min-width:361px) and (max-width:540px) {
	.left-panel {
		margin-left: -70px
	}
}

@media screen and (min-width:541px) and (max-width:760px) {
	.left-panel {
		margin-left: -260px
	}
}

@media screen and (min-width:761px) and (max-width:800px) {
	.left-panel {
		margin-left: -460px
	}
}

@media screen and (min-width:801px) and (max-width:959px) {
	.left-panel {
		margin-left: -500px
	}
}

@media screen and (min-width:1024px) {
	.left-panel {
		margin: 20px
	}
}

.input-box-mobile {
	padding: 0;
	margin-left: 15px;
	text-align: center;
	border-radius: 50px;
	border: 1px solid #fff;
	vertical-align: middle;
	-webkit-appearance: none
}

.mobile-icon-fa:before {
	position: absolute;
	left: 60px;
	top: 92px
}

.catalog {
	height: 30px;
	line-height: 30px
}

.list-catalog {
	color: #27364e 80%;
	opacity: .8;
	font-size: 16px;
	margin-left: 16px;
	cursor: pointer;
	display: block
}

.search-icon-mobile {
	position: absolute;
	right: 125px;
	font-size: 18px;
	color: #1D537C
}

.group-mobile {
	width: 150px;
	height: 30px;
	position: relative;
	margin: 0;
	margin-right: 20px;
	justify-content: center;
	display: flex;
	border-radius: 50px;
	border: 1px solid #1D537C;
	padding-top: 5px
}


@media screen and (max-width:1024px)
{
	.sub-list
	{
		display:none;
	}
	.sub-list-mobile-active
	{
		display:block;

	}
}


@media screen and (max-width:812px)
{
	.left-border
	{
		padding-left:0px;
		padding-right:0px;
		border:0px;
	}


	.line-height li:first-child
	{
		display:none !important;
	}
}

/*# sourceMappingURL=guides-42ca9ebbdf721710bbaa.css.map*/