/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

* {
    -webkit-appearance:none;
}

@-ms-viewport{
	width:device-width;
}
	
body{
	font-family: 'Helvetica Neue',Helvetica,Arial,STHeiti,'Microsoft JhengHei',微軟正黑體,sans-serif;
	overflow: hidden;
}

.container
    {
        width: 965px;
        height: 603px;
        overflow: hidden;
        margin: 0 auto; 
        background-color: #FFFFFF;
        display: block;
    }

#intro1
	{
		background-image: url("../images/loginpage.jpg");
		background-repeat: no-repeat;
		position: absolute;
		width: 965px;
		height: 603px;
		z-index: 1;
    }

#intro1_guest
	{
		background-image: url("../images/loginpage_guest.jpg");
		background-repeat: no-repeat;
		position: absolute;
		width: 965px;
		height: 603px;
		z-index: 1;
    }
	
#content{
	position: absolute;
	width: 965px;
	height: 603px;
	overflow: hidden;
}
	
.press
    {
        border: 0px dotted #FF0000;
        position: absolute;
		z-index: 1;
    } 

.loginBox{
	width: 200px;
	height: 26px;
	border: 0px;
	background-color: #FFFFFF;
	font-size: 130%;
}

.loginText{
	color: #FFFFFF;
	font-size: 170%;
	font-weight: bold;
}

.forgotPwdTxt{
	color: #FFFFFF;
	font-size: 140%;
	font-weight: bold;
	text-decoration: none;
}

.forgotPwdTxt:hover{
	color: #86C056;
	
}

.forgotPwdTxt:visited{
	color: #FFFFFF;
	text-decoration: none;
}

.loginBtn{
	width: 150px;
	height: 60px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	box-shadow: 4px 4px 4px #214011;
	background-color: #7eb138;
	color: #000000;
	font-size: 180%;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}

.loginBtn:hover{
	background-color: #c2d255;
}

#loginAlert{
	color: #95ab00;
	background-color: #FFFFFF;
	width: 100%;
	height: 45px;
	position: absolute;
	top: 0px;
	text-align:center;
	font-size: 150%;
	font-weight: bold;
	line-height: 200%;
}

#menu_top{
	width: 100%;
	height: 98px;
	background-image: url("../images/menu_top.jpg");
	background-repeat: no-repeat;
}


#menu_body{
	width: 100.2%;
	height: 505px;
	background-color: #FFFFFF;
}

.row{
	width: 100.2%;
	height: 65px;
	border: 0px dotted #FF0000;
	/*overflow: hidden;*/
}

.col1, .col2, .col3, .col4, .col5, .col6{
	border: 1px solid #486535;
	float:left;
	height: 65px;
	text-align: center;
	font-size: 150%;
	line-height: 260%;
}

.col1{
	width: 84px;
	background-color: #b3cf85;
}

.col2{
	width: 130px;
	
}

.col3{
	width: 393px;
	
}

.col4{
	width: 110px;
		
}

.col5{
	width: 110px;
	
}

.col6{
	width: 125px;
	
}

.hcol1, .hcol2, .hcol3, .hcol4, .hcol5, .hcol6, .hcol7{
	border: 1px solid #486535;
	float:left;
	height: 65px;
	text-align: center;
	font-size: 150%;
	line-height: 260%;
}

.hcol1{
	width: 278px;
}

.hcol2{
	width: 193px;
	
}

.hcol3, .hcol4, .hcol5, .hcol6, .hcol7 {
	width: 96px;
	
}

.username{
	color: #FFFFFF;
	font-size: 200%;
	text-align: right;
	width: 250px; 
	height: 501px;  
	right: 150px; 
	top: 23px;
	overflow: hidden;
}

#pagination{
	width: 450px;
	height: 50px;
	border: 0px solid #FF0000;
	position: absolute;
	left: 250px;
	bottom: 10px;
}

