@charset "utf-8";
/* CSS Document */

.mainup{width:700px; height:35px; background-image:url('../images/bg_mainup.png'); background-repeat:no-repeat; display:block;}
.maindown{width:700px; height:35px; background-image:url('../images/bg_maindown.png'); background-repeat:no-repeat; display:block;}
.mainmid{width:650px; height:auto; padding:0 25px 10px; background-image:url('../images/bg_mainmid.png');}

.compdatebox{width:600px; margin:0 auto;}
.compdatebox th{background-color:#CFF; font-size:18px; color:#363; font-weight:bold; text-align:center; padding:5px 0;}
.compdatebox td{padding:5px 0; font-size:18px;}
.status{width:70px; height:30px; background-image:url('../images/bg_complete.png'); background-repeat:no-repeat; background-position:top; text-indent:-2000px; display:block; margin:0 auto;}
.notyet{background-position:center;}
.complete{background-position:bottom;}
.statusmean{width:310px; height:40px; margin:20px auto 0; display:block; background-image:url('../images/pic_datemean.png'); background-repeat:no-repeat; background-position:center;}

.date { 
	width:285px; 
	height:28px; 
	background-image:url('../images/btn_date.png'); 
	display:block; 
	text-align:center; 
	font-weight:bold; 
	font-size:16px; 
	letter-spacing:0.2em; 
	padding:7px 0 0 0; 
	color: #000; 
	text-decoration: none; 
	margin:0 auto;
	cursor: pointer;
}
.sign {
	width: 100px;
	height: 30px;
	margin-top: 3px;
}
.sign.today { 
	background: url('../images/pic_today.png') center right no-repeat;
}
.date.complete, 
.notopen { 
	cursor: default;
}
.status.notopen {
	background-position: top;
}
.status.notyet {
	background-position: center;
}
.status.complete {
	background-position: bottom;
}
.date.notopen {
	background-image:url('../images/btn_date_g.png');
}
/*.date.opened {
	background-position: bottom;
}*/
.date.complete {
	background-position: bottom;
}
.date:hover {
	background-position: bottom;
}


.inputanswer{width:200px; height: 20px; padding: 3px 10px; border:#333 1px solid;}

.thxbox{width:440px; height:120px; background-color:#CFF; margin:20px auto; padding:30px; font-size:18px; font-weight:bold; color:#363;}

.resultbox{width:500px; height:auto; background-color:#FFF2B3; padding:20px 0; margin:0 auto;}
.resultbox .data{font-size:16px; font-weight:bold;}

.btn_nextq{width:100px; height:40px; background-image:url('../images/btn_nextq.png'); background-repeat:no-repeat; display:block; text-indent:-2000px; margin:60px 20px 0;}
.btn_previousq{width:100px; height:40px; background-image:url('../images/btn_previousq.png'); background-repeat:no-repeat; display:block; text-indent:-2000px; margin:60px 20px 0;}
.btn_previousq_g{width:100px; height:40px; background-image:url('../images/btn_previousq_g.png'); background-repeat:no-repeat; display:block; text-indent:-2000px; margin:60px 20px 0; cursor:default;}
.btn_submit { 
	width:100px; 
	height:40px; 
	background-image:url('../images/btn_submit.png'); 
}
.btn_leave{width:100px; height:40px; background-image:url('../images/btn_leave.png'); background-repeat:no-repeat; display:block; text-indent:-2000px; margin:20px auto 0;}
.btn_back{width:100px; height:40px; background-image:url('../images/btn_back.png'); background-repeat:no-repeat; display:block; text-indent:-2000px; margin:20px auto 0;}
.btn_sure{width:100px; height:40px; background-image:url('../images/btn_sure.png'); background-repeat:no-repeat; display:block; text-indent:-2000px; margin:20px auto 0;}

.xbtn.btn_leave, 
.xbtn.btn_back {
	display: inline-block;
}

h1{width:300px; height:50px; margin:0 auto; text-indent:-2000px; display:block; background-repeat:no-repeat;}
.detail{background-image:url('../images/h1_detail.png');}
.content{background-image:url('../images/h1_content.png');}
.practice_date.mp_mk, 
.practice_date.gs_mk {background-image:url('../images/h1_compdate.png');}
.practice_date.mp_cp, 
.practice_date.gs_cp {background-image:url('../images/h1_compdate2.png');}
.thx{background-image:url('../images/h1_thx.png');}
.answer_date.mp_mk, 
.answer_date.gs_mk {background-image:url('../images/h1_answer.png');}
.answer_date.mp_cp, 
.answer_date.gs_cp {background-image:url('../images/h1_answer2.png');}
.personinfo{background-image:url('../images/h1_personinfo.png');}

h2{width:auto; height:24px; line-height: 24px; background-image:url('../images/h2_bg.png'); background-repeat:no-repeat; padding:0 0 0 30px; font-size:20px; font-weight:bold; color:#363; margin:20px 0;}
h3{font-size:18px; color:#363; font-weight:bold;}
h4{font-size:18px; font-weight:bold;}

/*strong{color:#C00;}*/

/*p{letter-spacing:0.2em; line-height:1.3em;}*/
.caution{text-align:center; font-size:14px; padding:20px 0 10px; font-weight:bold;}

.blk_selection {
	width: 300px;
	height: 250px;
	margin: 15px 10px;
	margin-top: 25px;
	display: inline-block;
}
.blk_selection select {
	width: 100%;
	height: 30px;
	font-size: 16px;
	padding: 3px 10px;
}
.btn_selection {
	width: 300px;
	height: 200px;
	margin-bottom: 15px;
	/*margin: 15px 10px;
	margin-top: 25px;
	display: inline-block;*/
	cursor: pointer;
	background-position: center top;
	background-repeat: no-repeat;
}
.btn_selection:hover {
	background-position: bottom;
}
.btn_selection.mp_mk, 
.btn_selection.mp_cp {
	background-image: url('../images/btn_side_math.png');
}
.btn_selection.gs_mk, 
.btn_selection.gs_cp {
	background-image: url('../images/btn_side_gs.png');
}
td.answerblock {
	line-height: 150%;
}
td.answerblock label {
	display: block;
}
label.options {
	margin-bottom: 0.5em;
}

.title {
	width: 300px;
	height: 35px;
	background: url('../images/bg_title.png') no-repeat;
	font-size: 24px;
	line-height: 35px;
	font-weight: bold;
	color: #ee4036;
	margin: 0 auto 15px;
	text-align: center;
}

.topics {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	align-items: center;
}
.topics .item {
	width: 300px;
	height: 200px;
	margin: 10px;
}
.topics .item.CH {
	background-image: url('../images/btn_topic_ch.png');
}
.topics .item.EN {
	background-image: url('../images/btn_topic_en.png');
}
.topics .item.MS {
	background-image: url('../images/btn_topic_ma.png');
}
.topics .item.GS {
	background-image: url('../images/btn_topic_gs.png');
}
/*
.topics .item {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	width: 40%;
	height: 80px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
	border: 1px solid #a5c3d7;
	border-radius: 10px;
	background-color: #bcd0e5;
	color: #638794;
	padding: 15px;
	font-size: 2.4em;
	font-weight: bold;
	cursor: pointer;
	text-shadow: 1px 1px 1px #FFF;

	background: -webkit-linear-gradient(#FFF, #bcd0e5, #a5c3d7);
	background: -o-linear-gradient(#FFF, #bcd0e5, #a5c3d7);
	background: -moz-linear-gradient(#FFF, #bcd0e5, #a5c3d7);
	background: linear-gradient(#FFF, #bcd0e5, #a5c3d7);

	border-top-color: #bcd0e5;
}
.topics .item:hover {
	background-color: #ffdc30;
	border-color: #ffdc40;
	color: #d6b720;

	background: -webkit-linear-gradient(#FFF, #fff0a2, #ffdc40);
	background: -o-linear-gradient(#FFF, #fff0a2, #ffdc40);
	background: -moz-linear-gradient(#FFF, #fff0a2, #ffdc40);
	background: linear-gradient(#FFF, #fff0a2, #ffdc40);

	border-top-color: #fff0a2;
}
*/