@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline
}

aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
	/* overflow: hidden */
}

body {
	line-height: 1
}

#nav.top_section ul li a:hover {
	color: #000;
}

#nav a:hover {
	color: #636363;
}

ol,
ul {
	word-wrap: break-word;
	margin: 0 auto !important;
}

ol,
ul li {
	list-style: disc;
	padding-left: 0 !important;
}

table ul li {
	list-style-type: upper-alpha;
	padding: 0 !important;
	line-height: 120%;
}

.sub1 .right_sub li {
	color: #1c3675;
}

.sub2 .right_sub li {
	color: #b07227;
}

.teacher li {
	color: #fffc11;
}

body {
	-webkit-text-size-adjust: none
}

.owl-carousel .owl-stage-outer {
	overflow: visible !important;
}

body {
	-ms-overflow-style: scrollbar
}

table th {
	vertical-align: middle
}

html {
	box-sizing: border-box
}

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

body {
	font-family: FontAwesome, "Century Gothic", Arial, cwTeXYen, "Noto Sans TC", "微軟正黑體";
	font-size: 15px;
	font-weight: 100
}

@media screen and (max-width:1680px) {

	body,
	input,
	select,
	textarea {
		font-size: 14pt
	}
}

@media screen and (max-width:1280px) {

	body,
	input,
	select,
	textarea {
		font-size: 12pt
	}
}

@media screen and (max-width:360px) {

	body,
	input,
	select,
	textarea {
		font-size: 11pt
	}
}

textarea {
	width: 100%
}

a {
	text-decoration: none;
	color: inherit
}

a:hover {
	border-bottom-color: transparent
}

b,
strong {
	font-weight: 400
}

p {
	margin: 0
}

.boxpc {
	display: none;
}

.boxmb {
	display: block;
}

p.content {
	text-align: justify
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 300;
	line-height: 1.5;
	margin: 0 0 .7em 0;
	letter-spacing: -.025em
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
	text-decoration: none
}

h1 {
	font-size: 2.5em;
	line-height: 1.2
}

h2 {
	font-size: 1.5em
}

h3 {
	font-size: 1.25em
}

h4 {
	font-size: 1.1em
}

h5 {
	font-size: .9em
}

h6 {
	font-size: .7em
}

@media screen and (max-width:736px) {
	h1 {
		font-size: 2em
	}
}

pre {
	-webkit-overflow-scrolling: touch;
	font-family: "Courier New", monospace;
	font-size: .9em;
	margin: 0 0 2em 0
}

pre code {
	display: block;
	line-height: 1.75;
	padding: 1em 1.5em;
	overflow-x: auto
}

hr {
	border: 0;
	border-bottom: solid 1px;
	margin: 2em 0
}

hr.major {
	margin: 3em 0
}

.align-left {
	text-align: left
}

.align-center {
	text-align: center
}

.align-right {
	text-align: right
}

a:hover {
	color: #fff
}

b,
strong {
	color: #fff
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #fff
}

hr {
	border-bottom-color: rgba(255, 255, 255, .35)
}

form {
	margin: 0 0 2em 0
}

.ph {
	display: block
}

.s_web {
	display: none
}

label {
	display: block;
	font-size: .9em;
	font-weight: 400;
	margin: 0 0 1em 0
}

#nav ul li a {
	margin: 0 -2% 0 0 !important;
}

::-webkit-input-placeholder {
	opacity: 1
}

:-moz-placeholder {
	opacity: 1
}

::-moz-placeholder {
	opacity: 1
}

:-ms-input-placeholder {
	opacity: 1
}

label {
	color: #fff
}

img {
	width: 100%
}

ol {
	list-style: decimal;
	margin: 0 0 2em 0;
	padding-left: 1.25em
}

ol li {
	padding-left: .25em
}

dl {
	margin: 0 0 2em 0
}

dl dt {
	display: block;
	font-weight: 400;
	margin: 0 0 1em 0
}

.box1 .cont_mb .owl-theme .owl-nav.disabled+.owl-dots {
	margin-top: 40px !important;
}

#nav ul li a div {
	padding: 0 0 0 2px !important;
}

li a.youtube {
	border-right: none !important;
}

@media screen and (min-width:320px) {
	#nav ul li a {
		padding: 0 0.5em 0 0.35em !important;
	}
}

@media screen and (min-width:375px) {
	#nav ul li a {
		padding: 0 1em 0 0.1em !important;
	}

	.box1 .cont_mb .owl-theme .owl-nav.disabled+.owl-dots {
		margin-top: 45px !important;
	}
}

@media screen and (min-width:390px) {
	#nav ul li a {
		padding: 0 0.5em 0 0.4em !important;
	}

	.box1 .cont_mb .owl-theme .owl-nav.disabled+.owl-dots {
		margin-top: 55px !important;
	}
}

@media screen and (min-width:411px) {
	#nav ul li a {
		padding: 0 0.5em 0 0.9em !important;
	}

	.box1 .cont_mb .owl-theme .owl-nav.disabled+.owl-dots {
		margin-top: 75px !important;
	}
}

@media screen and (min-width:420px) {
	#nav ul li a {
		padding: 0 0.5em 0 1.1em !important;
	}
}

@media screen and (min-width:768px) {
	#nav ul li a {
		padding: 0 1em 0 0.5em !important;
	}
}

dl dd {
	margin-left: 2em
}

dl dt {
	color: #fff
}

#header {
	padding: 5em 5em 1em 5em;
	text-align: center
}

#header h1 {
	margin: 0 0 .25em 0
}

#header p {
	font-size: 1.25em;
	letter-spacing: -.025em
}

.owl-theme .owl-dots {
	margin: 2% auto 2% auto;
	position: relative;
    z-index: 9;
}

#nav {
	background-color: #fff;
	color: #fff;
	position: absolute;
	width: 100%;
	background-color: #7b1c20;
	border-top-left-radius: .25em;
	border-top-right-radius: .25em;
	cursor: default;
	text-align: center
}

#nav input,
#nav select,
#nav textarea {
	color: #636363
}

#nav a:hover {
	color: #636363
}

#nav b,
#nav strong {
	color: #636363
}

#nav h1,
#nav h2,
#nav h3,
#nav h4,
#nav h5,
#nav h6 {
	color: #636363
}

#nav blockquote {
	border-left-color: #ddd
}

#nav code {
	background: rgba(222, 222, 222, .25);
	border-color: #ddd
}

#nav hr {
	border-bottom-color: #ddd
}

@media screen and (min-width:480px) {
	#nav {
		text-align: right
	}
}

@media screen and (max-width:350px) {
	#nav ul li a {
		padding: 0 .5em 0 .0em !important
	}
}

.btn-top {
	position: fixed;
	right: 10px;
	bottom: 53px;
	z-index: 5;
	display: block;
	visibility: hidden;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 15px 0;
	width: 40px;
	height: 40px;
	border-radius: 100rem;
	background-color: #7b1c20;
	-webkit-box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
	box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
	color: #fff !important;
	text-align: center;
	font-size: 85%;
	opacity: 0;
	cursor: pointer;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	-o-box-sizing: border-box
}

.btn-top:active {
	position: fixed;
	right: 10px;
	bottom: 53px;
	z-index: 5;
	display: block;
	visibility: hidden;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 15px 0;
	width: 40px;
	height: 40px;
	border-radius: 100rem;
	background-color: #7b1c20;
	-webkit-box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
	box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
	color: #fff !important;
	text-align: center;
	font-size: 85%;
	opacity: 0;
	cursor: pointer;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	-o-box-sizing: border-box
}