.pball_container{
	width: 280px;
	height: 50px;
	margin: 0 auto;
	border: 0px solid #FF0000;
}

.pball{
	border-radius: 50%;
	background-color: #abb9a2;
	width: 30px;
	height: 30px;
	float: left;
	margin: 4px;
	font-size: 150%;
	text-align: center;
	line-height: 135%;
	cursor: pointer;
}


.pball_selected{
	border-radius: 50%;
	background-color: #fa6185;
	width: 30px;
	height: 30px;
	float: left;
	margin: 4px;
	font-size: 150%;
	text-align: center;
	line-height: 135%;
	cursor: pointer;
}

.parrow_left{
	width: 36px;
	height: 36px;
	float: left;
	margin: 4px;
	font-size: 150%;
	text-align: center;
	background-image: url("../images/leftcan.jpg");
	background-repeat: no-repeat;
	cursor: pointer;
}

.parrow_left_disabled{
	width: 36px;
	height: 36px;
	float: left;
	margin: 4px;
	font-size: 150%;
	text-align: center;
	background-image: url("../images/left.jpg");
	background-repeat: no-repeat;
}

.parrow_right{
	width: 36px;
	height: 36px;
	float: left;
	margin: 4px;
	font-size: 150%;
	text-align: center;
	background-image: url("../images/rightcan.jpg");
	background-repeat: no-repeat;
	cursor: pointer;
}

.parrow_right_disabled{
	width: 36px;
	height: 36px;
	float: left;
	margin: 4px;
	font-size: 150%;
	text-align: center;
	background-image: url("../images/right.jpg");
	background-repeat: no-repeat;
}


.enter_course{
	width: 100px;
	height: 45px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	box-shadow: 4px 4px 4px #214011;
	background-color: #7eb138;
	color: #FFFFFF;
	font-size: 100%;
	line-height: 190%;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	margin-left: 10px;
	margin-top: 7px;
}

.enter_course:hover{
	background-color: #c2d255;
}

.enter_course_image{
	margin-top: 5px;
	margin-right: 10px;
	
}

.info_top{
	width: 100%;
	height: 66px;
	overflow: hidden;
	background-image: url("../images/logo_aphasia.png");
	background-repeat: no-repeat;
	background-position: center; 
	
}

.info_top_pro, .info_bottom_pro{
	background-color: #aa79ac;
}

.info_top_dy, .info_bottom_dy{
	background-color: #faa15f;
}

.info_top_aos, .info_bottom_aos{
	background-color: #f984d3;
}

.info_top_com, .info_bottom_com{
	background-color: #486535;
}

.info_top_sem, .info_bottom_sem{
	background-color: #56928a;
}

.mark{
	width: 110px;
	height: 60px;
	float: right;
	margin: 5px;
	margin-right: 10px;
	font-size: 150%;
	line-height: 220%;
	font-weight: normal;
}

.mark_txt{
	width: 42px;
	height: 42px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	text-align: center;
	font-size: 130%;
	line-height: 140%;
}

.mark_txt_pro{
	border: 4px solid #aa79ac;
}

.mark_txt_dy{
	border: 4px solid #faa15f;
}

.mark_txt_aos{
	border: 4px solid #f984d3;
}

.mark_txt_com{
	border: 4px solid #486535;
}

.mark_txt_sem{
	border: 4px solid #56928a;
}

.info_bottom{
	width: 100%;
	height: 66px;
	overflow: hidden;
}

.result_bottom{
	width: 100%;
	height: 36px;
	overflow: hidden;
}

.info_spacer{
	width: 100%;
	height: 17px;
	background-color: #FFFFFF;
	
}

.info_content{
	width: 100%;
	height: 442px;
	background-color: #dee3dc;
	overflow: hidden;
}

.result_content{
	width: 100%;
	height: 472px;
	background-color: #FFFFFF;
	overflow: hidden;
}

