html,
body {
	background-color: #f7f7f7;
}

.title-container {
	padding-top: 60px;
	position: relative;
	z-index: 1;
}

.page-title {
	font-size: 40px;
	font-weight: bold;
	letter-spacing: 1.5px;
	position: relative;
}

.page-title::after {
	position: absolute;
	color: #f1f1f1;
	left: 0;
	top: 22px;
	z-index: -1;
}

.page-title span {
	font-size: inherit;
	color: #00a4ff;
}

.page-info {
	font-size: 17px;
	font-weight: bold;
	padding-top: 17px;
}

.title-container .more {
	display: block;
	color: #999999;
	letter-spacing: 1px;
	position: absolute;
	bottom: -14px;
	right: 0;
}

#left-subscribe {
	width: 70px;
	height: 180px;
	writing-mode: vertical-lr;
	background-color: #00a4ff;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	line-height: 70px;
	letter-spacing: 6px;
	position: fixed;
	top: 50%;
	left: 0;
	transform: translatey(-50%);
	cursor: pointer;
	z-index: 2;
}

#left-subscribe:hover {
	color: #fff;
	background-color: #2cc2ff;
}

#left-subscribe .close {
	width: 18px;
	height: 18px;
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translatex(-50%);
	display: none;
}

#left-subscribe .close img {
	width: 100%;
	height: 100%;
}

#subscribe-leads {
	width: 220px;
	height: 274px;
	background-color: #fff;
	border-radius: 5px;
	position: fixed;
	z-index: 2;
	box-sizing: border-box;
	padding: 0 16px;
	left: -220px;
	top: 50%;
	transform: translatey(-50%);
}

#subscribe-leads .close {
	width: 18px;
	height: 18px;
	position: absolute;
	top: -166px;
	right: 0;
}

#subscribe-leads .mascot {
	position: absolute;
	top: -148px;
}

#subscribe-leads .leads-title {
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 2px;
	text-align: center;
	padding-bottom: 16px;
	padding-top: 15px;
}

#subscribe-leads .name,
#subscribe-leads .phone,
#subscribe-leads .lesson-container {
	width: 100%;
	background-color: #f7f7f7;
	height: 44px;
	box-sizing: border-box;
	padding-left: 22px;
	margin-bottom: 8px;
	border-radius: 5px;
}

#subscribe-leads .lesson-container {
	position: relative;
	line-height: 44px;
	cursor: default;
	background-image: url(/uploads/image/si/subscribe-icon-down.png);
	background-position: 144px center;
}

#subscribe-leads .select-lesson {
	color: #999999;
}

#subscribe-leads .lesson {
	width: 100%;
	position: absolute;
	top: 44px;
	left: 0;
	background-color: #fff;
	display: none;
}

#subscribe-leads .lesson li {
	color: #999999;
	height: 44px;
	line-height: 44px;
	padding-left: 22px;
	cursor: default;
}

#subscribe-leads .lesson li:hover {
	background-color: #f7f7f7;
}

#subscribe-leads .leads-btn {
	width: 100%;
	height: 44px;
	background-color: #00a4ff;
	text-align: center;
	line-height: 44px;
	font-size: 18px;
	color: #fff;
	border-radius: 5px;
	font-weight: bold;
	letter-spacing: 2px;
}

#subscribe-leads .leads-btn:hover{
	color: #ffffff;
	font-weight: bold;
	background-color: #2cc2ff;
	cursor: pointer;
}

#tool {
	width: 60px;
	position: fixed;
	top: 50%;
	right: 0;
	transform: translatey(-50%);
	z-index: 2;
}

#tool .back-top {
	height: 43px;
	font-size: 12px;
	text-align: center;
	color: #929ba9;
	background-color: #fff;
	box-sizing: border-box;
	padding-top: 24px;
	background-image: url(/uploads/image/si/tool-icon-up.png);
	background-position: center 8px;
	margin-bottom: 18px;
	border-radius: 5px;
	letter-spacing: 0.5px;
	cursor: pointer;
}

#tool .tool-list {
	border-radius: 5px;
	overflow: hidden;
}

