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


/******************************

1. menu.html
2. content

******************************/





/*********************************
1. menu.html
*********************************/

.menuPage {
	max-width: 540px;
	margin: auto;
}

.menuTitle {
	float: left;
	width: 100%;
	font-size: 2em;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #858F9E;
}

.menuList {
 	float: left;
 	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
 }

.menuList li {
	float: left;
	width: 50%;
}

@media only screen and (min-width: 1px) and (max-width: 480px) {

	.menuList li {
		float: left;
		width: 100%;
		padding-bottom: 20px;
	}

	.menuList li a {
		display: flex;
		height: 100px;
		align-items: center;
		justify-content: center;
		float: left;
		width: 100%;
		height: 100px;
		border-radius: 15px;
		background-color: #858F9E;
		color: #fff;
		text-decoration: none;
		font-size: 1.1em;
		text-align: center;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
		-webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
		font-weight: 700;
	}

}

@media only screen and (min-width: 481px) and (max-width: 800px) {

	.menuList li a {
		display: flex;
		height: 210px;
		align-items: center;
		justify-content: center;
		float: left;
		width: 210px;
		height: 210px;
		border-radius: 15px;
		background-color: #858F9E;
		color: #fff;
		text-decoration: none;
		font-size: 1.2em;
		text-align: center;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
		-webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
		font-weight: 700;
	}

}

@media only screen and (min-width: 801px) {

	.menuList li a {
		display: flex;
		height: 250px;
		align-items: center;
		justify-content: center;
		float: left;
		width: 250px;
		height: 250px;
		border-radius: 25px;
		background-color: #858F9E;
		color: #fff;
		text-decoration: none;
		font-size: 1.45em;
		text-align: center;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
		-webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
		font-weight: 700;
	}

}
.menuList li a:hover {
	background-color: #45ADFF;
}

.menuList li:nth-child(1) a {
	float: left;
}

.menuList li:nth-child(2) a {
	float: right;
}


/*********************************
2. content
*********************************/

.topic {
	display: block;
	border-bottom: 1px solid #283038;
	margin-bottom: 10px;
}

.topic h1 {
	font-size: 3em;
	color: #283038;
}

.headline {
	display: block;
	border-bottom: 1px solid #283038;
	margin-bottom: 10px;
}

.headline h1 {
	font-size: 2em;
	color: #283038;
}

.edit img {
}

.edit h3 {
	/*color:yellow;*/
}

.h2Style {
	color: #434951;
	background-image: url("../images/basic/bg_h2.jpg");
	background-repeat: repeat-y;
	background-position: left;
	padding-left: 10px;
}

.h3Style {
	color: #45ADFF;
	background-image: url("../images/basic/bg_h3.jpg");
	background-repeat: repeat-y;
	background-position: left;
	padding-left: 10px;
	line-height: 1.5;
}

.h4Style {
	color: #6dbbf7;
	background-image: url("../images/basic/bg_h4.jpg");
	background-repeat: repeat-y;
	background-position: left;
	padding-left: 10px;
}



/*內容物的樣式*/
.edit table,
.edit table th,
.edit table td {
	border: 1px solid #666 !important;
}

.edit table td {
	padding: 10px;
}

.photoStyle { /*所有內容物圖片*/
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
	max-width: 500px;
	width: 100%;

	min-width: 100px;
	min-height:100px;
	background-color: rgb(0, 0, 0);
}

.photoStyle1 { /*敘述內圖片*/
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
	max-width: 500px;
	width: 100%;

	min-width: 100px;
	min-height:100px;
	background-color: rgb(0, 0, 0);
}

.memoStyle1 { /*警告*/
	font-size: 1em;
	color: #b72841 !important;
	background-image: url("../images/om/icon1.jpg");
	background-repeat: no-repeat;
	background-size: 24px;
	background-position: left center;
	text-indent: 25px;
	border-bottom: 1px dotted #b72841;
}

.memoStyle2 { /*注意*/
	font-size: 1em;
	color: #939598!important;
	background-image: url("../images/om/icon2.jpg");
	background-repeat: no-repeat;
	background-size: 24px;
	background-position: left center;
	text-indent: 25px;
	border-bottom: 1px dotted #939598;
}

.memoStyle3 { /*備註*/
	font-size: 1em;
	color: #939598!important;
	background-image: url("../images/om/icon3.jpg");
	background-repeat: no-repeat;
	background-size: 24px;
	background-position: left center;
	text-indent: 25px;
	border-bottom: 1px dotted #939598;
}

ol.blueListStyle li::marker { /*藍色的數字列表*/
	color: #0065aa;
}

ul.blueListStyle li::marker {
	/*藍色的數字列表*/
	color: #0065aa;
}

.item { /*om_ch03-5.html*//*om_ch03-6.html*/
	float: left;
	width: 100%;
	padding-top: 40px;
	padding-bottom: 40px;
	border-bottom: 1px dashed #858F9E;
}

.item .item_title {
	float: left;
	width: 100%;
	margin-bottom: 10px;
}

.item .item_title h3 {
	float: left;
	width: calc( 100% - 60px);
}

.item .item_title img {
	float: left;
	max-width: 40px;
	margin-right: 20px;
}

.item .item_text {
	float: left;
	width: 100%;
}

.signalStyle {
	display: inline-block;
	width: 30px;
	margin-left: 3px;
	margin-right: 3px;
}

.anchorLinkStyle { /*om_ch03-2.html*/
	margin-top: 20px;
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}

.tableIconStyle {
	display: inline-block;
	max-width: 40px;
}

.tableStyle1 {/*om_ch06-5.html*/
}

.tableStyle1 tr td {
	text-align: center;
}

.tableStyle1 .tableStyle1_td {
	text-align: left;
}

.tableStyle2 {/*om_ch06-22.html*/
}

.tableStyle2 tr th {
}

.tableStyle2 tr td:nth-last-child(1),
.tableStyle2 tr td:nth-last-child(2) {
	text-align: center;
}

.tableStyle2 .tableStyle1_td {
	text-align: left;
}


/*om_overview-14.html*/
@media only screen and (min-width: 1px) and (max-width: 800px) {
	.tableStyle3 {
		width: 99% ;
		margin: 0.5%;
		float: left;
	}
}

@media only screen and (min-width: 801px) {
	.tableStyle3 {
		width: 49%;
		margin: 0.5%;
		float: left;
	}
}

.tableStyle4 {
 	float: left;
	width: 100%;
 }