html,
body,
#app {
	height: 100%;
}
body {
	text-align: center;
}
body:after {
	content: '';
	vertical-align: middle;
	display: inline-block;
	height: 100%;
}
#app {
	text-align: left;
	vertical-align: middle;
	display: inline-block;
	position: relative;
	width: 100%;
	max-width: 970px;
	max-width: 60.625rem;
	max-height: 600px;
	max-height: 37.5rem;
	margin: 0 auto;
}
#header {
	color: #fff;
	height: 64px;
	height: 4rem;
	margin-bottom: -64px;
	margin-bottom: -4rem;
	box-sizing: border-box;
	background-color: #222;
}
#header .inner {
	display: table;
	width: 100%;
	height: 56px;
	height: 3.5rem;
	padding: 8px 0;
	padding: 0.5rem 0;
}
#header .inner>* {
	vertical-align: middle;
	display: table-cell;
	padding-left: 18px;
	padding-left: 1.125rem;
}
#header .util-menu {
	float: right;
	min-width: 165px;
	min-width: 10.3125rem;
	padding-left: 0;
}
#header .util-menu:after {
	content: '';
	display: block;
	clear: both;
}
#header .util-menu>li {
	float: left;
	width: 80px;
	width: 5rem;
	text-align: center;
	border-left: 1px solid #000;
	border-left: 0.0625rem solid #000;
	border-right: 1px solid #363636;
	border-right: 0.0625rem solid #363636;
}
#header .util-menu>li:first-child {
	position: relative;
}
#header .util-menu>li:first-child:before {
	content: '';
	position: absolute;
	left: -2px;
	left: -0.125rem;
	width: 1px;
	width: 0.0625rem;
	height: 100%;
	border-left: 1px solid #363636;
	border-left: 0.0625rem solid #363636;
}
#header .util-menu>li>a {
	display: block;
	font-size: 12px;
	font-size: 0.75rem;
	color: #ddd;
	position: relative;
	z-index: 3;
}
#header .util-menu>li>a:before {
	content: '';
	display: block;
}
#header .util-menu .guide a:before {
	width: 20px;
	width: 1.25rem;
	height: 20px;
	height: 1.25rem;
	margin: 5px auto 4px;
	margin: 0.3125rem auto 0.25rem;
	background: url('../images/icon-guide.png') no-repeat;
	background-size: contain;
}
#header .util-menu .lesson a:before {
	width: 20px;
	width: 1.25rem;
	height: 16px;
	height: 1rem;
	margin: 7px auto 6px;
	margin: 0.4375rem auto 0.375rem;
	background: url('../images/icon-folder.png') no-repeat;
	background-size: contain;
}
#header .util-menu .sound a:before {
	width: 18px;
	width: 1.125rem;
	height: 18px;
	height: 1.125rem;
	margin: 6px auto 6px;
	margin: 0.375rem auto 0.375rem;
	background: url('../images/icon-sound.png') no-repeat;
	background-size: contain;
}
#header .util-menu .close-lecture a:before {
	width: 18px;
	width: 1.125rem;
	height: 18px;
	height: 1.125rem;
	margin: 6px auto 6px;
	margin: 0.375rem auto 0.375rem;
	background: url('../images/close-btn-type2.png') no-repeat;
	background-size: contain;
}
#header .menu>a{
	z-index: 3;
}
#header .box-menu>li{
	list-style: none;
}
#header .box-menu .menu>a {
	display: block;
	position: relative;
	width: 20px;
	width: 1.25rem;
	height: 15px;
	height: 0.9375rem;
	margin: 8px auto 7px;
	margin: 0.5rem auto 0.4375rem;
	background: url('../images/icon-list.png') no-repeat;
	background-size: contain;
}
#header .current {
	float: left;
	min-width: 100px;
	min-width: 6.25rem;
	font-size: 18px;
	font-size: 1.125rem;
	font-weight: normal;
	line-height: 27px;
	line-height: 1.6875rem;
	border-right: 1px solid #363636;
	border-right: 0.0625rem solid #363636;
}
#header .hgroup h1 {
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 27px;
	line-height: 1.6875rem;
	float: left;
	padding-left: 10px;
	padding-left: 0.625rem;
	border-left: 1px solid #000;
	border-left: 0.0625rem solid #000;
}
#header .hgroup p {
	font-size: 13px;
	font-size: 0.8125rem;
	color: #ccc;
	clear: both;
	/*padding-top: 5px;
	padding-top: 0.3125rem;*/
}
#header .hgroup h2:before {
	content: '';
	display: inline-block;
	width: 12px;
	width: 0.75rem;
	height: 7px;
	height: 0.4375rem;
	margin-top: -2px;
	margin-top: -0.125rem;
	margin-right: 3px;
	margin-right: 0.1875rem;
	vertical-align: middle;
	background-image: url('../images/icon-arrow-right.png');
	background-repeat: no-repeat;
}
.global-menu {
	color: #000;
	text-align: left;
	position: absolute;
	top: 64px;
	top: 4rem;
	left: 0;
	bottom: 46px;
	bottom: 2.875rem;
	z-index: 10;
	overflow: auto;
	display: none;
	width: 246px;
	width: 15.375rem;
	background-color: #ededed;
}
.global-menu.show {
	display: block;
}
.global-menu .title {
	font-size: 16px;
	font-size: 1rem;
	line-height: 62px;
	line-height: 3.875rem;
	display: block;
	height: 62px;
	height: 3.875rem;
	padding-left: 20px;
	padding-left: 1.25rem;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 20px 50%;
	background-position: 1.25rem 50%;
}
.global-menu .title:before {
	content: '';
	vertical-align: middle;
	display: inline-block;
	width: 40px;
	width: 2.5rem;
	height: 40px;
	height: 2.5rem;
	margin-right: 10px;
	margin-right: 0.625rem;
	background-repeat: no-repeat;
	background-size: contain;
}
.global-menu>ul>li:first-child {
	display: none;
}
.global-menu .title[data-index="1"]:before {
	background-image: url('../images/icon-menu01.png');
}
.global-menu .title[data-index="2"]:before {
	background-image: url('../images/icon-menu02.png');
}
.global-menu .title[data-index="3"]:before {
	background-image: url('../images/icon-menu03.png');
}
.global-menu a {
	line-height: 38px;
	line-height: 2.375rem;
	display: block;
	height: 38px;
	height: 2.375rem;
	padding-left: 70px;
	padding-left: 4.375rem;
}
#content {
	box-sizing: border-box;
	height: 100%;
	padding: 84px 0 66px;
	padding: 5.25rem 0 4.125rem;
}
#content .content-inner {
	position: relative;
	color: #fff;
	height: 100%;
	margin: 0 86px;
	margin: 0 5.375rem;
	border-radius: 18px;
	border-radius: 1.125rem;
	background-color: #2b3946;
	box-sizing: border-box;
}
#content .content-inner:before {
	content: '';
	position: absolute;
	bottom: -20px;
	bottom: -1.25rem;
	left: 86px;
	left: 5.375rem;
	right: 86px;
	right: 5.375rem;
	height: 20px;
	height: 1.25rem;
	background: url('../images/bg-wrapper-shadow.png') no-repeat center;
	background-size: 100% 100%;
}
#content .wrapper {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	overflow-y: auto;
}
#content .wrapper:after {
	content: '';
	display: block;
	clear: both;
}
#footer {
	color: #fff;
	display: table;
	table-layout: fixed;
	width: 100%;
	height: 46px;
	height: 2.875rem;
	margin-top: -46px;
	margin-top: -2.875rem;
	background-color: #222;
}
#footer>* {
	display: table-cell;
	vertical-align: middle;
	border-left: 1px solid #000;
	border-left: 0.0625rem solid #000;
	border-right: 1px solid #363636;
	border-right: 0.0625rem solid #363636;
}
#footer .logo {
	width: 18%;
	width: 170px;
	height: 18px;
	height: 1.125rem;
	padding: 0 20px;
	padding: 0 1.25rem;
	font: 0/0 a;
	border-left: 0;
	background: url('../images/logo.png') no-repeat center;
}
#footer .video-js {
	display: block;
	width: inherit;
	height: 100%;
}
#footer .script {
	width: 50px;
	width: 3.125rem;
}
#footer .script button {
	font: 0/0 a;
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	background: url('../images/icon-script.png') no-repeat center;
}
#footer .layer-script {
	position: absolute;
	color: #fff;
	position: absolute;
	bottom: 48px;
	bottom: 3rem;
	right: 3px;
	right: 0.1875rem;
	z-index: 10;
	max-width: 300px;
	max-width: 18.75rem;
	padding: 8px;
	padding: 0.5rem;
	background-color: #222;
}
#footer .layer-script.show {
	display: block;
}
#footer .nav {
	position: relative;
	z-index: 1;
	width: 150px;
	width: 9.375rem;
	text-align: center;
	white-space: nowrap;
}
#footer .nav .btn {
	display: inline-block;
	width: 46px;
	width: 2.875rem;
	height: 46px;
	height: 2.875rem;
	font: 0/0 a;
}
#footer .nav .prev {
	background: url('../images/icon-prev.png') no-repeat center;
}
#footer .nav .next {
	background: url('../images/icon-next.png') no-repeat center;
}
#footer .nav span,
#footer .nav i {
	font-size: 14px;
	font-size: 0.875rem;
	color: #888;
	vertical-align: middle;
}
#footer .nav i {
	display: inline-block;
	padding: 0 5px 0 3px;
	padding: 0 0.3125rem 0 0.1875rem;
}
#footer .nav .total {
	display: inline-block;
	margin-top: 4px;
	margin-top: 0.25rem;
}
#footer .nav .current {
	font-size: 22px;
	font-size: 1.375rem;
}
#footer .nav .next-tooltip {
	color: #fff;
	white-space: nowrap;
	position: absolute;
	bottom: 48px;
	bottom: 3rem;
	right: 2px;
	right: 0.125rem;
	padding: 4px 5px;
	padding: 0.25rem 0.3125rem;
	background-color: #222;
}