#tool .tool-list li {
	font-size: 12px;
	text-align: center;
	color: #929ba9;
	height: 69px;
	box-sizing: border-box;
	border-bottom: 1px solid #f7f7f7;
	background-color: #fff;
	padding-top: 48px;
	background-position: center 12px;
	letter-spacing: 0.5px;
	cursor: pointer;
}

#tool .tool-list li a {
	font-size: 12px;
	text-align: center;
	color: #929ba9;
	height: 69px;
	box-sizing: border-box;
	border-bottom: 1px solid #f7f7f7;
	background-color: #fff;
	background-position: center 12px;
	cursor: pointer;
}

#tool .tool-list li a:hover {
	color: #fff;
	background-color: #00a4ff;
}

#tool .tool-list li:hover {
	color: #fff;
	background-color: #00a4ff;
}

#tool .service {
	background-image: url(/uploads/image/si/tool-icon-service.png);
}

#tool .subscribe {
	background-image: url(/uploads/image/si/tool-icon-subscribe.png);
}

#tool .data {
	background-image: ;
}

#tool .buy {
	background-image: url(/uploads/image/si/tool-icon-buy.png);
}

#tool .qrcode {
	background-image: url(/uploads/image/si/tool-icon-qrcode.png);
}



#tool .service:hover {
	background-image: url(/uploads/image/si/tool-icon-service-active.png);
}

#tool .subscribe:hover {
	background-image: url(/uploads/image/si/tool-icon-subscribe-active.png);
}

#tool .data:hover {
	background-image: url(/uploads/image/si/tool-icon-data-active.png);
}

#tool .buy:hover {
	background-image: url(/uploads/image/si/tool-icon-buy-active.png);
}

#tool .qrcode:hover {
	background-image: url(/uploads/image/si/tool-icon-qrcode-active.png);
}

#tool .qr-code {
	position: absolute;
	width: 100px;
	height: 100px;
	bottom: -20px;
	left: -120px;
	box-sizing: border-box;
	padding: 10px;
	border-radius: 5px;
	background-color: #fff;
	display: none;
}

#tool .qr-code img {
	width: 100%;
	height: 100%;
}

#tool .qr-code::before {
	content: "";
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translatey(-50%);
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-left: 10px solid #fff;
	border-bottom: 5px solid transparent;
}

#dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 24px;
	background-color: #fff;
	padding: 20px;
	border-radius: 5px;
	display: none;
	z-index: 3;
}

#dialog .close {
	width: 20px;
	height: 20px;
	background-color: #409eff;
	position: absolute;
	top: -10px;
	right: -10px;
}

#teacher {
	width: 100%;
	height: 620px;
	background-image: url(/uploads/image/si/teacher-bg.png);
	background-size: cover;
	background-position: center;
}

#teacher .page-title,
#teacher .page-info {
	color: #fff;
}

#teacher .page-title::after {
	content: "faculty";
	color: #86ccfd;
}

#teacher .content {
	justify-content: space-between;
	padding: 26px 0 58px;
}

#teacher .teacher-container {
	width: 893px;
	height: 402px;
}

#teacher .teacher-detail {
	width: 100%;
	height: 275px;
	border-radius: 5px;
	margin-bottom: 51px;
	padding-left: 55px;
	box-sizing: border-box;
	padding-top: 50px;
	position: relative;
}

#teacher .teacher-head {
	width: 100%;
	height: 76px;
	border-radius: 5px;
	justify-content: space-between;
}

#teacher .teacher-info {
	width: 370px;
	padding-right: 42px;
}

#teacher .teacher-big-pic {
	width: 334px;
	height: 248px;
	background-image: url(/uploads/image/si/teacher-small-bg.png);
	background-size: cover;
	position: absolute;
	bottom: 0;
	right: 93px;
}

#teacher .teacher-big-pic img {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translatex(-50%);
}

#teacher .teacher-big-pic:hover{
	transform: scale(1.05);transition: all 0.3s linear; 
}

#teacher .teacher-name {
	font-size: 22px;
	color: #fff;
	letter-spacing: 2px;
	padding-bottom: 15px;
}

#teacher .teacher-intro {
	line-height: 20px;
	color: #fff;
}

#teacher .teacher-head .inner {
	width: 134px;
	height: 76px;
}

