.green-main-bg {
	width: 100%;
	position: relative;
	background-image: url(../img/green_bg_new.jpg);
	background-size: cover;
	background-position: center;
	padding-bottom: 100px;
	padding-top: 20px
}

.green-main-bg .video-wrap {
	position: relative;
	width: 100%
}

.green-main-bg .video-wrap:before {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);
	transition: .2s
}

.green-main-bg .video-wrap.pause:before {
	display: none
}

.green-main-bg .video-wrap:hover:before {
	opacity: .5
}

.green-main-bg .video-wrap video {
	width: 100%;
	height: auto
}

.green-main-bg-content {
	padding-top: 70px;
	height: 420px;
	background-position: right top;
	background-repeat: no-repeat
}

.green-main-bg-content .cms-content b,.green-main-bg-content .cms-content h2,.green-main-bg-content .cms-content p {
	color: #fff;
	text-align: left
}

.green-main-bg-content .cms-content h2 {
	margin-bottom: 22px
}

.green-main-bg-content .cms-content b,.green-main-bg-content .cms-content strong {
	color: #fff
}

.green-main-bg .breadcrumbs .active {
	color: #17e063;
}

@media only screen and (max-width: 969px) {
	.green-main-bg {
		padding-bottom:50px
	}

	.green-main-bg-content {
		padding-top: 45px;
		height: 100%
	}

	.green-main-bg .custom_scroll {
		height: 190px
	}
}

@media only screen and (max-width: 749px) {
	.green-main-bg {
		padding-bottom:30px
	}

	.green-main-bg-content {
		padding-top: 20px
	}

	.green-main-bg-content b {
		font-weight: 400
	}

	.green-main-bg-content .cms-content h2 {
		font-size: 18px;
		margin-bottom: 12px
	}

	.green-main-bg .custom_scroll {
		height: 105px
	}
}

.green-main-info {
	position: absolute;
	width: 1140px;
	left: 50%;
	top: calc(100% - 80px);
	transform: translateX(-50%);
	background-color: #fff;
	box-shadow: 0 10px 20px 5px rgba(0,0,0,.1);
	display: flex;
	padding: 20px 36px;
	align-items: center
}

.green-main-info img {
	width: auto;
	margin-right: 40px
}

@media only screen and (max-width: 1169px) {
	.green-main-info {
		width:970px
	}

	.green-main-info img {
		width: 300px
	}
}

@media only screen and (max-width: 969px) {
	.green-main-info {
		width:750px;
		height: 200px;
		top: calc(100% - 20px)
	}

	.green-main-info .custom_scroll {
		height: auto;
	}

	.green-main-info img {
		width: 150px;
		margin-right: 20px
	}
}

@media only screen and (max-width: 749px) {
	.green-main-info {
		width: calc(100% - 15px);
		top: calc(100% - 10px);
		padding-right: 5px;
		padding-left: 15px;
		height: auto;
	}

	.green-main-info img {
		width: 100px;
		margin-right: 5px
	}

	.green-main-info .cms-content h2 {
		font-size: 18px;
		margin-bottom: 12px
	}

	.green-main-info .cms-content b {
		font-size: 14px;
		font-weight: 700
	}

	.green-main-info .cms-content p {
		font-size: 13px
	}
}

.green-main-info .cms-content h2 {
	color: #26a82b;
	text-align: left;
	margin-bottom: 22px
}

.green-main-info .cms-content b {
	color: #686868
}

.green-main-info .cms-content p {
	color: #686868
}

.green-content {
	padding-top: 340px;
	padding-bottom: 340px;
	width: 100%;
	background-color: #ecf0f4
}

.green-content h2 {
	margin-bottom: 22px
}

.green-content p {
	color: #686868;
	margin-bottom: 20px
}

@media only screen and (max-width: 969px) {
	.green-content {
		padding-top:250px;
		padding-bottom: 200px
	}
}

@media only screen and (max-width: 749px) {
	.green-content {
		padding-bottom:200px
	}
}