.btn-top:active:hover {
	background-color: #fff;
	color: #7b1c20 !important;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}

.btn-top:focus {
	position: fixed;
	right: 10px;
	bottom: 53px;
	z-index: 5;
	display: block;
	visibility: hidden;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 15px 0;
	width: 40px;
	height: 40px;
	border-radius: 100rem;
	background-color: #7b1c20;
	-webkit-box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
	box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
	color: #fff !important;
	text-align: center;
	font-size: 85%;
	opacity: 0;
	cursor: pointer;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	-o-box-sizing: border-box
}

.btn-top:focus:hover {
	background-color: #fff;
	color: #7b1c20 !important;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}

.btn-top:hover {
	background-color: #fff;
	color: #7b1c20 !important;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}

.btn-go-form {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 5;
	display: inline-block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 7px 0 15px 0;
	width: 40px;
	height: 40px;
	border-radius: 100rem;
	background-color: #7b1c20;
	-webkit-box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
	box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
	color: #fff !important;
	text-align: center;
	letter-spacing: .5px;
	font-weight: 400;
	font-size: 75%;
	font-family: "Noto Sans TC", "微軟正黑體";
	line-height: 1.2;
	cursor: pointer;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	-o-box-sizing: border-box
}

.btn-go-form:hover {
	background-color: #fff;
	color: #7b1c20 !important;
	font-weight: 700;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}

.btn-top.cd-is-visible {
	visibility: visible;
	opacity: 1;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}

.btn-top.cd-fade-out {
	opacity: 1;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	z-index: 90
}

.edm-wrapper-default {
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%
}

.edm-wrapper {
	position: relative;
	margin: 0 auto
}

.secbox-sendForm {
	margin: -1% auto;
	background: #646190;
	position: relative;
}

@media only screen and (min-width:768px) {
	.secbox-sendForm {
		margin: -0.5% auto;
	}
}

.secbox-sendForm table {
	margin-bottom: 1.5%;
	background: #fff;
	color: #000
}

.secbox-sendForm section {
	color: #000
}

.secbox-sendForm .red_word {
	margin-bottom: 1.5%;
	color: #fff;
}

.secbox-sendForm u {
	color: #fff;
}

.sendform_bottom {
	color: #fff;
}

.send {
	margin-top: 3rem;
	cursor: pointer
}

.send a {
	border-radius: 0px;
	background: #ffc128;
	color: #000;
	font-weight: 700;
	font-size: 140%
}

.send a:hover {
	background: #dfce08;
}

.bottom_text {
	color: #fff;
	margin: 0 auto;
	text-align: center;
}

.red {
	color: #b00e0c
}

.green {
	color: #1f9922
}

.total-container {
	width: 100%;
	height: 100%
}

title span {
	color: red
}

.head_pc {
	display: none
}

.head_mb {
	position: relative;
	display: block;
	margin: 0 auto 0 auto;
	width: 100%
}

.btn-logo {
	position: absolute;
	top: 9%;
	left: 6%;
	z-index: 2;
	display: block;
	margin: 0 auto;
	width: 40%;
	height: 9%;
	background: 0 0;
	text-align: center;
	cursor: pointer
}

.btn-logo a {
	display: inline-block;
	width: 100%;
	height: 100%
}

.btn-logo img {
	width: 70%
}

.head_mb img {
	width: 100%
}

.yellow {
	color: #ffcb00
}

.hide {
	display: none !important
}

.rice_word {
	right: 0;
	display: inline-block;
	text-align: right;
	color: #c72200;
}

@media (min-width:0px) and (max-width:480px) {
	.overFlow-Center {
		width: 100%
	}

	.btn-logo {
		left: 4%;
		width: 38%;
		top: 19%;
		height: 14%;
		text-align: left;
	}

	.btn-logo img {
		width: 50%
	}

	.head_mb {
		margin: 5% auto -1% auto
	}

	.cell-hide {
		display: none
	}

	.flexBox {
		display: block
	}

	.edm-wrapper {
		padding: 0;
		width: 100%
	}

	.secbox-sendForm .edm-wrapper {
		margin: 0% auto;
		padding: 8% 0;
		width: 95%
	}
}

@media (min-width:1070px) and (max-width:9999px) {
	.overFlow-Center {
		width: 100%
	}

	.edm-wrapper {
		padding: 0;
		width: 100%
	}

	.secbox-sendForm .edm-wrapper {
		padding: 2% 0 5% 0;
		width: 80%
	}
}

@media only screen and (min-width:481px) {
	.head_mb {
		margin: 0 auto -1% auto;
	}

	.btn-top {
		right: 15px;
		bottom: 53px;
		padding: 15px 0;
		width: 40px;
		height: 40px
	}

	.btn-top:active {
		right: 15px;
		bottom: 53px;
		padding: 15px 0;
		width: 40px;
		height: 40px
	}

	.btn-top:focus {
		right: 15px;
		bottom: 53px;
		padding: 15px 0;
		width: 40px;
		height: 40px
	}

	.btn-go-form {
		right: 15px;
		bottom: 10px;
		padding: 5px 0 15px 0;
		width: 40px;
		height: 40px;
		font-size: 70%
	}

	.rice_word {
		color: #c72200
	}

	.head_pc {
		position: relative;
		display: none;
		background: url(../images/visual_banner_m.jpg) no-repeat top center;
		background-size: 100%
	}

	.head_mb {
		display: block
	}

	.btn-logo {
		position: absolute;
		top: 12%;
		left: 4%;
		z-index: 2;
		display: block;
		margin: 0;
		width: 38%;
		height: 17%;
		background: 0 0;
		text-align: left
	}

	.btn-logo img {
		width: 50%
	}
}

@media only screen and (min-width:768px) {
	.boxpc {
		display: block;
	}

	.boxmb {
		display: none;
	}

	.btn-top {
		right: 20px;
		bottom: 80px;
		padding: 20px 0;
		width: 55px;
		height: 55px
	}

	.btn-top:active {
		right: 20px;
		bottom: 80px;
		padding: 20px 0;
		width: 55px;
		height: 55px
	}

	.btn-top:focus {
		right: 20px;
		bottom: 80px;
		padding: 20px 0;
		width: 55px;
		height: 55px
	}

	.btn-go-form {
		right: 20px;
		bottom: 20px;
		padding: 9px 0 20px 0;
		width: 55px;
		height: 55px;
		font-size: 85%
	}

	.head_pc {
		position: relative;
		display: block;
		background: url(../images/visual_banner_p.jpg) no-repeat top center;
		background-size: 100%;
		margin: -7% auto -1% auto;
	}

	.head_mb {
		display: none
	}

	.btn-logo {
		position: relative;
		top: 2em;
		left: 5%;
		z-index: 2;
		display: block;
		margin: 2% auto -3em 0;
		width: 15%;
		height: 3em;
		background: 0 0;
		text-align: center
	}

	.owl-theme .owl-dots {
		margin: 2% auto;
		display: block !important;
	}
}

@media only screen and (min-width:1024px) {
	.head_pc {
		margin: -8% auto -1% auto;
	}
}

@media only screen and (min-width:1100px) {
	.head_pc {
		position: relative;
		display: block;
		background: url(../images/visual_banner_p.jpg) no-repeat top center;
		background-size: 100%;
		margin: -7.5% auto -1% auto;
	}

	.head_mb {
		display: none
	}

	.btn-logo {
		position: relative;
		top: 4em;
		left: 0;
		z-index: 2;
		display: block;
		margin: 2% auto -6em auto;
		width: 14%;
		height: 6em;
		background: 0 0;
		text-align: center
	}
}

@media (min-width:481px) and (max-width:1024px) {
	.edm-wrapper {
		padding: 0;
		width: 100%
	}

	.secbox-sendForm .edm-wrapper {
		margin: 0 auto;
		padding: 2% 0 1% 0;
		width: 90%
	}
}

@media only screen and (min-width:1024px) {
	.btn-logo {
		position: relative;
		top: 2em;
		left: 5%;
		z-index: 2;
		display: block;
		margin: 2% auto -4em 0;
		width: 15%;
		height: 4em;
		background: 0 0;
		text-align: center;
	}
}

@media only screen and (min-width:1100px) {
	.btn-logo {
		position: relative;
		top: 2.5em;
		left: 5%;
		z-index: 2;
		display: block;
		margin: 2% auto -4em 0;
		width: 15%;
		height: 4em;
		background: 0 0;
		text-align: center;
	}
}

@media only screen and (min-width:1600px) {
	.head_pc {
		position: relative;
		display: block;
		background: url(../images/visual_banner_p.jpg) no-repeat top center;
		background-size: 100%;
		margin: -8.5% auto -1% auto;
	}

	.head_mb {
		display: none
	}

	.btn-logo {
		position: relative;
		top: 2em;
		left: 5%;
		z-index: 2;
		display: block;
		margin: 2% auto -5em 0;
		width: 15%;
		height: 5em;
		background: 0 0;
		text-align: center;
	}
}

@media only screen and (min-width:1920px) {
	.head_pc {
		position: relative;
		display: block;
		background: url(../images/visual_banner_p.jpg) no-repeat top center;
		background-size: 100%;
		margin: -7% auto -1% auto;
	}

	.head_mb {
		display: none
	}

	.btn-logo {
		position: relative;
		top: 5em;
		left: 5%;
		z-index: 2;
		display: block;
		margin: 1% auto -7em 0;
		width: 15%;
		height: 7em;
		background: 0 0;
		text-align: center;
	}

	.secbox-sendForm table th {
		padding: 20px
	}

	.secbox-sendForm {
		font-size: 1.5em
	}

	.secbox-sendForm td {
		font-size: 1em;
		vertical-align: middle
	}

	select#toArea {
		font-size: 1em
	}

	select#take {
		font-size: 1em
	}

	.send a {
		padding: 1.5rem 3rem
	}

	.btn-go-form {
		font-size: 100%
	}

	#nav.top_section {
		font-size: 1.6em
	}

	input[type=radio] {
		padding: 10px 3px
	}

	input[type=email] {
		padding: 10px 3px
	}

	input[type=tel] {
		padding: 10px 3px
	}

	input[type=text] {
		padding: 10px 3px
	}

	textarea#ps {
		padding: 2% 0
	}
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
	background: #fb6f00 !important;
}