.info_home{
	width: 130px;
	height: 46px;
	box-shadow: 4px 4px 4px #888c88;
	background-color: #b9b9b9;
	color: #000000;
	font-size: 170%;
	font-weight: bold;
	line-height: 190%;
	text-align: center;
	cursor: pointer;
	margin: 7px;
	
}

.info_home:hover{
	background-color: #e5e5e5;
}

.info_header{
	width: 967px;
	height: 161px;
	margin-top: 70px;
	text-align: center;
	font-size: 330%;
	/*line-height: 300%;*/
	display: table-cell;
	vertical-align: middle;
}

.result_header{
	width: 100%;
	height: 261px;
	margin-top: 0px;
	text-align: center;
	font-size: 450%;
	line-height: 380%;
}

.encourage_header{
	width: 100%;
	height: 70px;
	margin-top: 40px;
	text-align: center;
	font-size: 200%;
	color: #666666;
}

.info_header_pro{
	background-color: #cca6cf;
	color: #59495a;
}

.info_header_dy{
	background-color: #faa061;
	color: #3d1d08;
}

.info_header_aos{
	background-color: #fb9cdc;
	color: #582748;
}

.info_header_com{
	background-color: #92c673;
	color: #293c20;
}

.info_header_sem{
	background-color: #85dbd0;
	color: #21443e;
}

.info_text{
	width: 100%;
	height: 50px;
	color: #5f615e;
	font-size: 180%;
	text-align: center;
	border: 0px solid #FF0000;
	margin-top: 15px;
}

.info_skip{
	width: 100%;
	height: 50px;
	border: 0px solid #FF0000;
}

.info_skip_btn{
	width: 130px;
	height: 46px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	box-shadow: 4px 4px 4px #888c88;
	background-color: #b9b9b9;
	color: #000000;
	font-size: 170%;
	font-weight: bold;
	line-height: 190%;
	text-align: center;
	cursor: pointer;
	margin: 0 auto;
	margin-top: 20px;
	/*margin-right: 40px;
	float: right;*/
}

.info_skip_btn:hover{
	background-color: #e5e5e5;
}

.info_start{
	width: 100%;
	height: 100px;
	border: 0px solid #FF0000;
	overflow: hidden;
	display: none;
}

.info_start_btn{
	width: 180px;
	height: 60px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	box-shadow: 4px 4px 4px #888c88;
	background-color: #b9b9b9;
	color: #000000;
	font-size: 250%;
	line-height: 160%;
	text-align: center;
	cursor: pointer;
	margin: 0 auto;
	margin-top: 30px;
}

.info_start_btn:hover{
	background-color: #e5e5e5;
}

.encourage_btn{
	width: 160px;
	height: 40px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	box-shadow: 3px 3px 3px #888c88;
	background-color: #b9b9b9;
	color: #FFFFFF;
	font-size: 170%;
	font-weight: bold;
	line-height: 160%;
	text-align: center;
	cursor: pointer;
}

.encourage_btn:hover{
	background-color: #e5e5e5;
}

.course_info{
	width: 98%;
	height: 47px;
	margin: 0 auto;
}

.head_col3 {
	width: 60%;
	height: 46px;
	float: left;
	font-size: 150%;
	line-height: 210%;
	border: 0px solid #FF0000;
	font-weight: bold;
}

.head_col1 {
	width: 20%;
	height: 46px;
	float: left;
	font-size: 150%;
	line-height: 210%;
	border: 0px solid #FF0000;
	font-weight: bold;
}

.head_name {
	text-align: center;
}

.head_level {
	text-align: right;
}

.main_content {
	width: 98%;
	height: 428px;
	margin: 0 auto;
	background-color: #000000;
	text-align: center;
	overflow: hidden;
}

.bottom_content {
	width: 98%;
	height: 64px;
	margin: 0 auto;
	background: #FAFAFA;
}

.bottom_col3 {
	width: 33%;
	height: 46px;
	float: left;
	border: 0px solid #FF0000;
	font-weight: bold;
}



