@import "0_style.css"; 
@import "FontAwesome4.7/fontawesome.css";



.PM_left{
    width:20%;
	border:0px solid #ccc;
	text-align:left;
	color:#ffff00;
	float:left; 
	padding-top:90px;
	padding-left:10px;
	font-size:28px;
	line-height: 50px;　
	text-indent: 2em;
}


.PM_right{
    width:3%;
	border:0px solid #ccc;
	text-align:center;
	margin:5px;
	float:right;
	background:#046A98;
	/* overflow-x:hidden; */
	
}

.PM_middle{
    width:60%;
	background:var(--middle-background-color); 	
	float:left;
	height:800px;
	overflow:auto;
	margin-bottom:20px;
	background:#ffffff; 
	
}

.PM_container_head {
border-color: var(--title-background-color); 
border-style: solid;

border-width: 1em 2em ;
background:var(--title-background-color);
color:#ffffff;
text-align: Center;
font-size:24px;	
border-color: #6599FF;
background:#6599FF;
}


.PM_container {
border-color: var(--middle-background-color);  
border-style: 8px solid ; 

border-width: 1em 2em 0em 2em;
background:var(--middle-background-color);  
color:var(--middle-color); 
font-size:18px;	
text-indent: 2em;
padding:1em;


}
.container1{
  width: 100%;
  margin: 0 auto;
  
}
.photo{
  /* 設定父親定位點 */
  position: relative;
  width: 30%;
  float:left;
  padding-left:1%;
  margin: 1%;
  
  
}
.container1 img{
  display: block;
  width: 100%;
  height: auto;
}
.info{
/*   display: none; */
  opacity: 0;
  position: absolute;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0.3);
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 40px;
  
}
.info p{
  color: #fff;
}
.info:hover , .info:focus, .info:active{
  -webkit-transition: 500ms;
  opacity: 1;
}


.mainContent_head {
border-color: var(--title-background-color); 
border-style: solid;

border-width: 0.4em 2em ;
background:var(--title-background-color);
color:#ffffff;
text-align: Center;
font-size:24px;	
border-color: #6599FF;
background:#6599FF;
}

.mainContent_text  {
border-color: var(--middle-background-color); 
border-style: 0px solid ; 

border-width: 1em 2em 0em 2em;
background:var(--middle-background-color);  
color:var(--middle-color); 
font-size:18px;	
text-indent: 2em;
padding-top:1em;
padding-left:2em;
padding-right:2em;
overflow-x:hidden;
line-height:2rem;

}



.mainContent_text  {
border-color: var(--middle-background-color); 
border-style: 0px solid ; 

border-width: 1em 2em 0em 2em;
background:var(--middle-background-color);  
color:var(--middle-color); 
font-size:18px;	
text-indent: 2em;
padding-top:1em;
padding-left:2em;
padding-right:2em;
overflow-x:hidden;
line-height:2rem;


}





/* Main content of the site */
#content {
	clear: both;
	overflow: auto;
	padding-top: 1vh;
}
/* Sidebar */
#content .sidebar {
	font-family: 'Montserrat', sans-serif;
	color: rgba(146,146,146,1.00);
	float: left;
        width: 24%;
        padding-left: 0.5vh;
        text-align: center;
        background-color: rgba(246,246,246,1.00);
        padding-top: 3vh;
        height: 75vh;
        background-color:blue;
        background-color: #26507E;
        margin-right:3%;
        overflow:auto;
        overflow-x:hidden;

}

/* main content of the site */
#content .mainContent {
	float: left;
	width: 70%;
	/*text-align: center;*/
	padding-left: 4%;
	background:#ffffff; 
	padding-left: 0%;
	float: center;
	border:0px solid red;
	height:75vh;
	overflow:auto;
	
}


.img1 {

	/*text-align: center;*/
	width:50%;
    margin: 0 auto;
	border:1px solid red;
	text-align: center;
	float:center;
	
	
}


/*menubar's properties for menus in sidebar */
#content .sidebar #menubar {
	text-align: left;
	color: rgba(146,146,146,1.00);
	position: relative;
	left: 0%;
}

/* Whole page content */
#mainWrapper {
	width: 80%;
	padding-left: 10%;
}
/*menu elements */
.menu ul li {
	list-style-type: none;
	font-size: x-large;
		position: relative;
        left: 0.1vh;
        padding: 0.3rem 0px;
        margin-top:0px;
        line-height: 1.5rem;
        text-indent:-1.6rem;

}



.sidebar #menubar .menu ul li a {
	color: rgba(146,146,146,1.00);
	text-decoration: none;
	color: #ffff00;
	color: white;
	font-size:1.2rem;
}
.sidebar #menubar .menu ul li a:hover {
	color: rgba(107,97,97,1.00);
	text-decoration: none;
	color:#6599FF;
}
/* Menu headings in sidebar */
#menubar .menu h2 {
	font-size: 14px;
}
/*Links under menus in sidebar */
#menubar .menu ul li a {
	font-size: 14px;
}
/* Menus in sidebar */
.sidebar #menubar .menu {
	margin-bottom: 29px;
}