.owl-theme .owl-dots .owl-dot span {
	background: #fff !important;
}

.total-container {
	width: 100%;
	height: 100%;
}

.cont_pc {
	display: none;
}

@media only screen and (min-width:768px) {
	.cont_pc {
		display: block
	}
}

.cont_mb {
	display: block;
}

@media only screen and (min-width:768px) {
	.cont_mb {
		display: none
	}
}

.title_box {
	width: 90%;
	margin: 5% auto 2% auto;
}

@media only screen and (min-width:768px) {
	.title_box {
		width: 60%;
		margin: 5% auto 2% auto;
	}
}

.box1 {
	background: #dff2de;
	position: relative;
	z-index: 0;
}

.box1 .title_box_bg {
	position: relative;
}

.box1 .title_box_bg .title {
	position: absolute;
	top: 8%;
	width: 100%;
	text-align: center;
}

.box1 .title_box_bg .title img {
	width: 100%;
}

.box1 .title_box_bg .text {
	position: absolute;
	bottom: 25%;
	color: #13976f;
	font-size: 135%;
	font-weight: 600;
	width: 100%;
	text-align: center;
}

@media only screen and (min-width:480px) {
	.box1 .title_box_bg .text {
		font-size: 170%;
	}
}

@media only screen and (min-width:640px) {
	.box1 .title_box_bg .text {
		font-size: 200%;
	}
}

@media only screen and (min-width:768px) {
	.box1 .title_box_bg .text {
		font-size: 220%;
	}
}

@media only screen and (min-width:1100px) {
	.box1 .title_box_bg .text {
		font-size: 250%;
	}
}

@media only screen and (min-width:1920px) {
	.box1 .title_box_bg .text {
		font-size: 450%;
	}
}

.box1 .title_box_bg .start {
	position: absolute;
	bottom: -27%;
	width: 100%;
	text-align: center;
}

@media only screen and (min-width:768px) {
	.box1 .title_box_bg .start {
		bottom: -20%;
	}
}

.box1 .title_box_bg .start img {
	width: 30%;
}

@media only screen and (min-width:768px) {
	.box1 .title_box_bg .start img {
		width: 20%;
	}
}

.box1 .test_box {
	position: relative;
	width: 95%;
	padding: 2% 2% 20% 2%;
	margin: 8% auto 5% auto;
	border-radius: 15px;
	border: solid 1px #fff;
	background: #fff;
}

@media only screen and (min-width:768px) {
	.box1 .test_box {
		width: 80%;
		padding: 2% 2% 10% 2%;
		margin: 5% auto 5% auto;
	}
}

.box1 .test_box .green_back {
	position: absolute;
	top: 4%;
	right: -1.5%;
	width: 99%;
	height: 97.5%;
	padding: 2%;
	border-radius: 15px;
	border: solid 1px #066f2c;
	background: #066f2c;
	z-index: -1;
}

@media only screen and (min-width:768px) {
	.box1 .test_box .green_back {
		right: -0.5%;
	}
}

.box1 .test_box .other_back {
	position: absolute;
	width: 100%;
	top: 22%;
	left: -5%;
	right: -6%;
	z-index: -3;
}

@media only screen and (min-width:360px) {
	.box1 .test_box .other_back {
		top: 19%;
		left: -5%;
	}
}

@media only screen and (min-width:480px) {
	.box1 .test_box .other_back {
		top: 17%;
		left: -5%;
	}
}

@media only screen and (min-width:768px) {
	.box1 .test_box .other_back {
		top: 2%;
		left: auto;
		right: -6%;
	}
}

@media only screen and (min-width:1100px) {
	.box1 .test_box .other_back {
		width: 95%;
	}
}

@media only screen and (min-width:1200px) {
	.box1 .test_box .other_back {
		width: 92%;
	}
}

.box1 .test_box .right_back {
	position: absolute;
	width: 20%;
	bottom: 0%;
	right: 1%;
}

.box1 .test_box .button {
	position: absolute;
	width: 27%;
	bottom: 5%;
	right: 7%;
	padding: 1%;
	border-radius: 50px;
	background: #f98633;
	color: #fff;
	text-align: center;
	font-size: 100%;
	cursor: pointer;
	z-index: 1;
}

@media only screen and (min-width:640px) {
	.box1 .test_box .button {
		font-size: 130%;
	}
}

@media only screen and (min-width:768px) {
	.box1 .test_box .button {
		width: 25%;
		padding: 1%;
		font-size: 180%;
	}
}

@media only screen and (min-width:1024px) {
	.box1 .test_box .button {
		width: 23%;
		padding: 1.5%;
	}
}

@media only screen and (min-width:1600px) {
	.box1 .test_box .button {
		font-size: 235%;
		padding: 1%;
	}
}

@media only screen and (min-width:1920px) {
	.box1 .test_box .button {
		font-size: 350%;
		width: 25%;
		padding: 1.5%;
	}
}

.box1 .test_box .gray_back {
	position: absolute;
	width: 27%;
	height: 8%;
	bottom: 4%;
	right: 6.7%;
	padding: 1.5%;
	border-radius: 50px;
	background: #848f89;
	z-index: 0;
}

@media only screen and (min-width:411px) {
	.box1 .test_box .gray_back {
		height: 8%;
	}
}

@media only screen and (min-width:480px) {
	.box1 .test_box .gray_back {
		height: 9%;
	}
}

@media only screen and (min-width:500px) {
	.box1 .test_box .gray_back {
		height: 7.5%;
	}
}

@media only screen and (min-width:640px) {
	.box1 .test_box .gray_back {
		height: 7%;
	}
}

@media only screen and (min-width:768px) {
	.box1 .test_box .gray_back {
		width: 25%;
		height: 12%;
	}
}

@media only screen and (min-width:900px) {
	.box1 .test_box .gray_back {
		height: 11%;
	}
}

@media only screen and (min-width:1024px) {
	.box1 .test_box .gray_back {
		width: 23%;
		height: 10%;
		bottom: 4.2%;
	}
}

@media only screen and (min-width:1600px) {
	.box1 .test_box .gray_back {
		bottom: 4%;
		height: 11%;
	}
}

@media only screen and (min-width:1920px) {
	.box1 .test_box .gray_back {
		width: 25%;
	}
}

.box1 .test_box .button.next_button {
	background: #53a900;
}

.right-answer {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 12.5%;
}

@media only screen and (min-width:500px) {
	.right-answer {
		bottom: 10.5%;
	}
}

@media only screen and (min-width:640px) {
	.right-answer {
		bottom: 10.5%;
	}
}

@media only screen and (min-width:768px) {
	.right-answer {
		width: 50%;
		left: 0;
		bottom: 13.5%;
	}
}

.wrong-answer {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 12.5%;
}

@media only screen and (min-width:640px) {
	.wrong-answer {
		bottom: 10.5%;
	}
}

@media only screen and (min-width:768px) {
	.wrong-answer {
		width: 50%;
		left: 0;
		bottom: 13.5%;
	}
}

.box1 .test_box .question {
	position: relative;
	margin: 0 auto;
	border-radius: 50px;
	color: #fff;
	text-align: center;
	font-size: 180%;
	cursor: pointer;
}

.grade_button p {
	display: inline-block;
	vertical-align: middle;
}

.grade_button p img {
	width: 40%;
}

@media only screen and (min-width:480px) {
	.grade_button p img {
		width: 45%;
	}
}

@media only screen and (min-width:768px) {
	.grade_button p img {
		width: 45%;
	}
}

@media only screen and (min-width:1024px) {
	.grade_button p img {
		width: 65%;
	}
}

@media only screen and (min-width:1100px) {
	.grade_button p img {
		width: 70%;
	}
}

@media only screen and (min-width:1920px) {
	.grade_button p img {
		width: 90%;
	}
}

.grade_button {
	position: relative;
	width: 65%;
	border-radius: 50px;
	background: #404098;
	color: #fff;
	margin: 20% auto 5% auto;
	padding: 1% 0% 1% 3%;
	text-align: center;
	font-size: 130%;
	cursor: pointer;
	z-index: 1;
}

@media only screen and (min-width:480px) {
	.grade_button {
		width: 55%;
		font-size: 130%;
	}
}

@media only screen and (min-width:640px) {
	.grade_button {
		font-size: 170%;
	}
}

@media only screen and (min-width:768px) {
	.grade_button {
		width: 27%;
		font-size: 130%;
		margin: 8% auto 5% auto;
	}
}

@media only screen and (min-width:1024px) {
	.grade_button {
		font-size: 180%;
	}
}

@media only screen and (min-width:1100px) {
	.grade_button {
		font-size: 220%;
	}
}

@media only screen and (min-width:1600px) {
	.grade_button {
		font-size: 245%;
	}
}

@media only screen and (min-width:1920px) {
	.grade_button {
		font-size: 370%;
	}
}

.box1 .test_box .choose {
	width: 70%;
	margin: 2% auto 2% auto;
}