#teacher .flow {
	width: 280px;
	height: 402px;
	border-radius: 5px;
	background-color: #fff;
	box-sizing: border-box;
	padding: 40px 26px 0 26px;
}

#teacher .slogan {
	font-size: 24px;
	font-weight: bold;*
	line-height: 30px;
	padding-bottom: 46px;
}

#teacher .slogan span {
	color: #00a4ff;
	font-size: inherit;
}

#teacher .pointer {
	justify-content: space-between;
	flex-wrap: wrap;
	width: 220px;
	height: 137px;
	padding-bottom: 50px;
}

#teacher .pointer li {
	color: #999999;
	width: 93px;
	height: 30px;
	box-sizing: border-box;
	padding-left: 37px;
	line-height: 30px;
	margin-bottom: 23px;
}

#teacher .flow a {
	width: 100%;
	height: 44px;
	line-height: 44px;
	background-color: #00a4ff;
	text-align: center;
	color: #fff;
	border-radius: 5px;
	letter-spacing: 1px;
}

#teacher .flow a:hover {
	background-color: #2cc2ff;
}

#teacher .pointer li:nth-child(1) {
	background-image: url(/uploads/image/si/teacher-icon-01.png);
}

#teacher .pointer li:nth-child(2) {
	background-image: url(/uploads/image/si/teacher-icon-02.png);
}

#teacher .pointer li:nth-child(3) {
	background-image: url(/uploads/image/si/teacher-icon-03.png);
}

#teacher .pointer li:nth-child(4) {
	background-image: url(/uploads/image/si/teacher-icon-04.png);
}

#teacher .pointer li:nth-child(5) {
	background-image: url(/uploads/image/si/teacher-icon-05.png);
}

#teacher .pointer li:nth-child(6) {
	background-image: url(/uploads/image/si/teacher-icon-06.png);
}

#works .page-title::after {
	content: "student works";
}

#works .content {
	padding-top: 54px;
	justify-content: space-between;
	flex-wrap: wrap;
}

#works .game {
	width: 280px;
	background-color: #fff;
	border-radius: 5px;
	overflow: hidden;
}

#works .game-pic {
	display: block;
	width: 280px;
	height: 166px;
	background-color: #e9e9e9;
	border-radius: 5px;
	overflow: hidden;
}

#works .game-pic img {
	width: 100%;
	height: 100%;
	transition: all 0.3s linear;
}

#works .game-pic:hover img {
	transform: scale(1.05);
}

#works .game-name {
	display: block;
	font-size: 18px;
	/*font-weight: bold;*/
	padding-top: 15px;
	padding-left: 20px;
}

#works .game-name:hover {
	color: #2cc2ff;

}

#works .game-studio {
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 29px;
}

#works .game:nth-child(1),
#works .game:nth-child(2),
#works .game:nth-child(3),
#works .game:nth-child(4) {
	margin-bottom: 20px;
}

#match .page-title::after {
	content: "student match";
}

#match .content {
	padding-top: 54px;
	justify-content: space-between;
	flex-wrap: wrap;
}

#match .game {
	width: 280px;
	background-color: #fff;
	border-radius: 5px;
	overflow: hidden;
}

#match .game-pic {
	display: block;
	width: 280px;
	height: 166px;
	background-color: #e9e9e9;
	border-radius: 5px;
	overflow: hidden;
}

#match .game-pic img {
	width: 100%;
	height: 100%;
	transition: all 0.3s linear;
}

#match .game-pic:hover img {
	transform: scale(1.05);
}

#match .game-name {
	display: block;
	font-size: 16px;
	/*font-weight: bold; */
	padding-top: 15px;
	padding-left: 20px;
	line-height: 22px
}

#match .game-name:hover {
	color: #2cc2ff;

}

#match .game-studio {
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 20px;
}

#match .game:nth-child(1),
#match .game:nth-child(2),
#match .game:nth-child(3),
#match .game:nth-child(4) {
	margin-bottom: 20px;
}


#environment .page-title::after {
	content: "teaching environment";
}

#environment .content {
	padding-top: 54px;
	justify-content: space-between;
	flex-wrap: wrap;
}

