@charset "utf-8";
/* CSS Document */

@import url("reset.css");

html,body{
	height:100%;
	/*font-family:  "Helvetica Neue", Helvetica, Arial, "微軟正黑體", sans-serif;*/
	font-family: 'Quicksand','Noto Sans TC',"微軟正黑體", sans-serif;
	-webkit-text-size-adjust:none;
	font-family: ;
}

div{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}


a{
	text-decoration: none;	
	outline:none;
}

input,select{
	outline:none;
}


/*popup*/
.popupA{
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background-color:rgba(74,146,255,0.9);
	z-index:10;
	display:none;
}


.popupVideoBox{
	position:absolute;
	left:50%;
	top:50%;
	width:95%;
	max-width:818px;
	padding:10px;
	padding-bottom:15px;
	padding-top:15px;
	background-color:#FFF;
	border-radius:20px;
	border:6px solid #cce4ff;/**/
	transform:translate(-50%,-50%);
	-webkit-transition: all 0.4s cubic-bezier(0,.97,.55,1);
	-moz-transition: all 0.4s cubic-bezier(0,.97,.55,1);
	transition: all 0.4s cubic-bezier(0,.97,.55,1);
	-webkit-transform:translate(-50%,-300%);
	-moz-transform:translate(-50%,-300%);
	transform:translate(-50%,-300%);
	opacity:0;
}
.popupOpen{
	-webkit-transform:translate(-50%,-300%);
	-moz-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	opacity:1;
}

.popupVideo{
	position:relative;
	max-width:800px;
}
.popupVideo>img, .popupVideo>div>div>video, .popupVideo>div>div>img{
	display:block;
	width:100%;
	height:auto;
}
.popupCloseBtn{
	position:absolute;
	width:76px;
	height:76px;
	top:-63px;/*-58*/
	right:30px;
	border-radius:40px;
	background-color:#fff;
	padding:8px;
	
}
.popupCloseBtn>p{
	display:block;
	background-color:#4cbf00;
	border:3px dotted #00a600;
	width:100%;
	height:100%;
	border-radius:40px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	background-image:url(/Images/index/Main_videoCloseBtn.png);
	background-size:50px 50px;
	background-position:center center;
	cursor:pointer;
}
.popupCloseBtn>p:hover{
	background-color:#03ff03;
}


.popupStopBtn{
	position:absolute;
	width:76px;
	height:76px;
	top:-63px;/*-58*/
	right:120px;
	border-radius:40px;
	background-color:#fff;
	padding:8px;
	
}
.popupStopBtn>p{
	display:block;
	background-color:#ff9703;
	border:3px dotted #ff6803;
	width:100%;
	height:100%;
	border-radius:40px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	background-image:url(/Images/index/Main_videoStopBtn.png);
	background-size:22px 22px;
	background-position:center center;
	background-repeat:no-repeat;
	cursor:pointer;
}
.popupStopBtn>p:hover{
	background-color:#ffc103;
}

.popupTopBtnBox{
	position:absolute;
	width:269px;/*169*/
	height:58px;
	top:-57px;
	left:33px;
}
.popupTopBtnBox>div{
	position:relative;
	float:left;
	width:78px;
	height:57px;
	background-color:#cce4ff;
	border-top-left-radius:400px;
	border-top-right-radius:400px; 
	cursor:pointer;
}

.popupTopBtnBox>div:nth-child(1),.popupTopBtnBox>div:nth-child(2){
	margin-right:13px;
}
.popupTopBtnBox>div>img{
	display:block;
	position:absolute;
	top:60%;
	left:50%;
	width:42px;
	height:35px;
	margin-left:-21px;
	margin-top:-17px;
}