.box1 .test_box .choose .circle {
	display: inline-block;
	width: 7%;
	border: solid 1px #000;
	border-radius: 50%;
	height: 1rem;
	background: #fff;
	margin: 0 2% 0 auto;
	vertical-align: middle;
	cursor: pointer;
}

@media only screen and (min-width:480px) {
	.box1 .test_box .choose .circle {
		height: 1.2rem;
	}
}

@media only screen and (min-width:640px) {
	.box1 .test_box .choose .circle {
		height: 1.7rem;
	}
}

@media only screen and (min-width:700px) {
	.box1 .test_box .choose .circle {
		height: 2rem;
	}
}

@media only screen and (min-width:768px) {
	.box1 .test_box .choose .circle {
		width: 8%;
		height: 2rem;
	}
}

@media only screen and (min-width:900px) {
	.box1 .test_box .choose .circle {
		height: 2.4rem;
	}
}

@media only screen and (min-width:1024px) {
	.box1 .test_box .choose .circle {
		height: 2.5rem;
	}
}

@media only screen and (min-width:1100px) {
	.box1 .test_box .choose .circle {
		width: 7%;
	}
}

@media only screen and (min-width:1200px) {
	.box1 .test_box .choose .circle {
		width: 6%;
	}
}

@media only screen and (min-width:1300px) {
	.box1 .test_box .choose .circle {
		width: 5%;
	}
}

@media only screen and (min-width:1600px) {
	.box1 .test_box .choose .circle {
		height: 2.8rem;
	}
}

@media only screen and (min-width:1920px) {
	.box1 .test_box .choose .circle {
		width: 6%;
		height: 4rem;
	}
}

.click::after {
	content: '';
	position: absolute;
	background-color: #82b920;
	border-radius: 50%;
	top: 30%;
	width: 4%;
	left: 16.7%;
	height: 6.5%;
}

@media only screen and (min-width:360px) {
	.click::after {
		top: 31%;
	}
}

@media only screen and (min-width:411px) {
	.click::after {
		top: 38%;
	}
}

@media only screen and (min-width:768px) {
	.click::after {
		width: 4.2%;
		height: 6.5%;
		left: 17%;
	}
}

@media only screen and (min-width:1024px) {
	.click::after {
		width: 4.2%;
		height: 6.5%;
	}
}

@media only screen and (min-width:1100px) {
	.click::after {
		width: 3.5%;
		height: 6%;
	}
}

@media only screen and (min-width:1200px) {
	.click::after {
		width: 3.2%;
		height: 6%;
	}
}

@media only screen and (min-width:1300px) {
	.click::after {
		width: 2.5%;
		height: 5.5%;
	}
}

@media only screen and (min-width:1400px) {
	.click::after {
		width: 2.6%;
		height: 5.5%;
	}
}

@media only screen and (min-width:1600px) {
	.click::after {
		width: 2.5%;
		height: 5.5%;
	}
}

@media only screen and (min-width:1920px) {
	.click::after {
		width: 3.3%;
		height: 6.5%;
	}
}

.option-1 .click::after {
	content: '';
	top: 30%;
	left: 17.2%;
}

.option-2 .click::after {
	content: '';
	top: 41%;
	left: 17.2%;
}

.option-3 .click::after {
	content: '';
	top: 51%;
	left: 17.2%;
}

.option-4 .click::after {
	content: '';
	top: 61%;
	left: 17.2%;
}

@media only screen and (min-width:360px) {
	.option-1 .click::after {
		top: 31%;
		left: 17%;
	}

	.option-2 .click::after {
		top: 41%;
		left: 17%;
	}

	.option-3 .click::after {
		top: 51%;
		left: 17%;
	}

	.option-4 .click::after {
		top: 60%;
		left: 17%;
	}
}

@media only screen and (min-width:500px) {
	.option-1 .click::after {
		top: 32%;
		left: 17%;
	}

	.option-2 .click::after {
		top: 41%;
		left: 17%;
	}

	.option-3 .click::after {
		top: 50%;
		left: 17%;
	}

	.option-4 .click::after {
		top: 59%;
		left: 17%;
	}
}

@media only screen and (min-width:700px) {
	.option-1 .click::after {
		top: 31.2%;
		left: 16.8%;
	}

	.option-2 .click::after {
		top: 41%;
		left: 16.8%;
	}

	.option-3 .click::after {
		top: 50%;
		left: 16.8%;
	}

	.option-4 .click::after {
		top: 60%;
		left: 16.8%;
	}
}

@media only screen and (min-width:768px) {
	.option-1 .click::after {
		top: 31.8%;
		left: 17.3%;
	}

	.option-2 .click::after {
		top: 44%;
		left: 17.3%;
	}

	.option-3 .click::after {
		top: 56%;
		left: 17.3%;
	}

	.option-4 .click::after {
		top: 68%;
		left: 17.3%;
	}
}

@media only screen and (min-width:1024px) {
	.option-1 .click::after {
		top: 32%;
		left: 17.3%;
	}

	.option-2 .click::after {
		top: 44.3%;
		left: 17.3%;
	}

	.option-3 .click::after {
		top: 56%;
		left: 17.3%;
	}

	.option-4 .click::after {
		top: 67.8%;
		left: 17.3%;
	}
}

@media only screen and (min-width:1100px) {
	.option-1 .click::after {
		top: 33.5%;
		left: 17.3%;
	}

	.option-2 .click::after {
		top: 44.8%;
		left: 17.3%;
	}

	.option-3 .click::after {
		top: 56%;
		left: 17.3%;
	}

	.option-4 .click::after {
		top: 67.3%;
		left: 17.3%;
	}
}

@media only screen and (min-width:1200px) {
	.option-1 .click::after {
		top: 34%;
		left: 17.1%;
	}

	.option-2 .click::after {
		top: 45.5%;
		left: 17.1%;
	}

	.option-3 .click::after {
		top: 55.8%;
		left: 17.1%;
	}

	.option-4 .click::after {
		top: 66.8%;
		left: 17.1%;
	}
}

@media only screen and (min-width:1300px) {
	.option-1 .click::after {
		top: 35%;
		left: 17.2%;
	}

	.option-2 .click::after {
		top: 45.5%;
		left: 17.2%;
	}

	.option-3 .click::after {
		top: 56.3%;
		left: 17.2%;
	}

	.option-4 .click::after {
		top: 66.5%;
		left: 17.2%;
	}
}

@media only screen and (min-width:1400px) {
	.option-1 .click::after {
		top: 35%;
		left: 17.1%;
	}

	.option-2 .click::after {
		top: 45.5%;
		left: 17.1%;
	}

	.option-3 .click::after {
		top: 56%;
		left: 17.1%;
	}

	.option-4 .click::after {
		top: 66.5%;
		left: 17.1%;
	}
}

@media only screen and (min-width:1600px) {
	.option-1 .click::after {
		top: 35.5%;
		left: 17.1%;
	}

	.option-2 .click::after {
		top: 45.8%;
		left: 17.1%;
	}

	.option-3 .click::after {
		top: 56%;
		left: 17.1%;
	}

	.option-4 .click::after {
		top: 66.5%;
		left: 17.1%;
	}
}

@media only screen and (min-width:1920px) {
	.option-1 .click::after {
		top: 33.5%;
		width: 3.5%;
		left: 17%;
		height: 6.5%;
	}

	.option-2 .click::after {
		top: 44.8%;
	}

	.option-3 .click::after {
		top: 55.8%;
	}

	.option-4 .click::after {
		top: 66.8%;
	}
}

.box1 .test_box .choose .option {
	display: inline-block;
	font-size: 95%;
	font-weight: 600;
	vertical-align: middle;
}

@media only screen and (min-width:640px) {
	.box1 .test_box .choose .option {
		font-size: 150%;
	}
}

@media only screen and (min-width:768px) {
	.box1 .test_box .choose .option {
		font-size: 170%;
	}
}

@media only screen and (min-width:1100px) {
	.box1 .test_box .choose .option {
		font-size: 200%;
	}
}

@media only screen and (min-width:1920px) {
	.box1 .test_box .choose .option {
		font-size: 350%;
	}
}

.box2 {
	background: #dff2de;
}

.box2 .title {
	margin: 0 auto 5% auto;
}

.box2 .title img.cont_mb {
	margin: 7% auto 5% auto;
}

.box2 .loudt p {
	display: inline-block;
	vertical-align: middle;
}

.box2 .loudt p.f2 {
	width: 3%;
}

.box2 .loudt p img {
	width: 100%;
}

@media only screen and (min-width:768px) {
	.box2 .loudt p img {
		width: 40%;
	}
}

@media only screen and (min-width:1100px) {
	.box2 .loudt p img {
		width: 60%;
	}
}

@media only screen and (min-width:1920px) {
	.box2 .loudt p img {
		width: 100%;
	}
}

.box2 .loudt {
	margin: 0 auto 4% auto;
	text-align: center;
}

