* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	letter-spacing: 1px;
	margin: 0;
	padding: 0
}
body {
	font-family: Century-Gothic, Helvetica, sans-serif, "微軟正黑體";
	font-size: 100%;
	letter-spacing: 1px;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	position: relative
}
.header_container nav ul.nav_list,ul.benefit_pic,.skills_container ul,
ul.footer_social_detail,#scroll_menu ul {list-style-type: none;}
ul.nav_list li a,.banner p,.benefit_container,.skills_container_title,.skills_point_content li,
.btn_box,.submit_btn,.user_text {font-family: 'Noto Sans TC', sans-serif;}
.appedu_logo img:last-child,.appedu_logo:active img:first-child,.appedu_logo:hover img:first-child {display: none;}
.appedu_logo:active img:last-child,.appedu_logo:hover img:last-child {display: block;}
.cursor_pointer {cursor: pointer;}
.clearfix:after {clear: both; content: ""; display: block;}
.input_box .ml20 {margin-left: 20px;}
.mr20 {margin-right: 20px;}

/* --Loading--------------------------------- */
#loading_mask {
	background: #ffe35e;
	display: none;
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: 10000;
}
#loading_mask .loading_pattern {
	height: 100%;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
}
#loading_mask img.loading_title {
	animation: loading_title_swing 1.6s ease-out 0s forwards;
	bottom: 0;
	display: block;
	height: auto;
	left: 0;
	margin: auto;
	max-width: 393px;
	position: absolute;
	right: 0;
	top: 0;
}