#environment .inner {
	width: 280px;
	height: 252px;
	background-color: #fff;
	overflow: hidden;
	border-radius: 5px;
}

#environment .pic {
	width: 280px;
	height: 204px;
}

#environment .pic img {
	width: 100%;
	height: 100%;
}

#environment .pic img:hover{
	transform: scale(1.1);transition: all 0.3s linear; 
}

#environment .address {
	font-size: 18px;
	/*font-weight: bold;*/
	padding-left: 20px;
	padding-top: 8px;
	letter-spacing: 1.5px;
}

#environment .address:hover {
	color: #2cc2ff;

}

#environment .inner:nth-child(1),
#environment .inner:nth-child(2),
#environment .inner:nth-child(3),
#environment .inner:nth-child(4) {
	margin-bottom: 25px;
}

#course .page-title::after {
	content: "tutorial information";
}

#course .content {
	padding-top: 58px;
	justify-content: space-between;
	align-items: flex-start;
	padding-bottom: 114px;
}

#course .lesson-list {
	background-color: #fff;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	overflow: hidden;
}

#course .lesson-list li {
	width: 242px;
	height: 80px;
	border-left: 2px solid #00a4ff;
	box-sizing: border-box;
	font-size: 24px;
	line-height: 80px;
	color: #fff;
	background-color: #00a4ff;
	border-bottom: 1px solid #009ef6;
	padding-left: 80px;
	cursor: pointer;
}

#course .lesson-list li:nth-child(1) {
	background-image: url(/uploads/image/si/course-icon01.png), url(/uploads/image/si/course-icon-square.png);
	background-position: 25px center, 14px center;
}

#course .lesson-list li:nth-child(2) {
	background-image: url(/uploads/image/si/course-icon02.png), url(/uploads/image/si/course-icon-square.png);
	background-position: 22px center, 14px center;
}

#course .lesson-list li:nth-child(3) {
	background-image: url(/uploads/image/si/course-icon03.png), url(/uploads/image/si/course-icon-square.png);
	background-position: 22px center, 14px center;
}

#course .lesson-list li:nth-child(4) {
	background-image: url(/uploads/image/si/course-icon04.png), url(/uploads/image/si/course-icon-square.png);
	background-position: 22px center, 14px center;
}

#course .lesson-list li:nth-child(5) {
	background-image: url(/uploads/image/si/course-icon05.png), url(/uploads/image/si/course-icon-square.png);
	background-position: 22px center, 14px center;
}

#course .lesson-list li:last-child {
	border-bottom: none;
}

#course .lesson-list .lesson-li-active {
	background-color: #fff;
	color: #333;
	background-image: url(/uploads/image/si/course-icon-circle.png);
	background-position: 14px center;
}

#course .news-container {
	width: 958px;
	position: relative;
}

#course .news-list {
	position: absolute;
	width: 100%;
	background-color: #fff;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	padding: 0 33px 0 65px;
	box-sizing: border-box;
	top: 0;
	left: 0;
	display: none;
}

#course .news-list li {
	justify-content: space-between;
	padding: 16px 0 17px;
	align-items: flex-start;
	border-bottom: 2px solid #f7f7f7;
}

#course .news-list li:last-child {
	border-bottom: none;
}

#course .news-list li:hover{
	transform: scale(1.03); 
}


#course .news-pic {
	width: 158px;
	height: 106px;
	background-color: #e9e9e9;
	overflow: hidden;
	border-radius: 5px;
}

#course .news-pic img {
	width: 100%;
	height: 100%;
}

#course .news-pic:hover{
	transform: scale(1.05); 
}

#course .news-detail {
	display: block;
	width: 702px;
	align-self: center;
	padding-left: 24px;
	box-sizing: border-box;
}

#course .news-title {
	font-size: 18px;
	margin-bottom: 20px;
	position: relative;
}

#course .news-title:hover {
	color: #2cc2ff;
}

#course .news-title span {
	position: absolute;
	bottom: 0;
	right: 0;
	color: #a0a0a0;
}

#course .news-info {
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: #a0a0a0;
}

#advantage .page-title::after {
	content: "the advantage of learning children's programming";
}

