@media screen and (max-device-width: 480px) and (orientation: portrait) {
	body {
		background-color: rgba(223,32,18,1);
		cursor: pointer;
	}
	#menu_container {
		position: relative;
		background-image: url('./images_mobile/logo.png');
		background-color: rgba(255,255,255,1);
		background-size: contain;
		background-position: top left;
	}
	#menu {
		width: 100%;
		height: 80px;
		background-image: url('./images_mobile/btn_menu.png');
		background-size: contain;
		background-position: top right;
		display: block;
		cursor: pointer;
	}
	#menu ul {
		position: absolute;
		top: 80px;
		right: 0px;
		display: none;
	}
	#menu ul.show {
		display: block;
	}
	#menu ul li {
		z-index: 10000000;		
	}
	#menu ul li a {
		width: 162px;
		height: 90px;
		background-color: rgba(223,32,18,0.5);
		border: 1px solid rgba(163,2,1,1);
	}
	#menu ul li a:hover {
		background-color: rgba(163,2,1,1);
	}
	#fb_share {
		top: 12px;
		left: 22%;
	}
	#line_share {
		top: 45px;
		left: 22%;
	}
	#volume, #rule_detail img, #rule_close, #prize_close, #prize_announce_close, #declaimer, #rule_frame, #quiz_bg, #quiz_form_bg, #test_bg, #explain_bg {
		display: none;
	}
	#main_container {
		position: relative;
		left: 0;
		width: 100%;
	}
	#video_container {
		margin-top: 0px;
	}
	#intro_container {
		background-color: rgba(0,0,0,0.7);
	}
	#intro {
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-image: url('./images/bg_intro.png');
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#rule_container {
		height: 1500px;
		background-color: rgba(223,32,18,1);
		position: relative;
	}
	#rule {
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url('./images_mobile/bg_rule.png');
		background-position: top center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#rule_detail {
		position: relative;
		width: 100%;
		height: 100%;	
	}
	#prize_link_clickarea {
		position: relative;
		width: 100%;
	    height: 7%;
    	margin-top: 80%;
	}
	#personal_declaration {
		color: rgba(255,255,255,1);
		font-size: 1vw;
		padding: 2%;
		text-align: left;
	}
	#prize_container {
		height: 1000px;;
		background-color: rgba(223,32,18,1);
		position: relative;
	}
	#prize {
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/prize.png');
		background-position: top center;
		background-repeat: no-repeat;
		background-size: contain;
		height: 100%;	
	}
	#btn_prize_announce {
		position: absolute;
		top: 13px;
		right: 0px;
		cursor: pointer;
	}
	#prize_announce_container {
		height: 1000px;;
		background-color: rgba(223,32,18,1);
		position: relative;
	}
	#prize_announce {
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/prize_announce.png');
		background-position: top center;
		background-repeat: no-repeat;
		background-size: contain;
		height: 100%;	
	}
	#class_container {
		height: 1000px;
		background-color: rgba(223,32,18,1);
		position: relative;
	}
	#class {
		position: relative;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		vertical-align: middle;
		margin: 0 auto;
		padding: 70px 5px 10px 5px;
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/class.png');
		background-position: top center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#class a {
	}
	#class img {
		padding: 10px;
		width: calc(100%/2.1);
		height: auto;
		display: inline-box;
	}
	#quiz {
		position: relative;
		left: 0;
		width: 100%;
		height: 600px;
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/bg_movie_quiz.png');
		background-size: contain;
		margin: 0 auto;
		text-align: center;

	}
	#quiz_area {
		position: relative;
		padding-top: 70px;
	}
	.quizTitle {
		width: 100%;
		height: 70px;
		padding: 0px 10px 10px 10px;
		font-size: 25px;
		color: rgba(255,255,255,1);
		text-align: left;
		vertical-align: middle;
	}
	.quizItem {
		width: 90%;
		height: 68px;
		padding: 18px 0px 0px 10px;
		border-bottom: 1px solid rgba(255,147,118,1);
		font-size: 25px;
		color: rgba(255,255,255,1);
		text-align: left;
		vertical-align: middle;
		cursor: pointer;
	}
	#quiz_submit {
		position: relative;
		top: 50px;
	}
	#quiz_form {
		position: relative;
		left: 0;
		max-width: 700px;
		width: 100%;
		background-color: rgba(223,32,18,1);
	}
	#quiz_form_bgS {
		position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
		height: auto;
	}
	#quiz_form form input.textinput {
		width: 60%;
		height: 6%;
		background-color: rgba(249,248,244,1);
		border-radius: 6px;
		font-size: 3vw;
	}
	#quiz_form form select {
		width: 30%;
		height: 6%;
		background-color: rgba(249,248,244,1);
		border-radius: 6px;
		font-size: 3vw;
	}
	#qf_name {
		position: absolute;
		top: 39.3%;
		left: 35%;
	}
	#qf_tel {
		position: absolute;
		top: 47%;
		left: 35%;
	}
	#qf_email {
		position: absolute;
		top: 54.6%;
		left: 35%;
	}
	#qf_county {
		position: absolute;
		top: 62.4%;
		left: 35%;
	}
	#qf_district {
		position: absolute;
		top:  62.4%;
		left: 65%;
	}
	#qf_add {
		position: absolute;
		top: 385px;
		left: 35%;
	}
	#qf_read {
		position: absolute;
		top: 71.5%;
		left: 35%;
	}
	#accept {
		position: absolute;
		top: 71%;
		left: 39%;
		color: rgba(255,255,255,1);
		font-size: 3.5vw;
	}
	#personal {
		color: rgba(255,147,118,1);
		cursor: pointer;
	}
	#qf_reset {
		position: absolute;
		bottom: 6%;
		left: 50%;
		cursor: pointer;
	}
	#qf_submit {
		position: absolute;
		bottom: 6%;
		right: 50%;
		cursor: pointer;
	}
	#test {
		position: relative;
		left: 0;
		width: 100%;
		height: 600px;
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/bg_test.png');
		background-size: contain;
		margin: 0 auto;
		text-align: center;
	}
	#question_area {
		position: relative;
		padding-top: 60px;
	}
	#question_background {
		display: none;
	}
	.question_content {
		width: 100%;
		height: 100px;
		padding: 0px 10px 10px 10px;
		font-size: 20px;
		color: rgba(255,255,255,1);
		text-align: left;
	}
	.question {
		width: 100%;
		height: 68px;
		padding: 9px 0px 0px 10px;
		border-bottom: 1px solid rgba(255,147,118,1);
		font-size: 16px;
		color: rgba(255,255,255,1);
		text-align: left;
		vertical-align: middle;
	}
	#question_submit {
		bottom: 0px;
		right: 35px;
	}
	#explain {
		position: relative;
		left: 0;
		width: 100%;
		height: 650px;
		padding-top: 60px;
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/bg_explain.png');
		background-size: contain;
		margin: 0 auto;
		text-align: center;
	}
	#explain_area {
		position: relative;
		width: 100%;
		height: 100%;
	}
	#explain_background {
		position: relative;
		width: 100%;
		height: 100%;
		position: relative;
	}
	#explain_pc_img {
		display: none;
	}
	#explain_mobile_img {
		position: absolute;
		top: 230px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: top left;
		background-size: contain;
	}
	#explain_title {
		font-size: 26px;
		margin: 0px 10px 10px 10px;
	}
	#explain_content {
		font-size: 16px;
		margin: 0px 10px 10px 10px;
	}
	#btn_retest {
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: calc(100%/3);
		cursor: pointer;		
	}
	#btn_retest img {
		width:100%;
	    height: auto;
	}
	#btn_class {
		position: absolute;
		bottom: 0px;
		left: calc(100%/3);
		width: calc(100%/3);
		cursor: pointer;
	}
	#btn_class img {
		width:100%;
	    height: auto;
	}
	#btn_fb {
		position: absolute;
		bottom: 0px;
		left: calc(100%*2/3);
		width: calc(100%/3);
		cursor: pointer;	
	}
	#btn_fb img {
		width:100%;
	    height: auto;
	}
	#gotest_container {
		background-color: rgba(0,0,0,0.7);
	}
	#go_test {
		background-size: contain;
	}
	#copyright_container {
		position: relative;
		z-index: 1000;
		width: 100%;
		background-repeat: no-repeat;
	}
	#copyright {
		width: 100%;
		text-align: center;
		margin: 0 auto;
	}
	#copyright img {
		display: inline-block;
		width: calc(100%/4);
		height: auto;
	}
}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-device-width: 481px) and (orientation: portrait) {
	body {
		background-color: rgba(223,32,18,1);
		cursor: pointer;
	}
	#menu_container {
		position: relative;
		background-image: url('./images_mobile/logo.png');
		background-color: rgba(255,255,255,1);
		background-size: contain;
		background-position: top left;
	}
	#menu {
		width: 100%;
		height: 80px;
		background-image: url('./images_mobile/btn_menu.png');
		background-size: contain;
		background-position: top right;
		display: block;
		cursor: pointer;
	}
	#menu ul {
		position: absolute;
		top: 80px;
		right: 0px;
		display: none;
	}
	#menu ul.show {
		display: block;
	}
	#menu ul li {
		z-index: 10000000;		
	}
	#menu ul li a {
		width: 162px;
		height: 90px;
		background-color: rgba(223,32,18,0.5);
		border: 1px solid rgba(163,2,1,1);
	}
	#menu ul li a:hover {
		background-color: rgba(163,2,1,1);
	}
	#fb_share {
		top: 12px;
		left: 22%;
	}
	#line_share {
		top: 45px;
		left: 22%;
	}
	#volume, #rule_detail img, #rule_close, #prize_close, #prize_announce_close, #declaimer, #rule_frame, #quiz_bg, #quiz_form_bg, #test_bg, #explain_bg {
		display: none;
	}
	#main_container {
		position: relative;
		left: 0;
		width: 100%;
	}
	#video_container {
		margin-top: 0px;
	}
	#intro_container {
		background-color: rgba(0,0,0,0.7);
	}
	#intro {
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-image: url('./images/bg_intro.png');
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#rule_container {
		height: 1500px;
		background-color: rgba(223,32,18,1);
		position: relative;
	}
	#rule {
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url('./images_mobile/bg_rule.png');
		background-position: top center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#rule_detail {
		position: relative;
		width: 100%;
		height: 100%;	
	}
	#prize_link_clickarea {
		position: relative;
		width: 100%;
	    height: 7%;
    	margin-top: 80%;
	}
	#personal_declaration {
		color: rgba(255,255,255,1);
		font-size: 2vw;
		padding: 2%;
		text-align: left;
	}
	#prize_container {
		height: 1000px;;
		background-color: rgba(223,32,18,1);
		position: relative;
	}
	#prize {
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/prize.png');
		background-position: top center;
		background-repeat: no-repeat;
		background-size: contain;
		height: 100%;	
	}
	#btn_prize_announce {
		position: absolute;
		top: 13px;
		right: 0px;
		cursor: pointer;
	}
	#prize_announce_container {
		height: 1000px;;
		background-color: rgba(223,32,18,1);
		position: relative;
	}
	#prize_announce {
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/prize_announce.png');
		background-position: top center;
		background-repeat: no-repeat;
		background-size: contain;
		height: 100%;	
	}
	#class_container {
		background-color: rgba(223,32,18,1);
		position: relative;
	}
	#class {
		position: relative;
		left: 0;
		width: 100%;
		text-align: center;
		vertical-align: middle;
		margin: 0 auto;
		padding: 14% 1% 5% 1%;
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/class.png');
		background-position: top left;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#class a {
		width: calc(100%/2.2);
		display: inline-block;
		margin: 1%;
	}
	#class img {
		width: 100%;
		height: auto;
	}
	#quiz {
		position: relative;
		left: 0;
		width: 100%;
		height: 600px;
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/bg_movie_quiz.png');
		background-size: contain;
		margin: 0 auto;
		text-align: center;

	}
	#quiz_area {
		position: relative;
		padding-top: 70px;
	}
	.quizTitle {
		width: 100%;
		height: 70px;
		padding: 0px 10px 10px 10px;
		font-size: 25px;
		color: rgba(255,255,255,1);
		text-align: left;
		vertical-align: middle;
	}
	.quizItem {
		width: 90%;
		height: 68px;
		padding: 18px 0px 0px 10px;
		border-bottom: 1px solid rgba(255,147,118,1);
		font-size: 25px;
		color: rgba(255,255,255,1);
		text-align: left;
		vertical-align: middle;
		cursor: pointer;
	}
	#quiz_submit {
		position: relative;
		top: 50px;
	}
	#quiz_form {
		position: relative;
		left: 0;
		max-width: 700px;
		width: 100%;
		background-color: rgba(223,32,18,1);
	}
	#quiz_form_bgS {
		position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
		height: auto;
	}
	#quiz_form form input.textinput {
		width: 60%;
		height: 6%;
		background-color: rgba(249,248,244,1);
		border-radius: 6px;
		font-size: 3vw;
	}
	#quiz_form form select {
		width: 30%;
		height: 6%;
		background-color: rgba(249,248,244,1);
		border-radius: 6px;
		font-size: 3vw;
	}
	#qf_name {
		position: absolute;
		top: 39.3%;
		left: 35%;
	}
	#qf_tel {
		position: absolute;
		top: 47%;
		left: 35%;
	}
	#qf_email {
		position: absolute;
		top: 54.6%;
		left: 35%;
	}
	#qf_county {
		position: absolute;
		top: 62.4%;
		left: 35%;
	}
	#qf_district {
		position: absolute;
		top:  62.4%;
		left: 65%;
	}
	#qf_add {
		position: absolute;
		top: 385px;
		left: 35%;
	}
	#qf_read {
		position: absolute;
		top: 71.5%;
		left: 35%;
	}
	#accept {
		position: absolute;
		top: 70.3%;
		left: 39%;
		color: rgba(255,255,255,1);
		font-size: 3.5vw;
	}
	#personal {
		color: rgba(255,147,118,1);
		cursor: pointer;
	}
	#qf_reset {
		position: absolute;
		bottom: 6%;
		left: 50%;
		cursor: pointer;
	}
	#qf_submit {
		position: absolute;
		bottom: 6%;
		right: 50%;
		cursor: pointer;
	}
	#test {
		position: relative;
		left: 0;
		width: 100%;
		height: 600px;
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/bg_test.png');
		background-size: contain;
		margin: 0 auto;
		text-align: center;
	}
	#question_area {
		position: relative;
		padding-top: 60px;
	}
	#question_background {
		display: none;
	}
	.question_content {
		width: 100%;
		height: 100px;
		padding: 0px 10px 10px 10px;
		font-size: 20px;
		color: rgba(255,255,255,1);
		text-align: left;
	}
	.question {
		width: 100%;
		height: 68px;
		padding: 9px 0px 0px 10px;
		border-bottom: 1px solid rgba(255,147,118,1);
		font-size: 16px;
		color: rgba(255,255,255,1);
		text-align: left;
		vertical-align: middle;
	}
	#question_submit {
		bottom: 0px;
		right: 35px;
	}
	#explain {
		position: relative;
		left: 0;
		width: 100%;
		height: 650px;
		padding-top: 60px;
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/bg_explain.png');
		background-size: contain;
		margin: 0 auto;
		text-align: center;
	}
	#explain_area {
		position: relative;
		width: 100%;
		height: 100%;
	}
	#explain_background {
		position: relative;
		width: 100%;
		height: 100%;
		position: relative;
	}
	#explain_pc_img {
		display: none;
	}
	#explain_mobile_img {
		position: absolute;
		top: 230px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: top left;
		background-size: contain;
	}
	#explain_title {
		font-size: 26px;
		margin: 0px 10px 10px 10px;
	}
	#explain_content {
		font-size: 16px;
		margin: 0px 10px 10px 10px;
	}
	#btn_retest {
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: calc(100%/3);
		cursor: pointer;		
	}
	#btn_retest img {
		width:100%;
	    height: auto;
	}
	#btn_class {
		position: absolute;
		bottom: 0px;
		left: calc(100%/3);
		width: calc(100%/3);
		cursor: pointer;
	}
	#btn_class img {
		width:100%;
	    height: auto;
	}
	#btn_fb {
		position: absolute;
		bottom: 0px;
		left: calc(100%*2/3);
		width: calc(100%/3);
		cursor: pointer;	
	}
	#btn_fb img {
		width:100%;
	    height: auto;
	}
	#gotest_container {
		background-color: rgba(0,0,0,0.7);
	}
	#go_test {
		background-size: contain;
	}
	#copyright_container {
		position: relative;
		z-index: 1000;
		width: 100%;
		background-repeat: no-repeat;
	}
	#copyright {
		width: 100%;
		text-align: center;
		margin: 0 auto;
	}
	#copyright img {
		display: inline-block;
		width: calc(100%/4);
		height: auto;
	}
}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-device-width: 736px) and (orientation: landscape) {
	body {
		background-color: rgba(223,32,18,1);
		cursor: pointer;
	}
	#menu_container {
		position: relative;
		background-image: url('./images_mobile/logo.png');
		background-color: rgba(255,255,255,1);
		background-size: contain;
		background-position: top left;
	}
	#menu {
		width: 100%;
		height: 80px;
		background-image: url('./images_mobile/btn_menu.png');
		background-size: contain;
		background-position: top right;
		display: block;
		cursor: pointer;
	}
	#menu ul {
		position: absolute;
		top: 80px;
		right: 0px;
		display: none;
	}
	#menu ul.show {
		display: block;
	}
	#menu ul li {
		z-index: 10000000;		
	}
	#menu ul li a {
		width: 162px;
		height: 90px;
		background-color: rgba(223,32,18,0.5);
		border: 1px solid rgba(163,2,1,1);
	}
	#menu ul li a:hover {
		background-color: rgba(163,2,1,1);
	}
	#fb_share {
		top: 12px;
		left: 22%;
	}
	#line_share {
		top: 45px;
		left: 22%;
	}
	#volume, #rule_detail img, #rule_close, #prize_close, #prize_announce_close, #declaimer, #rule_frame, #quiz_bg, #quiz_form_bg, #test_bg, #explain_bg {
		display: none;
	}
	#main_container {
		position: relative;
		left: 0;
		width: 100%;
	}
	#video_container {
		margin-top: 0px;
	}
	#intro_container {
		background-color: rgba(0,0,0,0.7);
	}
	#intro {
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-image: url('./images/bg_intro.png');
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#rule_container {
		height: 1500px;
		background-color: rgba(223,32,18,1);
		position: relative;
	}
	#rule {
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url('./images_mobile/bg_rule.png');
		background-position: top center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#rule_detail {
		position: relative;
		width: 100%;
		height: 100%;	
	}
	#prize_link_clickarea {
		position: relative;
		width: 100%;
	    height: 7%;
    	margin-top: 80%;
	}
	#personal_declaration {
		color: rgba(255,255,255,1);
		font-size: 1vw;
		padding: 2%;
		text-align: left;
	}
	#prize_container {
		height: 1000px;;
		background-color: rgba(223,32,18,1);
		position: relative;
	}
	#prize {
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/prize.png');
		background-position: top center;
		background-repeat: no-repeat;
		background-size: contain;
		height: 100%;	
	}
	#btn_prize_announce {
		position: absolute;
		top: 13px;
		right: 0px;
		cursor: pointer;
	}
	#prize_announce_container {
		height: 1000px;;
		background-color: rgba(223,32,18,1);
		position: relative;
	}
	#prize_announce {
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/prize_announce.png');
		background-position: top center;
		background-repeat: no-repeat;
		background-size: contain;
		height: 100%;	
	}
	#class_container {
		height: 1200px;
		background-color: rgba(223,32,18,1);
		position: relative;
	}
	#class {
		position: relative;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		vertical-align: middle;
		margin: 0 auto;
		padding: 70px 5px 10px 5px;
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/class.png');
		background-position: top center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#class img {
		margin: 10px;
		width: calc(100%/2.2);
		height: auto;
		display: inline-box;
	}
	#quiz {
		position: relative;
		left: 0;
		width: 100%;
		height: 600px;
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/bg_movie_quiz.png');
		background-size: contain;
		margin: 0 auto;
		text-align: center;

	}
	#quiz_area {
		position: relative;
		padding-top: 70px;
	}
	.quizTitle {
		width: 100%;
		height: 70px;
		padding: 0px 10px 10px 10px;
		font-size: 25px;
		color: rgba(255,255,255,1);
		text-align: left;
		vertical-align: middle;
	}
	.quizItem {
		width: 90%;
		height: 68px;
		padding: 18px 0px 0px 10px;
		border-bottom: 1px solid rgba(255,147,118,1);
		font-size: 25px;
		color: rgba(255,255,255,1);
		text-align: left;
		vertical-align: middle;
		cursor: pointer;
	}
	#quiz_submit {
		position: relative;
		top: 50px;
	}
	#quiz_form {
		position: relative;
		left: 0;
		max-width: 700px;
		width: 100%;
		background-color: rgba(223,32,18,1);
	}
	#quiz_form_bgS {
		position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
		height: auto;
	}
	#quiz_form form input.textinput {
		width: 60%;
		height: 6%;
		background-color: rgba(249,248,244,1);
		border-radius: 6px;
		font-size: 3vw;
	}
	#quiz_form form select {
		width: 30%;
		height: 6%;
		background-color: rgba(249,248,244,1);
		border-radius: 6px;
		font-size: 3vw;
	}
	#qf_name {
		position: absolute;
		top: 39.3%;
		left: 35%;
	}
	#qf_tel {
		position: absolute;
		top: 47%;
		left: 35%;
	}
	#qf_email {
		position: absolute;
		top: 54.6%;
		left: 35%;
	}
	#qf_county {
		position: absolute;
		top: 62.4%;
		left: 35%;
	}
	#qf_district {
		position: absolute;
		top:  62.4%;
		left: 65%;
	}
	#qf_add {
		position: absolute;
		top: 385px;
		left: 35%;
	}
	#qf_read {
		position: absolute;
		top: 71.5%;
		left: 35%;
	}
	#accept {
		position: absolute;
		top: 71%;
		left: 39%;
		color: rgba(255,255,255,1);
		font-size: 3.5vw;
	}
	#personal {
		color: rgba(255,147,118,1);
		cursor: pointer;
	}
	#qf_reset {
		position: absolute;
		bottom: 6%;
		left: 50%;
		cursor: pointer;
	}
	#qf_submit {
		position: absolute;
		bottom: 6%;
		right: 50%;
		cursor: pointer;
	}
	#test {
		position: relative;
		left: 0;
		width: 100%;
		height: 600px;
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/bg_test.png');
		background-size: contain;
		margin: 0 auto;
		text-align: center;
	}
	#question_area {
		position: relative;
		padding-top: 60px;
	}
	#question_background {
		display: none;
	}
	.question_content {
		width: 100%;
		height: 100px;
		padding: 0px 10px 10px 10px;
		font-size: 20px;
		color: rgba(255,255,255,1);
		text-align: left;
	}
	.question {
		width: 100%;
		height: 68px;
		padding: 9px 0px 0px 10px;
		border-bottom: 1px solid rgba(255,147,118,1);
		font-size: 16px;
		color: rgba(255,255,255,1);
		text-align: left;
		vertical-align: middle;
	}
	#question_submit {
		bottom: 0px;
		right: 35px;
	}
	#explain {
		position: relative;
		left: 0;
		width: 100%;
		height: 650px;
		padding-top: 60px;
		background-color: rgba(223,32,18,1);
		background-image: url('./images_mobile/bg_explain.png');
		background-size: contain;
		margin: 0 auto;
		text-align: center;
	}
	#explain_area {
		position: relative;
		width: 100%;
		height: 100%;
	}
	#explain_background {
		position: relative;
		width: 100%;
		height: 100%;
		position: relative;
	}
	#explain_pc_img {
		display: none;
	}
	#explain_mobile_img {
		position: absolute;
		top: 230px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: top left;
		background-size: contain;
	}
	#explain_title {
		font-size: 26px;
		margin: 0px 10px 10px 10px;
	}
	#explain_content {
		font-size: 18px;
		margin: 0px 10px 10px 10px;
	}
	#btn_retest {
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: calc(100%/3);
		cursor: pointer;		
	}
	#btn_retest img {
		width:100%;
	    height: auto;
	}
	#btn_class {
		position: absolute;
		bottom: 0px;
		left: calc(100%/3);
		width: calc(100%/3);
		cursor: pointer;
	}
	#btn_class img {
		width:100%;
	    height: auto;
	}
	#btn_fb {
		position: absolute;
		bottom: 0px;
		left: calc(100%*2/3);
		width: calc(100%/3);
		cursor: pointer;	
	}
	#btn_fb img {
		width:100%;
	    height: auto;
	}
	#gotest_container {
		background-color: rgba(0,0,0,0.7);
	}
	#go_test {
		background-size: contain;
	}
	#copyright_container {
		position: relative;
		z-index: 1000;
		width: 100%;
		background-repeat: no-repeat;
	}
	#copyright {
		width: 100%;
		text-align: center;
		margin: 0 auto;
	}
	#copyright img {
		display: inline-block;
		width: calc(100%/4);
		height: auto;
	}
}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-device-width: 737px) and (orientation: landscape) {
	body {
		background-color: rgba(0,0,0,1);
	}
	#quiz_form_bgS {
		display: none;
	}
	#menu_container {
		position: absolute;
	}
	#main_container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#menu {
		max-width: 1300px;
		height: 90px;
		margin: 0 10% 0 10%;
		background-image: url('./images/logo.png');
		background-size: contain;
		background-position: top left;
	}
	#menu ul {
		float: right;width: calc(100%*4/7);
	}
	#menu ul li {
		display: inline-block;
		max-width: 162px;
		width: calc(100%/5);
		height: 100%;
		border: 0;
		margin: 0;
	    padding: 0;
	}
	#menu ul li a {
		width: 100%;
		height: 100%;
		border: 0;
	}
	#menu ul li a:hover, #menu ul li a.active {
		background-image: url('./images/bg_active.png');
	}
	#fb_share {
		top: 5%;
		max-width: 71px;
		width: 8%;
		right: -8%;
	}
	#fb_share img {
		width: 100%;
		height: auto;
	}
	#line_share {
		top: 30%;
		max-width: 71px;
		width: 8%;
		right: -8%;
	}
	#line_share img {
		width: 100%;
		height: auto;
	}
	#intro_container {
		background-color: rgba(0,0,0,0.7);
	}
	#intro {
		position: relative;
		max-width: 858px;
		width: 75%;
		max-height: 602px;
		height: 70%;
		top: 13%;
		margin: 0 auto;
		background-image: url('./images/bg_intro.png');
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#rule_container {
		position: absolute;
		top: 0;
		height: 100%;
		background-image: url('./images/bg_dot.png');
		background-size: initial;
	}
	#rule {
		position: relative;
		max-width: 858px;
		width: 75%;
		max-height: 602px;
		height: 70%;
		top: 13%;
		margin: 0 auto;
		background-color: rgba(225,15,0,0.7);
	}
	#rule_frame {
		position: absolute;
		top: 10px;
		left: 10px;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		border: 1px solid rgba(255,147,118,1);
	}
	#rule_detail {
		position: absolute;
		top: 50px;
		left: 20px;
		width: calc(100% - 40px);
		height: calc(100% - 70px);
	}
	#rule img {
		width: 100%;
		height: auto;
	}
	#personal_declaration {
		color: rgba(255,255,255,1);
		font-size: 16px;
		padding: 15px;
		text-align: left;
	}
	#prize_container {
		z-index: 1000000;
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		background-image: url('./images/bg_dot.png');
		background-size: initial;
	}
	#prize {
		position: relative;
		z-index: 1000000;
		margin: 0 auto;
		top: 13%;
		max-width: 1173px;
		width: 75%;
		max-height: 655px;
		height: 70%;
		background-image: url('./images/bg_prize.png');
		background-position: top right;
		background-repeat: no-repeat;
		background-size: contain;	
	}
	#btn_prize_announce {
		position: absolute;
		top: 27px;
		left: 220px;
		cursor: pointer;
	}
	#prize_announce_container {
		z-index: 1000000;
		top: 0;
		height: 100%;
		position: absolute;
		background-image: url('./images/bg_dot.png');
		background-size: initial;
	}
	#prize_announce {
		position: relative;
		z-index: 1000000;
		margin: 0 auto;
		top: 13%;
		max-width: 1173px;
		width: 75%;
		max-height: 655px;
		height: 70%;
		background-image: url('./images/bg_prize_announce.png');
		background-position: top right;
		background-repeat: no-repeat;
		background-size: contain;	
	}
	#class_container {
		z-index: 1000000;
		top: 0;
		height: 100%;
		position: absolute;
		background-image: url('./images/bg_dot.png');
		background-size: initial;
	}
	#class_container::after{
		content:'';
		width:0;
		height:100%;
		display:inline-block;
		position:relative;
		vertical-align:middle;
	}
	#class {
		position: relative;
		z-index: 1000000;
		margin: 0 auto;
		vertical-align:middle;
		display:inline-block;
		max-width: 996px;
		width: 70%;
		padding: 6% 1% 1% 1%;
		background-image: url('./images/bg_class.png');
		background-position: top left;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#class a {
		display:inline-block;
		width: calc((100%/3) - (100%/20));
		margin: 0.5%;
	}
	#class img {
		width: 100%;
		hieght: auto;
	}
	#quiz {
		position: absolute;
		top: 110px;
		right: 5%;
		max-width: 410px;
		width: 25%;
		min-width: 200px;
	}
	#quiz_bg {
		position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
		height: auto;
	}
	#quiz_area {
		position: absolute;
		top: 0;
		right: 0;
		padding: 30% 2% 2% 10%;
	}
	.quizTitle {
		width: 100%;
		height: 15%;
		padding: 0 2% 2% 2%;
		font-size: 1.5vw;
		color: rgba(255,255,255,1);
		text-align: left;
		vertical-align: middle;
	}
	.quizItem {
		width: 90%;
		height: 14%;
		padding: 8% 0px 0px 2%;
		border-bottom: 1px solid rgba(255,147,118,1);
		font-size: 1.5vw;
		color: rgba(255,255,255,1);
		text-align: left;
		vertical-align: middle;
		cursor: pointer;
	}
	#quiz_submit {
		position: absolute;
		bottom: 25px;
		right: 25px;
	}
	#quiz_form {
		position: relative;
		margin: 0 auto;
		margin-top: 10%;
		max-width: 886px;
		min-width: 650px;
		width: 80%;
		overflow: hidden;
	}
	#quiz_form_bg {
		position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
		height: auto;
	}
	#prize_form {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}
	#prize_form img {
		width: 20%;
		height: auto;
	}
	#quiz_form form input.textinput {
		width: 31%;
		height: 5%;
		background-color: rgba(249,248,244,1);
		border-radius: 6px;
		font-size: 1vw;
	}
	#quiz_form form select {
		width: 15%;
		height: 5%;
		background-color: rgba(249,248,244,1);
	}
	#qf_name {
		position: absolute;
		top: 36%;
		left: 62%;
	}
	#qf_tel {
		position: absolute;
		top: 44%;
		left: 62%;
	}
	#qf_email {
		position: absolute;
		top: 52.5%;
		left: 62%;
	}
	#qf_county {
		position: absolute;
		top: 60.5%;
		left: 62%;
	}
	#qf_district {
		position: absolute;
		top: 60.5%;
		left: 78%;
	}
	#qf_add {
		position: absolute;
		top: 385px;
		left: 555px;
		
	}
	#qf_read {
		position: absolute;
		top: 68%;
		left: 62%;
		width: 15px;
		height: 15px;
		background-color: rgba(249,248,244,1);
		border-radius: 0px;
	}
	#accept {
		position: absolute;
		top: 67.3%;
		left: 65%;
		color: rgba(255,255,255,1);
		font-size: 1.1vw;
	}
	#personal {
		color: rgba(255,147,118,1);
		cursor: pointer;
	}
	#qf_reset {
		position: absolute;
		bottom: 12%;
		right: 5%;
		cursor: pointer;
	}
	#qf_submit {
		position: absolute;
		bottom: 12%;
		right: 24%;
		cursor: pointer;
	}
	#test {
		position: relative;
		margin: 0 auto;
		margin-top: 10%;
		max-width: 1258px;
		min-width: 650px;
		width: 80%;
		overflow: hidden;
	}
	#question_area {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		padding: 7% 1% 1% 5%;
	}
	#question_background {
		position: absolute;
		top: 1%;
		right: 0.6%;
		width: 28%;
		height: 48%;
		background-repeat: no-repeat;
		background-position: top right;
		background-size: contain;
	}
	.question_content {
		width: 70%;
		height: 22%;
		padding: 0px 0px 0px 0px;
		font-size: 1.5vw;
		color: rgba(255,255,255,1);
		text-align: left;
	}
	.question {
		width: 70%;
		height: 14%;
		padding: 2% 0 0 1%;
		border-bottom: 1px solid rgba(255,147,118,1);
		font-size: 1.1vw;
		color: rgba(255,255,255,1);
		text-align: left;
		vertical-align: middle;
	}
	#question_submit {
		bottom: 40px;
		right: 35px;
	}
	#explain {
		position: relative;
		margin: 0 auto;
		margin-top: 10%;
		max-width: 1258px;
		min-width: 650px;
		width: 80%;
		overflow: hidden;
	}
	#explain_area {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		padding: 10% 1% 1% 5%;
	}
	#explain_background {
		position: absolute;
		top: 24%;
		right: 5%;
		width: 88%;
		height: 65%;
	}
	#explain_pc_img {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: top left;
		background-size: contain;
	}
	#explain_mobile_img {
		display: none;
	}
	#explain_title {
		position: absolute;
		top: 10%;
		left: 55%;
		width: 44%;
		height: 10%;
		font-size: 2vw;
	}
	#explain_content {
		position: absolute;
		top: 25%;
		left: 55%;
		width: 44%;
		height: 53%;
		font-size: 1.5vw;
	}
	#explain_background img {
		width: 100%;
		height: auto;
	}
	#btn_retest {
		position: absolute;
		bottom: -3%;
		left: 53%;
		cursor: pointer;		
		width: 16%;
		max-width: 137px;
		height: auto;		
	}
	#btn_class {
		position: absolute;
		bottom: -3%;
		left: 68%;
		cursor: pointer;
		width: 16%;
		max-width: 137px;
		height: auto;		
	}
	#btn_fb {
		position: absolute;
		bottom: -3%;
		left: 83%;	
		cursor: pointer;	
		width: 16%;
		max-width: 137px;
		height: auto;		
	}
	#gotest_container {
		background-color: rgba(0,0,0,0.7);
		text-align: center;
	}
	#gotest_container::after{
		content:'';
		width:0;
		height:100%;
		display:inline-block;
		position:relative;
		vertical-align:middle;
	}
	#go_test {
		display: inline-block;
		margin: 0 auto;
		vertical-align: middle;
		max-width: 858px;
		width: 75%;
		top: 13%;
	}
	#go_test img {
		position: relative;
		width: 100%;
		height: auto;
	}
	#copyright_container {
		position: fixed;
		z-index: 1000;
		bottom: 0px;
		width: 100%;
		background-repeat: no-repeat;
	}
	#copyright {
		text-align: center;
		max-width: 1072px;
		margin: 0 auto;
		padding: 0px 45px 0px 45px;
	}
	#declaimer {
		height: 100%;
		width: calc((100% - 90px)/2);
		max-width: 490px;
		display: inline-block;
		font-size: 1vw;
		font-family: '微軟正黑體', 'LiHei Pro', '新細明體', Helvetica, Arial, sans-serif;
		text-decoration: none;
		color: rgba(255,255,255,1);
		padding: 10px 10px 10px 0px;
	}
	#copyright img {
		display: inline-block;
		width: calc((100% - 90px)/6);
		max-width: 164px;
		height: auto;
	}
}
-----------------------------------------------------------------------------------------------------------------------------------------------------------
html {

	}