.bottom_btn{
	width: 90px;
	height: 42px;
	box-shadow: 3px 3px 3px #888c88;
	background-color: #b9b9b9;
	color: #000000;
	font-weight: normal;
	text-align: center;
	cursor: pointer;
	margin: 7px;
	margin-left: 0px;
	float: left;
	font-size: 150%;
	line-height: 190%;
}

.level_btn{
	width: 160px;
	height: 40px;
	margin-left: 15px;
	margin-bottom: 3px;
	display: none;
}

.level_space{
	width: 90px;
	height: 55px;
	margin: 7px;
	margin-left: 0px;
	float: left;
}

.bottom_btn:hover{
	background-color: #e5e5e5;
}

.bottom_btn_image{
	margin-top: 5px;
	margin-right: 0px;
	
}

.bottom_btn_txt {
	height: 42px;
	font-size: 150%;
	line-height: 190%;
}

.tips_box{
	width: 35px;
	height: 42px;
	background-color: #dcdcdc;
	color: #000000;
	font-weight: normal;
	text-align: center;
	cursor: pointer;
	float: left;
	font-size: 150%;
	line-height: 190%;
	margin: 2px;
	margin-top: 8px;
}

.tips_box_disabled{
	width: 35px;
	height: 42px;
	background-color: #dcdcdc;
	color: #000000;
	font-weight: normal;
	text-align: center;
	cursor: pointer;
	float: left;
	font-size: 150%;
	line-height: 190%;
	margin: 2px;
	margin-top: 8px;
	opacity: 0.4;
}

.mark_box{
	width: 35px;
	height: 35px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 4px solid #6d6d6d;
	box-shadow: 2px 2px 2px #888c88;
	text-align: center;
	font-size: 150%;
	line-height: 150%;
	font-weight: normal;
	float: left;
	margin: 2px;
	margin-top: 8px;
	cursor: pointer;
}

.frame1, .frame2 {
	width: 100%;
	height: 428px;
	text-align: center;
}

.frame1_1 {
	height: 428px;
}



/*
.enlarge_tool {
	width: 150px;
	height: 60px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
*/

.tips_txt_box {
	width: 98%;
	height: 100px;
	font-size: 500%;
	line-height: 135%;
	background-image: url("../images/tips_bg.png");
	position: absolute;
	left: 10px;
	top: 443px;
	text-align: center;
}

.good_group {
	width: 98%;
	height: 105px;
	text-align: center;
}

.good {
	cursor: pointer;
}

.encourage_content{
	width: 100%;
	height: 422px;
	background-color: #FFFFFF;
	overflow: hidden;
}

.encourage_bottom{
	width: 100%;
	height: 82px;
	overflow: hidden;
	text-align: center;
}

option {
	font-size: 100%;
}

.comment_box {
	width: 965px;
	height: 441px;
	background-image: url("../images/comment_box.png");
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 103px;
	text-align: right;
}

.close_comment {
	cursor: pointer;
}

.enlarge_box {
	width: 98%;
	height: 429px;
	background-color: #000000;
	position: absolute;
	left: 10px;
	top: 113px;
	overflow: hidden;
	background-size: contain;
    background-repeat: no-repeat;
	background-position: center; 
}


#frame2_1, #frame2_2, .frame_2_ans {
	width: 300px;
	height: 300px;
	vertical-align:middle;
	display: table-cell;
}

.frame_2_ans {
	text-align: center;
	margin-top: -17px;
}

.frame2_xo {
	width: 87%;
	height: 87%;
	opacity: 0.8;
	margin-top: 5px;
	margin-left: 3px;
}

.frame3_xo {
	width: 170px;
	height: 170px;
	opacity: 0.8;
	margin-top: 20px;
}

.frame4_xo, .frame5_xo, .frame6_xo {
	width: 140px;
	height: 140px;
	opacity: 0.8;
	margin-top: 15px;
}