#advantage .content {
	padding-top: 24px;
	height: 340px;
	justify-content: space-between;
}

#advantage .merit-container {
	width: 894px;
	justify-content: space-between;
	flex-wrap: wrap;
}

#advantage .merit {
	width: 280px;
	height: 160px;
	background-color: #fff;
	border-radius: 5px;
	justify-content: space-between;
	align-items: flex-start;
}

#advantage .merit:hover {
	box-shadow: 15px 15px 35px rgba(212, 212, 212, 0.35);
}

#advantage .merit-icon {
	width: 110px;
	height: 110px;
	align-self: center;
}

#advantage .merit-icon img {
	width: 100%;
	height: 100%;
}

#advantage .merit-icon img:hover{
	transform: scale(1.03);
}

#advantage .merit-intro {
	width: 163px;
	padding-right: 19px;
	box-sizing: border-box;
	padding-top: 44px;
}

#advantage .merit-name {
	font-size: 18px;
	font-weight: bold;
	padding-bottom: 18px;
}

#advantage .merit-explain {
	line-height: 20px;
	font-size: 12px;
}

#advantage .merit:nth-child(1),
#advantage .merit:nth-child(2),
#advantage .merit:nth-child(3) {
	margin-bottom: 20px;
}

#advantage .school {
	width: 280px;
	border-radius: 5px;
	background-color: #fff;
	padding: 24px 20px;
	box-sizing: border-box;
}

#advantage .school-link {
	display: block;
	width: 100%;
	height: 44px;
	font-size: 22px;
	color: #fff;
	line-height: 44px;
	text-align: center;
	background-color: #00a4ff;
	letter-spacing: 2px;
	border-radius: 5px;
}

#advantage .school-link:hover {
	color: #fff;
	background-color: #2cc2ff;
}

#advantage .school-name {
	width: 240px;
	height: 40px;
	box-sizing: border-box;
	padding-left: 44px;
	background-image: url(/uploads/image/si/advantage-icon-school.png);
	background-position: 0 center;
}

#advantage .school-wrap {
	width: 196px;
	height: 40px;
	overflow: hidden;
	background-color: #f5f5f5;
	border-radius: 20px;
	align-items: center;
	overflow: hidden;
}

#advantage .school-wrap .swiper-container {
	width: 100%;
	height: 16px;
}

#advantage .school-wrap .swiper-slide {
	width: 100%;
	height: 16px;
	padding-left: 20px;
	box-sizing: border-box;
}

#advantage .school-environment {
	width: 240px;
	height: 176px;
	border-radius: 5px;
	overflow: hidden;
	margin: 17px 0 15px;
}

#advantage .school-environment .swiper-slide {
	width: 100%;
	height: 100%;
	background-color: #e9e9e9;
}

#advantage .school-environment .swiper-slide img {
	width: 100%;
	height: 100%;
}

#advantage .school-environment .swiper-slide img:hover{
	transform: scale(1.1);transition: all 0.3s linear; 
}

#introduction .page-title::after {
	content: "course introduction";
}

#introduction .content {
	padding-top: 25px;
	justify-content: space-between;
	padding-bottom: 56px;
}

#introduction .lesson-container {
	width: 893px;
	height: 400px;
	background-color: #fff;
	border-radius: 5px;
	overflow: hidden;
}

#introduction .lesson-list {
	width: 242px;
	background-color: #00a4ff;
	box-sizing: border-box;
	padding-left: 2px;
}

#introduction .lesson-list li {
	width: 100%;
	height: 100px;
	box-sizing: border-box;
	border-bottom: 1px solid #009ef6;
	padding: 25px 0 25px 80px;
	position: relative;
}

#introduction .lesson-list li .lesson-name {
	font-size: 16px;
	color: #fff;
	padding-top: 5px;
}

#introduction .lesson-list li .lesson-age {
	font-size: 12px;
	color: #fff;
	padding-top: 10px;
}

#introduction .lesson-list li:last-child {
	border-bottom: none;
}

#introduction .icon-area {
	width: 50px;
	height: 50px;
	background-color: #fff;
	position: absolute;
	top: 50%;
	transform: translatey(-50%);
	left: 15px;
	border-radius: 10px;
	transition: all 0.2s linear;
	background-position: center;
}