@media only screen and (max-width: 576px) {
	.green-content {
		padding-top: 350px;
	}
}

.green-sheet-wrap {
	margin-top: -240px
}

@media only screen and (max-width: 969px) {
	.green-sheet-wrap {
		margin-top:-145px
	}
}

.green-sheet-wrap .container-flex {
	justify-content: space-between;
	margin-bottom: 70px
}

@media only screen and (max-width: 969px) {
	.green-sheet-wrap .container-flex {
		justify-content: space-around
	}
}

@media only screen and (max-width: 749px) {
	.green-sheet-wrap .container-flex {
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 20px
	}
}

.green-sheet-wrap .col-6 {
	padding: 10px
}

.green-sheet-wrap .sheet-item {
	width: calc(50% - 5px);
	box-shadow: 0 10px 20px 5px rgba(0,0,0,.1);
	background-color: #fff
}

.green-sheet-wrap .sheet-img {
	position: relative;
	background-image: url(../img/green_bg_light.jpg);
	background-size: cover;
	height: 240px
}

.green-sheet-wrap .sheet-img img {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	height: calc(100% + 50px);
	width: auto
}

.green-sheet-wrap .sheet-title {
	position: absolute;
	left: 33px;
	right: 33px;
	bottom: 0;
	transform: translateY(50%);
	background-color: #27b829;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 500;
	color: #fff;
	display: inline-block;
	padding: 15px;
	text-align: center
}

.green-sheet-wrap .sheet-content {
	padding: 55px 33px 25px
}

.green-sheet-wrap .sheet-content p {
	font-size: 16px;
	line-height: 1.2;
	color: #686868;
	margin-bottom: 20px
}

.green-sheet-wrap .sheet-content b {
	font-size: 16px;
	font-weight: 400
}

.green-sheet-wrap .sheet-content li {
	font-size: 16px;
	line-height: 1.2;
	color: #686868;
	margin-bottom: 20px
}

.green-sheet-wrap .sheet-content li:before {
	content: '─';
	display: inline-block;
	color: #b21e28;
	font-weight: 700;
	margin-right: 6px
}

@media only screen and (max-width: 969px) {
	.green-sheet-wrap .sheet-content {
		padding-top:45px;
		padding-right: 15px
	}

	.green-sheet-wrap .sheet-content p {
		font-size: 13px
	}

	.green-sheet-wrap .sheet-content .custom_scroll {
		height: auto;
	}

	.green-sheet-wrap .sheet-title {
		left: 15px;
		right: 15px;
		font-size: 18px;
		padding: 15px 25px
	}

	.green-sheet-wrap .sheet-img {
		height: 144px
	}

	.green-sheet-wrap .sheet-item {
		max-width: 325px
	}
}

@media only screen and (max-width: 749px) {
	.green-sheet-wrap .sheet-img {
		height:144px
	}

	.green-sheet-wrap .sheet-title {
		padding: 15px
	}

	.green-sheet-wrap .sheet-item {
		width: 100%;
		margin-bottom: 60px
	}

	.green-sheet-wrap .sheet-item:last-child {
		margin-bottom: 0
	}

	.green-sheet-wrap .sheet-content {
		padding-right: 15px
	}

	.green-sheet-wrap .sheet-content b,.green-sheet-wrap .sheet-content li,.green-sheet-wrap .sheet-content p {
		font-size: 13px
	}

	.green-sheet-wrap .sheet-content li {
		margin-bottom: 10px
	}
}

.green-sheet-wrap-study {
	position: relative;
	z-index: 1;
	background-color: #fff;
	box-shadow: 0 0 15px rgba(47,58,72,.2);
	display: flex;
	padding: 20px 36px;
	align-items: center;
	margin-top: 80px
}

.green-sheet-wrap-study img {
	width: auto;
	margin-right: 40px
}

.green-sheet-wrap-study .cms-content p {
	color: #686868
}

