/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul {
	margin: 0;
	padding: 0
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: 400
}

ul {
	list-style: none
}

button,input,select,textarea {
	margin: 0
}

html {
	box-sizing: border-box
}

*,::after,::before {
	box-sizing: inherit
}

img,video {
	height: auto;
	max-width: 100%
}

iframe {
	border: 0
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

td,th {
	padding: 0
}

td:not([align]),th:not([align]) {
	text-align: left
}

html {
	font-family: "Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei",Arial,sans-serif!important;
	font-size: 62.5%;
	color: #222;
	font-weight: 300
}

body {
	font-size: 1.5em
}

@font-face {
	font-weight:400;font-style:normal
}

img {
	max-width: 100%
}

a {
	color: #4f8ef7
}

.instagram {
	display: flex;
	flex-direction: column;
	min-height: 100vh
}

.content {
	flex: 1
}

#description {
	text-align: center
}

#description p {
	color: #565d69;
	font-size: 1.4em;
	text-align: center;
	margin-bottom: .5em
}

#description h1 {
	color: #1d2025
}

#logo {
	margin: 0px auto 0;
	width: 342px;
	height: 100px;
	vertical-align: middle
}

.txt-bold {
	font-weight: 400;
	color: #000
}

#screenshot {
	max-width: 800px;
	margin: auto;
	font-size: 0;
	text-align: center
}

.course .introduce-detail {
	margin-bottom: 20px
}

footer {
	margin-top: 40px;
	margin-bottom: 40px
}

nav {
	font-size: .5em;
	padding: 20px
}

.nav {
	display: inline-block;
	margin-bottom: 0;
	vertical-align: middle;
	color: #000
}

.nav li {
	display: inline-block;
	margin-bottom: 0;
	padding-right: .5em;
	font-size: 1.3em;
	cursor: default
}

.nav li.active {
	font-weight: 400
}

.logo {
	padding: 0 20px;
	margin: .5em auto 1em
}

.section {
	padding: 1rem 0 7rem;
	text-align: center;
	font-size: 2.5em
}

.section-description,.section-heading {
	margin-bottom: 1.2rem
}

.phone {
	position: relative;
	max-width: 80%;
	margin: 3rem auto -12rem
}

.phone+.phone {
	display: none
}

#qrcode {
	margin-bottom: 30px;
	color: #565d69;
	font-size: 1.4em;
	text-align: center
}

.qrcodes {
	margin-bottom: .5em
}

.weapp-qrcode,.wechat-qrcode {
	width: 160px
}

.introduce {
	padding-top: 3em;
	font-size: 1em
}

.introduce-item {
	margin-bottom: 5rem
}

.introduce .title {
	font-size: 1.4em
}

footer {
	text-align: center;
	color: #565d69
}

footer a {
	text-decoration: none;
	font-size: 15px;
	vertical-align: middle
}

footer .dot {
	font-size: 24px;
	display: inline-block;
	vertical-align: middle;
	color: #a0c2ff
}

@media (min-width:550px) {
	.section {
		padding: 12rem 0 11rem
	}

	.hero {
		padding-bottom: 12rem;
		height: 165px
	}

	.phone {
		position: absolute;
		top: -7rem;
		right: 3rem;
		max-height: 362px;
		z-index: 3
	}

	.phone+.phone {
		top: -6rem;
		display: block;
		max-width: 73.8%;
		right: 0;
		z-index: 2;
		max-height: 338px
	}

	.hero-heading {
		font-size: 2.4rem
	}

	.course img {
		width: 40%;
		text-align: center
	}
}

@media (min-width:750px) {
	.hero {
		height: 190px
	}

	.hero-heading {
		font-size: 2.6rem
	}

	.section {
		padding: 14rem 0 15rem
	}

	.hero {
		padding: 16rem 0 14rem
	}

	.section-description {
		max-width: 60%;
		margin-left: auto;
		margin-right: auto
	}

	.phone {
		top: -14rem;
		right: 5rem;
		max-height: 510px
	}

	.phone+.phone {
		top: -12rem;
		max-height: 472px
	}
}