#introduction .lesson-list li:nth-child(1) .icon-area {
	background-image: url(/uploads/image/si/introduction-icon04.png);
}

#introduction .lesson-list li:nth-child(2) .icon-area {
	background-image: url(/uploads/image/si/introduction-icon01.png);
}

#introduction .lesson-list li:nth-child(3) .icon-area {
	background-image: url(/uploads/image/si/introduction-icon02.png);
}

#introduction .lesson-list li:nth-child(4) .icon-area {
	background-image: url(/uploads/image/si/introduction-icon03.png);
}

#introduction .lesson-list li:hover {
	background-color: #00b4ff;
}

#introduction .lesson-list li:hover .icon-area {
	border-radius: 50%;
}

#introduction .lesson-detail {
	width: 651px;
	height: 250px;
	padding: 25px 25px 0 24px;
	box-sizing: border-box;
}

#introduction .lesson-intro {
	width: 100%;
	box-sizing: border-box;
	justify-content: space-between;
	overflow: hidden;
}

#introduction .left {
	width: 370px;
}

#introduction .lesson-title {
	font-size: 26px;
	height: 28px;
	padding-left: 28px;
	background-image: url(/uploads/image/si/introduction-icon-start.png);
	background-position: 0 center;
	line-height: 24px;
	margin-bottom: 17px;
	letter-spacing: 1px;
	width: 100%;
	box-sizing: border-box;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-weight: bold;
}

#introduction .lesson-info {
	width: 100%;
	height: 100px;
	overflow: hidden;
	line-height: 20px;
	font-size: 12px;
	color: #999999;
}

#introduction .lesson-pic {
	width: 218px;
	height: 148px;
	background-color: #e9e9e9;
	border-radius: 5px;
	overflow: hidden;
}

#introduction .lesson-pic img {
	width: 100%;
	height: 100%;
}

#introduction .lesson-pic:hover{
	transform: scale(1.1);
	transition: all 0.3s linear; 
}

#introduction .lesson-link {
	width: 100%;
	border-bottom: 1px solid #f7f7f7;
	box-sizing: border-box;
	padding: 5px 0 28px 31px;
}

#introduction .lesson-link a:hover {
	color: #f92604;
}

#introduction .lesson-link>a:nth-child(1) {
	width: 150px;
	height: 38px;
	line-height: 38px;
	color: #fff;
	background-color: #00a4ff;
	text-align: center;
	border-radius: 19px;
	cursor: pointer;
}

#introduction .lesson-link>a:nth-child(1):hover {
	color: #fff;
	background-color: #2cc2ff;
}

#introduction .lesson-link>a:nth-child(2) {
	width: 115px;
	height: 38px;
	line-height: 38px;
	text-align: center;
}

#introduction .lesson-flow {
	justify-content: space-between;
}

#introduction .lesson-flow .inner {
	width: 94px;
	font-size: 16px;
	padding-top: 114px;
	text-align: center;
	background-position: center;
}

#introduction .lesson-flow .inner:nth-child(1) {
	background-image: url(/uploads/image/si/introduction-lesson01.png);
}

#introduction .lesson-flow .inner:nth-child(2) {
	background-image: url(/uploads/image/si/introduction-lesson02.png);
}

#introduction .lesson-flow .inner:nth-child(3) {
	background-image: url(/uploads/image/si/introduction-lesson03.png);
}

#introduction .lesson-flow .inner:nth-child(4) {
	background-image: url(/uploads/image/si/introduction-lesson04.png);
}

#introduction .lesson-flow .inner:nth-child(5) {
	background-image: url(/uploads/image/si/introduction-lesson05.png);
}

#introduction .lesson-flow .inner:nth-child(6) {
	background-image: url(/uploads/image/si/introduction-lesson06.png);
}

#introduction .leads {
	width: 280px;
	height: 400px;
	background-color: #fff;
	border-radius: 5px;
	position: relative;
	padding: 40px 26px 0 26px;
	box-sizing: border-box;
}

#introduction .leads-btn:hover {
	color: #fff;
	background-color: #2cc2ff;
}