#dy_1_ans, #dy_2_ans, #com_1_ans, #com_2_ans {
	position: absolute;
	z-index: 100;
	display: none;
	font-size: 300%;
	font-weight: bold;
	width: 200px;
	height: 200px;
}

.enlarge_tool {
	position: absolute;
	z-index: 100;
	display: none;
}


#dy_pitch_1 {
	font-size: 250%;
	font-weight: bold;
	line-height: 250%;
}

#com_passage_0 {
	font-size: 250%;
	font-weight: bold;
	line-height: 250%;
	cursor: pointer;
}


#dy_pitch_2, #dy_pitch_3, #com_passage_1, #com_passage_2, #com_passage_3, #com_passage_4, #com_passage_5, #com_passage_6{
	font-size: 350%;
	font-weight: bold;
	line-height: 350%;
	cursor: pointer;
}

#frame3_0, #frame3_1, #frame3_2, #frame3_3{
	width: 200px;
	height: 200px;
}

#frame4_1, #frame4_2, #frame4_3, #frame4_4{
	width: 170px;
	height: 170px;
}

#frame5_1, #frame5_2, #frame5_3, #frame5_4, #frame5_5{
	width: 170px;
	height: 170px;
}

#frame6_1, #frame6_2, #frame6_3, #frame6_4, #frame6_5, #frame6_6{
	width: 170px;
	height: 170px;
}

#dy_pitch_2, #dy_pitch_3, #com_passage_1, #com_passage_2, #com_passage_3, #com_passage_4, #com_passage_5, #com_passage_6{
	width: 200px;
	height: 200px;
	background-color: #FFFFFF;
	color: #000000;
}

.passage1, .passage2, .passage3, .passage4, .passage5, .passage6{
	font-size: 250%;
	font-weight: bold;
	/*line-height: 380%;*/
	cursor: pointer;
	background-color: #FFFFFF;
}

#com_passage2 .passage1, #com_passage2 .passage2, #com_passage2 .passage3{
	width: 200px;
	height: 200px;
	
} 

#com_passage3 .passage1, #com_passage3 .passage2, #com_passage3 .passage3{
	width: 170px;
	height: 170px;
} 

#com_passage4 .passage1, #com_passage4 .passage2, #com_passage4 .passage3, #com_passage4 .passage4{
	width: 170px;
	height: 170px;
} 

#dy_pitch_0{
	width: 200px;
	height: 85px;
	background-color: #FAA061;
	color: #FFFFFF;
	border-color: #FFFFFF;
	font-size: 210%;
	cursor: pointer;
}

#dy_pitch_1{
	width: 200px;
	height: 85px;
	background-color: #00ccff;
	color: #FFFFFF;
	border-color: #FFFFFF;
	font-size: 210%;
	cursor: pointer;
}

#com_passage_0{
	width: 110px;
	height: 110px;
}

.q_border {
	
	border: 6px solid #FFFFFF;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	position: absolute;
	z-index: 99;
	opacity: 0;
	background-repeat: no-repeat;
	background-size:     cover;                      /* <------ */
    background-position: center center; 
}

.q_border_enlarge {
	border-width: 0px;
	border-bottom-right-radius: 7px;
	position: absolute;
	z-index: 99;
	opacity: 0;
	background-repeat: no-repeat;
	background-size:     cover;                      /* <------ */
    background-position: center center; 
	width: 40px;
	height: 40px;
	padding: 5px;
	cursor: pointer;
}

.enlarge_tool{
	/*
	width: 30px;
	height: 30px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	border: 6px solid #FFFFFF;
	background-color: #FFFFFF;
	text-align: center;
	cursor: pointer;
	*/
}

.enlarge_tool:hover{
	background-color: #e5e5e5;
}


.photo_num{
	width: 30px;
	height: 30px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	border: 6px solid #FFFFFF;
	background-color: #FFFFFF;
	text-align: center;
	color: #FFFFFF;
	font-size: 180%;
}