.container {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
	display: none;
	box-sizing: border-box
}

.column,.columns {
	width: 100%;
	float: left;
	box-sizing: border-box
}

.container.show {
	display: block
}

@media (min-width:400px) {
	.container {
		width: 85%;
		padding: 0
	}
}

@media (min-width:550px) {
	.container {
		width: 80%
	}

	.column,.columns {
		margin-left: 4%
	}

	.column:first-child,.columns:first-child {
		margin-left: 0
	}

	.one.column,.one.columns {
		width: 4.66666666667%
	}

	.two.columns {
		width: 13.3333333333%
	}

	.three.columns {
		width: 22%
	}

	.four.columns {
		width: 30.6666666667%
	}

	.five.columns {
		width: 39.3333333333%
	}

	.six.columns {
		width: 48%
	}

	.seven.columns {
		width: 56.6666666667%
	}

	.eight.columns {
		width: 65.3333333333%
	}

	.nine.columns {
		width: 74%
	}

	.ten.columns {
		width: 82.6666666667%
	}

	.eleven.columns {
		width: 91.3333333333%
	}

	.twelve.columns {
		width: 100%;
		margin-left: 0
	}

	.one-third.column {
		width: 30.6666666667%
	}

	.two-thirds.column {
		width: 65.3333333333%
	}

	.one-half.column {
		width: 48%
	}

	.offset-by-one.column,.offset-by-one.columns {
		margin-left: 8.66666666667%
	}

	.offset-by-two.column,.offset-by-two.columns {
		margin-left: 17.3333333333%
	}

	.offset-by-three.column,.offset-by-three.columns {
		margin-left: 26%
	}

	.offset-by-four.column,.offset-by-four.columns {
		margin-left: 34.6666666667%
	}

	.offset-by-five.column,.offset-by-five.columns {
		margin-left: 43.3333333333%
	}

	.offset-by-six.column,.offset-by-six.columns {
		margin-left: 52%
	}

	.offset-by-seven.column,.offset-by-seven.columns {
		margin-left: 60.6666666667%
	}

	.offset-by-eight.column,.offset-by-eight.columns {
		margin-left: 69.3333333333%
	}

	.offset-by-nine.column,.offset-by-nine.columns {
		margin-left: 78%
	}

	.offset-by-ten.column,.offset-by-ten.columns {
		margin-left: 86.6666666667%
	}

	.offset-by-eleven.column,.offset-by-eleven.columns {
		margin-left: 95.3333333333%
	}

	.offset-by-one-third.column,.offset-by-one-third.columns {
		margin-left: 34.6666666667%
	}

	.offset-by-two-thirds.column,.offset-by-two-thirds.columns {
		margin-left: 69.3333333333%
	}

	.offset-by-one-half.column,.offset-by-one-half.columns {
		margin-left: 52%
	}
}

@media (min-width:1000px) {
	.hero-heading {
		font-size: 2.8rem
	}

	.phone {
		top: -16rem;
		max-height: 615px
	}

	.phone+.phone {
		top: -14rem;
		max-height: 570px
	}

	.logo {
		max-width: 960px;
		padding: 2em 0 4em;
		margin: 2em auto
	}

	.nav li {
		display: inline-block;
		margin-bottom: 0;
		padding-right: 2em;
		font-size: 1.4em
	}

	#logo {
		width: 342px;
		height: 100px
	}

	#description p {
		font-size: 2em
	}

	#qrcode {
		font-size: 1.8em
	}

	.introduce {
		font-size: 1.2em
	}

	#description-column {
		width: 40%
	}

	#phone-column {
		width: 55%;
		margin-left: 5%
	}
}

@media (min-width:550px) and (max-width:1000px) {
	#logo {
		width: 342px;
		height: 100px
	}

	#description {
		margin-top: 40px
	}

	#description-column {
		width: 40%
	}

	#phone-column {
		width: 55%;
		margin-left: 5%
	}
}