body {
		font-family: '微軟正黑體', 'LiHei Pro', '新細明體', Helvetica, Arial, sans-serif;
		text-decoration: none;
	}
#video_container {
		z-index: 0;
		position: relative;
		padding-bottom: 54.7%;
		padding-top: 30px;
		height: 0;
		overflow: hidden;
	}
#video_container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
#intro_container {
		z-index: 10000;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		vertical-align: middle;
		display: none;
	}
#main_container {
		z-index: 100;
		text-align: center;
	}
#menu_container {
		z-index: 10000000;
		top: 0px;
		left: 0px;
		width: 100%;
		background-repeat: no-repeat;
	}
#menu {
		position: relative;
		background-repeat: no-repeat;
	}
#menu ul {
		list-style-type: none;
    	margin: 0;
	    padding: 0;
	}
#menu ul li a {
		display: block;
		text-align: center;
		margin: 0 auto;
		vertical-align: middle;
		cursor: pointer;
	    padding: 0;
	}
#fb_share {
		position: absolute;
		cursor: pointer;
	}
#line_share {
		position: absolute;
		cursor: pointer;
	}
#prize_container {
		z-index: 10000;
		left: 0;
		width: 100%;
		text-align: center;
		vertical-align: middle;
		margin: 0 auto;
		display: none;
	}