.box2 .loudt p.text {
	color: #036735;
	font-weight: 600;
	vertical-align: text-top;
	font-size: 115%;
}

@media only screen and (min-width:360px) {
	.box2 .loudt p.text {
		font-size: 120%;
	}
}

@media only screen and (min-width:500px) {
	.box2 .loudt p.text {
		font-size: 175%;
	}
}

@media only screen and (min-width:640px) {
	.box2 .loudt p.text {
		font-size: 200%;
	}
}

@media only screen and (min-width:768px) {
	.box2 .loudt p.text {
		font-size: 170%;
		vertical-align: sub;
	}
}

@media only screen and (min-width:1024px) {
	.box2 .loudt p.text {
		font-size: 200%;
	}
}

@media only screen and (min-width:1100px) {
	.box2 .loudt p.text {
		font-size: 250%;
	}
}

@media only screen and (min-width:1920px) {
	.box2 .loudt p.text {
		font-size: 420%;
	}
}

.box2 .bosdf {
	width: 95%;
	margin: 0 auto 2% auto;
	border-radius: 20px;
	border: solid 5px #016735;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

@media only screen and (min-width:768px) {
	.box2 .bosdf {
		width: 60%;
	}
}

.box2 .bosdf .bosdf_left {
	display: inline-block;
	width: 43%;
	margin: -5% auto 0 0%;
}

@media only screen and (min-width:768px) {
	.box2 .bosdf .bosdf_left {
		width: 39%;
		margin: -5% auto 0 4%;
	}
}

.box2 .bosdf .bosdf_left img {
	width: 100%;
	position: relative;
	bottom: 0rem;
}

@media only screen and (min-width:360px) {
	.box2 .bosdf .bosdf_left img {
		bottom: -0.2rem;
	}
}

@media only screen and (min-width:768px) {
	.box2 .bosdf .bosdf_left img {
		bottom: -0.35rem;
	}
}

@media only screen and (min-width:1024px) {
	.box2 .bosdf .bosdf_left img {
		bottom: -0.1rem;
	}
}

@media only screen and (min-width:1100px) {
	.box2 .bosdf .bosdf_left img {
		bottom: -0.1rem;
	}
}

@media only screen and (min-width:1200px) {
	.box2 .bosdf .bosdf_left img {
		bottom: -0.2rem;
	}
}

@media only screen and (min-width:1300px) {
	.box2 .bosdf .bosdf_left img {
		bottom: -0.3rem;
	}
}

@media only screen and (min-width:1600px) {
	.box2 .bosdf .bosdf_left img {
		bottom: -0.4rem;
	}
}

.box2 .bosdf .bosdf_right {
	position: relative;
	display: inline-block;
	width: 55%;
	height: 8.85em;
	padding: 2%;
	right: -1%;
	top: 0;
	vertical-align: top;
	background: #036735;
	border-top-right-radius: 10px;
}

@media only screen and (min-width:360px) {
	.box2 .bosdf .bosdf_right {
		height: 10em;
	}
}

@media only screen and (min-width:375px) {
	.box2 .bosdf .bosdf_right {
		height: 9.5em;
	}
}

@media only screen and (min-width:390px) {
	.box2 .bosdf .bosdf_right {
		height: 10em;
	}
}

@media only screen and (min-width:411px) {
	.box2 .bosdf .bosdf_right {
		height: 10.55em;
	}
}

@media only screen and (min-width:430px) {
	.box2 .bosdf .bosdf_right {
		height: 11em;
	}
}

@media only screen and (min-width:480px) {
	.box2 .bosdf .bosdf_right {
		height: 12.2em;
	}
}

@media only screen and (min-width:520px) {
	.box2 .bosdf .bosdf_right {
		height: 14em;
	}
}

@media only screen and (min-width:640px) {
	.box2 .bosdf .bosdf_right {
		height: 16.3em;
		right: -2%;
	}
}

@media only screen and (min-width:660px) {
	.box2 .bosdf .bosdf_right {
		height: 17em;
	}
}

@media only screen and (min-width:700px) {
	.box2 .bosdf .bosdf_right {
		height: 18.5em;
		right: -2%;
	}
}

@media only screen and (min-width:768px) {
	.box2 .bosdf .bosdf_right {
		right: -1%;
		height: auto;
	}
}

@media only screen and (min-width:844px) {
	.box2 .bosdf .bosdf_right {
		height: 12.3em;
	}
}

@media only screen and (min-width:900px) {
	.box2 .bosdf .bosdf_right {
		right: -2%;
		height: 13.7em;
	}
}

@media only screen and (min-width:1024px) {
	.box2 .bosdf .bosdf_right {
		width: 56%;
		right: -0.5%;
		height: 14.7em;
	}
}

@media only screen and (min-width:1100px) {
	.box2 .bosdf .bosdf_right {
		height: 17em;
	}
}

@media only screen and (min-width:1200px) {
	.box2 .bosdf .bosdf_right {
		height: 18.5em;
	}
}

@media only screen and (min-width:1300px) {
	.box2 .bosdf .bosdf_right {
		height: 17em;
	}
}

@media only screen and (min-width:1400px) {
	.box2 .bosdf .bosdf_right {
		height: 17.7em;
	}
}

@media only screen and (min-width:1600px) {
	.box2 .bosdf .bosdf_right {
		height: 20em;
	}
}

@media only screen and (min-width:1920px) {
	.box2 .bosdf .bosdf_right {
		height: 29.8em;
		right: -1%;
	}
}

.box2 .bosdf .bosdf_right hr {
	border: dashed 1px #cbdfd4;
	background-color: transparent;
	margin: 2% auto 5% auto;
}

.box2 .bosdf .bosdf_right .teacher_name {
	position: relative;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-weight: 600;
}

.box2 .bosdf .bosdf_right .teacher_name p {
	line-height: 130%;
}

.box2 .bosdf .bosdf_right .teacher_name .teacher {
	font-size: 120%;
}

@media only screen and (min-width:640px) {
	.box2 .bosdf .bosdf_right .teacher_name .teacher {
		font-size: 170%;
	}
}

@media only screen and (min-width:768px) {
	.box2 .bosdf .bosdf_right .teacher_name .teacher {
		font-size: 150%;
	}
}

@media only screen and (min-width:1024px) {
	.box2 .bosdf .bosdf_right .teacher_name .teacher {
		font-size: 180%;
	}
}

@media only screen and (min-width:1100px) {
	.box2 .bosdf .bosdf_right .teacher_name .teacher {
		font-size: 200%;
	}
}

@media only screen and (min-width:1920px) {
	.box2 .bosdf .bosdf_right .teacher_name .teacher {
		font-size: 350%;
	}
}

.box2 .bosdf .bosdf_right .teacher_name .subject {
	font-size: 100%;
}

@media only screen and (min-width:640px) {
	.box2 .bosdf .bosdf_right .teacher_name .subject {
		font-size: 145%;
	}
}

@media only screen and (min-width:768px) {
	.box2 .bosdf .bosdf_right .teacher_name .subject {
		font-size: 120%;
	}
}

@media only screen and (min-width:1024px) {
	.box2 .bosdf .bosdf_right .teacher_name .subject {
		font-size: 140%;
	}
}

@media only screen and (min-width:1100px) {
	.box2 .bosdf .bosdf_right .teacher_name .subject {
		font-size: 160%;
	}
}

@media only screen and (min-width:1920px) {
	.box2 .bosdf .bosdf_right .teacher_name .subject {
		font-size: 300%;
	}
}

ul.intro {
	position: relative;
	width: 100%;
	margin: 0 auto;
	line-height: 90%;
}

@media only screen and (min-width:360px) {
	ul.intro {
		line-height: 90%;
	}
}

@media only screen and (min-width:640px) {
	ul.intro {
		line-height: 140%;
	}
}

@media only screen and (min-width:768px) {
	ul.intro {
		width: 100%;
		line-height: 91%;
	}
}

@media only screen and (min-width:1024px) {
	ul.intro {
		width: 85%;
		line-height: 120%;
	}
}

@media only screen and (min-width:1100px) {
	ul.intro {
		line-height: 150%;
	}
}

@media only screen and (min-width:1920px) {
	ul.intro {
		line-height: 250%;
	}
}

ul.intro li {
	color: #fff593;
	font-size: 60%;
}

@media only screen and (min-width:360px) {
	ul.intro li {
		font-size: 90%;
	}
}

@media only screen and (min-width:640px) {
	ul.intro li {
		font-size: 140%;
	}
}

@media only screen and (min-width:768px) {
	ul.intro li {
		font-size: 100%;
	}
}

@media only screen and (min-width:1024px) {
	ul.intro li {
		font-size: 120%;
	}
}

@media only screen and (min-width:1100px) {
	ul.intro li {
		font-size: 150%;
	}
}

@media only screen and (min-width:1920px) {
	ul.intro li {
		font-size: 250%;
	}
}

.box2 .youtube {
	position: relative;
	width: 95%;
	height: 12.5rem;
	margin: 0 auto 2% auto;
	border: solid 9px #7b1c20;
}

@media only screen and (min-width:500px) {
	.box2 .youtube {
		height: 18.5rem;
	}
}

@media only screen and (min-width:640px) {
	.box2 .youtube {
		height: 22rem;
	}
}

@media only screen and (min-width:700px) {
	.box2 .youtube {
		height: 24.7rem;
	}
}

@media only screen and (min-width:768px) {
	.box2 .youtube {
		width: 60%;
		height: 16.5rem;
	}
}

@media only screen and (min-width:1024px) {
	.box2 .youtube {
		height: 21.8rem;
	}
}

@media only screen and (min-width:1100px) {
	.box2 .youtube {
		height: 25rem;
	}
}

@media only screen and (min-width:1200px) {
	.box2 .youtube {
		height: 27.2rem;
	}
}

@media only screen and (min-width:1300px) {
	.box2 .youtube {
		height: 29.2rem;
	}
}

@media only screen and (min-width:1400px) {
	.box2 .youtube {
		height: 30.5rem;
	}
}

@media only screen and (min-width:1600px) {
	.box2 .youtube {
		height: 34.5rem;
	}
}

@media only screen and (min-width:1920px) {
	.box2 .youtube {
		height: 41rem;
	}
}

.sd_bg2 {
	position: relative;
	padding: 19% 0 0 0;
}

@media only screen and (min-width:768px) {
	.sd_bg2 {
		padding: 0%;
	}
}

.sd_bg2 .grade_button {
	position: absolute;
	top: -29%;
	left: 18%;
	background: #fff;
	color: #036733;
	border: solid 3px #036733;
}

@media only screen and (min-width:768px) {
	.sd_bg2 .grade_button {
		top: -58%;
		left: 37%;
	}
}

.gray {
	position: absolute;
	width: 63.6%;
	height: 5%;
	left: 19.2%;
	margin-top: 17.5%;
	padding: 1.5%;
	border-radius: 50px;
	background: #848f89;
	z-index: 0;
}

@media only screen and (min-width:480px) {
	.gray {
		width: 55%;
		left: 24%;
		margin-top: 17.5%;
	}
}

@media only screen and (min-width:640px) {
	.gray {
		width: 54%;
		left: 24%;
		margin-top: 16%;
	}
}

@media only screen and (min-width:700px) {
	.gray {
		margin-top: 15.5%;
	}
}

@media only screen and (min-width:768px) {
	.gray {
		width: 26.6%;
		left: 37.2%;
		margin-top: 3.7%;
	}
}

@media only screen and (min-width:1024px) {
	.gray {
		margin-top: 3.7%;
		height: 6.5%;
	}
}

@media only screen and (min-width:1100px) {
	.gray {
		margin-top: 3.3%;
	}
}

@media only screen and (min-width:1920px) {
	.gray {
		margin-top: 3%;
	}
}

.sd_bg2 .gray {
	position: absolute;
	width: 65%;
	height: 27%;
	top: -16.5%;
	left: 19%;
	padding: 2.5%;
	border-radius: 50px;
	background: #848f89;
	z-index: 1;
}

@media only screen and (min-width:360px) {
	.sd_bg2 .gray {
		height: 24%;
	}
}

@media only screen and (min-width:411px) {
	.sd_bg2 .gray {
		height: 21%;
	}
}

@media only screen and (min-width:480px) {
	.sd_bg2 .gray {
		width: 55%;
		left: 19%;
		top: -16.5%;
		height: 23%;
	}
}

@media only screen and (min-width:500px) {
	.sd_bg2 .gray {
		top: -21.5%;
	}
}

@media only screen and (min-width:640px) {
	.sd_bg2 .gray {
		width: 55%;
		left: 18.5%;
		top: -15.5%;
		height: 21%;
	}
}

@media only screen and (min-width:700px) {
	.sd_bg2 .gray {
		width: 55%;
		left: 18.5%;
		top: -18.5%;
		height: 20%;
	}
}

@media only screen and (min-width:768px) {
	.sd_bg2 .gray {
		width: 26%;
		height: 12.9%;
		top: -6%;
		left: 38%;
	}
}

@media only screen and (min-width:1100px) {
	.sd_bg2 .gray {
		top: -5%;
	}
}

@media only screen and (min-width:1200px) {
	.sd_bg2 .gray {
		top: -6%;
	}
}

@media only screen and (min-width:1300px) {
	.sd_bg2 .gray {
		top: -9%;
	}
}

@media only screen and (min-width:1920px) {
	.sd_bg2 .gray {
		top: -7%;
	}
}

.box3 {
	background: #7eb647;
	margin: -1% auto;
	padding: 0 0 10% 0;
}

@media only screen and (min-width:768px) {
	.box3 {
		padding: 0;
	}
}

.box3_img {
	position: relative;
	margin: 3% auto 5% auto;
}

.box3_img .grade_button {
	position: absolute;
	bottom: -12%;
	left: 21%;
	background: #fff;
	color: #036733;
	border: solid 3px #036733;
}

@media only screen and (min-width:768px) {
	.box3_img .grade_button {
		bottom: -18%;
		left: 37%;
	}
}

.box3 .edm-wrapper {
	overflow: unset;
}

.box3_img .gray {
	position: absolute;
	width: 63%;
	height: 12.9%;
	bottom: -7.5%;
	left: 24%;
	padding: 2.5%;
	border-radius: 50px;
	background: #848f89;
	z-index: 1;
}

@media only screen and (min-width:480px) {
	.box3_img .gray {
		width: 55%;
		height: 11%;
		bottom: -7%;
		left: 22%;
	}
}

@media only screen and (min-width:640px) {
	.box3_img .gray {
		width: 55%;
		height: 8.5%;
		bottom: -7%;
		left: 21.5%;
	}
}

@media only screen and (min-width:768px) {
	.box3_img .gray {
		width: 26%;
		height: 12.9%;
		bottom: -5.5%;
		left: 38%;
	}
}

.box4 {
	position: relative;
	background: url(../images/secbox_4_bg.jpg) repeat top center;
	background-size: 10%;
	padding-bottom: 3%;
}

.box4 .title {
	margin: 8% auto 1% auto;
}

.box4 .cont_mb #demos {
	margin: -8% auto 0% auto;
}

