@charset "utf-8";
/* CSS Document */
/*@import url("rwd.css");*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kameron:wght@700&display=swap');

*{
	margin:0;
	padding:0;
}

body{
	font-family:'Roboto', sans-serif;
	background:rgba(242, 242, 242, 1);
}

::-moz-selection{ /* Firefox */
    color:rgba(255, 255, 255, 1);
    background: rgba(177, 167, 166, 1);
}

::selection{
    color:rgba(255, 255, 255, 1);
    background: rgba(177, 167, 166, 1);
}

a{
	text-decoration:none;
	color:rgba(177, 167, 166, 1);
}

a:hover{
	color:rgba(158, 42, 43,1);
}

/* header */
header{
	position:relative;
	padding:20px;
	color:rgba(158, 42, 43, 1);
	/*background:rgba(158, 42, 43, 1);*/
	text-align:left;
	/*border-bottom:solid 1px rgba(0, 0, 0, 1);*/
}

header h1{
	font-family: 'Kameron', serif;
	font-size:calc(5vw);
}

header h3{
	font-size:18px;
}

.ficon{
	font-size:40px;
	color:rgba(224, 159, 62,1);	
	padding:5px;
}

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

.menu:hover{
	cursor:pointer;
}

/* nav bar */
nav{
	width:100%;
	margin:auto;
	text-align:center;
	background:rgba(211, 211, 211, 1);
	font-size:18px;
}

nav ul{
	margin: 0; 
	padding: 0;
}

nav li{
	display: block;
	border-bottom:solid rgba(177, 167, 166, 1) 1px;
	text-align: center;
}

nav li a{
	display: block;
	padding:20px 25px;
	color: rgba(255, 255, 255, 1);
	text-decoration: none;
}

nav li a:hover{
	background:rgba(177, 167, 166, 1);
	color: rgba(255, 255, 255, 1);
}

.ch_bg{
	background:rgba(177, 167, 166, 1);
	color: rgba(255, 255, 255, 1);
}

.shead{
	display:none;
}

/* section */
section{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:center;
	align-items:flex-start;

	width:90%;
	margin: auto;
	padding:30px 0px;
}

/*article*/
article{	
	box-sizing:border-box;
	width:100%;
	margin: 5px;
	padding-bottom:20px;
	text-align:left;
}

.picbox, .desbox{
	position:relative;
	box-sizing:border-box;
}

.desbox{
	line-height:2em;
}

.desbox h1{
	font-family: 'Noto Serif TC', serif;
	font-weight:700;
	font-size:22px;
	line-height:1.3em;
	padding:10px 0px;
	/*color:rgba(158, 42, 43,1);*/
	color:rgba(0, 0, 0, 1);
}

.desbox h1 a{
	color:rgba(0, 0, 0, 1);
}

.desbox h3{
	font-family: 'Noto Serif TC', serif;
	font-size:18px;
	color:rgba(177, 167, 166, 1);
	padding:10px 0px;	
}

.desbox p{
	display:none;
	word-break: break-all;
}

.desbox p::after{
	content: url(../images/sq.jpg);
}

.desbox .alink a{
	display:block;
	padding:10px 20px;
	border:solid 1px rgba(177, 167, 166, 1);
	color:rgba(177, 167, 166, 1);
	text-align:center;
	margin:20px 0px;
}

.desbox .alink a:hover{
	border:solid 1px rgba(177, 167, 166, 1);
	background:rgba(177, 167, 166, 1);
	color:rgba(255,255,255, 1);
}

.picbox{
	width:100%;
	overflow:hidden;	
}

.picbox img{
	width:100%;
}

.picbox:hover img{
	  -webkit-filter: brightness(30%); /* Safari */
      filter: brightness(30%);
}

.picbox:hover .fadebox{
	  opacity: 1;
}

.fadebox{
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);/* IE 9 */
	-webkit-transform: translate(-50%, -50%); /* Safari */
	transform: translate(-50%, -50%);
	opacity: 0;
	
	font-size:25px;
	padding: 16px 32px;
	color:rgba(255,255,255,1);
	text-decoration:none;
}


/*footer*/
footer{
	padding:20px 0px;
	text-align:center;
	color:rgba(84, 11, 14,1);
	word-break: normal;
}

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

/* For tablets */
@media only screen and (min-width: 768px) { 
header{
	text-align: center;
}

header h1{
	font-size:calc(10vw - 30px);
}

header h3{
	font-size:25px;
}

.ficon{
	font-size:50px;
}

nav{
	position: -webkit-sticky;
  	position: sticky;
  	top: 0;
	z-index:2000;
}

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

.menu{
	display:none;	
}

article{	
	box-sizing:border-box;
	width:43%;
	margin: 20px;
}

.desbox h1{
	font-weight:900;
	font-size:30px;
	padding:20px 0px;
}

.desbox h3{
	font-size:18px;	
}

}

/* For desktop */
@media only screen and (min-width: 1200px) {
header h1{
	font-size:calc(10vw - 50px);
}

article{	
	box-sizing:border-box;
	width:45%;
	margin: 25px;
	padding-bottom:30px;
}

.desbox p{
	display: block;	
}
}