#prize_close {
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
	}
#prize_announce_container {
		z-index: 10000;
		left: 0;
		width: 100%;
		text-align: center;
		vertical-align: middle;
		margin: 0 auto;
		display: none;
	}
#prize_announce_close {
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
	}
#btn_prize_announce {
		display: none;
	}
#rule_container {
		z-index: 10000;
		left: 0;
		width: 100%;
		text-align: center;
		vertical-align: middle;
		margin: 0 auto;
		display: none;
	}
#rule_close {
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
	}
#rule_detail {
		overflow: auto;
	}
#rule_detail img {
		margin-bottom: 50px;
	}
#class_container {
		z-index: 10000;
		left: 0;
		width: 100%;
		text-align: center;
		vertical-align: middle;
		margin: 0 auto;
		display: none;
	}
#class {
		z-index: 10000;
		background-repeat: no-repeat;
		overflow: hidden;
	}
#test {
		z-index: 10000;
		background-repeat: no-repeat;
		text-align: right;
		display: none;
		overflow: hidden;
	}
#question_area {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: top right;
	}
.question span {
		font-size: 22px;
	}
.question:hover {
		background-image: url('./images/bg_Q_hover.png');
		background-repeat: repeat-x;
		background-position: top;
	}
.question.active {
		color: rgba(255,253,81,1);
	}