.student_grade {
	position: relative;
	width: 90%;
	padding: 2% 2.5% 2.5% 2.5%;
	margin: 0 auto 2% auto;
}

@media only screen and (min-width:768px) {
	.student_grade {
		width: 75%;
	}
}

.student_grade.color1 {
	background: #dff2de;
}

.student_grade.color2 {
	background: #fcfded;
}

.student_grade .student_left {
	display: block;
	vertical-align: top;
	text-align: center;
	width: 95%;
}

@media only screen and (min-width:768px) {
	.student_grade .student_left {
		display: inline-block;
		width: 27%;
	}
}

.student_grade .student_right {
	display: inline-block;
	vertical-align: top;
	padding: 1% 1% 1% 2%;
	margin: 0 auto 0 3%;
	border-right: none;
	font-size: 120%;
	line-height: 110%;
	text-align: justify;
	width: 95%;
	border-top: none;
	border-bottom: none;
}

@media only screen and (min-width:768px) {
	.student_grade .student_right {
		font-size: 100%;
		width: 57%;
		border: solid 2px #548836;
		border-right: none;
		border-top: none;
		border-bottom: none;
	}
}

@media only screen and (min-width:1024px) {
	.student_grade .student_right {
		font-size: 125%;
	}
}

@media only screen and (min-width:1100px) {
	.student_grade .student_right {
		font-size: 150%;
	}
}

@media only screen and (min-width:1920px) {
	.student_grade .student_right {
		font-size: 235%;
	}
}

.student_grade .student_left .title_color {
	color: #3a7315;
	font-weight: 600;
	font-size: 150%;
	margin: 0 auto 2% auto;
}

@media only screen and (min-width:640px) {
	.student_grade .student_left .title_color {
		font-size: 200%;
	}
}

@media only screen and (min-width:768px) {
	.student_grade .student_left .title_color {
		font-size: 120%;
		margin: 0 auto 10% auto;
	}
}

@media only screen and (min-width:1024px) {
	.student_grade .student_left .title_color {
		font-size: 160%;
	}
}

@media only screen and (min-width:1100px) {
	.student_grade .student_left .title_color {
		font-size: 190%;
	}
}

@media only screen and (min-width:1920px) {
	.student_grade .student_left .title_color {
		font-size: 325%;
	}
}

.student_grade .student_left .stu_name {
	color: #2d282c;
	font-weight: 600;
	font-size: 200%;
}

@media only screen and (min-width:640px) {
	.student_grade .student_left .stu_name {
		font-size: 250%;
	}
}

@media only screen and (min-width:768px) {
	.student_grade .student_left .stu_name {
		font-size: 170%;
	}
}

@media only screen and (min-width:1024px) {
	.student_grade .student_left .stu_name {
		font-size: 200%;
	}
}

