body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: Arial, "微軟正黑體";
    width: 100%;
    height: 100%;
	font-size: 16px;
	background-image: url(../images/BackGround.png);
}

#WRAP{}

.deco_bg{
	background: url(../images/decorate.png) no-repeat;
}

/* title =============== */
.title_wrap{
	position: relative;
	width: 100vw;
	box-shadow: -6px 90px 10px rgba(0,0,0,0.80) inset;
}

.red_sun{
	background-image: url(../images/red_sun.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 100vw;
    height: auto;
	max-width: 600px;
	max-height: 181px;
	margin: 0 auto;
	margin-top: -90px;
	
	mix-blend-mode: multiply;
	
	font-size: 1.4em;
	font-weight: bold;
	letter-spacing: 6px;
}

.title_wrap h2{
	padding-top: 130px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.title_wrap h1{
	display: block;
}

.title{
	display: block;
	width: 100vw;
    height: auto;
	max-width: 687px;
	max-height: 429px;
	margin: 0 auto;
	z-index: -500;
}

.stickers_left{
	width: 100vw;
    height: auto;
	max-width: 349px;
	max-height: 449px;
	
	position: absolute;
    top: 50%;
    left: 50%; 
    margin-left: -550px;
    margin-top: -150px;
}

.stickers_right{
	width: 100vw;
    height: auto;
	max-width: 339px;
	max-height: 462px;
	
	position: absolute;
    top: 50%;
    left: 50%; 
    margin-left: 195px;
    margin-top: -162px;
}

.stickers_buttom{
	width: 100vw;
    height: auto;
	max-width: 687px;
	max-height: 219px;
	
	position: absolute;
    top: 50%;
    left: 50%; 
    margin-left: -328px;
    margin-top: 180px;
}

/* dialogue =============== */
.dialogue_wrap{
	background-image: url(../images/dialogue_background.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 678px;
	margin-top: 90px;
}

.dialogue_wrap h3{
	display: block;
}

.dialogue_title{
	display: block;
	width: 100vw;
    height: auto;
	max-width: 692px;
	max-height: 109px;
	margin: 0 auto;
	margin-bottom: 30px;
	padding-top: 60px;
}

.dialogue{
	width: 900px;
	margin: 0 auto;
	display: flex;
}

.dialogue .dia_all h5{
	font-size: 26px;
	margin-top: 26px;
	margin-left: -12px;
	margin-bottom: 10px;
}

.dialogue .dia_all h6{
	display: block;
	position: relative;
	font-family: "Yu Gothic", "Hiragino Kaku Gothic Std";
	font-size: 26px;
	line-height: 32px;
	letter-spacing: -1px;
}

/*
.dialogue .dia_all h6::before{
	font-family: FontAwesome, Arial, "微軟正黑體";
	content: "\f0da  假字";
	position: absolute;
	bottom: -30px;
	font-size: 14px;
	font-weight: normal;
	line-height: 22px;
	border-bottom: 1px dotted #000000;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

.dialogue .dia_all:hover h6::before{
	opacity: 0;
}
*/

.dialogue .dia_all p{
	display: block;
	font-size: 18px;
	font-weight: bold;
	margin-top: 6px;
	margin-left: 2px;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

.dialogue,.dia_all:hover p{
	opacity: 1;
}

.dia_all{
	width: 214px;
	height: 214px;
	font-weight: bold;
	display: flex;
	justify-content: center;
	margin: 0 6px;
	padding-left: 18px;
	cursor: pointer;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}

.dia_all:hover{
	margin-top: 18px;
}

.dia_E{
	background: url(../images/E.svg) no-repeat;
	background-position: center;
}

.dia_C{
	background: url(../images/C.svg) no-repeat;
	background-position: bottom;
}

.dia_A{
	background: url(../images/A.svg) no-repeat;
	background-position: center;
}

.dia_G{
	background: url(../images/G.svg) no-repeat;
	background-position: center;
}

.dia_E h5{
	color: #007793;
}

.dia_C h5{
	color: #728c00;
}

.dia_A h5{
	color: #c14a00;
}

.dia_G h5{
	color: #c20028;
}

/* clock 24HR =============== */
.clock_wrap{
	display: flex;
    align-items: center;
    justify-content: center;
	margin: 5vw 0;
}

.clock{
	width: 864px;
}

.clock_title{
	display: block;
	width: 661px;
	height: 64px;
	margin-bottom: -22px;
}

.clock_txt p{
	text-align: right;
	padding-right: 9px;
}

.clock_hr{
	background: url(../images/24HR.png) no-repeat;
	width: 864px;
    height: 240px;
	margin: 0 auto;
	margin-top: 30px;
}

/* N5~N1 =============== */
.N5N1_wrap{
	width: 870px;
	margin: 0 auto;
}

.N5N1{
	position: relative;
	width: 100%;
	height: 750px;
	line-height: 24px;
}

.N5N1_title{
	display: block;
	width: 402px;
	height: 108px;
}

.N5N1_flag{
	background: url(../images/N5N1_flag.png) no-repeat;
	width: 866px;
	height: 414px;
	position: absolute;
	top: 40px;
	display: flex;
	text-align: right;
	color: #4c4e4c;
}

.N5N1_flag li{
	width: 160px;
	margin-right: 36px;
}

.N5N1_flag .flag_A{
	padding-top: 284px;
}

.N5N1_flag .flag_B{
	padding-top: 216px;
	margin-right: 22px;
}

.N5N1_flag .flag_C{
	padding-top: 148px;
	margin-right: 30px;
}

.N5N1_flag .flag_D{
	padding-top: 94px;
}

.N5N1_stairs{
	background: url(../images/N5N1_stairs.png) no-repeat;
	width: 871px;
	height: 508px;
	position: absolute;
	top: 216px;
	display: flex;
	color: #FFFFFF;
}

.N5N1_stairs li{
	width: 175px;
	padding: 0 20px 0 23px;
}

.N5N1_stairs .stairs_A{
	padding-top: 406px;
}

.N5N1_stairs .stairs_B{
	padding-top: 340px;
}

.N5N1_stairs .stairs_C{
	padding-top: 280px;
}

.N5N1_stairs .stairs_D{
	padding-top: 216px;
}

.N5N1_stairs .stairs_E{
	padding-top: 156px;
}

/* lesson =============== */
.lesson_wrap{
	width: 864px;
	margin: 0 auto;
	padding-top: 50px;
	margin-bottom: 40px;
}

.lesson_txt{
	display: flex;
	align-items: flex-start;
	margin-top: 20px;
}

.lesson_title{
	width: 340px;
}

.lesson_title h4{
	font-size: 2.4em;
	font-weight: bold;
	margin-bottom: 10px;
}

.lesson_title p{
	font-size: 14px;
	color: #767676;
	line-height: 22px;
}

.lesson_table{
	font-size: 1.6em;
	text-align: center;
}

.lesson_table tr{
	height: 50px;
}

.lesson_table .lesson_name{
	text-align: right;
}

.lesson_table .lesson_hr{
	width: 180px;
}

.lesson_table .lesson_level{
	width: 128px;
}

/* Form =============== */
#WRAP #FormArea{
	padding-top: 44px;
}

#FormArea p{
	font-size: 12px;
}

.cont-pc{
	display: block;
}

.order_title{
	display: block;
	background: url(../images/order_title.png) no-repeat;
	background-position: bottom;
	/*width: 810px;*/
    height: 82px;
	text-indent: -9999px;
/*	用了看起來會抖
	white-space: nowrap;
	overflow: hidden;
*/
	margin: 0 auto;
	margin-bottom: 20px;
	
	/*-webkit-animation: titlecolor .5s infinite;
	-moz-animation: titlecolor .5s infinite;
	-ms-animation: titlecolor .5s infinite;
	-o-animation: titlecolor .5s infinite;
	animation: titlecolor .5s infinite;*/s
}

@-webkit-keyframes titlecolor{
	0%, 50%	{ background-position: bottom;}
	51%, 100% { background-position: top;}
}

@keyframes titlecolor{
	0%, 50%	{ background-position: bottom;}
	51%, 100% { background-position: top;}
}

.gift{
	margin-top: -24px;
}