.green-sheet-wrap-study .cms-content a {
	margin-top: 25px
}

@media only screen and (max-width: 969px) {
	.green-sheet-wrap-study img {
		width:135px;
		margin-right: 30px
	}
}

@media only screen and (max-width: 749px) {
	.green-sheet-wrap-study {
		margin-top:20px;
		padding: 25px 12px
	}

	.green-sheet-wrap-study a.btn {
		padding: 10px;
		font-size: 15px;
		margin-top: 10px
	}

	.green-sheet-wrap-study a.btn:before {
		font-size: 15px
	}

	.green-sheet-wrap-study img {
		width: 90px;
		margin-right: 5px
	}

	.green-sheet-wrap-study .cms-content {
		text-align: left
	}

	.green-sheet-wrap-study .cms-content h2 {
		font-size: 18px;
		text-align: left;
		margin-bottom: 10px
	}
}

.main-banner {
	position: relative;
	height: 500px;
	background-size: cover;
	text-align: center;
	background-attachment: fixed
}

.main-banner:after,.main-banner:before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	height: 100%;
	background-repeat: no-repeat;
	z-index: 1
}

.main-banner:before {
	background-image: url(../img/left-smoke.png);
	width: 160px;
	left: 0;
	background-position: bottom left;
	float: right
}

.main-banner:after {
	background-image: url(../img/right-smoke.png);
	width: 320px;
	background-position: bottom right;
	right: 0
}

@media only screen and (max-width: 1169px) {
	.main-banner {
		height:450px;
		margin-bottom: 307px
	}

	.main-banner-title {
		margin-top: 70px
	}

	.main-banner-teach {
		padding: 130px 0;
		min-height: inherit
	}

	.main-banner-teach .text-center {
		margin-bottom: 75px
	}

	.main-banner-teach .course {
		transform: translate(-50%,calc(-100% + 119px));
		max-width: 720px;
		justify-content: center
	}

	.main-banner-teach .course-item {
		width: 210px;
		margin: 0 10px;
		margin-bottom: 20px
	}
}

@media only screen and (max-width: 969px) {
	.main-banner {
		margin-bottom:0;
		height: 350px
	}

	.main-banner-title {
		font-size: 28px;
		margin-top: 45px;
		max-width: 320px
	}

	.main-banner-teach {
		padding-top: 0;
		padding-bottom: 80px
	}

	.main-banner-teach .hidden-sm {
		display: none
	}

	.main-banner-teach .course {
		position: relative;
		transform: translateY(-165px);
		left: auto;
		max-width: 100%
	}

	.main-banner-teach .course-item {
		width: 290px;
		margin: 0 15px 30px
	}

	.main-banner-teach .course-item:last-child {
		display: block
	}

	.main-banner-teach .course-link {
		height: auto;
		font-size: 18px;
		margin-bottom: 18px
	}

	.main-banner-teach .course-text {
		height: 48px;
		text-align: center;
		margin-bottom: 10px
	}

	.main-banner-teach .course-text * {
		font-size: 13px
	}

	.main-banner-teach .inline-container {
		margin-top: -122px
	}

	.main-banner-teach .inline-block {
		vertical-align: top
	}

	.main-banner-teach .main-banner-teach-content {
		padding-top: 13px
	}

	.main-banner-teach .main-banner-teach-content h3 {
		line-height: 23px
	}

	.main-banner-teach .main-banner-teach-content .red {
		margin-bottom: 20px
	}

	.main-banner-teach .main-banner-teach-content p {
		font-size: 13px
	}

	.main-banner-teach-video {
		width: 330px;
		margin-left: auto
	}
}

@media only screen and (max-width: 749px) {
	.main-banner-teach {
		padding-bottom: 35px
	}

	.main-banner-teach .course-item {
		margin: 0 auto;
		margin-bottom: 15px
	}

	.main-banner-teach .course-item:last-child {
		padding-bottom: 22px;
		margin-top: 20px
	}

	.main-banner-teach-content {
		display: none
	}

	.main-banner-teach .inline-container {
		margin-top: -160px
	}

	.main-banner-teach .inline-block {
		width: 100%
	}

	.main-banner-teach-video {
		width: 290px;
		margin: 15px auto 0
	}
}