@media only screen and (min-width:1100px) {
	.student_grade .student_left .stu_name {
		font-size: 250%;
	}
}

@media only screen and (min-width:1920px) {
	.student_grade .student_left .stu_name {
		font-size: 430%;
	}
}

.student_grade .student_left .work {
	color: #292728;
	font-size: 120%;
	margin: 2% auto;
}

@media only screen and (min-width:768px) {
	.student_grade .student_left .work {
		font-size: 120%;
	}
}

@media only screen and (min-width:1024px) {
	.student_grade .student_left .work {
		font-size: 140%;
	}
}

@media only screen and (min-width:1100px) {
	.student_grade .student_left .work {
		font-size: 160%;
	}
}

@media only screen and (min-width:1920px) {
	.student_grade .student_left .work {
		font-size: 245%;
	}
}

.student_grade .student_right span {
	color: #0201fd;
}

.student_grade .student_right span.red {
	color: #fe0000;
}

.student_grade .thing {
	position: absolute;
	top: 5%;
	right: 2%;
	width: 15%;
}

@media only screen and (min-width:768px) {
	.student_grade .thing {
		width: 10%;
		right: 0;
	}
}

.box5 .title {
	margin: 3% auto 1% auto;
}

.box5_img {
	width: 85%;
	margin: -8% auto 3% auto;
}

@media only screen and (min-width:768px) {
	.box5_img {
		width: 85%;
		margin: 0 auto 3% auto;
	}
}

.box5_img img {
	display: inline-block;
	width: 45%;
	margin: 0 auto 0 auto;
}

@media only screen and (min-width:768px) {
	.box5_img img {
		width: 28%;
		margin: 0 auto 0 4%;
	}
}

.box6 .title {
	width: 75%;
	margin: 0 auto -10% auto;
	position: relative;
	z-index: 3;
}

@media only screen and (min-width:768px) {
	.box6 .title {
		width: 50%;
		margin: 0 auto -5% auto;
	}
}

#demos .owl-carousel .item {
	height: 17rem !important;
	background: transparent !important;
}

@media only screen and (min-width:375px) {
	#demos .owl-carousel .item {
		height: 18.5rem !important;
	}
}

@media only screen and (min-width:411px) {
	#demos .owl-carousel .item {
		height: 18rem !important;
	}
}

.box5 #demos .owl-carousel .item {
	height: 17rem !important;
}

@media only screen and (min-width:360px) {
	.box5 #demos .owl-carousel .item {
		height: 20rem !important;
	}
}

@media only screen and (min-width:390px) {
	.box5 #demos .owl-carousel .item {
		height: 21rem !important;
	}
}

@media only screen and (min-width:411px) {
	.box5 #demos .owl-carousel .item {
		height: 22rem !important;
	}
}

@media only screen and (min-width:430px) {
	.box5 #demos .owl-carousel .item {
		height: 24rem !important;
	}
}

@media only screen and (min-width:480px) {
	.box5 #demos .owl-carousel .item {
		height: 26rem !important;
	}
}

@media only screen and (min-width:500px) {
	.box5 #demos .owl-carousel .item {
		height: 30rem !important;
	}
}

@media only screen and (min-width:640px) {
	.box5 #demos .owl-carousel .item {
		height: 35rem !important;
	}
}

@media only screen and (min-width:700px) {
	.box5 #demos .owl-carousel .item {
		height: 40rem !important;
	}
}

.end-title {
	margin: 0 auto 3% auto;
	text-align: center;
	font-size: 190%;
	font-weight: 600;
	color: #fff;
}

@media only screen and (min-width:768px) {
	.end-title {
		font-size: 180%;
	}
}

@media only screen and (min-width:1024px) {
	.end-title {
		font-size: 230%;
	}
}

@media only screen and (min-width:1100px) {
	.end-title {
		font-size: 280%;
	}
}

.item {
	width: 100%;
	margin: 0 auto;
	padding: 0 !important;
}

.owl-carousel .owl-nav button.owl-prev {
	background: 0 0;
	color: #fff;
	border: none;
	position: absolute;
	padding: 0 !important;
	left: 0%;
	top: 40%;
	font: inherit;
	color: #7db747 !important;
	font-size: 270% !important;
	font-weight: 500;
}

.box5 .owl-carousel .owl-nav button.owl-prev {
	display: none !important;
}

.owl-carousel .owl-nav button.owl-next {
	background: 0 0;
	color: #fff;
	border: none;
	position: absolute;
	padding: 0 !important;
	right: 0%;
	top: 40%;
	color: #7db747 !important;
	font: inherit;
	font-size: 270% !important;
	font-weight: 500;
}

.box5 .owl-carousel .owl-nav button.owl-next {
	display: none !important;
}

hr.mb_fgh {
	border: dashed 1px #4e822f;
	background-color: transparent;
	margin: 2% auto 5% auto;
}

/*翻牌*/
.allcards {
	position: absolute;
	width: 65%;
	min-height: 460px;
	margin: 3% auto auto 0%;
	padding: 0;
}

.allcards img {
	width: 100%;
}

.card_text {
	text-align: justify;
	font-size: 180%;
	line-height: normal;
	width: 75%;
	font-weight: 100;
	margin: 0 auto;
	color: #ffffff;
}

.card_text1 {
	text-align: justify;
	font-size: 180%;
	line-height: normal;
	width: 81%;
	font-weight: 100;
	margin: 0 auto;
	color: #ffffff;
}

.card_back_text {
	position: absolute;
	top: 8%;
	left: 18%;
	color: #000000;
	font-size: 170%;
	line-height: normal;
}

.card_back_text1 {
	position: absolute;
	top: 8%;
	left: 14%;
	color: #000000;
	font-size: 170%;
	line-height: normal;
}

.money_size {
	font-size: 120%;
	text-align: center;
	font-weight: 600;
	margin: 0 0 0 -16%;
}

.money_size1 {
	font-size: 120%;
	color: #ff2400;
	text-align: center;
	font-weight: 600;
	margin: 0 0 0 -16%;
}

.money_size2 {
	font-size: 120%;
	text-align: center;
	font-weight: 600;
	margin: 13% 0 0 -16%;
}

.money_size3 {
	font-size: 120%;
	color: #ff2400;
	text-align: center;
	font-weight: 600;
	margin: 1% 0 0 -5%;
}

@media only screen and (min-width: 481px) {
	.allcards {
		display: flex;
		width: 85%;
		min-height: 140px;
		justify-content: space-evenly;
		align-items: flex-start;
	}

	.card_back_text {
		font-size: 97%;
	}

	.card_back_text1 {
		font-size: 97%;
	}
}

@media only screen and (min-width: 768px) {
	.allcards {
		width: 100%;
	}

	.card_back_text {
		font-size: 100%;
		top: 6%;
		left: 15%;
	}

	.card_back_text1 {
		font-size: 100%;
		top: 8%;
		left: 10%;
	}
}

@media only screen and (min-width: 1024px) {
	.allcards {
		width: 100%;
		min-height: 145px;
	}

	.card_back_text {
		font-size: 130%;
	}

	.card_back_text1 {
		top: 8%;
		font-size: 130%;
	}

	.sdfsdf>font {
		font-size: 120%;
	}
}

@media only screen and (min-width: 1100px) {
	.allcards {
		width: 100% !important;
		min-height: 220px;
	}

	.card_back_text {
		font-size: 170%;
	}

	.card_back_text1 {
		font-size: 170%;
	}
}

@media only screen and (min-width: 1600px) {
	.allcards {
		min-height: 260px;
	}

	.card_back_text {
		font-size: 210%;
	}

	.card_back_text1 {
		font-size: 210%;
	}
}

@media only screen and (min-width: 1920px) {
	.allcards {
		min-height: 350px;
	}

	.card_back_text {
		font-size: 250%;
	}

	.card_back_text1 {
		font-size: 250%;
	}
}

.card {
	position: relative;
	width: 100%;
	min-height: 135px;
	margin: 0 1% 10px 1%;
}

@media only screen and (min-width: 768px) {
	.card {
		width: calc((100% - 25%) / 3);
		min-height: auto;
		margin: 0;
	}
}

.front-side {
	box-sizing: border-box;
	z-index: 4;
}

.back-side {
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	-ms-transform: rotateY(90deg);
	-o-transform: rotateY(90deg);
	transform: rotateY(90deg);
	box-sizing: border-box;
	z-index: 4;
}

.card .front-side,
.card .back-side {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	cursor: pointer;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition-duration: 1s, 1s;
	-moz-transition-duration: 1s, 1s;
	-ms-transition-duration: 1s, 1s;
	-o-transition-duration: 1s, 1s;
	transition-duration: 1s, 1s;
	box-sizing: border-box;
}