.q1 , .enlarge_img{
	width:100%;
	height:100%;
	object-fit: contain;
}

.enlarge_icon {
	width: 25px;
	height: 25px;
}

.enlarge_icon_speaker {
	width: 40px;
	height: 40px;
}

#com_passage4 .enlarge_icon_speaker {
	width: 30px;
	height: 30px;
}

.enlarge_img {
	
}

.frame2 {
	width: 850px;
	margin: 0 auto;
	margin-top: 50px;
}


.logout {
	cursor: pointer;
}

#debug {
	display: block;
}

#youtube_tips {
	display: none;
}

#demo {
	color: #FFFFFF;
	font-size: 180%;
	margin-top: 30px;
	font-weight: bold;
}


.hist_head{
	background-color: #608926; 
	border: 1px solid #FFFFFF;
	border-bottom: 1px solid #608926;
	color: #FFFFFF;
}

.hcol1.hist_head{
	border-left: 1px solid #608926;
}

.hcol7.hist_head{
	border-right: 1px solid #608926;
}

#dy_sing{
	cursor: pointer;
	border-color: #FAA061;
	background-color: #FFFFFF;
	opacity: 1;
	width: 70px;
	height: 70px; 
}

.seq_left_box_bg{
	position: absolute;
	width: 70px;
	height: 70px;
	background-color: #85dbd0;
	border: 6px solid #FFFFFF;
	border-radius: 7px;
}

.inbox{
	width: 100%;
	height: 100%;
	color: #FFFFFF;
	opacity: 0.7;
	font-size: 300%;
	line-height: 150%;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center center;
	
}

.inbox_txt{
	width: 100%;
	height: 100%;
	color: #FFFFFF;
	font-size: 300%;
	line-height: 150%;
	z-index: 10;
	position: absolute;
	top: 0px;
}










































