.green-intro h1 {
	color: #26a82b;
	text-align: left;
	margin-bottom: 22px;
	font-size: 45px;
	line-height: 1.22;
	text-transform: none
}

@media only screen and (max-width: 969px) {
	.green-intro h1 {
		font-size:24px
	}
}

@media only screen and (max-width: 749px) {
	.green-intro h1 {
		font-size:18px;
		margin-bottom: 12px
	}
}

.breadcrumbs .green-breadCrumbs {
	color: #17e063
}

.green_poker h2 {
	text-align: left;
	margin-bottom: 22px;
	font-size: 45px
}

.green_poker p {
	font-size: 17px;
	line-height: 1.3;
	color: #686868;
	margin-bottom: 10px
}

.green_poker b,.green_poker strong {
	font-size: 20px;
	line-height: 1.3;
	color: #686868
}

.green_poker table {
	margin: 0;
	text-align: center;
	width: 100%
}

.green_poker table tr>th {
	font-size: 17px;
	line-height: 1.3;
	color: #fff;
	background-color: #37c13e;
	vertical-align: middle
}

.green_poker table tr>td,.green_poker table tr>th {
	padding: 11px 14px;
	width: 50%;
	border: 1px solid #ccc;
	text-align: center
}

.green_poker table tr>td {
	font-size: 17px;
	line-height: 1.3;
	background: #fff!important;
	vertical-align: middle
}

.green_poker table tr>td:last-child {
	font-size: 12px
}

.green_poker table tr>td span {
	display: block;
	margin: 0 auto 5px;
	width: 26px;
	height: 26px;
	border-radius: 100%;
	color: #fff;
	vertical-align: middle;
	line-height: 24px;
	font-size: 28px;
	font-weight: 700;
	background-color: orange
}

.green_poker table tr>td span.hr-line,.green_poker table tr>td span.icon-tick {
	font-size: 16px
}

.green_poker table tr>td span.icon-tick {
	background-color: #27b829
}

.green_poker table tr>td span.icon-tick:before {
	vertical-align: sub
}

.green_poker table tr>td span.hr-line {
	background-color: #b21e28
}

.green_poker table tr>td span.hr-line:before {
	content: '';
	display: inline-block;
	width: 10px;
	border-bottom: 3px solid #fff
}

.green_poker table tr>td span:before {
	vertical-align: middle;
	font-weight: 700
}

@media only screen and (max-width: 969px) {
	.green_poker h2 {
		font-size:24px
	}

	.green_poker p {
		font-size: 14px
	}

	.green_poker b,.green_poker strong {
		font-size: 15px
	}

	.green_poker table tr>th {
		font-size: 14px
	}

	.green_poker table tr>td,.green_poker table tr>th {
		padding: 5px 14px
	}

	.green_poker table tr>td {
		font-size: 13px
	}

	.green_poker table tr>td span {
		width: 16px;
		height: 16px;
		border-radius: 100%;
		color: #fff;
		font-size: 11px;
		vertical-align: middle;
		line-height: 15px
	}

	.green_poker table tr>td span.hr-line,.green_poker table tr>td span.icon-tick {
		font-size: 8px
	}

	.green_poker table tr>td span.hr-line:before {
		border-bottom: 2px solid #fff
	}
}

@media only screen and (max-width: 749px) {
	.green_poker h2 {
		text-align:center
	}

	.green_poker p {
		font-size: 13px
	}

	.green_poker b,.green_poker strong {
		font-size: 14px;
		font-weight: 700
	}

	.green_poker .main-phrase {
		margin-top: -110px;
		height: auto;
		padding-top: 130px;
		padding-bottom: 165px
	}
}