.flip .front-side {
	z-index: 4;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.flip .back-side {
	z-index: 4;
	-webkit-transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	-ms-transform: rotateY(360deg);
	-o-transform: rotateY(360deg);
	transform: rotateY(360deg);
}

.card-hand {
	position: absolute;
	bottom: -5%;
	right: -5%;
	width: 15%;
	color: #cccccc;
	font-size: 185%;
}

@media only screen and (min-width: 481px) {
	.card-hand {
		font-size: 135%;
	}
}

@media only screen and (min-width: 1024px) {
	.card-hand {
		font-size: 185%;
	}
}

@media only screen and (min-width: 1600px) {
	.card-hand {
		font-size: 190%;
	}
}

@media only screen and (min-width: 1920px) {
	.card-hand {
		font-size: 230%;
	}
}

.question-3 .click::after {
	content: '';
	position: absolute;
	background-color: #82b920;
	border-radius: 50%;
	top: 30%;
	width: 4%;
	left: 16.7%;
	height: 6.5%;
}

@media only screen and (min-width:390px) {
	.question-3 .click::after {
		height: 6%;
	}
}

@media only screen and (min-width:1100px) {
	.question-3 .click::after {
		width: 3.5%;
	}
}

@media only screen and (min-width:1200px) {
	.question-3 .click::after {
		width: 3.2%;
	}
}

@media only screen and (min-width:1400px) {
	.question-3 .click::after {
		width: 2.6%;
	}
}

@media only screen and (min-width:1920px) {
	.question-3 .click::after {
		width: 3.3%;
	}
}

.question-2 .option-1 .click::after {
	top: 34%;
	left: 17%;
}

.question-2 .option-2 .click::after {
	top: 43.5%;
	left: 17%;
}

.question-2 .option-3 .click::after {
	top: 53%;
	left: 17%;
}

.question-2 .option-4 .click::after {
	top: 63%;
	left: 17%;
}

@media only screen and (min-width:360px) {
	.question-2 .option-1 .click::after {
		top: 35%;
		left: 16.8%;
	}

	.question-2 .option-2 .click::after {
		top: 43.5%;
		left: 16.8%;
	}

	.question-2 .option-3 .click::after {
		top: 53%;
		left: 16.8%;
	}

	.question-2 .option-4 .click::after {
		top: 62%;
		left: 16.8%;
	}
}

@media only screen and (min-width:411px) {
	.question-2 .option-1 .click::after {
		top: 36%;
		left: 16.8%;
	}

	.question-2 .option-2 .click::after {
		top: 45%;
		left: 16.8%;
	}

	.question-2 .option-3 .click::after {
		top: 53%;
		left: 16.8%;
	}

	.question-2 .option-4 .click::after {
		top: 62%;
		left: 16.8%;
	}
}

@media only screen and (min-width:768px) {
	.question-2 .option-1 .click::after {
		top: 31.8%;
		left: 17.3%;
	}

	.question-2 .option-2 .click::after {
		top: 44%;
		left: 17.3%;
	}

	.question-2 .option-3 .click::after {
		top: 56%;
		left: 17.3%;
	}

	.question-2 .option-4 .click::after {
		top: 68.3%;
		left: 17.3%;
	}
}

@media only screen and (min-width:1024px) {
	.question-2 .option-1 .click::after {
		top: 32%;
		left: 17.3%;
	}

	.question-2 .option-2 .click::after {
		top: 44.3%;
		left: 17.3%;
	}

	.question-2 .option-3 .click::after {
		top: 56%;
		left: 17.3%;
	}

	.question-2 .option-4 .click::after {
		top: 67.8%;
		left: 17.3%;
	}
}

@media only screen and (min-width:1100px) {
	.question-2 .option-1 .click::after {
		top: 33.5%;
		left: 17.3%;
	}

	.question-2 .option-2 .click::after {
		top: 44.8%;
		left: 17.3%;
	}

	.question-2 .option-3 .click::after {
		top: 56%;
		left: 17.3%;
	}

	.question-2 .option-4 .click::after {
		top: 67.3%;
		left: 17.3%;
	}
}

@media only screen and (min-width:1200px) {
	.question-2 .option-1 .click::after {
		top: 34%;
		left: 17.1%;
	}

	.question-2 .option-2 .click::after {
		top: 45.5%;
		left: 17.1%;
	}

	.question-2 .option-3 .click::after {
		top: 55.8%;
		left: 17.1%;
	}

	.question-2 .option-4 .click::after {
		top: 66.8%;
		left: 17.1%;
	}
}

@media only screen and (min-width:1400px) {
	.question-2 .option-1 .click::after {
		top: 35%;
		left: 17.1%;
	}

	.question-2 .option-2 .click::after {
		top: 45.5%;
		left: 17.1%;
	}

	.question-2 .option-3 .click::after {
		top: 56%;
		left: 17.1%;
	}

	.question-2 .option-4 .click::after {
		top: 66.5%;
		left: 17.1%;
	}
}

@media only screen and (min-width:1920px) {
	.question-2 .option-1 .click::after {
		top: 33.5%;
		left: 17.1%;
	}

	.question-2 .option-2 .click::after {
		top: 44.8%;
		left: 17.1%;
	}

	.question-2 .option-3 .click::after {
		top: 55.8%;
		left: 17.1%;
	}

	.question-2 .option-4 .click::after {
		top: 66.8%;
		left: 17.1%;
	}
}

.question-3 .option-1 .click::after {
	top: 39%;
	left: 17%;
}

.question-3 .option-2 .click::after {
	top: 47.5%;
	left: 17%;
}

.question-3 .option-3 .click::after {
	top: 56%;
	left: 17%;
}

.question-3 .option-4 .click::after {
	top: 66%;
	left: 17%;
}

@media only screen and (min-width:360px) {
	.question-3 .option-1 .click::after {
		top: 40%;
		left: 16.8%;
	}

	.question-3 .option-2 .click::after {
		top: 48.5%;
		left: 16.8%;
	}

	.question-3 .option-3 .click::after {
		top: 56%;
		left: 16.8%;
	}

	.question-3 .option-4 .click::after {
		top: 65%;
		left: 16.8%;
	}
}

@media only screen and (min-width:411px) {
	.question-3 .option-1 .click::after {
		top: 40%;
		left: 16.8%;
	}

	.question-3 .option-2 .click::after {
		top: 48%;
		left: 16.8%;
	}

	.question-3 .option-3 .click::after {
		top: 56%;
		left: 16.8%;
	}

	.question-3 .option-4 .click::after {
		top: 65%;
		left: 16.8%;
	}
}

@media only screen and (min-width:768px) {
	.question-3 .option-1 .click::after {
		top: 34%;
		left: 17.3%;
	}

	.question-3 .option-2 .click::after {
		top: 45.5%;
		left: 17.3%;
	}

	.question-3 .option-3 .click::after {
		top: 57%;
		left: 17.3%;
	}

	.question-3 .option-4 .click::after {
		top: 68.3%;
		left: 17.3%;
	}
}

@media only screen and (min-width:1024px) {
	.question-3 .option-1 .click::after {
		top: 34%;
		left: 17.3%;
	}

	.question-3 .option-2 .click::after {
		top: 45.5%;
		left: 17.3%;
	}

	.question-3 .option-3 .click::after {
		top: 57%;
		left: 17.3%;
	}

	.question-3 .option-4 .click::after {
		top: 68.3%;
		left: 17.3%;
	}
}

@media only screen and (min-width:1100px) {
	.question-3 .option-1 .click::after {
		top: 35%;
		left: 17.3%;
	}

	.question-3 .option-2 .click::after {
		top: 46%;
		left: 17.3%;
	}

	.question-3 .option-3 .click::after {
		top: 57%;
		left: 17.3%;
	}

	.question-3 .option-4 .click::after {
		top: 67.5%;
		left: 17.3%;
	}
}

@media only screen and (min-width:1200px) {
	.question-3 .option-1 .click::after {
		top: 35.8%;
		left: 17.1%;
	}

	.question-3 .option-2 .click::after {
		top: 46.3%;
		left: 17.1%;
	}

	.question-3 .option-3 .click::after {
		top: 57%;
		left: 17.1%;
	}

	.question-3 .option-4 .click::after {
		top: 67.5%;
		left: 17.1%;
	}
}

@media only screen and (min-width:1400px) {
	.question-3 .option-1 .click::after {
		top: 36.5%;
		left: 17.1%;
	}

	.question-3 .option-2 .click::after {
		top: 47%;
		left: 17.1%;
	}

	.question-3 .option-3 .click::after {
		top: 57%;
		left: 17.1%;
	}

	.question-3 .option-4 .click::after {
		top: 67%;
		left: 17.1%;
	}
}

@media only screen and (min-width:1920px) {
	.question-3 .option-1 .click::after {
		top: 35%;
		left: 17.1%;
	}

	.question-3 .option-2 .click::after {
		top: 45.8%;
		left: 17.1%;
	}

	.question-3 .option-3 .click::after {
		top: 57%;
		left: 17.1%;
	}

	.question-3 .option-4 .click::after {
		top: 67.5%;
		left: 17.1%;
	}
}