/*
.container11
    {
        width: 1280px;
        height: 750px;
        overflow: hidden;
        margin: 0 auto; 
        background-color: #000000;
        display: block;
    }

.imgWidth
    {
        width: 1280px;
    }   

.in, .out {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 50ms !important;
}

.press
    {
        border: 1px dotted #FF0000;
        position: absolute;
    }   

.press1
    {
        border: 0px dotted #FF0000;
        
    }

.case_select
    {
        width: 200px;
        height: 70px;
        background-color: #999999;
        float: left;
        font-size: 30px;
        border-radius: 10px;
        text-align: center;
        line-height: 220%;
    }       

.eMark
    {
        font-size: 350%;
        text-align: center;
        font-weight: bold;
        width: 60px;
        height: 76px;
        top: 77px;
        left: 1166px;
    }

.menuitem
    {
        margin-bottom: -4px;
    }

.menuitem1, .menuitem2, .menuitem3, .menuitem4, .menuitem5, .menuitem6
    {
        width: 1250px; 
        height: 91px; 
        left: 25px; 
    }

.menuitem1
    {
        top: 176px; 
    }

.menuitem2
    {
        top: 257px; 
    }

.menuitem3
    {
        top: 351px; 
    }

.menuitem4
    {
        top: 440px; 
    }     

.menuitem5
    {
        top: 531px; 
    }

.menuitem6
    {
        top: 625px; 
    } 

.menuitemcontainer
    {
        width: 1280px;
        height: 540px;
        margin-top: 144px;
        border: 0px solid red;
        position: absolute;
    }

.pagination
    {
        width: 1280px;
        height: 43px;
        position: absolute;
        border: 0px solid red;
        top: 690px;
        z-index: 10000;
    }

.page
    {
        width: 36px;
        height: 36px;
        display: block;
        background-color: #abb9a2;
        border-radius: 18px;
        text-align: center;
        color: #476635;
        float: left;
        font-size: 170%;
        margin: 10px;
    }

.active
    {
        background-color: #fa6163;
        color: #FFFFFF;
    }

.pageitem
    {
        float: left;
        margin: 10px;
        width: 36px;
        height: 36px;
    }

#trainerinfo
    {
        top:60px;
        position: absolute;
        z-index: 10;
    }

.title1, .title2, .title3, .title4
    {
        top: 22px;
        height: 40px;
        font-size: 32px;
        text-align: center;
        position: absolute;
        text-shadow: none;
    }

.title1
    {
        left: 218px;
        width: 198px;
    }

.title2
    {
        left: 430px;
        width: 333px;
    } 

.title3
    {
        left: 774px;
        width: 167px;
    }   

.title4
    {
        left: 951px;
        width: 167px;
    }         

.aos
    {
        color: #fb9cde;
    }

.homeBtn
    {
        width: 189px; 
        height: 84px; 
        top: 4px; 
        left: 12px;
    }

.hintBtn
    {
        width: 410px; 
        height: 65px; 
        top: 666px; 
        left: 12px; 
    }

.hintBg
    {
        height: 84px; 
        top: 662px; 
        left: 187px; 
    }

.hintball
    {
        width: 65px;
        height: 65px;
        background-image: url("../img/btnTipsWait.jpg");
        color: #000000;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        line-height: 65px;
        background-repeat: no-repeat;
        float:left;
    }




.hintmenu
    {
        display: none;
    }

.questBtn
    {
        width: 138px; 
        height: 63px; 
        top: 668px; 
        left: 841px; 
    }

.ansBtn
    {
        width: 138px; 
        height: 63px; 
        top: 668px; 
        left: 980px; 
    }    

.skipBtn
    {
        width: 138px; 
        height: 63px; 
        top: 668px; 
        left: 1121px; 
    }    

.hintbox
    {
        width: 1238px;
        height: 45px;
        background-image: url("../img/tips.jpg");
        color: #000000;
        top: 620px;
        left: 20px;
        z-index: 20000;
        text-align: center;
        font-size: 38px;
        background-repeat: no-repeat;
    }



.selectMark
    {
        width: 357px;
        height: 65px;
        top: 668px;
        left: 449px;
        z-index: 100000;
    }

.selectMarkBtn
    {
        width: 110px; 
        height: 76px; 
        top: 78px; 
        left: 1049px;
    }

.showMark
    {
        font-size: 250%;
        text-align: center;
        font-weight: bold;
        width: 49px;
        height: 41px;
        left: 1187px;
        top: 20px;
    }    

.markSpacer0, .markSpacer1, .markSpacer2
    {
       width: 40px;
       height: 40px;
       float: left;
       border-radius: 40px;
       border: 7px solid #999999;
       text-align: center;
       color: #000000;
       font-size: 30px;
       font-weight: bold;
       margin: 5px;
       background-color: #FFFFFF;
       box-shadow:4px 4px 3px rgba(0%,0%,0%,0.2);
    }


.markSpacerAos
    {
        background-color: #fb9cde;
    }

.markSpacerCom
    {
        background-color: #92c673;
    }

.markSpacerSem
    {
        background-color: #85dbd0;
    }

.markSpacerDy
    {
        background-color: #faa15f;
    }

.markSpacerPro
    {
        background-color: #cca6cf;
    }









.mainContent
    {
        left: 20px;
        top: 145px;
        width: 1238px;
        height: 513px;
        overflow: hidden;
    }

.handmark
    {
        margin-right: 12px;
    }

#commentBox
    {
        width: 1250px;
        height: 533px;
        top: 62px;
        left: 13px;
        z-index: 1000;
        background-image: url("../images/raw/comment.png");
        background-repeat: no-repeat;
    }

.course_info
    {
        width: 1280px;
        height: 150px;
        font-size: 110px;
        color: #444444;
        text-align: center;
        position: absolute;
        top: 210px;
    }

*
{
    text-shadow: none;
}

.aos
    {
        color: #fb9cde;
    }

.com
    {
        color: #92c673;
    }

.sem
    {
        color: #85dbd0;
    }

.dy
    {
        color: #faa15f;
    }

.pro
    {
        color: #cca6cf;
    }


.onephoto
    {
        width: 1238px;
        height: 513px;
        text-align: center;
    }

#aos_levelmenu
    {
        width:190px;
        height: 320px;
        left: 5px;
        top: 60px;
    }

.aos_level_btn
    {
        width: 164px;
        height: 53px;
        color: #4f4d4e;
        background-color: #bab8b9;
        text-align: center;
        font-size: 200%;
        margin:10px;
        line-height: 170%;
    }

.aos_active
    {
        color: #b03689;
        background-color: #fb9cde;
    }

.aos_detail
    {
        width: 900px;
        height: 250px;
        left: 270px;
        top: 100px;
    }

.aostext
    {
        width: 155px;
        height: 155px;
        font-size: 150px;
        color: #FFFFFF;
        float: left;
        margin: 30px;
    }

#aos_video1
    {
        width: 1029px;
        height: 510px;
        left: 210px;
        top: 0px;
    }

.com_o, .com_x
    {
        width: 413px;
        height: 413px;
    }

.com_o
    {
        top: 31px;
        left: 167px;
    }

.com_x
    {
        top: 31px;
        left: 653px;
    }

#oo
    {
        display: none;
    }

#xx, #xx1, #xx2, #xx3
    {
        display: none;
    }

.com_o1, .com_x1
    {
        width: 293px;
        height: 293px;
    }

.com_o2, .com_x2
    {
        width: 239px;
        height: 239px;
    }

.seqBtnUpper
    {
        width: 113px;
        height: 113px;
        color: #FFFFFF;
        font-size: 80px;
        font-weight: bold;
        line-height: 120px;
        border: 10px solid #FFFFFF;
        border-radius: 15px;
        text-align: center;
        opacity: 0.5;
    }

    .seqBtnUnder
    {
        width: 113px;
        height: 113px;
        background-color: #b9b9b9;
        opacity: 0.5;
        overflow: hidden;
    }

.seqBtnUpperActive
    {
        width: 113px;
        height: 113px;
        color: #FFFFFF;
        font-size: 80px;
        font-weight: bold;
        line-height: 120px;
        border: 10px solid #FFFFFF;
        border-radius: 15px;
        text-align: center;
        opacity: 1;
    } 

.seqBtnUnderActive
    {
        width: 113px;
        height: 113px;
        background-color: #85dbd0;
        opacity: 1;
        overflow: hidden;
    }       





.btnEnter
	{
		margin-bottom: 9px;
	}
	
.qNumCom, #com_title1, #com_title2
    {
        color: #2a3c1f;
        font-size: 33px;
        text-align: center;
    }	
	
.qNumAos, #aos_title1, #aos_title2
    {
        color: #893e71;
        font-size: 33px;
        text-align: center;
    }

.qNumSem, #sem_title1, #sem_title2
    {
        color: #204345;
        font-size: 33px;
        text-align: center;
    }

.qNumDy, #dy_title1, #dy_title2
    {
        color: #643e22;
        font-size: 33px;
        text-align: center;
    }

.qNumPro, #pro_title1, #pro_title2
    {
        color: #443e44;
        font-size: 33px;
        text-align: center;
    }            	
	
.hint1
    {
        width: 203px; 
        height: 68px;  
        left: 216px; 
        top: 669px;
    }	

.hint2
    {
        width: 138px; 
        height: 68px;  
        left: 281px; 
        top: 669px;
    }  

.hint3
    {
        width: 73px; 
        height: 68px;  
        left: 346px; 
        top: 669px;
    }  

.hint4
    {
        width: 0px; 
        height: 0px;  
        left: 346px; 
        top: 669px;
    }         
	
	
*/