.popupTopBtnBox>div:hover{
	background-color:#f0f7ff;
	
}
.popupTopBtnBox>.focus{
	background-color:#fff;
	cursor: default;
}
.popupTopBtnBox>.focus:hover{
	background-color:#fff;
}
.videoPlayBtn{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	cursor:pointer;
}
.videoPlayBtn>p{
	position:absolute;
	top:50%;
	left:50%;
	width:80px;
	height:80px;
	background-color:#ff9703;
	border:6px solid #fff;
	border-radius:400px;
	background-image:url(/Images/index/Main_videoPlayBtn.png);
	background-size:52px 52px;
	background-repeat:no-repeat;
	background-position:center center;
	
	-webkit-transform:translate(-50%,-300%);
	-moz-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

.videoTimeoutBtn>p{
	background-image:url(/Images/index/Main_videoTimeoutBtn.png);
}

.videoPlayBtnUp{
	top:43% !important;
}

.videoPlayBtn:hover>p{
	background-color:#ffc103;
}

.videoSabtitleBtn{
	position:absolute;
	width:70px;
	height:62px;
	bottom:40px;
	right:8px;
	background-image:url(/Images/index/Main_videoSubtitleBtn.png);
	background-size:100% auto;
	cursor:pointer;
}
.videoSabtitleBtn:hover{
	background-position:0px 62px;
}
.videoSabtitleCloseBtn{
	background-image:url(/Images/index/Main_videoSubtitleBtn_close.png);
}


.videoSabtitle{
	position:absolute;
	bottom:40px;
	left:0px;
	width:100%;
	min-height:60px;
	background-color:rgba(255,255,255,0.5);
	padding-right:80px;
	padding-left:80px;
	display:none;/**/
}

.videoSabtitle>p{
	text-align:center;
	margin-top:10px;
	margin-bottom:10px;
	text-align:center;
	font-size:30px;/*24px*/
	line-height:36px;/*28px*/
	color:#0d52d0;
	font-family:  "Helvetica Neue", Helvetica, Arial, "微軟正黑體", sans-serif;
	font-weight:bold;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.videoTimeBarBox{
	position: absolute;
	bottom:0px;
	left:0px;
	width:100%;
	height:40px;
	background-color:rgba(255,253,123,0.6);
	padding-right:120px;/*95*/
	padding-left:20px;
}

.videoTime{
	position:absolute;
	top:50%;
	right:85px;/*43*/
	font-size:22px;
	font-weight:bold;
	line-height:20px;
	-webkit-transform:translate(50%,-50%);
	-moz-transform:translate(50%,-50%);
	transform:translate(50%,-50%);
	font-family:  "Helvetica Neue", Helvetica, Arial, "微軟正黑體", sans-serif;
	color:#087200;
}


.fullScerrnBtn{
	position:absolute;
	width:28px;
	height:28px;
	top:6px;
	right:15px;
	background-image:url(/Images/course/fullScreenBtn.png);
	cursor:pointer;
}
.fullScerrnBtn:hover{
	background-image:url(/Images/course/fullScreenBtn_over.png);
}
.endfullScerrnBtn{
	position:absolute;
	width:28px;
	height:28px;
	top:6px;
	right:15px;
	background-image:url(/Images/course/fullScreenBtnEnd.png);
	cursor:pointer;
}

.endfullScerrnBtn:hover{
	background-image:url(/Images/course/fullScreenBtnEnd_over.png);
}


.videoTimeBar{
	position:relative;
	width:100%;
	height:18px;
	margin:auto;
	top:11px;
	background-color:#ffa200;
	border-radius:9px;
	overflow:hidden;
}

.timeColorBox{
	position:relative;
	width:50%;
	height:100%;
	background-color:#ff3000;
	border-radius:9px;
}






/*大於740-------------電腦*/
@media screen and (min-width: 740px) {
#main{
	position:relative;
	width:100%;
	max-width:1920px;
	min-height:100%;
	background-color:#9addff;
	padding-bottom:140px;
	overflow:hidden;
}
.mainBox{
	position:relative;
	margin:auto;
	margin-top:72px;
	width:100%;
	padding-top:72px;
	padding-bottom:10px;
	font-family: 'Noto Sans TC',"微軟正黑體", sans-serif;
}

.cMBx{
	padding-top:50px;
}

.pageBox{
	position:relative;
	width:90%;
	max-width:1000px;
	min-height:487px;
	background-color:#FFF;
	margin:auto;
	background-image:url(/Images/index/page_titleBg_02.png),url(/Images/index/loginImg_03.png),url(/Images/index/loginImg_04.png);
	background-repeat:no-repeat, repeat-x, repeat;
	background-position:center top, center bottom, center top;
	border-radius:50px;
	border:5px solid #fff;
	padding-bottom:78px;
}

.pageTitle{
	position:relative;
	width:100%;
	height:110px;
	overflow:hidden;
	margin-bottom:36px;
}
.pageTitle>p{
	width:100%;
	margin-top:40px;
	padding-left:40px;
	font-size:35px;
	text-align:left;
	color:#fff;
	font-weight:bold;
	line-height:40px;
	text-shadow:1px 3px 2px rgba(255,78,0,0.5);
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	transform:translateY(-50%);
}

.pageContent{
	position:relative;
	width:93%;
	margin:auto;
}

.contentText1{
	color:#333;
	font-size:16px;
	line-height:30px;/*30*/
}
.contentText1>p>br{
	line-height:43px;
}

/*button*/
button{
	font-family: 'Quicksand','Noto Sans TC',"微軟正黑體", sans-serif;
}
.greenBtn{
	float:left;
	width:100%;
	max-width:250px;
	height:50px;
	line-height:50px;
	border:0px solid #000;
	background-color:#97ca2a;
	font-size:20px;
	color:#fff;
	border-radius:25px; 
	cursor:pointer;
}
.greenBtn:hover{
	background-color:#0C0;
}

.orangeBtn{
	float:left;
	width:100%;
	max-width:250px;
	height:50px;
	line-height:50px;
	border:0px solid #000;
	background-color:#ff9600;
	font-size:20px;
	color:#fff;
	border-radius:25px; 
	cursor:pointer;
}
.orangeBtn:hover{
	background-color:#ff7200;
}


/*footer-----------*/
.footer{
	position:absolute;
	height:140px;
	width:100%;
	bottom:0px;
	left:0px;
	background-image:url(/Images/index/footerImg.png);
	background-position:center bottom;
	background-repeat:no-repeat;
	overflow:hidden;
}
.copyright{
	position:relative;
	width:100%;
	max-width:1000px;
	margin:auto;
	text-align:center;
	margin-top:3px;
}
.copyright>p:first-child{
	color:#fff;
	font-size:14px;
	margin-bottom:2px;
}
.copyright>p:last-child{
	font-family: 'Acme', sans-serif;
	font-size:22px;
	color:#0083fd;
}

/*login------------*/
.loginBox{
	position:relative;
	width:90%;
	max-width:570px;
	min-height:487px;
	background-color:#FFF;
	margin:auto;
	background-image:url(/Images/index/page_titleBg_01.png),url(/Images/index/loginImg_03.png),url(/Images/index/loginImg_04.png);
	background-repeat:no-repeat, repeat-x, repeat;
	background-position:center top, center bottom, center top;
	border-radius:50px;
	border:5px solid #fff;
	padding-bottom:20px;
}

.loginTitle{
	position:relative;
	width:100%;
	height:100px;
	overflow:hidden;
	margin-bottom:8px;
}
.loginTitle>p{
	width:100%;
	margin-top:16px;
	font-size:35px;
	text-align:center;
	color:#fff; /*0070e5*/
	font-weight:bold;
	line-height:40px;
	text-shadow:1px 3px 2px rgba(255,78,0,0.5);/**/
}
.loginBox_LayoutBox1{
	position:relative;
	margin-bottom:30px;
}
.loginBox_Layout1{
	position:relative;
	width:100%;
	text-align:center;
	font-size:20px;
	color:#0070e5;
	padding-bottom:2px;
	line-height:28px;
}


.loginBox_Layout2{
	position:relative;
	width:100%;
	text-align:center;
}
.loginBox_Layout2>input{
	width:90%;
	max-width:380px;
	height:50px;
	text-align:center;
	font-size:20px;
	font-family: 'Quicksand','Noto Sans TC', sans-serif;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	background-color:#fff0bf;
	border-radius:30px;
	border:3px dotted #ffd23b;
	color:#F00;
	-webkit-appearance: none;
}
.loginBox_Layout3{
	position:absolute;
	bottom:-20px;
	left:0px;
	width:100%;
	text-align:center;
	color:#F00;
	font-size:14px;
}
.loginBox_paddingTop{
	padding-top:10px;
}
.loginBox button{
	width:90%;
	max-width:250px;
	height:50px;
	border:0px solid #000;
	background-color:#97ca2a;
	font-size:20px;
	color:#fff;
	font-family: 'Quicksand','Noto Sans TC',"微軟正黑體", sans-serif;
	border-radius:25px; 
	cursor:pointer;
	
}

.loginBox button:hover{
	background-color:#0C0;
}

.loginBox_Layout4{
	margin-top:10px;
	
}
.loginBox_Layout4>a{
	font-size:18px;
	color:#F00;
	text-decoration: underline;
	padding-left:12px;
	padding-right:12px;
}
.loginBox_Layout4>a:hover{
	color:#0070e5;
	
}
.loginBox_Layout4>a:first-child{
	/*margin-right:25px;*/
}

.loginImgLeft{
	position:absolute;
	bottom:-18px;
	left:-175px;
}
.loginImgRight{
	position:absolute;
	bottom:-22px;
	right:-228px;
}

.loginBox_Layout5{
	position:relative;
	width:65%;
	max-width:290px;
	margin:auto;
	font-size:16px;
	color:#666;
	padding-top:10px;
	padding-bottom:10px;
	line-height:20px;
}


/*register--------------*/
.registerBox{
	position:relative;
	/**/
	max-width:840px !important;
	margin:auto;
	width:90%
}
.register{
	max-width:840px !important;
	min-height:600px !important;
	width:100% !important; 
}
.registerImgLeft{
	position:absolute;
	bottom:60px;
	left:-225px;
}
.registerImgRight{
	position:absolute;
	bottom:60px;
	right:-210px;
}

.register_Layout_01{
	position:relative;
	text-align:center;
}

.register_Layout_01_1{
	display:inline-block;
	position:relative;
	background-color:#51c4ff;
	border-radius:50px;
	max-width:320px;
	width:40%;
	min-height:385px;
	margin-left:1.5%;
	margin-right:1.5%;
}

.register_Layout_01_1>div:nth-child(1){
	position:relative;
	padding-top:15px;
	padding-bottom:12px;
}
.register_Layout_01_1>div:nth-child(1)>img{
	display:block;
	width:220px;
	height:auto;
	margin:auto;
}
.register_Layout_01_2{
	position:relative;
	width:100%;
	height:130px;/*120*/
	background-color:#70cfff;
	border-top:3px dotted #a0dfff;
	border-bottom:3px dotted #a0dfff;
	

}
.register_Layout_01_2>div{
	position:absolute;
	top:50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	transform:translateY(-50%);
	text-align:center;
	width:100%;
	padding-left:5px;
	padding-right:5px;/**/
}

.register_Layout_01_2>div>p:nth-child(1){
	color:#FFF;
	font-size:16px;
	line-height:20px;
	margin-bottom:7px;
}
.register_Layout_01_2>div>p:nth-child(2){
	color:#0048ff;
	font-size:24px;
	line-height:28px;
	font-weight:bold;
}

.register_Layout_01_3{
	position:relative;
	
}
.register_Layout_01_3>button{
	position:relative;
	display:block;
	width:90%;
	max-width:245px;
	height:65px;
	border:0px solid #000;
	margin:auto;
	font-family: 'Quicksand','Noto Sans TC',"微軟正黑體", sans-serif;
	font-size:24px;
	color:#FF0;
	background-color:#0048ff;
	margin-top:20px;
	border-radius:50px;
	cursor:pointer;
	line-height:65px;
}
.register_Layout_01_3>button:hover{
	background-color:#0060ff;
}


.register_Layout_01_colorCH1{
	background-color:#56d633;
}
.register_Layout_01_colorCH2{
	background-color:#70fd49;
	border-top:3px dotted #a6ff8d;
	border-bottom:3px dotted #a6ff8d;
}
.register_Layout_01_colorCH2>div>p:nth-child(2){
	color:#2d7e00 !important;
}
.register_Layout_01_colorCH3>button{
	background-color:#199700;
}
.register_Layout_01_colorCH3>button:hover{
	background-color:#24a601;
}


/*openCard--------------*/
.openCard_layout1{
	position:relative;
	width:100%;
	overflow:hidden;
	margin-bottom:20px;
}
.openCard_layout1>div{
	position:relative;
	float:left;
	width:24.5%;
	height:125px;
	background-color:#f2f2f2;
	border:3px dotted #ffd23b;
	border-radius:12px;
}
.openCard_layout1>div:nth-child(1),.openCard_layout1>div:nth-child(2),.openCard_layout1>div:nth-child(3){
	margin-right:0.65%;
}
.openCardPoint1{
	left:24.8%;
}
.openCardPoint2{
	left:49.9%;
}
.openCardPoint3{
	left:75%;
}
.openCardPoint{
	position:absolute;
	margin-left:-25px;
	margin-top:-25px;
	top:62px;
}
.openCardPoint>img{
	display:block;
	position:relative;
	width:50px;
	height:50px;
}
.openCard_layout2{
	position:relative;
	width:100%;
	min-height:125px;
	background-color:#f2f2f2;
	border:3px dotted #ffd23b;
	border-radius:12px;
}
.openCard_layout1_1>p{
	position:absolute;
	width:100%;
	text-align:center;
	top:98px;
	font-size:16px;
	color:#40c300;
	line-height:20px;
	padding-left:5px;
	padding-right:5px;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.openCard_layout1_1>div{
	position:relative;
	width:44px;
	margin:auto;
	margin-top:13px;
}
.openCard_layout1_1>div>img{
	display:block;
	width:44px;
}

.openCard_layout1_1Focus{
	background-color:#ffd23b !important;
}

.openCard_layout1_1Focus>p{
	color:#ff4800;
}


.openCard_Title{
	padding-top:20px;
	padding-bottom:30px;
	text-align:center;
	font-size:20px;
	color:#0070e5;
}
/*openCard01*/
.openCard01_box{
	position:relative;
	width:500px;
	margin:auto;
	margin-bottom:30px;
}

.openCard01_L01{
	position:relative;
	overflow:hidden;
	margin-bottom:30px;
}
.openCard01_L01>div{
	position:relative;
	float:left;
}
.openCard01_L01>div:nth-child(1){
	width:20%;
	line-height:50px;
	font-size:20px;
	color:#40c300;
	
}
.openCard01_L01>div:nth-child(2){
	width:80%;
}
.openCard01_L01 input,.openCard01_L01 select{
	width:100%;
	height:50px;
	text-align:left;
	padding-left:20px;
	padding-right:20px;
	font-size:20px;
	font-family: 'Quicksand','Noto Sans TC', sans-serif;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	background-color:#fff0bf;
	border-radius:30px;
	border:3px dotted #ff9600;
	color:#F30;
	line-height:44px;
	-webkit-appearance: none;
}

.openCard_btnBox{
	position:relative;
	overflow:hidden;
	margin:auto;
	padding-top:10px;
	max-width:500px;

}

.openCard_btnBox>p{
	width:49%;
	float:left;
	margin-left:0.5%;
	margin-right:0.5%;
}

.openCard02_box{
	position:relative;
	max-width:800px;
	width:90%;
	margin:auto;
	margin-bottom:35px;
}

.openCard02_L01{
	width:100%;
	margin-bottom:20px;
}




.openCard03_L01{
	position:relative;
	overflow:hidden;
	margin-bottom:20px;
}
.openCard03_L01>div{
	position:relative;
	float:left;
}
.openCard03_L01>div:nth-child(1){
	width:28%;
	line-height:50px;
	font-size:20px;
	color:#40c300;
	padding-left:12px;
	
}
.openCard03_L01>div:nth-child(2){
	width:72%;
}
.openCard03_L01 input,.openCard03_L01 select{
	width:100%;
	height:50px;
	text-align:left;
	padding-left:20px;
	padding-right:20px;
	font-size:20px;
	font-family: 'Quicksand','Noto Sans TC', sans-serif;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	background-color:#fff0bf;
	border-radius:30px;
	border:3px dotted #ff9600;
	color:#F30;
	line-height:44px;
	-webkit-appearance: none;
	-moz-appearance:none;   
    appearance:none;  
}
.openCard03_L01 select::-ms-expand {
	display: none;
}

.openCard02_L02{
	padding-bottom:20px;
}
.openCard02_L02>.weight{
	font-weight:bold
}
.openCard02_text1{
	font-size:18px;
	color:#40c300;
}

.openCard02_0{
	position:relative;
	width:100%;
	height:20px;
}


.openCard03_add:before {
	content: "*";
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	font-size:30px;
	line-height:50px;
	color:#F00 !important;
}

.openCard04_box{
	text-align:center;
	padding-bottom:50px;
}

.depositPoint1{
	left:33%;
}
.depositPoint2{
	left:66.3%;
}
.deposit_layout>div{
	width:32.71% !important;
}
.deposit_layout>div:nth-child(1),.deposit_layout>div:nth-child(2){
	margin-right:0.61% !important;
}

.openCard03_L01>div:nth-child(2)>p{
	position:relative;
	width:100%;
	background-color: #fff;
	height:50px;
	border:3px dotted #E1E1E1;
	padding-left:20px;
	border-radius:30px;
	line-height:44px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	color:#333;
	font-size:16px;
}

.openCard_Warning{
	position:relative;
	text-align:center;
	padding-bottom:25px;
	font-size:16px;
	color:#F00;
}

/*oops--------------*/

.oops_box{
	width:100%;
	padding-top:60px;
	padding-bottom:100px;
	text-align:center;
}

.oops_box>p:nth-child(1){
	font-size:90px;
	font-weight:bold;
}
.oops_box>p:nth-child(1)>span:nth-child(1){
	color:#00ff24;
}
.oops_box>p:nth-child(1)>span:nth-child(2){
	color:#00b4ff;
}
.oops_box>p:nth-child(1)>span:nth-child(3){
	color:#004eff;
}
.oops_box>p:nth-child(1)>span:nth-child(4){
	color:#ff00e4;
}
.oops_box>p:nth-child(1)>span:nth-child(5){
	color:#ff9600;
}

.oops_box>p:nth-child(2),.oops_box>p:nth-child(3){
	font-size:18px;
	color:#004eff;
}
.oops_btnBox{
	overflow:hidden;
	text-align:center;
}
.oops_btnBox>p{
	display:inline-block;
	width:100%;
	max-width:250px;
}
.oops_btnBox>p>a{
	float:left;
	width:100%;
	max-width:250px;
	height:50px;
	line-height:50px;
	border:0px solid #000;
	background-color:#97ca2a;
	font-size:20px;
	color:#fff;
	border-radius:25px; 
	cursor:pointer;
}
.oops_btnBox>p>a:hover{
	background-color:#0C0;
}


/*courseMain--------------*/

.courseMain{
	position:relative;
	margin:auto;
	width:67%;
	max-width:840px;
}

.courseMainBox{
	position:relative;
	width:100%;
	min-height:640px;
	background-color:#FFF;
	margin:auto;
	background-image:url(/Images/index/Main_titleBg.png),url(/Images/index/loginImg_03.png),url(/Images/index/loginImg_04.png);
	background-repeat:no-repeat, repeat-x, repeat;
	background-position:center top, center bottom, center top;
	border-radius:50px;
	border:5px solid #fff;
	padding-bottom:40px;
}
.courseStoryBox{
	min-height:600px;
}
.courseMainTitle{
	margin-bottom:18px;
	height:86px;
}

.courseMainTitle>p{
	margin-top:31px;
}

.courseMainLeftKid_d,.courseMainLeftKid_t{
	position: absolute;
	left:-217px;
	top:266px;
	width:280px;
}

.courseMainRightKid_d,.courseMainRightKid_t{
	position: absolute;
	right:-183px;
	top:268px;
	width:225px;
}

.courseStoryLeftKid_d,.courseStoryLeftKid_t{
	position: absolute;
	left:-185px;
	top:235px;
	width:249px;
}

.courseStoryRightKid_d,.courseStoryRightKid_t{
	position: absolute;
	right:-233px;
	top:242px;
	width:305px;
}


.courseMainABC_l{
	position:absolute;
	left:-125px;
	top:25px;
	width:113px;
}

.courseMainABC_r{
	position:absolute;
	right:-142px;
	top:20px;
	width:129px;
}
.courseStoryABC_l{
	position:absolute;
	left:-125px;
	top:0px;
	width:113px;
}

.courseStoryABC_r{
	position:absolute;
	right:-142px;
	top:0px;
	width:129px;
}
/*
.courseStoryABC_l{
	position:absolute;
	left:-125px;
	top:30px;
	width:114px;
}

.courseStoryABC_r{
	position:absolute;
	right:-125px;
	top:30px;
	width:110px;
}
*/
.courseMainRightKid_d>img,.courseMainRightKid_t>img,.courseMainLeftKid_d>img,.courseMainLeftKid_t>img,.courseMainABC_l>img,.courseMainABC_r>img{
	display:block;
	width:100%;
}

.courseStoryRightKid_d>img,.courseStoryRightKid_t>img,.courseStoryLeftKid_d>img,.courseStoryLeftKid_t>img,.courseStoryABC_l>img,.courseStoryABC_r>img{
	display:block;
	width:100%;
}

.songBtnBox{
	position:absolute;
	top:-60px;/*-70px*/
	right:35px;
}
.songBtnBox>p{
	float:left;
	border-radius-bottom-left:400px;
	border-radius-bottom-right:400px;
	width:110px;
	height:110px;
	overflow:hidden;
	cursor:pointer;
}
.songBtnBox>p:first-child{
	margin-right:8px;
}
.songBtnA{
	background-image:url(/Images/index/Main_button2_a.png);
	background-size:100% auto;
}
.songBtnA:hover{
	background-image:url(/Images/index/Main_button2_a_over.png);
}
.songBtnA_unlink{
	background-image:url(/Images/index/Main_button2_a_unlink.png) !important;
	cursor: default !important;
}

.songBtnB{
	background-image:url(/Images/index/Main_button2_b.png);
	background-size:100% auto;
}
.songBtnB:hover{
	background-image:url(/Images/index/Main_button2_b_over.png);
}
.songBtnB_unlink{
	background-image:url(/Images/index/Main_button2_b_unlink.png) !important;
	cursor: default !important;
}
.courseMain_content{
	position:relative;
	width:95%;
	max-width:714px;
	margin:auto;
}

.courseMain_changePageBtn_Box{
	position:relative;
	width:100%;
}
.courseMain_changePageBtn_Line{
	width:100%;
	height:7px;
	background-color:#ff8400;
	border-radius:400px;
}

.courseMain_changePageBtn{
	position:relative;
	width:95%;
	max-width:656px;
	margin:auto;
	overflow:hidden;
}
.courseMain_changePageBtn>p{
	display:block;
	position:relative;
	float:left;
	width:49%;
	height:44px;
	background-color:#ffd23b;
	background-image:url(/Images/index/Main_bookBtn_bg2_l.png), url(/Images/index/Main_bookBtn_bg2_r.png);
	background-size:20px auto, 20px auto;
	background-repeat:no-repeat, no-repeat;
	background-position: left top, right top;
	cursor:pointer;
}
.courseMain_changePageBtn>p:hover{
	background-image:url(/Images/index/Main_bookBtn_bg2_l_over.png), url(/Images/index/Main_bookBtn_bg2_r_over.png);
	background-color:#ffba00;
}
.courseMain_changePageBtn>p:first-child{
	margin-right:2%
}
.courseMain_changePageBtn>p>img{
	display:block;
	position:relative;
	width:136px;
	margin:auto;
}

.changePageBtn_focus{
	background-image:url(/Images/index/Main_bookBtn_bg1_l.png), url(/Images/index/Main_bookBtn_bg1_r.png) !important;
	background-color:#ff8400 !important;
	cursor: defaul !important;
}



/**/
.courseMain_bookBtnBox{
	position:relative;
	max-width:660px;
	width:95%;
	margin:auto;
	margin-top:14px;
	margin-bottom:14px;
	overflow:hidden;
}

.bookBtnBoxLayout1{ /*移動這CLASS*/
	position: relative;
	width:200%;
	top:0px;
	left:-0%;
	overflow:hidden;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.bookBtnBoxMove{
	left:-100% !important;
}

.bookBtnBoxLayout2{
	position:relative;
	width:50%;
	float:left;/**/
	overflow:hidden;
	text-align:center;
}


.bookBtnBoxLayout2>a{
	display:block;
	max-width:220px;
	width:33%;/*25%*/
	float:left;
	background-repeat:no-repeat;
	background-size:100% auto;
}

.bookBtnBoxLayout2>a>img{
	display:block;
	width:100%;
}

.bookBtnBoxLayout2>a:nth-child(1){
	background-image:url(/Images/index/Main_button_unity1.png),url();/* 因IE無法正常是用hover效果所以加上  ,url()  */
}
.bookBtnBoxLayout2>a:nth-child(2){
	background-image:url(/Images/index/Main_button_unity2.png);	
}
.bookBtnBoxLayout2>a:nth-child(3){
	background-image:url(/Images/index/Main_button_unity3.png);	
}
.bookBtnBoxLayout2>a:nth-child(4){
	background-image:url(/Images/index/Main_button_unity4.png);	
}
.bookBtnBoxLayout2>a:nth-child(5){
	background-image:url(/Images/index/Main_button_unity5.png);	
}
.bookBtnBoxLayout2>a:nth-child(6){
	background-image:url(/Images/index/Main_button_unity6.png);	
}
.bookBtnBoxLayout2>a:nth-child(7){
	background-image:url(/Images/index/Main_button_unity7.png);
}
.bookBtnBoxLayout2>a:nth-child(8){
	background-image:url(/Images/index/Main_button_unity8.png);	
}
.bookBtnBoxLayout2>a:nth-child(9){
	background-image:url(/Images/index/Main_button_unity9.png);	
}
.bookBtnBoxLayout2>a:nth-child(10){
	background-image:url(/Images/index/Main_button_unity10.png);	
}
.bookBtnBoxLayout2>a:nth-child(11){
	background-image:url(/Images/index/Main_button_unity11.png);	
}
.bookBtnBoxLayout2>a:nth-child(12){
	background-image:url(/Images/index/Main_button_unity12.png);
}
.bookBtnBoxLayout2>a:nth-child(1):hover{
	background-image:url(/Images/index/Main_button_unity1.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(2):hover{
	background-image:url(/Images/index/Main_button_unity2.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(3):hover{
	background-image:url(/Images/index/Main_button_unity3.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(4):hover{
	background-image:url(/Images/index/Main_button_unity4.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(5):hover{
	background-image:url(/Images/index/Main_button_unity5.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(6):hover{
	background-image:url(/Images/index/Main_button_unity6.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(7):hover{
	background-image:url(/Images/index/Main_button_unity7.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(8):hover{
	background-image:url(/Images/index/Main_button_unity8.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(9):hover{
	background-image:url(/Images/index/Main_button_unity9.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(10):hover{
	background-image:url(/Images/index/Main_button_unity10.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(11):hover{
	background-image:url(/Images/index/Main_button_unity11.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(12):hover{
	background-image:url(/Images/index/Main_button_unity12.png),url(/Images/index/Main_button_unity_over.png);	
}




.bookBtnBoxLayout2>p{
	display:block;
	max-width:220px;
	width:33%;
	float:left;
	background-repeat:no-repeat;
	background-size:100% auto;
	cursor: default;
}

.bookBtnBoxLayout2>p>img{
	display:block;
	width:100%;
}
.bookBtnBoxLayout2>p:nth-child(1){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_unity1.png),url();/* 因IE無法正常是用hover效果所以加上  ,url()  */
}
.bookBtnBoxLayout2>p:nth-child(2){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_unity2.png);	
}
.bookBtnBoxLayout2>p:nth-child(3){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_unity3.png);	
}
.bookBtnBoxLayout2>p:nth-child(4){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_unity4.png);	
}
.bookBtnBoxLayout2>p:nth-child(5){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_unity5.png);	
}
.bookBtnBoxLayout2>p:nth-child(6){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_unity6.png);	
}
.bookBtnBoxLayout2>p:nth-child(7){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_unity7.png);
}
.bookBtnBoxLayout2>p:nth-child(8){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_unity8.png);	
}
.bookBtnBoxLayout2>p:nth-child(9){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_unity9.png);	
}
.bookBtnBoxLayout2>p:nth-child(10){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_unity10.png);	
}
.bookBtnBoxLayout2>p:nth-child(11){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_unity11.png);	
}
.bookBtnBoxLayout2>p:nth-child(12){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_unity12.png);
}






/**/
/**/
.courseMain_storyBtnBox{
	position:relative;
	max-width:660px;
	width:95%;
	margin:auto;
	margin-top:10px; /*14*/
	margin-bottom:14px; /*14*/
	overflow:hidden;
}

.storyBtnBoxLayout1{ /*移動這CLASS*/
	position: relative;
	width:100%;
	top:0px;
	left:-0%;
	overflow:hidden;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}


.storyBtnBoxLayout2{
	position:relative;
	width:100%;
	float:left;/**/
	overflow:hidden;
	text-align:center;
}


.storyBtnBoxLayout2>a{
	display:block;
	max-width:220px;
	width:33%;
	float:left;
	background-repeat:no-repeat;
	background-size:100% auto;
}

.storyBtnBoxLayout2>a>img{
	display:block;
	width:100%;
}

.storyBtnBoxLayout2>a:nth-child(1){
	background-image:url(/Images/index/Main_button_story1.png),url();/* 因IE無法正常是用hover效果所以加上  ,url()  */
}
.storyBtnBoxLayout2>a:nth-child(2){
	background-image:url(/Images/index/Main_button_story2.png);	
}
.storyBtnBoxLayout2>a:nth-child(3){
	background-image:url(/Images/index/Main_button_story3.png);	
}
.storyBtnBoxLayout2>a:nth-child(4){
	background-image:url(/Images/index/Main_button_story4.png);	
}
.storyBtnBoxLayout2>a:nth-child(5){
	background-image:url(/Images/index/Main_button_story5.png);	
}
.storyBtnBoxLayout2>a:nth-child(6){
	background-image:url(/Images/index/Main_button_story6.png);	
}
.storyBtnBoxLayout2>a:nth-child(7){
	background-image:url(/Images/index/Main_button_story7.png);	
}
.storyBtnBoxLayout2>a:nth-child(8){
	background-image:url(/Images/index/Main_button_story8.png);	
}
.storyBtnBoxLayout2>a:nth-child(9){
	background-image:url(/Images/index/Main_button_story9.png);	
}
.storyBtnBoxLayout2>a:nth-child(10){
	background-image:url(/Images/index/Main_button_story10.png);	
}
.storyBtnBoxLayout2>a:nth-child(11){
	background-image:url(/Images/index/Main_button_story11.png);	
}
.storyBtnBoxLayout2>a:nth-child(12){
	background-image:url(/Images/index/Main_button_story12.png);	
}
.storyBtnBoxLayout2>a:nth-child(1):hover{
	background-image:url(/Images/index/Main_button_story1.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(2):hover{
	background-image:url(/Images/index/Main_button_story2.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(3):hover{
	background-image:url(/Images/index/Main_button_story3.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(4):hover{
	background-image:url(/Images/index/Main_button_story4.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(5):hover{
	background-image:url(/Images/index/Main_button_story5.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(6):hover{
	background-image:url(/Images/index/Main_button_story6.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(7):hover{
	background-image:url(/Images/index/Main_button_story7.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(8):hover{
	background-image:url(/Images/index/Main_button_story8.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(9):hover{
	background-image:url(/Images/index/Main_button_story9.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(10):hover{
	background-image:url(/Images/index/Main_button_story10.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(11):hover{
	background-image:url(/Images/index/Main_button_story11.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(12):hover{
	background-image:url(/Images/index/Main_button_story12.png),url(/Images/index/Main_button_unity_over.png);	
}



.storyBtnBoxLayout2>p{
	display:block;
	max-width:220px;
	width:33%;
	float:left;
	background-repeat:no-repeat;
	background-size:100% auto;
	cursor: default;
}

.storyBtnBoxLayout2>p>img{
	display:block;
	width:100%;
}

.storyBtnBoxLayout2>p:nth-child(1){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_story1.png),url();/* 因IE無法正常是用hover效果所以加上  ,url()  */
}
.storyBtnBoxLayout2>p:nth-child(2){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_story2.png);	
}
.storyBtnBoxLayout2>p:nth-child(3){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_story3.png);	
}
.storyBtnBoxLayout2>p:nth-child(4){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_story4.png);	
}
.storyBtnBoxLayout2>p:nth-child(5){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_story5.png);	
}
.storyBtnBoxLayout2>p:nth-child(6){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_story6.png);	
}
.storyBtnBoxLayout2>p:nth-child(7){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_story7.png);	
}
.storyBtnBoxLayout2>p:nth-child(8){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_story8.png);	
}
.storyBtnBoxLayout2>p:nth-child(9){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_story9.png);	
}
.storyBtnBoxLayout2>p:nth-child(10){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_story10.png);	
}
.storyBtnBoxLayout2>p:nth-child(11){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_story11.png);	
}
.storyBtnBoxLayout2>p:nth-child(12){
	background-image:url(/Images/index/Main_button_unlink.png),url(/Images/index/Main_button_story12.png);	
}












/*profile*/

.profile .openCard_layout2{
	/*max-width:790px;*/
	margin:auto;
}

.profile .pageTitle{
	/*margin-bottom:25px !important;*/
}
.profileBox{
	position:relative;
	width:100%;
	overflow:hidden;
	padding-left:5%;
	padding-right:5%;
	padding-top:30px;
	padding-bottom:30px;
}
.profileBox>div:nth-child(1){
	float:left;
	width:35%;
	
	
}
.profileBox>div:nth-child(2){
	float:left;
	width:65%;
	overflow:hidden;
}


.kidPhoto_boy{
	position:relative;
	margin:auto;
	width:95%;
	max-width:196px;
	border:8px solid #009bff;
	border-radius:22px;
	display:none;
}
.kidPhoto_boy>img{
	display:block;
	width:100%;/*180*/
}
.kidPhoto_girl{
	position:relative;
	margin:auto;
	width:95%;
	max-width:196px;
	border:8px solid #e76da3;
	border-radius:22px;
	display:none;
}
.kidPhoto_girl>img{
	display:block;
	width:100%;/*180*/
}
.PhotoDisplay{
	display: block;
}

.PeriodOfUse{
	position: relative;
	margin:auto;
	text-align:center;
	color:#f7254d;
	margin-top:20px;
	border:1px solid #f7b6c2;
	border-radius:50px;
	width:95%;
	max-width:196px;
	line-height:30px;
	font-size:16px;
}
.PeriodOfUse2{
	position: relative;
	margin:auto;
	text-align:center;
	color:#fff;
	/*margin-top:30px;*/
	margin-bottom:20px;
	/*border:1px solid #f7b6c2;*/
	border-radius:50px;
	width:100%;/*170px;*/
	line-height:30px;
	font-size:16px;
	background-color:#f7254d;
}
.PeriodOfUse2>p{
	display:inline-block;
	color:#FF9;
}

.profileLayout1{
	position:relative;
	width:100%;
	font-size:18px;
	line-height:30px;
	margin-bottom:10px;
}
.profileLayout1:last-child{
	margin-bottom:0px !important;
}

.profileLayout1>div:nth-child(1){
	position:absolute;
	width:118px;
	background-color:#3acb2b;
	margin-left:13px;
	margin-right:13px;
	text-align:center;
	color:#FFF;
	border-radius:50px;
	font-size:16px;
}

.profileLayout1>div:nth-child(2){
	position:relative;
	width:100%;
	padding-left:140px;
	color:#4c4c4c;/*#11b200*/
}

.profileLayout1>div:nth-child(2)>p{
	padding-left:10px;
}

.profileLayout1>div:nth-child(2)>input,.profileLayout1>div:nth-child(2)>select{
	display:block;
	position:relative;
	padding-left:10px;
	padding-right:15px;
	width:100%;
	height:30px;
	border-radius:50px;
	border:2px dotted #b0eaaa;
	color:#4c4c4c;
	font-size:16px;
	font-family: 'Quicksand','Noto Sans TC',"微軟正黑體", sans-serif;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}


.profilePoint:after{
	content: "";
	display:block;
	position:absolute;
	width:6px;
	height:6px;
	background-color:#F00;
	top:12px;
	left:-11px;
	border-radius:50px;
}

.profile_btnBox{
	position:relative;
	overflow:hidden;
	margin:auto;
	padding-top:15px;
	max-width:250px;
}

.profileLayout1 .remindT{
	position:relative;
	display:block;
	color:#F00;
	font-size:13px !important;
	line-height:16px;
	padding-top:5px;
}

.profileColor{
	background-color:#ff6600 !important;
}


/*student--------------*/

.studentBox{
	position:relative;
	width:100%;
	font-family: 'Quicksand','Noto Sans TC',"微軟正黑體", sans-serif;
}
.studentList{
	position:absolute;
	top:-30px;
	overflow:hidden;
}
.studentList>p{
	display:block;
	background-color:#ffa800;
	padding-left:20px;
	padding-right:20px;
	color:#f0ff00;
	height:50px;
	line-height:35px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	font-size:18px;
	font-weight:bold;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
}

.studentTable{
	position:relative;
	background-color:#fff;
	border:6px solid #ffa800;
	border-radius:12px;
	overflow:hidden;
}

.studentTable tr>td{
	height:40px;
	text-align:center;
	font-size:20px;
}
.studentTable tr:nth-child(1n+2){
	background-color:#fffed7;
	color:#259f00;
}
.studentTable tr:nth-child(even){
	background-color:#fff04b;
}

.studentTable tr:nth-child(1)>td>div{
	position:relative;
	text-align:left;
	color:#ff7800;
	width:96%;
	margin:auto;
	padding-left:30px;
	line-height:25px;
}
.studentTable tr:nth-child(1)>td>div>span{
	position: absolute;
	display:block;
	float:left;
	top:2px;
	left:0px;
}
.studentTable tr:nth-child(1)>td>div>span>img{
	display:block;
}
.studentImg{
	display: inline-block;
	padding-top:3px;
	cursor:pointer;
}
.studentTable tr:nth-child(2){
	background-color:#ffa800;
	color:#FFF;
}

.studentTable tr>td{
	border-left:1px solid #fff;
}
.studentTable tr>td:nth-child(1){
	border-left:0px;
}
/**/
.studentTablePopup{
	margin-top:26px;
}

.studentTablePopup .studentList{
	width:100%;
	padding-left:0px;
	text-align:center;
}

.studentTablePopup td{
	height:30px !important;
}

/*newUser--------------*/

.newUser_layout1{
	position:relative;
	width:90%;
	margin:auto;
	padding-top:40px;
	padding-bottom:10px;
	color:#333;
	line-height:30px;
}
.newUserQuestion{
	position:relative;
	font-size:20px;
	color:#0070e5;
	margin-bottom:10px;
	background-color:#ffd23b;
	border-radius:100px; 
	padding-left:10px;
}

.StepP{
	position:relative;
	padding-left:65px;
}
.StepP>span{
	position:absolute;
	top:0px;
	left:0px;
	/*color:#40c300;*/
}

.newUser_redT{
	color:#F00;
	padding-top:10px;
}

.newUser_layout2{
	position:relative;
	width:100%;
	margin:auto;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:30px;
}
.newUser_computer{
	margin-bottom:5px;
	margin-top:15px;
}
.newUser_computer>span{
	border:1px solid #999;
	padding-left:5px;
	padding-right:5px;
	border-radius:10px;
	
}

.newUser_system{
	color:#0070e5;
}

.newUser_weight{
	font-weight:bold;
}

	
} /*大於740-------------電腦*/


/*視窗小於999 login頁面左右怪物消失*/
@media screen and (max-width: 999px){
.loginImgLeft{
	position:absolute;
	bottom:0px;
	left:-175px;
	display:none;
}
.loginImgRight{
	position:absolute;
	bottom:-5px;
	right:-225px;
	display:none;
}

} /*視窗小於999 login頁面左右怪物消失*/


/*視窗小於999 login頁面左右怪物消失*/
@media screen and (max-width: 1100px){

.registerImgLeft{
	position:absolute;
	bottom:20px;
	left:-225px;
	display:none;
}
.registerImgRight{
	position:absolute;
	bottom:20px;
	right:-210px;
	display:none;
}

} /*視窗小於999 login頁面左右怪物消失*/







/*739--------------手機*/
@media screen and (max-width: 739px){

/* js控制頁面scroll消失*/	
.mainClose{ 
	overflow-y: hidden;
}
.mainScrollClose::-webkit-scrollbar
{
    width: 0px;
    height: 0px;
}
.mainScrollClose {
    width:100%;
    height:100%;
    overflow-y: auto;
}
/* js控制頁面scroll消失*/	



#main{
	position:relative;
	width:100%;
	max-width:1920px;
	min-height:100%;
	background-color:#9addff;
	padding-bottom:100px;
	overflow:hidden;
}

.mainBox{
	position:relative;
	margin:auto;
	margin-top:0px;
	width:100%;
	/*max-width:1000px;*/
	padding-top:50px;
	padding-bottom:10px;
	font-family: 'Noto Sans TC',"微軟正黑體", sans-serif;
}


.pageBox{
	position:relative;
	width:90%;
	min-height:450px;
	background-color:#FFF;
	margin:auto;
	background-image:url(/Images/index/page_titleBg_02.png),url(/Images/index/loginImg_03.png),url(/Images/index/loginImg_04.png);
	background-repeat:no-repeat, repeat-x, repeat;
	background-position:center top, center bottom, center top;
	background-size:1000px auto,36px 20px,90px auto;
	border-radius:30px;
	border:4px solid #fff;
	padding-bottom:50px;
}

.pageTitle{
	position:relative;
	width:100%;
	height:90px;
	overflow:hidden;
	margin-bottom:25px;
}
.pageTitle>p{
	width:100%;
	margin-top:35px;
	padding-left:0px;
	font-size:26px;
	text-align:center;
	color:#fff;
	font-weight:bold;
	line-height:30px;
	text-shadow:1px 3px 2px rgba(255,78,0,0.5);
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	transform:translateY(-50%);
}

.pageContent{
	position:relative;
	width:93%;
	margin:auto;
}

.contentText1{
	color:#333;
	font-size:16px;
	line-height:27px;/*30*/
}
.contentText1>p>br{
	line-height:43px;
}

/*button*/
button{
	font-family: 'Quicksand','Noto Sans TC',"微軟正黑體", sans-serif;
}
.greenBtn{
	float:left;
	width:100%;
	max-width:250px;
	height:50px;
	line-height:50px;
	border:0px solid #000;
	background-color:#97ca2a;
	font-size:16px;
	color:#fff;
	border-radius:25px; 
	cursor:pointer;
}
.greenBtn:hover{
	background-color:#0C0;
}

.orangeBtn{
	float:left;
	width:100%;
	max-width:250px;
	height:50px;
	line-height:50px;
	border:0px solid #000;
	background-color:#ff9600;
	font-size:16px;
	color:#fff;
	border-radius:25px; 
	cursor:pointer;
}
.orangeBtn:hover{
	background-color:#ff7200;
}



/*footer-----------*/
.footer{
	position:absolute;
	height:100px;
	width:100%;
	bottom:0px;
	left:0px;
	overflow:hidden;
}
.copyright{
	position:relative;
	width:90%;
	max-width:1000px;
	margin:auto;
	text-align:center;
	margin-top:3px;
}
.copyright>p:first-child{
	color:#fff;
	font-size:12px;
	margin-bottom:2px;
}
.copyright>p:last-child{
	font-family: 'Acme', sans-serif;
	font-size:20px;
	color:#0083fd;
	padding-top:5px;
	line-height:20px;
}

.footerHidden{
	display:none;
}


/*login------------*/
.loginBox{
	position:relative;
	width:90%;
	max-width:570px;
	min-height:450px;
	background-color:#FFF;
	margin:auto;
	background-image:url(/Images/index/page_titleBg_01.png),url(/Images/index/loginImg_03.png),url(/Images/index/loginImg_04.png);
	background-repeat:no-repeat, repeat-x, repeat;
	background-position:center top, center bottom, center top;
	background-size:500px auto,36px 20px,90px auto;
	border-radius:30px;
	border:4px solid #fff;
	padding-bottom:20px;
}

.loginTitle{
	position:relative;
	width:100%;
	height:90px;
	overflow:hidden;
	margin-bottom:0px;
}
.loginTitle>p{
	width:100%;
	margin-top:8px;
	font-size:26px;
	text-align:center;
	color:#fff; /*0070e5*/
	font-weight:bold;
	line-height:40px;
	text-shadow:1px 3px 2px rgba(255,78,0,0.5);/**/
}
.loginBox_LayoutBox1{
	position:relative;
	margin-bottom:30px;
}
.loginBox_Layout1{
	position:relative;
	width:100%;
	text-align:center;
	font-size:16px;
	color:#0070e5;
	padding-bottom:2px;
	line-height:20px;
}

.loginBox_Layout2{
	position:relative;
	width:100%;
	text-align:center;
}
.loginBox_Layout2>input{
	width:90%;
	max-width:380px;
	height:50px;
	text-align:center;
	font-size:20px;
	font-family: 'Quicksand','Noto Sans TC',"微軟正黑體", sans-serif;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	background-color:#fff0bf;
	border-radius:30px;
	border:3px dotted #ffd23b;
	color:#F00;
	-webkit-appearance: none;
}
.loginBox_Layout3{
	position:absolute;
	bottom:-17px;
	left:0px;
	width:100%;
	text-align:center;
	color:#F00;
	font-size:12px;
}
.loginBox_paddingTop{
	padding-top:10px;
}
.loginBox button{
	width:90%;
	max-width:250px;
	height:50px;
	border:0px solid #000;
	background-color:#97ca2a;
	font-size:20px;
	color:#fff;
	font-family: 'Quicksand','Noto Sans TC',"微軟正黑體", sans-serif;
	border-radius:25px; 
	cursor:pointer;
	
}

.loginBox button:hover{
	background-color:#0C0;
}

.loginBox_Layout4{
	margin-top:20px;
	
}
.loginBox_Layout4>a{
	font-size:18px;
	color:#F00;
	text-decoration: underline;
	padding-left:12px;
	padding-right:12px;
}
.loginBox_Layout4>a:hover{
	color:#0070e5;
}
.loginBox_Layout4>a:first-child{
	/*margin-right:25px;*/
}

.loginImgLeft{
	position:absolute;
	top:0px;
	left:-175px;
	display:none;
}
.loginImgRight{
	position:absolute;
	top:-5px;
	right:-225px;
	display:none;
}

.loginBox_Layout5{
	position:relative;
	width:80%;
	max-width:290px;
	margin:auto;
	font-size:14px;
	color:#666;
	padding-top:10px;
	padding-bottom:10px;
	line-height:20px;
}

/*register--------------*/
.registerBox{
	position:relative;
	/**/
	max-width:840px !important;
	margin:auto;
	width:90%
}
.register{
	max-width:840px !important;
	min-height:610px !important;
	width:100% !important; 
}


.register_Layout_01{
	position:relative;
	text-align:center;
}

.register_Layout_01_1{
	position:relative;
	background-color:#51c4ff;
	border-radius:50px;
	max-width:380px;
	width:90%;
	min-height:363px;
	margin-left:2%;
	margin-right:2%;
	margin:auto;
}

.register_Layout_01_1>div:nth-child(1){
	position:relative;
	padding-top:15px;
	padding-bottom:12px;
}
.register_Layout_01_1>div:nth-child(1)>img{
	display:block;
	width:220px;
	height:auto;
	margin:auto;
}
.register_Layout_01_2{
	position:relative;
	width:100%;
	height:130px;
	background-color:#70cfff;
	border-top:3px dotted #a0dfff;
	border-bottom:3px dotted #a0dfff;
	
}
.register_Layout_01_2>div{
	position:absolute;
	top:50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	transform:translateY(-50%);
	text-align:center;
	width:100%;
	padding-left:10px;
	padding-right:10px;
}

.register_Layout_01_2>div>p:nth-child(1){
	color:#FFF;
	font-size:14px;
	line-height:18px;
	margin-bottom:7px;
}
.register_Layout_01_2>div>p:nth-child(2){
	color:#0048ff;
	font-size:20px;
	line-height:24px;
	font-weight:bold;
}

.register_Layout_01_3{
	position:relative;
	
}
.register_Layout_01_3>button{
	position:relative;
	display:block;
	width:90%;
	max-width:250px;
	height:65px;
	border:0px solid #000;
	margin:auto;
	font-family: 'Quicksand','Noto Sans TC',"微軟正黑體", sans-serif;
	font-size:24px;
	color:#FF0;
	background-color:#0048ff;
	margin-top:20px;
	border-radius:50px;
	cursor:pointer;
	line-height:65px;
}
.register_Layout_01_3>button:hover{
	background-color:#0060ff;
}


.register_Layout_01_colorCH1{
	background-color:#56d633;
	margin-top:25px;
}
.register_Layout_01_colorCH2{
	background-color:#70fd49;
	border-top:3px dotted #a6ff8d;
	border-bottom:3px dotted #a6ff8d;
}
.register_Layout_01_colorCH2>div>p:nth-child(2){
	color:#2d7e00 !important;
}
.register_Layout_01_colorCH3>button{
	background-color:#199700;
}
.register_Layout_01_colorCH3>button:hover{
	background-color:#24a601;
}

/*openCard--------------*/
.openCard_layout1{
	position:relative;
	width:100%;
	overflow:hidden;
	margin-bottom:20px;
}
.openCard_layout1>div{
	position:relative;
	float:left;
	width:24.5%;
	height:125px;
	background-color:#f2f2f2;
	border:3px dotted #ffd23b;
	border-radius:12px;
}
.openCard_layout1>div:nth-child(1),.openCard_layout1>div:nth-child(2),.openCard_layout1>div:nth-child(3){
	margin-right:0.65%;
}
.openCardPoint1{
	left:24.8%;
}
.openCardPoint2{
	left:49.9%;
}
.openCardPoint3{
	left:75%;
}
.openCardPoint{
	position:absolute;
	margin-left:-12px;
	margin-top:-12px;
	top:62px;
}
.openCardPoint>img{
	display:block;
	position:relative;
	width:25px;
	height:25px;
}
.openCard_layout2{
	position:relative;
	width:100%;
	min-height:125px;
	background-color:#f2f2f2;
	border:3px dotted #ffd23b;
	border-radius:12px;
}
.openCard_layout1_1>p{
	position:absolute;
	width:100%;
	text-align:center;
	top:80px;
	font-size:14px;
	color:#40c300;
	line-height:18px;
	padding-left:5px;
	padding-right:5px;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.openCard_layout1_1>div{
	position:relative;
	width:22px;
	margin:auto;
	margin-top:20px;
}
.openCard_layout1_1>div>img{
	display:block;
	width:22px;
}

.openCard_layout1_1Focus{
	background-color:#ffd23b !important;
}

.openCard_layout1_1Focus>p{
	color:#ff4800;
}


.openCard_Title{
	padding-top:20px;
	padding-left:10%;
	padding-right:10%;
	padding-bottom:20px;
	text-align:center;
	font-size:20px;
	color:#0070e5;
}
/*openCard01*/
.openCard01_box{
	position:relative;
	width:90%;
	max-width:400px;
	margin:auto;
	margin-bottom:30px;
}

.openCard01_L01{
	position:relative;
	overflow:hidden;
	margin-bottom:20px;
}
.openCard01_L01>div{
	position:relative;
}
.openCard01_L01>div:nth-child(1){
	width:100%;
	font-size:18px;
	color:#40c300;
	text-align:center;
	
}
.openCard01_L01>div:nth-child(2){
	width:100%;
}
.openCard01_L01 input{
	width:100%;
	height:50px;
	text-align:center;
	font-size:20px;
	font-family: 'Quicksand','Noto Sans TC', sans-serif;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	background-color:#fff0bf;
	border-radius:30px;
	border:3px dotted #ff9600;
	color:#F00;
	-webkit-appearance: none;
}

.openCard_btnBox{
	position:relative;
	overflow:hidden;
	margin:auto;
	padding-top:10px;
	max-width:500px;
}

.openCard_btnBox>p{
	width:49%;
	float:left;
	margin-left:0.5%;
	margin-right:0.5%;
}

.openCard02_box{
	position:relative;
	max-width:800px;
	width:90%;
	margin:auto;
	margin-bottom:35px;
}

.openCard02_L01{
	width:100%;
	margin-bottom:20px;
}


.openCard03_L01{
	position:relative;
	overflow:hidden;
	margin-bottom:10px;
}
.openCard03_L01>div{
	position:relative;
}
.openCard03_L01>div:nth-child(1){
	width:100%;
	font-size:18px;
	color:#40c300;
	text-align:left;
	padding-left:15px;
	
}
.openCard03_L01>div:nth-child(2){
	width:100%;
}
.openCard03_L01 input,.openCard03_L01 select{
	width:100%;
	height:50px;
	text-align:left;
	font-size:20px;
	padding-left:20px;
	padding-right:20px;
	font-family: 'Quicksand','Noto Sans TC', sans-serif;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	background-color:#fff0bf;
	border-radius:30px;
	border:3px dotted #ff9600;
	color:#F00;
	-webkit-appearance: none;
    -moz-appearance:none;
	appearance:none;      
}

.openCard03_L01 select::-ms-expand {
	display: none;
}

.openCard02_L02{
	padding-bottom:20px;
}
.openCard02_L02>.weight{
	font-weight:bold
}
.openCard02_text1{
	font-size:18px;
	color:#40c300;
}

.openCard02_0{
	position:relative;
	width:100%;
	height:20px;
}


.openCard03_add:before {
	content: "*";
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	font-size:30px;
	color:#F00 !important;
}

.openCard04_box{
	text-align:center;
	padding-bottom:50px;
	width:90%;
	margin:auto;
}

.depositPoint1{
	left:33%;
}
.depositPoint2{
	left:66.3%;
}
.deposit_layout>div{
	width:32.71% !important;
}
.deposit_layout>div:nth-child(1),.deposit_layout>div:nth-child(2){
	margin-right:0.61% !important;
}

.openCard03_L01>div:nth-child(2)>p{
	position:relative;
	width:100%;
	background-color: #fff;
	height:50px;
	border:3px dotted #E1E1E1;
	padding-left:20px;
	border-radius:30px;
	line-height:44px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	color:#333;
	font-size:16px;
}

.openCard_Warning{
	position:relative;
	text-align:center;
	padding-bottom:15px;
	font-size:16px;
	color:#F00;
}


/*oops--------------*/

.oops_box{
	width:100%;
	padding-top:60px;
	padding-bottom:80px;
	text-align:center;
}

.oops_box>p:nth-child(1){
	font-size:60px;
	font-weight:bold;
}
.oops_box>p:nth-child(1)>span:nth-child(1){
	color:#00ff24;
}
.oops_box>p:nth-child(1)>span:nth-child(2){
	color:#00b4ff;
}
.oops_box>p:nth-child(1)>span:nth-child(3){
	color:#004eff;
}
.oops_box>p:nth-child(1)>span:nth-child(4){
	color:#ff00e4;
}
.oops_box>p:nth-child(1)>span:nth-child(5){
	color:#ff9600;
}

.oops_box>p:nth-child(2),.oops_box>p:nth-child(3){
	font-size:16px;
	color:#004eff;
}
.oops_btnBox{
	overflow:hidden;
	text-align:center;
}
.oops_btnBox>p{
	display:inline-block;
	width:100%;
	max-width:250px;
}
.oops_btnBox>p>a{
	float:left;
	width:100%;
	max-width:250px;
	height:50px;
	line-height:50px;
	border:0px solid #000;
	background-color:#97ca2a;
	font-size:20px;
	color:#fff;
	border-radius:25px; 
	cursor:pointer;
}
.oops_btnBox>p>a:hover{
	background-color:#0C0;
}


/*courseMain--------------*/

.courseMain{
	position:relative;
	margin:auto;
	width:90%;
	max-width:840px;
}

.courseMainBox{
	position:relative;
	width:100%;
	/*min-height:665px;*/
	background-color:#FFF;
	margin:auto;
	background-image:url(/Images/index/Main_titleBg.png),url(/Images/index/loginImg_03.png),url(/Images/index/loginImg_04.png);
	background-repeat:no-repeat, repeat-x, repeat;
	background-position:center top, center bottom, center top;
	border-radius:50px;
	border:5px solid #fff;
	padding-bottom:40px;
}

.courseMainTitle{
	height:86px;
	margin-bottom:10px;
	
}

.courseMainTitle>p{
	margin-top:31px;
}

.courseMainLeftKid_d,.courseMainLeftKid_t{
	position: absolute;
	left:-217px;
	top:266px;
	width:280px;
	display:none;
}

.courseMainRightKid_d,.courseMainRightKid_t{
	position: absolute;
	right:-183px;
	top:268px;
	width:225px;
	display:none;
}

.courseStoryLeftKid_d,.courseStoryLeftKid_t{
	position: absolute;
	left:-217px;
	top:266px;
	width:280px;
	display:none;
}

.courseStoryRightKid_d,.courseStoryRightKid_t{
	position: absolute;
	right:-183px;
	top:268px;
	width:225px;
	display:none;
}


.courseMainABC_l{
	position:absolute;
	left:-125px;
	top:25px;
	width:113px;
	display:none;
}

.courseMainABC_r{
	position:absolute;
	right:-142px;
	top:20px;
	width:129px;
	display:none;
}

.courseStoryABC_l{
	position:absolute;
	left:-125px;
	top:0px;
	width:113px;
	display:none;
}

.courseStoryABC_r{
	position:absolute;
	right:-142px;
	top:0px;
	width:129px;
	display:none;
}

/*
.courseStoryABC_l{
	position:absolute;
	left:-125px;
	top:25px;
	width:113px;
	display:none;
}

.courseStoryABC_r{
	position:absolute;
	right:-142px;
	top:20px;
	width:129px;
	display:none;
}
*/
.courseMainRightKid_d>img,.courseMainRightKid_t>img,.courseMainLeftKid_d>img,.courseMainLeftKid_t>img,.courseMainABC_l>img,.courseMainABC_r>img{
	display:block;
	width:100%;
}

.songBtnBox{
	position:absolute;
	top:-55px;
	left:0px;
}
.songBtnBox>p{
	float:left;
	border-bottom-left-radius:400px;
	border-bottom-right-radius:400px;
	width:68px;
	height:68px;
	overflow:hidden;
	cursor:pointer;
}
.songBtnBox>p:first-child{
	margin-right:5px;
}
.songBtnA{
	background-image:url(/Images/index/Main_button2_a.png);
	background-size:100% auto;
}

.songBtnB{
	background-image:url(/Images/index/Main_button2_b.png);
	background-size:100% auto;
}


.courseMain_content{
	position:relative;
	width:90%;
	max-width:714px;
	margin:auto;
}

.courseMain_changePageBtn_Box{
	position:relative;
	width:100%;
}
.courseMain_changePageBtn_Line{
	width:100%;
	height:7px;
	background-color:#ff8400;
	border-radius:400px;
}

.courseMain_changePageBtn{
	position:relative;
	width:98%;
	max-width:656px;
	margin:auto;
	overflow:hidden;
}
.courseMain_changePageBtn>p{
	display:block;
	position:relative;
	float:left;
	width:49%;
	height:44px;
	background-color:#ffd23b;
	background-image:url(/Images/index/Main_bookBtn_bg2_l.png), url(/Images/index/Main_bookBtn_bg2_r.png);
	background-size:20px auto, 20px auto;
	background-repeat:no-repeat, no-repeat;
	background-position: left top, right top;
	padding-top:8px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	cursor:pointer;
}
.courseMain_changePageBtn>p:hover{
	background-image:url(/Images/index/Main_bookBtn_bg2_l_over.png), url(/Images/index/Main_bookBtn_bg2_r_over.png);
	background-color:#ffba00;
}
.courseMain_changePageBtn>p:first-child{
	margin-right:2%
}
.courseMain_changePageBtn>p>img{
	display:block;
	position:relative;
	max-width:90px;
	width:80%;
	margin:auto;
}

.changePageBtn_focus{
	background-image:url(/Images/index/Main_bookBtn_bg1_l.png), url(/Images/index/Main_bookBtn_bg1_r.png) !important;
	background-color:#ff8400 !important;
	cursor: defaul !important;
}


/**/
.courseMain_bookBtnBox{
	position:relative;
	max-width:660px;
	width:95%;
	margin:auto;
	margin-top:14px;
	margin-bottom:14px;
	overflow:hidden;
}

.bookBtnBoxLayout1{ /*移動這CLASS*/
	position: relative;
	width:200%;
	top:0px;
	left:-0%;
	overflow:hidden;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
	
}
.bookBtnBoxMove{
	left:-100% !important;
}

.bookBtnBoxLayout2{
	position:relative;
	width:50%;
	float:left;/**/
	overflow:hidden;
	text-align:center;
}


.bookBtnBoxLayout2>a{
	display:block;
	max-width:1000px;
	width:50%;
	float:left;
	background-repeat:no-repeat,no-repeat;
	background-size:100% auto,100% auto;
}

.bookBtnBoxLayout2>a>img{
	display:block;
	width:100%;
}

.bookBtnBoxLayout2>a:nth-child(1){
	background-image:url(/Images/index/Main_button_unity1.png),url();/* 因IE無法正常是用hover效果所以加上  ,url()  */
}
.bookBtnBoxLayout2>a:nth-child(2){
	background-image:url(/Images/index/Main_button_unity2.png);	
}
.bookBtnBoxLayout2>a:nth-child(3){
	background-image:url(/Images/index/Main_button_unity3.png);	
}
.bookBtnBoxLayout2>a:nth-child(4){
	background-image:url(/Images/index/Main_button_unity4.png);	
}
.bookBtnBoxLayout2>a:nth-child(5){
	background-image:url(/Images/index/Main_button_unity5.png);	
}
.bookBtnBoxLayout2>a:nth-child(6){
	background-image:url(/Images/index/Main_button_unity6.png);	
}
.bookBtnBoxLayout2>a:nth-child(7){
	background-image:url(/Images/index/Main_button_unity7.png);
}
.bookBtnBoxLayout2>a:nth-child(8){
	background-image:url(/Images/index/Main_button_unity8.png);	
}
.bookBtnBoxLayout2>a:nth-child(9){
	background-image:url(/Images/index/Main_button_unity9.png);	
}
.bookBtnBoxLayout2>a:nth-child(10){
	background-image:url(/Images/index/Main_button_unity10.png);	
}
.bookBtnBoxLayout2>a:nth-child(11){
	background-image:url(/Images/index/Main_button_unity11.png);	
}
.bookBtnBoxLayout2>a:nth-child(12){
	background-image:url(/Images/index/Main_button_unity12.png);
}
.bookBtnBoxLayout2>a:nth-child(1):hover{
	background-image:url(/Images/index/Main_button_unity1.png),url(/Images/index/Main_button_unity_over.png);
}
.bookBtnBoxLayout2>a:nth-child(2):hover{
	background-image:url(/Images/index/Main_button_unity2.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(3):hover{
	background-image:url(/Images/index/Main_button_unity3.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(4):hover{
	background-image:url(/Images/index/Main_button_unity4.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(5):hover{
	background-image:url(/Images/index/Main_button_unity5.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(6):hover{
	background-image:url(/Images/index/Main_button_unity6.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(7):hover{
	background-image:url(/Images/index/Main_button_unity7.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(8):hover{
	background-image:url(/Images/index/Main_button_unity8.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(9):hover{
	background-image:url(/Images/index/Main_button_unity9.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(10):hover{
	background-image:url(/Images/index/Main_button_unity10.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(11):hover{
	background-image:url(/Images/index/Main_button_unity11.png),url(/Images/index/Main_button_unity_over.png);	
}
.bookBtnBoxLayout2>a:nth-child(12):hover{
	background-image:url(/Images/index/Main_button_unity12.png),url(/Images/index/Main_button_unity_over.png);	
}

/**/
/**/
.courseMain_storyBtnBox{
	position:relative;
	max-width:660px;
	width:95%;
	margin:auto;
	margin-top:14px;
	margin-bottom:14px;
	overflow:hidden;
}

.storyBtnBoxLayout1{ /*移動這CLASS*/
	position: relative;
	width:100%;
	top:0px;
	left:-0%;
	overflow:hidden;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
	
}
.storyBtnBoxMove{
	left:-100% !important;
}

.storyBtnBoxLayout2{
	position:relative;
	width:100%;
	float:left;/**/
	overflow:hidden;
	text-align:center;
}


.storyBtnBoxLayout2>a{
	display:block;
	max-width:1000px;
	width:50%;
	float:left;
	background-repeat:no-repeat,no-repeat;
	background-size:100% auto,100% auto;
}

.storyBtnBoxLayout2>a>img{
	display:block;
	width:100%;
}

.storyBtnBoxLayout2>a:nth-child(1){
	background-image:url(/Images/index/Main_button_story1.png),url();/* 因IE無法正常是用hover效果所以加上  ,url()  */
}
.storyBtnBoxLayout2>a:nth-child(2){
	background-image:url(/Images/index/Main_button_story2.png);	
}
.storyBtnBoxLayout2>a:nth-child(3){
	background-image:url(/Images/index/Main_button_story3.png);	
}
.storyBtnBoxLayout2>a:nth-child(4){
	background-image:url(/Images/index/Main_button_story4.png);	
}
.storyBtnBoxLayout2>a:nth-child(5){
	background-image:url(/Images/index/Main_button_story5.png);	
}
.storyBtnBoxLayout2>a:nth-child(6){
	background-image:url(/Images/index/Main_button_story6.png);	
}
.storyBtnBoxLayout2>a:nth-child(7){
	background-image:url(/Images/index/Main_button_story7.png);	
}
.storyBtnBoxLayout2>a:nth-child(8){
	background-image:url(/Images/index/Main_button_story8.png);	
}
.storyBtnBoxLayout2>a:nth-child(9){
	background-image:url(/Images/index/Main_button_story9.png);	
}
.storyBtnBoxLayout2>a:nth-child(10){
	background-image:url(/Images/index/Main_button_story10.png);	
}
.storyBtnBoxLayout2>a:nth-child(11){
	background-image:url(/Images/index/Main_button_story11.png);	
}
.storyBtnBoxLayout2>a:nth-child(12){
	background-image:url(/Images/index/Main_button_story12.png);	
}
.storyBtnBoxLayout2>a:nth-child(1):hover{
	background-image:url(/Images/index/Main_button_story1.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(2):hover{
	background-image:url(/Images/index/Main_button_story2.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(3):hover{
	background-image:url(/Images/index/Main_button_story3.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(4):hover{
	background-image:url(/Images/index/Main_button_story4.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(5):hover{
	background-image:url(/Images/index/Main_button_story5.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(6):hover{
	background-image:url(/Images/index/Main_button_story6.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(7):hover{
	background-image:url(/Images/index/Main_button_story7.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(8):hover{
	background-image:url(/Images/index/Main_button_story8.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(9):hover{
	background-image:url(/Images/index/Main_button_story9.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(10):hover{
	background-image:url(/Images/index/Main_button_story10.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(11):hover{
	background-image:url(/Images/index/Main_button_story11.png),url(/Images/index/Main_button_unity_over.png);	
}
.storyBtnBoxLayout2>a:nth-child(12):hover{
	background-image:url(/Images/index/Main_button_story12.png),url(/Images/index/Main_button_unity_over.png);	
}

/**/





.popupCloseBtn{
	top:-54px;
	right:5px;
}

.popupStopBtn{
	top:-54px;
	right:75px;

}


/**/


.popupVideoBox{

	padding:6px;
	padding-bottom:12px;
	padding-top:12px;

}


.videoPlayBtn>p{
	width:60px;
	height:60px;
	background-color:#ff9703;
	border:3px solid #fff;

	background-size:32px 32px;
	background-repeat:no-repeat;
	background-position:center center;
	

}



.videoSabtitleBtn{
	position:absolute;
	width:35px;
	height:30px;
	bottom:20px;/*20*/
	right:5px;
	background-image:url(/Images/index/Main_videoSubtitleBtn.png);
	background-size:100% auto;
	cursor:pointer;
}
.videoSabtitleBtn:hover{
	background-position:0px 0px;
}



.videoSabtitle{
	position:absolute;
	bottom:20px;/*20*/
	left:0px;
	width:100%;
	min-height:30px;
	background-color:rgba(255,255,255,0.6);
	padding-right:40px;
	padding-left:10px;
	display:none;
}

.videoSabtitle>p{
	text-align:center;
	margin-top:5px;
	margin-bottom:5px;
	text-align:center;
	font-size:18px;
	line-height:20px;
	color:#0d52d0;
	font-family: 'Quicksand','Noto Sans TC',"微軟正黑體", sans-serif;
	font-weight:bold;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}



.videoSabtitleCloseBtn{
	background-image:url(/Images/index/Main_videoSubtitleBtn_close.png);
}
	

.videoTimeBarBox{
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	height:20px;
	background-color:rgba(255,253,123,0.6);
	padding-right:85px;/*70*/
	padding-left:10px;
}

.videoTime{
	position:absolute;
	top:50%;
	right:58px;/*33*/
	font-size:16px;
	line-height:20px;
	-webkit-transform:translate(50%,-50%);
	-moz-transform:translate(50%,-50%);
	transform:translate(50%,-50%);
	font-family:  "Helvetica Neue", Helvetica, Arial, "微軟正黑體", sans-serif;
	color:#087200;
}


.fullScerrnBtn{
	position:absolute;
	width:16px;
	height:16px;
	top:2px;
	right:12px;
	background-image:url(/Images/course/fullScreenBtn.png);
	background-size:100% auto;
	cursor:pointer;
}
.fullScerrnBtn:hover{
	background-image:url(/Images/course/fullScreenBtn_over.png);
}

.endfullScerrnBtn{
	position:absolute;
	width:16px;
	height:16px;
	top:2px;
	right:12px;
	background-image:url(/Images/course/fullScreenBtnEnd.png);
	background-size:100% auto;
	cursor:pointer;
}
.endfullScerrnBtn:hover{
	background-image:url(/Images/course/fullScreenBtnEnd_over.png);
}


.videoTimeBar{
	position:relative;
	width:100%;
	height:10px;
	margin:auto;
	top:5px;
	background-color:#ffa200;
	border-radius:9px;
	overflow:hidden;
}

.timeColorBox{
	position:relative;
	width:50%;
	height:100%;
	background-color:#ff3000;
	border-radius:9px;
}





/*profile*/

.profile .openCard_layout2{
	max-width:790px;
	margin:auto;
}


.profileBox{
	position:relative;
	width:100%;
	overflow:hidden;
	padding-left:5%;
	padding-right:5%;
	padding-top:30px;
	padding-bottom:30px;
}
.profileBox>div:nth-child(1){
	width:100%;
	margin-bottom:30px;
}
.profileBox>div:nth-child(2){
	width:100%;
	overflow:hidden;
}


.kidPhoto_boy{
	position:relative;
	margin:auto;
	width:166px;
	border:8px solid #009bff;
	border-radius:22px;
	display:none;
}
.kidPhoto_boy>img{
	display:block;
	width:150px;
}
.kidPhoto_girl{
	position:relative;
	margin:auto;
	width:166px;
	border:8px solid #e76da3;
	border-radius:22px;
	display:none;
}
.kidPhoto_girl>img{
	display:block;
	width:150px;
}
.PhotoDisplay{
	display: block;
}

.PeriodOfUse{
	position: relative;
	margin:auto;
	text-align:center;
	color:#f7254d;
	margin-top:20px;
	border:1px solid #f7b6c2;
	border-radius:50px;
	width:100%;
	line-height:30px;
	font-size:16px;
}
.PeriodOfUse2{
	position: relative;
	margin:auto;
	text-align:center;
	color:#fff;
	margin-bottom:20px;
	border-radius:50px;
	width:100%;
	line-height:20px;
	font-size:16px;
	background-color:#f7254d;
	padding:5px;
	padding-left:10px;
	padding-right:10px;
}
.PeriodOfUse2>p{
	display:inline-block;
	color:#FF9;
}
.profileLayout1{
	position:relative;
	width:100%;
	font-size:16px;
	line-height:30px;
	margin-bottom:10px;
}
.profileLayout1:last-child{
	margin-bottom:0px !important;
}

.profileLayout1>div:nth-child(1){
	position:absolute;
	width:118px;
	background-color:#3acb2b;
	margin-left:13px;
	margin-right:13px;
	text-align:center;
	color:#FFF;
	border-radius:50px;
	font-size:14px;
}

.profileLayout1>div:nth-child(2){
	position:relative;
	width:100%;
	padding-left:140px;
	color:#4c4c4c;/*#11b200*/
}

.profileLayout1>div:nth-child(2)>p{
	padding-left:10px;
}

.profileLayout1>div:nth-child(2)>input,.profileLayout1>div:nth-child(2)>select{
	display:block;
	position:relative;
	padding-left:10px;
	padding-right:15px;
	width:100%;
	height:30px;
	border-radius:50px;
	border:2px dotted #b0eaaa;
	color:#4c4c4c;
	font-size:16px;
	font-family: 'Quicksand','Noto Sans TC',"微軟正黑體", sans-serif;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}


.profilePoint:after{
	content: "";
	display:block;
	position:absolute;
	width:6px;
	height:6px;
	background-color:#F00;
	top:12px;
	left:-11px;
	border-radius:50px;
}

.profile_btnBox{
	position:relative;
	overflow:hidden;
	margin:auto;
	padding-top:15px;
	max-width:250px;
}

.profileLayout1 .remindT{
	position:relative;
	display:block;
	color:#F00;
	font-size:13px !important;
	line-height:16px;
	padding-top:5px;
}

.profileColor{
	background-color:#ff6600 !important;
}
	


/*student--------------*/

.studentBox{
	position:relative;
	width:100%;
	font-family: 'Quicksand','Noto Sans TC',"微軟正黑體", sans-serif;
}
.studentList{
	position:absolute;
	top:-22px;
	overflow:hidden;
}
.studentList>p{
	display:block;
	background-color:#ffa800;
	padding-left:20px;
	padding-right:20px;
	color:#f0ff00;
	height:50px;
	line-height:27px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	font-size:16px;
	font-weight:bold;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
}

.studentTable{
	position:relative;
	background-color:#fff;
	border:4px solid #ffa800;
	border-radius:12px;
	overflow:hidden;
}

.studentTable tr>td{
	height:26px;
	text-align:center;
	font-size:16px;
}
.studentTable tr:nth-child(1n+2){
	background-color:#fffed7;
	color:#259f00;
}
.studentTable tr:nth-child(even){
	background-color:#fff04b;
}
.studentTable tr:nth-child(1){
	overflow:hidden;
}
.studentTable tr:nth-child(1)>td>div{
	position:relative;
	text-align:left;
	color:#ff7800;
	width:96%;
	margin:auto;
	padding-left:33px;
	line-height:25px;
}
.studentTable tr:nth-child(1)>td>div>span{
	position: absolute;
	display:block;
	float:left;
	top:2px;;
	left:5px;
	
}

.studentTable tr:nth-child(1)>td>div>span>img{
	display:block;
}

.studentImg{
	display: inline-block;
	padding-top:3px;
	cursor:pointer;
}
.studentTable tr:nth-child(2){
	background-color:#ffa800;
	color:#FFF;
}

.studentTable tr>td{
	border-left:1px solid #fff;
}
.studentTable tr>td:nth-child(1){
	border-left:0px;
}

.studentTablePopup{
	margin-top:20px;
}

.studentTablePopup .studentList{
	width:100%;
	padding-left:0px;
	text-align:center;
}


/*newUser--------------*/

.newUser_layout1{
	position:relative;
	width:90%;
	margin:auto;
	padding-top:40px;
	padding-bottom:10px;
	color:#333;
	line-height:30px;
}
.newUserQuestion{
	position:relative;
	font-size:20px;
	color:#0070e5;
	margin-bottom:10px;
	background-color:#ffd23b;
	padding:5px;
	border-radius:10px; 
	padding-left:10px;
	line-height:25px;
}

.StepP{
	position:relative;
	/*padding-left:65px;*/
}
.StepP>span{
	display:block;
	position: relative;
	top:0px;
	left:0px;
	color:#40c300;/**/
}

.newUser_redT{
	color:#F00;
	padding-top:10px;
}

.newUser_layout2{
	position:relative;
	width:100%;
	margin:auto;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:30px;
}
.newUser_computer{
	margin-bottom:0px;
	margin-top:20px;
}
.newUser_computer>span{
	border:1px solid #999;
	padding-left:5px;
	padding-right:5px;
	border-radius:10px;
	
}

.newUser_system{
	color:#0070e5;
	padding-top:10px;
}
.newUser_weight{
	font-weight:bold;
}
.newUser_layout2>p>span{
	display:block;
	color:#40c300;
}



.popupTopBtnBox{
	position:absolute;
	width:210px;
	height:58px;
	top:-57px;
	left:13px;
}
/**/
.popupTopBtnBox>div{
	position:relative;
	float:left;
	width:65px;
	height:57px;
	background-color:#cce4ff;
	border-top-left-radius:400px;
	border-top-right-radius:400px; 
	cursor:pointer;
}

.popupTopBtnBox>div:nth-child(1),.popupTopBtnBox>div:nth-child(2){
	margin-right:7px;
}


} /*739--------------手機*/




/* 小於812  左右的kids 變小&位移*/
@media screen and (max-width: 812px){/*812px*/
/*
.bookBtnBoxLayout2>a{
	max-width:1000px;
	width:50%;
}
*/

.courseMainBox{
	min-height:500px;
}
.courseMainLeftKid_d,.courseMainLeftKid_t{
	position: absolute;
	left:-160px;/*195*/
	top:260px;/*270*/
	width:200px;/*250*/
}

.courseMainRightKid_d,.courseMainRightKid_t{
	position: absolute;
	right:-125px;/*155*/
	top:270px;/*270*/
	width:150px;/*200*/
}

.courseMainABC_l{
	position:absolute;
	left:-115px;
	top:30px;
	width:108px;
}

.courseMainABC_r{
	position:absolute;
	right:-128px;
	top:30px;
	width:124px;
}

.courseMain_content{
	width:90%;
}

/*
.storyBtnBoxLayout2>a{
	max-width:1000px;
	width:50%;
}
*/
.courseStoryLeftKid_d,.courseStoryLeftKid_t{
	position: absolute;
	left:-135px;
	top:245px;
	width:180px;
}

.courseStoryRightKid_d,.courseStoryRightKid_t{
	position: absolute;
	right:-165px;
	top:265px;
	width:210px;
}

.courseStoryABC_l{
	position:absolute;
	left:-115px;
	top:30px;
	width:108px;
}

.courseStoryABC_r{
	position:absolute;
	right:-128px;
	top:30px;
	width:124px;
}

/*
.courseStoryABC_l{
	position:absolute;
	left:-120px;
	top:40px;
	width:114px;
}

.courseStoryABC_r{
	position:absolute;
	right:-120px;
	top:40px;
	width:110px;
}
*/


}

/* 手機轉橫時 popupCloseBtn 位置調整 */
@media screen and (max-width: 812px) and (orientation: landscape){
	
.popupCloseBtn{
	top:-35px;
	right:-33px;/*-33*/
	width:60px;
	height:60px;
	border:1px;
	padding:4px;
	
}
.popupCloseBtn>p{
	background-size:40px 40px;
	background-repeat:no-repeat;
}
.popupVideoBox{
	width:60%;
}

.popupStopBtn{
	top:-35px;
	right:26px;/*38*/
	width:60px;
	height:60px;
	border:1px;
	padding:4px;
}
.popupStopBtn>p{
	/*background-size:40px 40px;*/
	background-repeat:no-repeat;
}


.popupTopBtnBox{
	position:absolute;
	width:66px;
	height:169px;
	top:10px;
	left:-66px;
}
.popupTopBtnBox>div{
	position:relative;
	width:66px;
	height:57px;
	background-color:#cce4ff;
	border-top-left-radius:400px;
	border-bottom-left-radius:400px; 
	border-top-right-radius:0px;
	cursor:pointer;
}

.popupTopBtnBox>div:nth-child(1),.popupTopBtnBox>div:nth-child(2){
	margin-right:0px;
	margin-bottom:8px;
}

.popupTopBtnBox>div>img{
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:42px;
	height:35px;
	margin-left:-21px;
	margin-top:-17px;
}


}

/*手機轉直時 profile list並排*/
@media screen and (max-width: 739px) and (orientation: Portrait){
	
	
.profileLayout1{
	position:relative;
	width:100%;
	font-size:16px;
	line-height:30px;
	margin-bottom:15px;
}

.profileLayout1>div:nth-child(1){
	position: relative;
	width:90%;
	background-color:#3acb2b;
	text-align:center;
	color:#FFF;
	border-radius:50px;
	font-size:14px;
	margin:auto;
	margin-bottom:7px;
}

.profileLayout1>div:nth-child(2){
	position:relative;
	width:90%;
	padding-left:0px;
	margin:auto;
	color:#4c4c4c;/*#11b200*/
	text-align:center;
}

.profileLayout1>div:nth-child(2)>input,.profileLayout1>div:nth-child(2)>select{
	text-align: center;
    text-align-last: center;
	padding:0px;
}

.profileLayout1>div:nth-child(2)>p{
	padding-left:0px;
}

.popupCloseBtn{
	top:-50px;
	width:60px;
	height:60px;
	border:1px;
	padding:4px;
	
}
.popupCloseBtn>p{
	background-size:40px 40px;
	background-repeat:no-repeat;
}
.popupStopBtn{
	top:-50px;
	width:60px;
	height:60px;
	border:1px;
	padding:4px;
}
.popupStopBtn>p{
	/*background-size:40px 40px;*/
	background-repeat:no-repeat;
}

}