#introduction .xmj {
	width: 119px;
	height: 131px;
	position: absolute;
	top: 0;
	right: 0;
}

#introduction .leads-title {
	font-size: 24px;
	font-weight: bold;
	line-height: 30px;
	margin-bottom: 37px;
}

#introduction .leads-title span {
	color: #00a4ff;
	font-size: inherit;
}

#introduction .name,
#introduction .phone {
	width: 100%;
	height: 44px;
	background-color: #f6f6f6;
	margin-bottom: 22px;
	box-sizing: border-box;
	padding-left: 20px;
	border-radius: 5px;
}

#introduction .choose-lesson {
	width: 100%;
	height: 44px;
	background-color: #f6f6f6;
	margin-bottom: 22px;
	position: relative;
	box-sizing: border-box;
	border-radius: 5px;
	line-height: 44px;
	background-image: url(/uploads/image/si/subscribe-icon-down.png);
	background-position: 196px center;
}

#introduction .select-lesson {
	color: #999;
	padding-left: 20px;
}

#introduction .leads-btn {
	width: 100%;
	height: 44px;
	text-align: center;
	line-height: 44px;
	background-color: #00a4ff;
	color: #fff;
	font-size: 22px;
	border-radius: 5px;
	cursor: pointer;
}

#introduction .lesson {
	width: 100%;
	background-color: #fff;
	border-radius: 5px;
	overflow: hidden;
	display: none;
}

#introduction .lesson li {
	padding-left: 20px;
	height: 44px;
	line-height: 44px;
	color: #999;
}

#introduction .lesson li:hover {
	background-color: #f6f6f6;
}

#footer {
	background-color: #2e3033;
}

#footer .content {
	padding-top: 36px;
}

#footer .top {
	justify-content: space-between;
	border-bottom: 2px solid #3a3d41;
	padding-bottom: 29px;
}

#footer .logo {
	width: 99px;
	height: 31px;
	margin-bottom: 32px;
}

#footer .logo img {
	width: 100%;
	height: 100%;
}

#footer .column-name {
	color: #fff;
	letter-spacing: 0.5px;
}

#footer .column-content {
	font-size: 12px;
	color: #b5b6b6;
}

#footer .column-content:hover {
	color: #ff3a32;
}

#footer .info div>span:nth-child(1) {
	padding-right: 20px;
}

#footer .info>div {
	margin-bottom: 14px;
}

#footer .menu-container {
	width: 659px;
	justify-content: space-between;
}

#footer .menu .column-name {
	margin-bottom: 20px;
}

#footer .menu li {
	margin-bottom: 13px;
}

#footer .menu li a:hover {
	color: #f92604;
}

#footer .qr-pic {
	width: 92px;
	height: 92px;
	background-color: #fff;
	margin-bottom: 18px;
	box-sizing: border-box;
	padding: 5px;
	border-radius: 5px;
}

#footer .qr-pic img {
	width: 100%;
	height: 100%;
}

#footer .qr-pic img:hover{
	transform: scale(1.05); 
}

#footer .qr-container .column-content {
	text-align: center;
}

#footer .bottom {
	padding: 20px 0 90px;
}

#footer .friends-container {
	justify-content: space-between;
}

#footer .friends-container .column-name {
	padding-right: 30px;
}

#footer .friends {
	width: 1100px;
	flex-wrap: wrap;
}

#footer .friends li {
	padding: 0 30px;
	margin-bottom: 10px;
}

#footer .friends li a {
	color: #b5b6b6;
	font-size: 12px;
}



#footer .friends li a:hover {
	color: #ff3a32;
}

#footer .friends li a:hover {
	color: #f92604;
}

#footer .right {
	color: #b5b6b6;
	font-size: 12px;
	padding-top: 20px;
	text-align: center;
}

#footer .right a {
	display: inline-block;
	/* padding-left: 2px; */
}

#footer .right a:hover {
	color: #f92604;
}

#navs .content {
	padding-top: 12px;
}

#navs .top {
	justify-content: space-between;
}

#navs .navs-menu {
	width: 202px;
	height: 368px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom right, #32c8ff, #00a4ff);
	box-sizing: border-box;
	padding: 8px 0 8px 2px;
	flex-direction: column;
	justify-content: space-between;
}