.site-guide {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	border-radius: 18px;
	border-radius: 1.125rem;
	background-color: #ccc;
}
.site-guide.show {
	display: block;
}
.site-guide .subjects>li {
	margin-bottom: 40px;
	margin-bottom: 2.5rem;
}
.site-guide .subjects li:after {
	content: '';
	display: block;
	clear: both;
}
.site-guide .subjects li>strong {
	float: left;
	width: 35%;
}
.site-guide .subjects li ul {
	font-size: 14px;
	font-size: 0.875rem;
	float: left;
	width: 63%;
	margin-left: 2%;
}
.site-guide .subjects li ul li {
	margin-bottom: 10px;
	margin-bottom: 0.625rem;
}
.site-guide .subjects li ul li:before {
	content: '';
	vertical-align: middle;
	display: inline-block;
	width: 3px;
	width: 0.1875rem;
	height: 3px;
	height: 0.1875rem;
	margin-right: 6px;
	margin-right: 0.375rem;
	border-radius: 50%;
	background-color: #fff;
}
.site-guide .step-wrap {
	padding-right: 70px;
	padding-right: 4.375rem;
}
.site-guide .step-wrap:after {
	content: '';
	display: block;
	clear: both;
}
.step-wrap .step {
	float: left;
	width: 33.3333333%;
	padding-left: 17px;
	padding-left: 1.0625rem;
	box-sizing: border-box;
}
.step-wrap .step:first-child {
	padding-left: 0;
}
.step-wrap .step strong {
	display: block;
	height: 41px;
	height: 2.5625rem;
	line-height: 41px;
	line-height: 2.5625rem;
	margin-bottom: 20px;
	margin-bottom: 1.25rem;
	text-align: center;
	font-weight: normal;
}
.step-wrap .step li {
	position: relative;
	min-height: 140px;
	min-height: 8.75rem;
	margin-bottom: 60px;
	margin-bottom: 3.75rem;
	text-align: center;
	background-color: #2b3946;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .13), inset 1px 1px rgba(255, 255, 255, .1);
	-webkit-box-shadow: 0 0 0.625rem rgba(0, 0, 0, .13), inset 0.0625rem 0.0625rem rgba(255, 255, 255, .1);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .13), inset 1px 1px rgba(255, 255, 255, .1);
	-moz-box-shadow: 0 0 0.625rem rgba(0, 0, 0, .13), inset 0.0625rem 0.0625rem rgba(255, 255, 255, .1);
	box-shadow: 0 0 10px rgba(0, 0, 0, .13), inset 1px 1px rgba(255, 255, 255, .1);
	box-shadow: 0 0 0.625rem rgba(0, 0, 0, .13), inset 0.0625rem 0.0625rem rgba(255, 255, 255, .1);
	background-image: -webkit-linear-gradient(bottom, #25313c, #2b3946);
	background-image: -moz-linear-gradient(bottom, #25313c, #2b3946);
	background-image: -o-linear-gradient(bottom, #25313c, #2b3946);
	background-image: -ms-linear-gradient(bottom, #25313c, #2b3946);
	background-image: linear-gradient(to top, #25313c, #2b3946);
}
.step-wrap .step li:before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	display: block;
	width: 50px;
	width: 3.125rem;
	height: 40px;
	height: 2.5rem;
	margin: 5px 0 0 -25px;
	margin: 0.3125rem 0 0 -1.5625rem;
	background-image: url('../images/icon-arrow-guide.png');
	background-size: contain;
}
.step-wrap .step li:last-child:before {
	display: none;
}
.step-wrap .step em {
	position: relative;
	display: block;
	height: 41px;
	height: 2.5625rem;
	padding-bottom: 10px;
	padding-bottom: 0.625rem;
	margin-bottom: 10px;
	margin-bottom: 0.625rem;
	line-height: 41px;
	line-height: 2.5625rem;
	box-sizing: border-box;
}
.step-wrap .step em:after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -1px;
	bottom: -0.0625rem;
	display: block;
	width: 12px;
	width: 0.75rem;
	height: 1px;
	height: 0.0625rem;
	margin-left: -6px;
	margin-left: -0.375rem;
	background-color: #fff;
}
.step-wrap .step li button {
	position: absolute;
	top: 41px;
	top: 2.5625rem;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
}
.step-wrap .step li button:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	display: block;
	background-color: #fff;
	background-image: url('../images/icon-view-guide.png');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	opacity: 1;
	transition: opacity ease .2s;
}
.step-wrap .step li button:hover:after,
.step-wrap .step li button:focus:after {
	opacity: 0;
}
.step-wrap .step div {
	display: inline-block;
	width: 100%;
	padding: 0 13px;
	padding: 0 0.8125rem;
	text-align: center;
	vertical-align: middle;
	word-break: keep-all;
	box-sizing: border-box;
}
.step-wrap .step span {
	font-size: 14px;
	font-size: 0.875rem;
}
.site-guide .screen {
	position: relative;
	margin-bottom: 30px;
	margin-bottom: 1.875rem;
	padding-bottom: 61.85567010309278%;
	background-color: #000;
}
.site-guide .screen .screenshot {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.site-guide .screen .btn {
	position: absolute;
	z-index: 1;
	display: inline-block;
	margin-right: 10px;
	margin-right: 0.625rem;
	padding: 1px 5px 2px;
	padding: 0.0625rem 0.3125rem 0.125rem;
	border-radius: 50%;
}
.site-guide .screen .btn.index-1 {
	left: 1.5%;
	top: 1.5625%;
}
.site-guide .screen .btn.index-2 {
	left: 10%;
	top: 1.5625%;
}
.site-guide .screen .btn.index-3 {
	left: 25%;
	top: 1.5625%;
}
.site-guide .screen .btn.index-4 {
	left: 80%;
	top: 1.5625%;
}
.site-guide .screen .btn.index-5 {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.site-guide .screen .btn.index-6 {
	left: 16%;
	bottom: 0.6875%;
}
.site-guide .screen .btn.index-7 {
	left: 83%;
	bottom: 0.6875%;
}
.site-guide .composition li {
	padding: 5px 0;
	padding: 0.3125rem 0;
	font-size: 14px;
	font-size: 0.875rem;
}
.site-guide .composition .index {
	display: inline-block;
	margin-right: 10px;
	margin-right: 0.625rem;
	padding: 1px 5px 2px;
	padding: 0.0625rem 0.3125rem 0.125rem;
	border-radius: 50%;
}
.site-guide .title {
	font-size: 18px;
	font-size: 1.125rem;
}
.site-guide .title:after {
	content: '';
	display: block;
	margin: 25px 0;
	margin: 1.5625rem 0;
	width: 12px;
	width: 0.75rem;
	height: 1px;
	height: 0.0625rem;
	background-color: #fff;
}
.site-guide .spec li {
	position: relative;
	padding-left: 10px;
	padding-left: 0.625rem;
	font-size: 14px;
	font-size: 0.875rem;
}
.site-guide .spec li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	top: 0.5625rem;
	display: block;
	width: 3px;
	width: 0.1875rem;
	height: 3px;
	height: 0.1875rem;
	background-color: #fff;
}
.pc-view{
	display:block;
}
.m-view{
	display:none;
}