@charset "utf-8";
/*@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);  */
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);

* {
	margin: 0px;
	padding: 0px;
}
body {
	-moz-user-select : none;
	-webkit-user-select: none;
	background-color: #FFF;
}
html,body {
	width:100%;
	height: 100%;
	/*font-family: 'Noto Sans TC', sans-serif;*/
	font-family: Arial, 'cwTeXYen', sans-serif;
	line-height:100%;
}
/*ul,ol,li { display:block; }*/

@media screen and (max-width: 350px) {html { font-size:105%; }}
@media screen and (min-width: 351px) and (max-width: 550px) {html { font-size:95%; }}
@media screen and (min-width: 551px) and (max-width: 850px) {html { font-size:115%; }}
@media screen and (min-width: 851px) {html { font-size:120%; }}

a { text-decoration:none; }
#dbox{ display: block; width: 100%; padding: 0.25rem 0; background-color: #FFF; border-color: #f67e79; border-style: solid; border-width: 0 0 1px 0; position: fixed; top:0; left:0; z-index: 300; }
#sdbox{ display: block; max-width: 1200px; overflow: hidden; margin: 0 auto; background-color: #FFF; }

/*#dbox{ display: block; max-width: 1200px; overflow: hidden; margin: 0 auto; background-color: #FFF; }*/
#dnavi{ display: block; float: right; overflow: hidden; margin-top: 15px; }
#dlogo{ display: block; width: 215px; height: 53px; float: left; margin-top: 5px; }
#dbox li{ display: inline-block; width: 8rem; padding: 0.5rem 0; font-size: 1.2rem; text-align: center; cursor: pointer; color: black; }
#dbox li a { text-decoration:none; color: black; }
#wrapper {
  max-width: 1200px;
  min-height: 400px;
  background-color: #FFF;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}

#bottomBox{ display: block; width: 100%; max-width: 1200px; padding: 1.5rem 0; margin: 0 auto; overflow: hidden; }

@media screen and (max-width: 1200px) {
#dbox{ display: none; }
#wrapper {
  padding-top:3rem;
  padding-bottom: 0;
}
}
@media screen and (min-width: 1201px) {
#logobox{ display: none; }
#navi{ display: none; }
#wrapper {
  padding-top:5rem;
  padding-bottom: 3rem;
  /*border-color: #f67e79; width: 100%; border-style: solid; border-width: 5px 0 0 0;*/
}
}

#logobox {
	width: 100%;
	background-color: #fde4e2;
	height:3rem;
	top: 0;
	left: 0;
	position: fixed;
	z-index:999;
}
#plist  { /*-12%-*/
    float: left;
	width: 10%;
	font-size:2rem;
	color:#f67e79;
	padding: 0.45rem 0 0 2%;
	cursor:pointer;
}
#member{ /*-12%-*/
	float: left;
	width: 10%;
	font-size:2rem;
	padding: 0.45rem 0 0 2%;
	cursor:pointer;
}
#logo  { /*-52%-*/
	width: 52%;
	float: left;
	cursor:pointer;
}
#logo img {
	display: block;
	height: 2.5rem;
	width: auto;
	margin: 0.25rem auto;
	border:0;
}
#search { /*-12%-*/
	float: left;
	width: 20%;
	font-size:2rem;
	padding: 0.4rem 2% 0 0;
	text-align: right;
	cursor:pointer;
}
#ser {
	color:#f67e79;
}
@media screen and (max-width: 350px) {
	#plist  { font-size:1.6rem; }
	#ser { font-size:1.6rem; top:0.6rem; }
	#plist  { padding-top:0.8rem; }
}

#navi {
	width: 98%;
	/*background-color: rgba(255, 255, 255, 0.8);*/
	background-color:#FFF;
	padding: 2% 1% 2% 1%;
	overflow: hidden;
	position:fixed;
	left:0;
	top:3rem;
	display:none;
	z-index:999;
}
#navi>ul { list-style:none; }

#navi a  {
	font-family: sans-serif, "新細明體", Arial;
	font-size: 0.8rem;
	color: #FFF;
	letter-spacing: 0.1rem;
	text-align: center;
	width: 18%;
	float: left;
	cursor: pointer;
	display: block;
	margin:1%;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
}

.zoom { 
	font-size:3rem;
}
@media screen and (min-width: 600px) and (max-width: 850px) {.zoom { font-size:4rem; }}
/*#main {
	background-color: #9F0;
	width: 90%;
	padding:5%;
}*/


#mask { position:fixed; top:0;
        left:0; z-index:210; 
		background-color: rgba(60, 60, 60, 0.7); 
		width:100%; height:100%; display:none; 
}
hr { border:0; height:0.1rem; background-color:#e6e6e6; color:#e6e6e6;}