#navs .navs-menu li a {
	height: 44px;
	padding-left: 30px;
	line-height: 44px;
	color: #fff;
	background-image: url(/uploads/image/si/navs-icon-arrow.png);
	background-position: 165px center;
}

#navs .navs-menu li a:hover {
	background-color: #fff;
	color: #00a4ff;
	font-size: 16px;
}

#navs .banner {
	width: 988px;
	height: 308px;
	background-color: #e9e9e9;
	border-radius: 5px;
	margin-bottom: 10px;
}

#navs .banner .swiper-slide {
	width: 100%;
	height: 308px;
	overflow: hidden;
	border-radius: 5px;
}

#navs .banner img {
	width: 100%;
	height: 100%;
	cursor: pointer;
}

#navs .navs-btns {
	width: 988px;
	height: 50px;
	border-radius: 5px;
	justify-content: space-between;
}

#navs .navs-btns a {
	width: 160px;
	height: 50px;
	box-sizing: border-box;
	padding-left: 65px;
	line-height: 50px;
	color: #fff;
	border-radius: 5px;
	background-position: 24px center, center;
	font-size: 16px;
}

#navs .navs-btns a:nth-child(1) {
	background-image: url(/uploads/image/si/navs-btn-icon01.png), url(/uploads/image/si/navs-btn-bg01.png);
}
#navs .navs-btns a:nth-child(1):hover{
transform: scale(1.04);
}

#navs .navs-btns a:nth-child(2) {
	background-image: url(/uploads/image/si/navs-btn-icon02.png), url(/uploads/image/si/navs-btn-bg02.png);
}
#navs .navs-btns a:nth-child(2):hover{
transform: scale(1.04);
}

#navs .navs-btns a:nth-child(3) {
	background-image: url(/uploads/image/si/navs-btn-icon03.png), url(/uploads/image/si/navs-btn-bg03.png);
}
#navs .navs-btns a:nth-child(3):hover{
transform: scale(1.04);
}

#navs .navs-btns a:nth-child(4) {
	background-image: url(/uploads/image/si/navs-btn-icon04.png), url(/uploads/image/si/navs-btn-bg04.png);
}

#navs .navs-btns a:nth-child(4):hover{
transform: scale(1.04);
}
#navs .navs-btns a:nth-child(5) {
	background-image: url(/uploads/image/si/navs-btn-icon05.png), url(/uploads/image/si/navs-btn-bg05.png);
}
#navs .navs-btns a:nth-child(5):hover{
transform: scale(1.04);
}

#navs .navs-btns a:nth-child(6) {
	background-image: url(/uploads/image/si/navs-btn-icon06.png), url(/uploads/image/si/navs-btn-bg06.png);
}
#navs .navs-btns a:nth-child(6):hover{
transform: scale(1.04);
}

#navs .bottom {
	height: 80px;
	background-color: #fff;
	margin-top: 12px;
	border-radius: 5px;
	justify-content: space-around;
}

#navs .bottom .inner {
	height: 35px;
	align-self: center;
}

#navs .bottom .inner:nth-child(1) {
	width: 150px;
}

#navs .bottom .inner:nth-child(2) {
	width: 305px;
}

#navs .bottom .inner:nth-child(3) {
	width: 140px;
}

#navs .bottom .inner:nth-child(4) {
	width: 140px;
}

#navs .bottom .inner:nth-child(5) {
	width: 140px;
}

#navs .bottom .inner:nth-child(6) {
	width: 105px;
}

#navs .bottom .inner:nth-child(7) {
	width: 105px;
}

#navs .area {
	width: 28px;
	color: #00a4ff;
	font-size: 16px;
	writing-mode: vertical-lr;
	line-height: 28px;
	letter-spacing: 1px;
}

#navs .city-container {
	flex-wrap: wrap;
}

#navs .city-container a {
	font-size: 12px;
	color: #999999;
	padding: 0 5px;
}

#navs .city-container a:nth-child(1) {
	margin-bottom: 3px;
}

#navs .city-container a:hover {
	color: #00a4ff;
	text-decoration: underline;
}