﻿body {
	margin:0;
	background: #0099CC;
	background-image:url('images/WEB_B_RGB.jpg');
	background-size:100% auto;
	font-family: 微軟正黑體;
	//line-height: 30px;
	letter-spacing:3px;
	//text-align:center;
}

.table-0,.table-1 {
	width:98%;
	margin:20px auto;
}
.table-0 {
	vertical-align:middle;  /*圖片垂直致中*/
	text-align:center;			/*水平置中*/
}

.title-top {
	font-size:50px;
	margin:40px auto;
}


.title-top2 {
	font-size:25px;
	//margin:5px auto;
}

.title-top3 {
	font-size:40px;
	//margin:10px auto;
	margin-bottom:25px;
}

.title-top,.title-top3 {
	letter-spacing:20px;
}

.text-end,.title-top,.title-top3,.title-bg1,.win-2, .button-L {
	color:#FFFFFF;
	font-weight:bold;
}

.text-R {
	text-align:right;
}


.quiz-div {
	width:95%;
	max-width:1000px;
	height:100%;
	//min-height:95%;
	margin:5px auto;
	padding:5px;
	text-align:center;
}


.div-0 {
	width:95%;
	max-width:1000px;
	height:auto;
	margin:5px auto;
	padding:5px;
	text-align:center;
	//box-shadow:inset 0px 0px 8px 6px #999;
	//border-radius: 15px;	/*圓角*/
}

.div-1 {
	width:99%;
	display:inline-table;
	margin:10px 5px;
	//white-space:nowrap;		/*強制不換行*/
	//background-color:#B7EDFF;
}

.div-2 {
	padding:20px 30px;
	//margin:20px;
	//background-color:gray;
}

.div-answer,.div-topic,.topic-inter,.topic-video,.topic-video3 {
	display:inline-block;
	margin:6px;
	text-align:center;
}

.div-inside {
	//width:98%;
	text-align:left;
	//background-color:fuchsia;
}

.notes {
	padding:20px;
	text-align:left;
	background-color: #D3D3D3;
	display: inline-block;
	border-radius:15px;	/*圓角*/

	
}

/*題目圖案大小 div*/
.topic-inter {
	width:40%;
	//height:100%;
	//background-color: green;
	vertical-align:top;		/*如果要左右干擾圖像下對齊就取消*/
}

/*答案圖片 Div*/
.div-answer {
	//width:200px;
	//background-color:lime;
	//height:150px;
}

/*題目主圖*/
.topic-inter-P {
	width:80%;
	//height:auto;
	max-width:400px;
	//height:400px;
	//height:100%;
	//vertical-align:top;
	border-radius:15px;	/*按鈕圓角*/
}

.div-next {
	text-align:right;
}

/*平均欄寬*/
.div-1-answer {
	display:flex;
	flex-direction:row;
}

.div-answer {
	flex:1;
}
/*平均欄寬*/

.quiz_title {
	font-size:60px;
}

/*答案圖形*/
.button-answer {
	width:90%;
	max-width:300px;
	border-radius:15px;	/*按鈕圓角*/
	//border-width:5px;
	//border-color:#99FF66;	/*邊界顏色*/
	transition:.15s;
	
}

.button-answer2 {
	width:95%;
	max-width:320px;
	border-radius:15px;	/*按鈕圓角*/
	border-color:red;	/*邊界顏色*/
	border-width:5px;
	border-style:solid;
	transition:.15s;
}


.button-answer:hover {
	transform:scale(1.03);
	box-shadow:3px 3px 6px #464646;
}

.button-answer:active {
	transform:scale(0.97);
	box-shadow:1px 1px 3px #464646;
}



/*首頁按鈕開始*/
.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	//display: inline;
	vertical-align:middle;
	margin:auto 15px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	//font: 30px/100% 微軟正黑體;
	//padding:50px 100px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .6em; /*圓角*/
	-moz-border-radius: .6em;
	border-radius: .6em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	
	//word-break:keep-all;	/*不換行*/
	
}

.button-xs, .button-s, .button-m {
	margin:20px 5px 0;	/*外距*/
}

.button-xs {
	padding:10px 20px;	/*內距*/
	font: 17px/100% 微軟正黑體;
	//color:#FFFFFF;
	font-weight:bolder;
}

.button-s {
	padding:10px 20px;
	font: 20px/100% 微軟正黑體;
	letter-spacing:5px;
	font-weight:bolder;
}

.button-m {
	padding:30px 60px;
	font:30px/100% 微軟正黑體;
	font-weight:bolder;
	letter-spacing:5px;
}
.button-L {
	padding:50px 100px;
	font: 30px/100% 微軟正黑體;
}


/* blue */
.blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

.qulist {
	background-image: linear-gradient(to top, #008b8b, #ffff00);
	height:28px;
	
    display:flex;
    align-items:center;
    //justify-content:center;

	
}

/*首頁按鈕結束*/

/*
瀏覽區域的寬度大於 設定值 CSS 被執行 min 
瀏覽區域的寬度小於 設定值 CSS 被執行 max
*/

@media screen and (min-width:800px) and (max-width:1900px) {

	.topic-inter-P {
		width:50%;
		max-width:250px;
		//max-height:200px;
	}

	
	.button-answer {
		//width:55%;
		width:auto;
		max-width:250px;
	
	}

	.button-answer2 {
		//width:57%;
		width:auto;
		max-width:260px;
	}
	
	
}


