@charset "utf-8";
@import url("rwd.css");/* CSS Document */
@import url("button.css");/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500&family=Vollkorn&display=swap');





::-moz-selection{ /*Firefox*/
	color:#fff;
	background: rgba(207, 181, 59, 1);
}

::selection{
	color:#fff;
	background: rgba(207, 181, 59, 1);
}


*{
	margin:0;
	padding:0;
	text-decoration: none;
}

body{
	font-family: 'Noto Serif TC', 'Vollkorn', serif;
	background:rgb(252,250,242);
}

h1{
	font-size: 30px;
	line-height: 2em;
}

a{
	color: black;
}


/* header */
header{
	position:relative;
	padding:35px 0px;
	color:#000;
	text-align:center;
}

/*掛接的icon可以用font-size來設置大小*/
.ficon{
	font-size:60px;
	padding:5px;
}

.totop{
	clear: both;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100000;
	font-size: 44px;
}

.fa-angle-double-up{
	transition: .3s;
}

.fa-angle-double-up:hover{
	opacity: .5;
}

.menu{
	position:absolute;
	right:20px;
	top:20px;
	width:30px;
	height:30px;
	font-size:30px;
	display:block;
}

.menu:hover{
	cursor:pointer;
}

nav{
	width:100%;
	margin:auto;
	text-align:center;
	font-size:18px;
}

nav li{
	display: block;
	border-bottom:solid #000 1px;
}

nav li a{
	display: inline-block;
	width:100%;
	padding:20px 30px;
	color: black;
	text-decoration: none;
	transition: .3s;
}

nav li a:hover{
	color:rgba(207, 181, 59, 1);
}

.ch_bg{
	color:rgba(207, 181, 59, 1);
}  
  

/* section */
section{
	width:80%;
	margin: auto;
	padding:50px 0px;
	text-align:center;
	color:black;
	line-height:2em;
	font-size:1.1em;
}

section img{
	width:100%;
	transition: .3s;
}

section .row img:hover{
	opacity:.7;
}

pre code {
	background-color: #eee;
	border: 1px solid #999;
	display: block;
	padding: 1.5em;
	white-space: pre-wrap;
}

ol {
	counter-reset: item;
	list-style-type: none;
	line-height: 2em;
}

ol li {
	display: block;
	position: relative;
}

ol li span {
	margin-left: 60px;
}

ol li:before{
	content: counter(item) " ";
	counter-increment: item;
	color: #7eb4e2;
	position: absolute;
	top: 50%;
	margin-top: -1em;
	background: #f9dd94;
	height: 2em;
	width: 2em;
	line-height: 2em;
	text-align: center;
	border-radius: 2em;
	font-weight: 700;
}

.square {
	list-style-type: square;
	margin-left: 40px;
}

/*footer*/
footer{
	padding:20px 0px 20px 0px;
	text-align:center;
	color: black;	
}

/*===============rwd details===============*/

/* For tablets */
@media only screen and (min-width: 768px) { 
	nav{
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index:2000;
		text-align:center;
	}

	nav li{
		display: inline-block;
		border-bottom:solid rgba(242, 242, 242, 1) 0px;
	}

	.align_right{
		text-align:right;
	}

	.menu{
		display:none;    
	}
}

/* For desktop */
@media only screen and (min-width: 1200px) {
}