/* --Header--------------------------------- */
.header_box {
	animation: header_fade_In .8s ease-out 0s forwards;
	animation-delay: 3.9s;
	background: #fff;
	box-shadow: 0 2px 8px 0 rgba(0,0,0,.25); 
	display: block;
	height: 80px;
	position: fixed;
	transform: translateY(-80px);
	width: 100%;
	z-index: 2000;
}
.header_container {
	height: 80px;
	left: 50%;
	margin: 0 auto;
	max-width: 975px;
	position: absolute;
	transform: translate3d(-50%,0,0);
	width: 100%
}
.header_container nav ul.nav_list li a {color: #804a36;}
.appedu_logo {float: left}
.appedu_logo img {
	float: left;
	margin: 21px 0;
	opacity: 1;
	transition: .32s opacity ease-out;
	width: 160px
}
ul.nav_list {float: right; padding: 32px 0;}
ul.nav_list li {float: left; padding-right: 26px;}
ul.nav_list li:last-child {padding-right: 0;}
ul.nav_list li a {
	color: #3d3c45;
	display: block;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14px;
	letter-spacing: 2px;
	padding: 0 10px;
	position: relative;
	text-align: center;
	text-decoration: none;
}
ul.nav_list li a:after {
	content: "";
	border-bottom: solid 2px #804a36;
	display: block;
	height: 1px;
	margin: 4px 0;
	transition: all .32s cubic-bezier(.215,.61,.355,1);
	width: 0%;
}
ul.nav_list li a:hover:after {display: block; width: 96.4%;}

/* --Banner--------------------------------- */
.banner {
	background: #ffe35e; 
	height: 772px; 
	padding-top: 80px; 
	position: relative; 
	width: 100%;
}
.banner p {
	bottom: 30px;
	color: #d76a14;
	font-size: 16px;
	left: 50%;
	position: absolute;
	transform: translate(-50%,0);
}
.banner p:after {
	content: "";
	animation: banner_line_scroll 1.4s cubic-bezier(0,0,.58,1) infinite;
	background:  #d76a14;
	bottom: -46px;
	display: block;
	height: 32px;
	left: 50%;
	position: absolute;
	transform: translate(-50%,0);
	width: 2px;
}
.banner figure img.banner_circle_icon1,.banner figure img.banner_circle_icon2,
.banner figure img.banner_circle_icon3,.banner figure img.banner_circle_icon4,
.banner figure img.banner_circle_icon5,.banner figure img.banner_circle_icon6,
.banner figure img.banner_circle_icon7,.banner figure img.banner_circle_icon8,
.banner figure img.banner_star_icon1,.banner figure img.banner_star_icon2,
.banner figure img.banner_star_icon3,.banner figure img.banner_star_icon4,
.banner figure img.banner_star_icon5 {position: absolute;}
.banner figure img.banner_circle_icon1 {right: 130px; top: 75px;}
.banner figure img.banner_circle_icon2 {left: -140px; top: 80px;}
.banner figure img.banner_circle_icon3 {left: -215px; top: 130px;}
.banner figure img.banner_circle_icon4 {left: -428px; top: 156px;}
.banner figure img.banner_circle_icon5 {left: -185px; top: 368px;}
.banner figure img.banner_circle_icon6 {left: -310px; top: 538px;}
.banner figure img.banner_circle_icon7 {right: -300px; top: 110px;}
.banner figure img.banner_circle_icon8 {right: -400px; top: 540px;}
.banner figure img.banner_star_icon1 {left: -370px; top: 328px;}
.banner figure img.banner_star_icon2 {left: -110px; top: 540px;}
.banner figure img.banner_star_icon3 {right: -110px; top: 140px;}
.banner figure img.banner_star_icon4 {right: -350px; top: 230px;}
.banner figure img.banner_star_icon5 {right: -160px; top: 450px;}
.banner_container {margin: 0 auto; max-width: 436px; position: relative; width: 100%;}
.banner_container img {position: absolute;}
.banner_container img.banner_balloon_left {
	animation: balloon_fade_left .5s cubic-bezier(0.280,0.840,0.420,1) forwards;
	animation-delay: 4s;
	display: block;
	height: auto;
	left: -136px;
	margin: 0 auto;
	max-width: 152px;
	opacity: 0;
	top: 260px;
	width: 100%;
}
.banner_container img.banner_balloon_right {
	animation: balloon_fade_right .5s cubic-bezier(0.280,0.840,0.420,1) forwards;
	animation-delay: 4s;
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 152px;
	opacity: 0;
	right: -116px;
	top: 260px;
	width: 100%;
}
.banner_container img.banner_word {
	animation: fade_Up .5s ease-out 0s forwards;
	animation-delay: 3.4s;
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 226px;
	opacity: 0;
	top: 20px;
	width: 100%;
}
.banner_container img.banner_monkey {
	animation: fade_Up .5s ease-out 0s forwards;
	animation-delay: 2.8s;
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 436px;
	opacity: 0;
	top: 140px;
	width: 100%;
}
.banner_container img.banner_gift {
	animation: title_scale .5s ease-out 0s forwards;
	animation-delay: 2.7s;
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 500px;
	top: 354px;
	transform: scale(0);
	width: 100%;
}
.banner_container img.banner_title {
	animation: title_scale .5s ease-out 0s forwards;
	animation-delay: 2.3s;
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 436px;
	top: 412px;
	transform: scale(0);
	width: 100%;
}

/* --Benefit--------------------------------- */
.benefit {background: #feedc6; overflow: hidden; padding: 105px 0 380px 0; width: 100%;}
.benefit_main_title {animation: fade_left .7s ease-out 0s forwards; animation-delay: 4.1s; opacity: 0;}
.benefit_container {margin: 0 auto; max-width: 953px; position: relative;}
.benefit_container h2 {
	background: #ffe35e;
	border-radius: 56.5px;
	color: #783718;
	font-size: 60px;
	height: 114px;
	left: -112px;
	letter-spacing: 3px;
	line-height: 110px;
	margin: 0 106.6px 0 0;
	position: absolute;
	text-align: center;
	text-shadow: 2px 3px 0 #fff;
	width: 638px;
}
.benefit_container p.sub_title {
	background: #fff;
	border: 3px solid #ffe35e;
	border-radius: 16px;
	color: #e2b33d;
	font-size: 22px;
	font-weight: bold;
	height: 55px;
	left: 145px;
	letter-spacing: 2px;
	line-height: 49px;
	position: absolute;
	text-align: center;
	top: 100px;
	width: 390px;
}
.benefit_price_title figure img {
	height: auto; 
	max-width: 378px;
	position: absolute;
	right: 0;
	top: 110px;
	transform: scale(0);
}
ul.benefit_pic {margin: 0 auto; max-width: 953px; padding-top: 282px; display: flex; justify-content: center; gap: 32px;}
ul.benefit_pic li {max-width: 307px; width: 100%;}
ul.benefit_pic li figure img {
	border: 5px solid #783718;
	border-radius: 20px;
	height: 285px;
	object-fit: cover;
	width: 100%;
}
ul.benefit_pic li h5 {color: #783718; font-size: 22px; padding-top: 34px; text-align: center;}
ul.benefit_pic li p {color: #e2b33d; font-size: 16px; padding-top: 10px; text-align: center;}
ul.benefit_pic li span.dollars {text-decoration: line-through;}
.benefit_container figure img.monkey_girl_word {
	height: auto; 
	margin-top: 55px;
	max-width: 343px; 
	position: absolute; 
	right: 205px;
	width: 100%;
}
.benefit_container figure img.monkey_girl {
	bottom: -418px;
	height: auto; 
	max-width: 304px; 
	position: absolute;
	right: 30px; 
	width: 100%;
}

/* --Skills--------------------------------- */
.skills {
	background: #fff;
	background-image: radial-gradient(circle, #feedc6 6%, transparent 6%), radial-gradient(circle, #feedc6 6%, transparent 6%);
	background-size: 90px 90px;
	background-position: 0 0,45px 45px; 
	padding-bottom: 124px; 
	width: 100%;
}
.skills_container {margin: 0 auto; max-width: 947px; position: relative; width: 100%;}
.skills_container_title {left: 14px; position: absolute; top: -74px; width: 124px;}
.skills_container_title h2 {
	color: #3e3a39; 
	font-size: 48px; 
	letter-spacing: 20px;
	position: relative;
	text-align: center;
	text-shadow: 4px 0 0 #fff;
	writing-mode: vertical-rl;
	z-index: 100;
}
.skills_container_title h2:after {
	content: "";
	background: #ffe35e;	
	border-radius: 63px;
	display: block;
	height: 356px;
	position: absolute;
	right: 12px;
	top: -20px;
	width: 63px;
	z-index: -100;
}
.skills_container_title p {
	color: #783718;
	font-size: 22px;
	left: 78px;
	letter-spacing: 12px;
	position: relative;
	top: -202px;
	writing-mode: vertical-rl;
}
ul.skills_point_content {float: right; margin: 47px auto 0 auto; max-width: 744px; width: 100%;}
ul.skills_point_content li {
	background: #975d38;
	border-radius: 20px;
	box-shadow: 0 5px 7px 0 rgba(0,0,0,.25);
	cursor: pointer;
	float: left;
	height: 342px;
	margin: 0 28px 28px 0;
	width: 358px;
}
ul.skills_point_content li:hover .flip_card_box,.flip_card_back {transform: rotateY(180deg);}
.flip_card_box {
	background-color: transparent;
	height: 100%;
	position: relative;
	transition: transform .8s;
	transform-style: preserve-3d;
	width: 100%;
}
.flip_card_front {padding: 50px 22px 22px; transform: rotateY(0deg);}
.flip_card_back {padding: 22px; transform: rotateY(180deg);}
.flip_card_front,.flip_card_back {
	backface-visibility: hidden;
	background: #975d38;
	border-radius: 20px;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: 4s;
	width: 100%;
}
.flip_card_back_text {background: #fff; border-radius: 20px; padding: 34px 22px 52px 22px;}
.flip_card_back_text dl {margin-top: 24px;}
.flip_card_back_text dl dt {color: #bb967f; font-size: 16px; line-height: 30px; text-align: center;}
ul.skills_point_content li .flip_card_back h3 {color: #8c5532;}
ul.skills_point_content li:nth-child(1),ul.skills_point_content li:nth-child(3) {margin-top: -142px;}
ul.skills_point_content li:nth-child(2n+2) {margin-right: 0;}
ul.skills_point_content li:nth-last-child(1),ul.skills_point_content li:nth-last-child(2) {margin-bottom: 0;}
ul.skills_point_content li figure img {
	display: block;
	height: auto;
	margin: 0 auto 30px auto;
	max-width: 120px; 
	width: 100%;
}
ul.skills_point_content li h3 {
	color: #ffe35e; 
	font-size: 22px; 
	font-weight: 500; 
	letter-spacing: 2px;
	line-height: 34px;
	text-align: center;
}

/* --User Rule--------------------------------- */
.user_rule {overflow: hidden; position: relative;}
.user_rule img.user_rule_bg {width: 100%;}
.user_rule img.user_rule_monkey {bottom: 2px; max-width: 273px; position: absolute; right: 20%;}
.user_text {
	left: 50%;
	margin: -140px auto 0 auto; 
	max-width: 942px; 
	position: absolute; 
	top: 50%;
	transform: translate3d(-50%,0,0);
	width: 100%;
}
.user_text h2 {
	color: #975d38;
	font-size: 22px;
	letter-spacing: 2px;
	margin-bottom: 25px;
	position: relative;
}
.user_text h2:after {
	content: "";
	border-radius: 9.5px;
	background-color: #feedc6;
	display: block;
	height: 19px;
	margin: 18px 379px 20px 0;
	position: absolute;
	top: -5px;
	width: 98px;
	z-index: -100;
}
.user_text p {color: #975d38; font-size: 16px; line-height: 28px;}

/* --Form--------------------------------- */
.form_box {background: #f9f9f9; padding: 63px 0;}
.form_container {margin: 0 auto; max-width: 960px; position: relative; width: 100%}
.form_container h1 img {
	height: auto; 
	left: 70px; 
	max-width: 378px;
	position: absolute; 
	transform: scale(0);
	top: -165px;
}
.form_detail {margin: 0 auto; max-width: 960px; position: relative; width: 100%}
.cellphone_no {float: left; margin: 12px 0; max-width: 470px; width: 100%;}
.cellphone_no:nth-child(2) {margin-left: 20px;}
.form_detail select[name=selSubCourseClassify],.form_detail select[name="selSubCourseName"],
.form_detail select[name=area],.form_detail select[name=city],
.input_box input,.input_box input[type=email] {
	background: #fff;
	border-radius: 5px;
	border: none;
	float: left;
	height: 50px;
	line-height: 46px;
	max-width: 470px;
	outline: 0;
	padding: 0 14px;
	width: 100%;
}
.city_area {float: left; max-width: 470px; width: 100%;}
.form_detail select[name=selSubCourseClassify],.form_detail select[name="selSubCourseName"],
.form_detail select[name=area],.form_detail select[name=city] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url(../images/select_arrow.png) no-repeat transparent;
	background-color: #fff;
	background-position: 90% center;
	color: rgba(151,93,56,.7);
	font-size: 18px;
	height: 50px;
	line-height: 46px;
	margin-right: 20px;
	max-width: 225px;
	outline: 0;
	padding: 0 14px;
	width: 100%;
}
.form_detail select[name=area],.form_detail select[name="selSubCourseName"] {float: right; margin-right: 0;}
.form_left select[name=area]:focus,.form_detail select[name=city]:focus,
.form_detail select[name=selSubCourseClassify]:focus,.form_detail select[name="selSubCourseName"]:focus,
.input_box input[name=cellphone]:focus,.input_box input[name=email]:focus,
.input_box input[name=name]:focus {outline: 3px solid #e3b000;}
.form_detail .btn_box input[type=checkbox] {
	background: #fff799;
	border: 1px solid #14439b;
	border-radius: 5px;
	display: block;
	height: 18px;
	margin-right: 4px;
	width: 18px;
}
.form_detail select[name=area]:hover,.form_detail select[name=city]:hover,
.form_detail select[name=selSubCourseClassify]:hover,.form_detail select[name="selSubCourseName"]:hover,
.input_box input[name=cellphone]:hover,.input_box input[name=email]:hover,.input_box input[name=name]:hover {
	background: #feedc6; 
	border-radius: 5px;
	border: 3px solid #783718;
	color: #605a5a; 
	cursor: pointer; 
	outline: none;
}
::placeholder {color: rgba(151,93,56,.7); font-size: 18px; opacity: 1;}
::-ms-input-placeholder {color: rgba(151,93,56,.7); font-size: 18px;}
.input_box input[name=cellphone]:hover::placeholder,.input_box input[name=email]:hover::placeholder,
.input_box input[name=name]:hover::placeholder,.form_detail select[name="area"]:hover::placeholder,
.form_detail select[name="city"]:hover::placeholder {color: #605a5a;}
.form-check-label,.form-check-label a {color: rgba(151,93,56,.7); font-size: 14px; text-decoration: none;}
.input_box input[type=tel] {float: right;}
.input_box p {color: #844a36; font-size: 18px; font-weight: 400; padding: 0 0 8px 14px;}
.area p {padding: 0 0 8px 24px;}
.input_box input[type=email] {
	color: #354b52;
	float: left;
	height: 50px;
	line-height: 46px;
	margin-right: 20px;
	outline: 0;
	padding: 0 14px;
}
.btn_box {float: right; margin-top: 39px; max-width: 470px; width: 100%;}
.submit_btn {
	background-color: #783718;
	border-radius: 27.5px;
	border: none;
	color: #ffe35e;
	display: block;
	font-size: 22px;
	height: 55px;
	line-height: 53px;
	margin: 28px auto 0 auto;
	outline: none;
	width: 225px;
}
.submit_btn:hover {animation: button_pulse 1000ms linear 2 alternate;}
.city {float: left; width: 50%;}
.area {float: right; width: 50%;}
input,select {margin-bottom: 8px;}
label.error {color: #bf2027;}
label#area-error {margin-left: 10px;}

/* --Footer--------------------------------- */
.footer {background: #fafafa; height: 154px; margin-top: -4px; width: 100%;}
.footer_content {
    height: 154px; 
    margin: 0 auto; 
    max-width: 942px;
    position: relative; 
	width: 100%;
}
.footer_logo img {height: auto; max-width: 160px; position: absolute; top: 44px;}
.footer_social_icon {position: absolute; right: 0; top: 44px;}
.footer_social_detail {margin-left: -6px;}
.footer_social_detail li {float: left; margin-right: 6px;}
.footer_social_detail li:last-child {margin-right: 0;}
.footer_social_detail li img {height: auto; max-width: 32px;}
img.footer_tel {margin-top: 6px;}
.footer_line_content {    
    background: #fafafa;
    background: -moz-linear-gradient(left, #ffe35e 0%, #ffe35e 33%, #c57e51 33%, #c57e51 66%, #804a36 66%, #804a36 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffe35e), color-stop(33%,#ffe35e), color-stop(33%,#c57e51), color-stop(66%,#c57e51), color-stop(66%,#804a36), color-stop(100%,#804a36));
    background: -webkit-linear-gradient(left, #fbf4e2 0%,#fbf4e2 33%, #f1e360 33%, #f1e360 66%,#efb85d 66%,#efb85d  100%);
    background: -o-linear-gradient(left, #ffe35e 0%, #ffe35e 33%, #c57e51 33%, #c57e51 66%, #804a36 66%, #804a36 100%);
    background: -ms-linear-gradient(left, #ffe35e 0%, #ffe35e 33%, #c57e51 33%, #c57e51 66%, #804a36 66%, #804a36 100%);
    background: linear-gradient(to right, #ffe35e 0%, #ffe35e 33%, #c57e51 33%, #c57e51 66%, #804a36 66%, #804a36 100%);
    height: 20px;
}

/* --Animation--------------------------------- */
.title_scale {animation: title_scale .5s ease-out 0s forwards;}
@keyframes loading_title_swing {
	0% {transform: translateX(-10px);}
	25% {transform: translateX(10px);}
	50% {transform: translateX(-10px);}
	75% {transform: translateX(10px);}
	100% {transform: translateX(0);}
}
@keyframes header_fade_In {
	0% {transform: translateY(-80px);}
	100% {transform: translateY(0);}
}
@keyframes banner_line_scroll {
	0% {transform: scale(1,0); transform-origin: 0 0;}
	50% {transform: scale(1,1); transform-origin: 0 0;}
	50.1% {transform: scale(1,1); transform-origin: 0 100%;}
	to {transform: scale(1,0); transform-origin: 0 100%;}
}
@keyframes fade_left {
    0% {opacity: 0; transform: translateX(-74px);}
    100% {opacity: 1; transform: translateX(0);}
}
@keyframes fade_Up {
    0% {opacity: 0; transform: translateY(74px);}
    100% {opacity: 1; transform: translateX(0);}
}
@keyframes title_scale {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}
@keyframes balloon_fade_left {
    0% {opacity: 0; left: -50px; top: 490px;}
    100% {opacity: 1; transform: translateX(0);}
}
@keyframes balloon_fade_right {
    0% {opacity: 0; right: -50px; top: 490px;}
    100% {opacity: 1; transform: translateX(0);}
}
@keyframes mobile_auto_rotation {
	from {transform: rotateY(0deg);}
	to {transform: rotateY(180deg);}
}
@keyframes button_pulse { 
	0% {-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	1.8% {-webkit-transform: matrix3d(1.016, 0, 0, 0, 0, 1.037, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.016, 0, 0, 0, 0, 1.037, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	3.5% {-webkit-transform: matrix3d(1.033, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.033, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	4.7% {-webkit-transform: matrix3d(1.045, 0, 0, 0, 0, 1.129, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.045, 0, 0, 0, 0, 1.129, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	5.31% {-webkit-transform: matrix3d(1.051, 0, 0, 0, 0, 1.142, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.051, 0, 0, 0, 0, 1.142, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	7.01% {-webkit-transform: matrix3d(1.068, 0, 0, 0, 0, 1.158, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.068, 0, 0, 0, 0, 1.158, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	8.91% {-webkit-transform: matrix3d(1.084, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.084, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	9.41% {-webkit-transform: matrix3d(1.088, 0, 0, 0, 0, 1.132, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.088, 0, 0, 0, 0, 1.132, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	10.71% {-webkit-transform: matrix3d(1.097, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.097, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	12.61% {-webkit-transform: matrix3d(1.108, 0, 0, 0, 0, 1.077, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.108, 0, 0, 0, 0, 1.077, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	14.11% {-webkit-transform: matrix3d(1.114, 0, 0, 0, 0, 1.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.114, 0, 0, 0, 0, 1.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	14.41% {-webkit-transform: matrix3d(1.115, 0, 0, 0, 0, 1.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.115, 0, 0, 0, 0, 1.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	16.32% {-webkit-transform: matrix3d(1.119, 0, 0, 0, 0, 1.077, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.119, 0, 0, 0, 0, 1.077, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	18.12% {-webkit-transform: matrix3d(1.121, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.121, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	18.72% {-webkit-transform: matrix3d(1.121, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.121, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	20.02% {-webkit-transform: matrix3d(1.121, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.121, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	21.82% {-webkit-transform: matrix3d(1.119, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.119, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	24.32% {-webkit-transform: matrix3d(1.115, 0, 0, 0, 0, 1.11, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.115, 0, 0, 0, 0, 1.11, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	25.53% {-webkit-transform: matrix3d(1.113, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.113, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	29.23% {-webkit-transform: matrix3d(1.106, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.106, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	29.93% {-webkit-transform: matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	35.54% {-webkit-transform: matrix3d(1.098, 0, 0, 0, 0, 1.105, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.098, 0, 0, 0, 0, 1.105, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	36.64% {-webkit-transform: matrix3d(1.097, 0, 0, 0, 0, 1.106, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.097, 0, 0, 0, 0, 1.106, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	41.04% {-webkit-transform: matrix3d(1.096, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.096, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	44.04% {-webkit-transform: matrix3d(1.096, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.096, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	51.45% {-webkit-transform: matrix3d(1.099, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.099, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	52.15% {-webkit-transform: matrix3d(1.099, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.099, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	58.86% {-webkit-transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	63.26% {-webkit-transform: matrix3d(1.101, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.101, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	66.27% {-webkit-transform: matrix3d(1.101, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.101, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	73.77% {-webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	81.18% {-webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	85.49% {-webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	88.59% {-webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	96% {-webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	100% {-webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}
@media screen and (min-width:1201px){
	.mobile_top_bar_box,img.mobile_banner_icon,.mobile_cellphone_no,img.mobile_user_rule,
	.mobile_cellphone,img.mobile_footer_tel,p.mobile_contact_time,.user_text p.mobile_user_text,
	img.ipad_user_rule,.user_text p.ipad_user_text {display: none;}
}

/* --Mobile Web--------------------------------- */
@media screen and (max-width:1240px){
	.banner figure img.banner_circle_icon8 {right: -300px;}
}
@media screen and (max-width:1200px){
	.header_box,.banner_container img.banner_balloon_left,.banner_container img.banner_balloon_right,
	.skills_container_title h2:after,img.user_rule_bg,img.user_rule_monkey,
	img.footer_tel,.banner figure img.banner_circle_icon1,.banner figure img.banner_circle_icon2,
	.banner figure img.banner_circle_icon3,.banner figure img.banner_circle_icon4, 
	.banner figure img.banner_circle_icon5,.banner figure img.banner_circle_icon6, 
	.banner figure img.banner_circle_icon7,.banner figure img.banner_circle_icon8,
	.banner figure img.banner_star_icon1,.banner figure img.banner_star_icon2,
	.banner figure img.banner_star_icon3,.banner figure img.banner_star_icon4,
	.banner figure img.banner_star_icon5,.user_text p.desktop_user_text,img.loading_pattern,
	.user_text p.mobile_user_text,img.mobile_user_rule {display: none; margin: 0;}
	.benefit_container figure img.monkey_girl_word,.benefit_container figure img.monkey_girl,
	.benefit_price_title figure img,.form_container h1 img {animation: none;}
	#loading_mask img.loading_title {max-width: 195px;}
	.mobile_banner_detail {margin-top: -50px;}
	.banner {padding-top: 60px;}
	.banner figure img.banner_star_icon1,.banner figure img.banner_star_icon4,
	.banner figure img.banner_star_icon5,.banner figure img.banner_circle_icon4,
	.banner figure img.banner_circle_icon5,.banner figure img.banner_circle_icon6 {display: block;}
	.banner figure img.banner_star_icon1 {left: 250px; right: 0; top: 100px;}
	.banner figure img.banner_star_icon4 {right: -10px; top: 290px; width: 25px;}
	.banner figure img.banner_star_icon5 {left: 0; top: 670px; width: 25px;}
	.banner figure img.banner_circle_icon4 {left: -24px; top: 372px;}
	.banner figure img.banner_circle_icon5 {left: 20px; top: 180px;}
	.banner figure img.banner_circle_icon6 {left: 185px; top: 640px;}
	.mobile_top_bar_box {
        background: #fff;
        box-shadow: 0 6px 8px rgba(0,0,0,.25);
        box-sizing: border-box;
        display: block;
		height: 60px;
        position: fixed;
        z-index: 20000;
        width: 100%;
    }
    .mobile_golden_logo img {float: left; margin: 15.5px 0 0 16px; max-width: 128px;}
    #mobile_menu {
        float: right;
        margin: 23px 16px 0 0;
        transform: rotate(0deg);
        transition: .4s ease-in-out;
        width: 18px;
    }
    #mobile_menu span {
        background: #844a36;
        display: block;
        height: 2px;
        left: 0;
        position: absolute;
        transform: rotate(0deg);
        transition: .4s ease-in-out;
        width: 18px;
    }
    #mobile_menu span:nth-child(1) {top: 0;}
    #mobile_menu span:nth-child(2) {top: 6px;}
    #mobile_menu span:nth-child(3) {top: 12px;}
    #mobile_menu.open span:nth-child(1) {top: 6px; transform: rotate(135deg);}
    #mobile_menu.open span:nth-child(2) {opacity: 0; width: 0%;}
    #mobile_menu.open span:nth-child(3) {top: 6px; transform: rotate(-135deg);}
    #mobile_scroll_menu {
		animation: opacity 1s ease-out 0s forwards;
		background: #fff;
		box-shadow: 0 6px 8px rgb(0 0 0 / 25%);
        display: none;
        height: auto;
        margin-top: 60px;
        opacity: 0;
        width: 100%;
    }
    #mobile_scroll_menu ul {background: #fff; padding: 12px 0 0 0; width: 100%;}
    #mobile_scroll_menu li {height: 54px; padding-bottom: 16px; width: 100%;}
    #mobile_scroll_menu li a {
        color: #844a36;
        display: block;
        font-size: 22px;
        font-weight: 200;
        letter-spacing: 1px;
        margin: auto;
        padding-right: 40px;
        text-align: right;
        text-decoration: none;
        transition: .4s opacity ease-out;
    }
    #mobile_scroll_menu li a.sidebar_menu_active {color: #f9c270;}
    #mobile_scroll_menu li a.sidebar_menu_active:after {
        content: "";
        background: url(../images/mobile_title_icon.png) no-repeat;
        display: block;
        height: 20px;
        right: 16px;
        top: 3.5px;
        width: 26px;
    }
    #mobile_scroll_menu.menu_show {animation: fadeIn .4s ease-out 0s forwards; display: block; opacity: 1;}
	#mobile_scroll_menu.menu_hide {animation: fadeOut .4s ease-out 0s forwards; display: none; opacity: 0;}
	.banner {height: 772px;}
	.banner_container {max-width: 280px;}
	.banner_container img.banner_word {max-width: 240px; top: 152px;}
	.banner_container img.banner_monkey,.banner_container img.banner_gift,
	.banner_container img.banner_title {max-width: 280px;}
	.banner_container img.banner_monkey {top: 318px;}
	.banner_container img.banner_gift {top: 442px;}
	.banner_container img.banner_title {top: 484px;}
	.benefit {padding: 66px 0 300px 0;}
	.benefit_container h2 {
		font-size: 30px; 
		left: auto;
		height: 58px;
		letter-spacing: 2px;
		line-height: 58px;
		margin: 0 auto; 
		padding: 0; 
		position: static;
		text-align: center;
		width: 290px;
	}
	.benefit_container p.sub_title {
		border-radius: 10px;
		font-size: 12px;
		height: 33px;
		left: 50%;
		line-height: 25px;
		top: 65px;
		text-align: center;
		transform: translate(-50%,-50%);
		width: 215px;
	}
	.benefit_price_title figure img {
		display: block;
		height: auto; 
		left: 50%;
		margin: 0 auto; 
		max-width: 243px; 
		right: auto;
		transform: translate(-50%,0);
	}
	ul.benefit_pic {margin: 0 auto; max-width: 254px; padding: 170px 0 0 0;}
	ul.benefit_pic li figure img {height: 230px;}
	ul.benefit_pic li h5 {font-size: 20px; padding-top: 6px;}
	ul.benefit_pic li p {font-size: 15px; padding-top: 8px;}
	.benefit_container figure img.monkey_girl_word {left: 50%; margin-top: 60px; max-width: 240px; right: auto;}
	.benefit_container figure img.monkey_girl {bottom: -343px; max-width: 256px;}
	.skills {padding: 60px 0 100px 0;}
	.skills_container_title {left: auto; position: static; top: auto; width: 100%;}
	.skills_container_title h2 {
		background: #ffe35e;
		border-radius: 58px;
		color: #783718; 
		font-size: 30px; 
		letter-spacing: 2px;
		margin: 0 auto; 
		padding: 12px 0;
		width: 290px;
		writing-mode: horizontal-tb;
	}
	.skills_container_title p {
		color: #783718; 
		font-size: 18px; 
		letter-spacing: 1px;
		left: auto;
		margin-top: 16px;
		text-align: center; 
		top: auto; 
		writing-mode: horizontal-tb;
	}
	ul.skills_point_content {float: none; margin: 30px auto 0 auto; width: 274px;}
	ul.skills_point_content li {
		display: block;
		float: none;
		height: 262px;
		margin: 0 auto 30px auto; 
		padding: 0;
		width: 274px;
	}
	ul.skills_point_content li h3 {font-size: 18px; line-height: 28px;}
	ul.skills_point_content li figure img {margin: 0 auto 24px auto;}
	ul.skills_point_content li:nth-child(2n+2) {margin-right: auto;}
	ul.skills_point_content li:nth-child(1),ul.skills_point_content li:nth-child(3) {margin-top: 0;}
	ul.skills_point_content li:nth-last-child(1),ul.skills_point_content li:nth-last-child(2) {margin-bottom: 30px;}
	ul.skills_point_content li:last-child {margin-bottom: 0;}
	ul.skills_point_content li figure img {max-width: 92px;}
	ul.skills_point_content li:hover .flip_card_box,.flip_card_back {transform: none;}
	.flip_card_box {animation: none; transform-style: flat; transition: none;}
	.flip_card_front {backface-visibility: hidden; padding: 38px 16px 38px;}
	.flip_card_back {backface-visibility: visible; padding: 16px;}
	.flip_card_front,.flip_card_back {transform: none;}
	.flip_card_back_text {height: 100%; padding: 12px 8px 12px;}
	.flip_card_back_text dl {margin-top: 12px;}
	.user_text {padding: 68px 148px 0 148px;}
	.user_text p.ipad_user_text {font-size: 16px; line-height: 28px;}
	.form_container h1 img {
		display: block;
		left: 50%;
		margin: -30px auto 0 auto; 
		max-width: 244px; 
		top: auto;
		transform: translate(-50%,-50%);
	}
	.form_box {background: #f9f9f9; padding: 20px 16px 78px 16px;}
	.form_detail {padding-top: 20px;}
	.form_detail select[name=selSubCourseClassify],.form_detail select[name="selSubCourseName"],
	.form_detail select[name=area],.form_detail select[name=city],.input_box input[type=email] {margin-right: 0;}
	::placeholder,.form_detail select[name=area],.form_detail select[name=city],
	.form_detail select[name=selSubCourseClassify],.form_detail select[name="selSubCourseName"],
	.form_detail select[name=area],.form_detail select[name=city] {color: #975d38; font-size: 14px;}
	::-ms-input-placeholder {color: #975d38; font-size: 14px;}
	.form_detail select[name=area] {float: none; margin-bottom: 0;}
	.form_detail select[name=city] {margin-bottom: 12px;}
	.form_detail select[name=selSubCourseClassify] {margin-bottom: 12px;}
	.form_detail select[name=selSubCourseClassify],.form_detail select[name="selSubCourseName"],
	.form_detail select[name=area],.form_detail select[name=city] {max-width: none;}
	.form_detail select[name=area] {margin-bottom: 8px;}
	.form_detail select[name=selSubCourseClassify],.form_detail select[name="selSubCourseName"], 
	.form_detail select[name=area],.form_detail select[name=city],.input_box input[type=email] {float: none;}
	.input_box input, .input_box input[type=email] {max-width: none;}
	.input_box .ml20 {margin-left: 0;}
	.area p {padding: 0 0 8px 14px;}
	.cellphone_no {margin: 12px 0 0 0;}
	.cellphone_no:nth-child(2){margin-left: 0;}
	.city,.area {float: none; width: 100%;}
	.btn_box {float: none; margin: 0 auto; max-width:262px;}
	.city_area {margin-top: 12px;}
	.submit_btn {margin: 48px auto 0 auto;}
	.user_text {
		left: auto; 
		margin: 0;
		max-width: none;
		padding: 30px 16px 0 16px;
		position: absolute;
		top: auto; 
		transform: none;
	}
	.user_text h2:after {
		content: "";
		border-radius: 9.5px;
		background-color: #feedc6;
		display: block;
		height: 19px;
		margin: -10px 379px 20px 0;
		position: static;
		top: -5px;
		width: 98px;
	}
	.user_text h2 {margin: 0 auto; text-align: center; width: 98px;}
	.user_text p {
		font-size: 12px; 
		letter-spacing: .86px;
		line-height: 24px; 
		margin-top: 30px; 
		text-align: center;
	}
	.footer {background: #fafafa; height: auto; padding: 24px; width: 100%;}
	.footer_content {height: auto;}
	.footer_logo img {display: block; margin: 0 auto; position: static; top: 44px;}
	.footer_social_detail li {margin-right: 10px;}
	.footer_social_icon {
		margin: 22px auto 0 auto;
		position: static;
		right: auto; 
		top: auto; 
		width: 158px;
	}
	img.mobile_footer_tel {display: block; height: auto; margin: 14px auto 12px auto; max-width: 160px;}
	p.mobile_contact_time {color: #c57e51; display: block; font-size: 12px; text-align: center;}
	.footer_line_content {    
		background: #fafafa;
		background: -moz-linear-gradient(left, #ffe35e 0%, #ffe35e 100%);
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffe35e), color-stop(100%,#ffe35e));
		background: -webkit-linear-gradient(left, #ffe35e 0%, #ffe35e 100%);
		background: -o-linear-gradient(left, #ffe35e 0%, #ffe35e 100%);
		background: -ms-linear-gradient(left, #ffe35e 0%, #ffe35e 100%);
		background: linear-gradient(to right, #ffe35e 0%, #ffe35e 100%);
		height: 20px;
	}
}
@media screen and (min-width:320px) and (max-width:1200px){
	.form_box label#area-error {margin-left: 0;}
}
@media only screen and (min-width:768px) and (max-width:1200px){
	ul.benefit_pic {max-width: none;}
	.skills {padding: 60px 0 80px 0;}
	ul.skills_point_content {width: 578px;}
	ul.skills_point_content li {float: left;}
	ul.skills_point_content li:nth-child(2n+2) {margin-left: 30px;}
	.benefit_container figure img.monkey_girl_word {transform: translate(25%,-35%);}
	.user_rule {margin-top: -2px;}
	.form_detail {padding-top: 30px;}
	.cellphone_no {max-width: none; width: 100%;}
	.city_area,.input_box input {max-width: none;}
	.btn_box {float: right; max-width: none;}
}
@media screen and (min-width:490px) and (max-width:1024px){
	img.ipad_user_rule {display: block; height: auto; width: 100%;}
	.user_text {padding-top: 58px;}
}
@media screen and (max-width:980px){
	ul.benefit_pic {width: 578px;}
}
@media screen and (max-width:767px){
	.benefit {padding: 66px 0 269px 0;}
	.benefit_container figure img.monkey_girl_word {transform: translate(-50%,-60%);}
	ul.benefit_pic { flex-direction: column; align-items: center; margin-bottom: 42px;}
	.cellphone_no:nth-child(2),.cellphone_no:nth-child(3) {margin-left: 0;}
	.city_area,.cellphone_no,.input_box input,.input_box input[type=email] {max-width: none;}
	.btn_box {display: block; float: right; margin-top: 8px; max-width: none;}
}
@media screen and (max-width:600px){
	img.ipad_user_rule {display: none;}
	img.mobile_user_rule {display: block; height: auto; width: 100%;}
}
@media screen and (max-width:490px){
	.user_text {padding: 34px 16px 0 16px;}
	.user_text p.ipad_user_text {display: none;}
	.user_text p.mobile_user_text {display: block; margin-top: 40px;}
}
@media screen and (max-width:420px){
	.user_text p.mobile_user_text {margin-top: 12px; text-align: justify;}
}
@media screen and (max-width:340px){
	.banner figure img.banner_circle_icon4 {left: -12px;}
}