#question_submit {
		position: absolute;
		cursor: pointer;
	}
#explain {
		z-index: 10000;
		background-repeat: no-repeat;
		text-align: right;
		display: none;
		overflow: hidden;
	}
#explain_area {
		background-repeat: no-repeat;
	}
#explain_title {
		text-align: left;
		color: rgba(255,252,30,1);
		font-family: '微軟正黑體', 'LiHei Pro', '新細明體', Helvetica, Arial, sans-serif;
	}
#explain_content {
		text-align: left;
		color: rgba(255,255,255,1);
		font-family: '微軟正黑體', 'LiHei Pro', '新細明體', Helvetica, Arial, sans-serif;
	}

#quiz {
		z-index: 10000;
		background-repeat: no-repeat;
		display: none;
		overflow: hidden;
	}
#quiz_area {
		width: 100%;
		height: 100%;
	}
.quizItem:hover {
		background-image: url('./images/bg_Q_hover.png');
		background-repeat: repeat-x;
		background-position: top;
	}
.quizItem.active {
		color: rgba(255,253,81,1);
	}
#quiz_submit {
		cursor: pointer;
	}
#quiz_form {
		background-repeat: no-repeat;
		display: none;
	}
#gotest_container {
		z-index: 10000;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		vertical-align: middle;
		display: none;
	}
#volume {
		z-index: 100000;
		position: fixed;
		bottom: 15px;
		left: 15px;
		width: 30px;
		height: 30px;
		background-image: url('./images/volume_on_off.png');
		background-position: 0px -30px;
		background-repeat: no-repeat;
		background-size: initial;
		cursor: pointer;
	}
	
#volume.on {
		background-position: 0px 0px;
	}