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

body {
	color: rgb(0, 0, 0);
	line-height: 1.2em;
	font-family: "Times New Roman", "微軟正黑體", serif;
	font-size: 14px;
}
a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; }
  
  a, a:hover {
	text-decoration: none !important;
	font-weight: bold;
}
a.linkb{
	font-size: 0.9em;
	color: #333;
	text-decoration: none;
	background-image: url(../images/ico_pdf-s.png);
	background-repeat: no-repeat;
	background-position: left;
	height: 30px;
	padding-left: 25px;
}
a.linkb:hover,a.linkv:hover{
	font-size: 0.9em;
	color:#900;
	text-decoration: none;
}
	
a.linkv{
	font-size: 0.9em;
	color: #333;
	text-decoration: none;
	background-image: url(../images/ico_video-s.png);
	background-repeat: no-repeat;
	background-position: left;
	height: 30px;
	padding-left: 25px;
}

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol{
	line-height: 1.5em;
}
ol.d {list-style-type: upper-roman;}
ol.e {list-style-type: lower-roman;}
ol.f {list-style-type: lower-alpha;}
ol.g {list-style-type: decimal;}

/* banner */
.governance-framework {
  padding: 15px;
  background-color: #f9f9f9;
  text-align: center;
}

.framework-container {
  max-width: 500px;
  margin: 0 auto;
}

.level-card {
  background: #ffffff;
  border: 1px solid #1e2a44;
  padding: 5px;
  margin: 5px 0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.arrow {
  font-size: 1.5rem;
  color: #1e2a44;
  margin: 5px 0;
}
  
  
  

/* top nanner */
.top-image {
	background-image: url(../images/p1r1.gif);
	background-position: top left;
	background-repeat: no-repeat;
	position: relative;
	height: 80px;
}

.top-text {
  text-align: left;
  position: absolute;
  top: 60%;
  left: 0%; 
}

.top-text a{
	font-size: 1.3em;
	text-decoration: none;
	font-weight: bold;
	}

/* title text */
.title2 {
	font-size: 1.25em; font-weight: bold; margin-top: 25px; margin-bottom: 10px;}
.title3 {
	font-weight: bold; margin-top: 25px; margin-bottom: 10px;}

.title4 {
	font-size: 1.5em;
	font-weight: bold;
	margin:0.5em;
	padding:1em;	
	border-left-width: 15px;
	border-left-style: solid;
	border-right-width: 15px;
	border-right-style: solid;	
}
	
.title4a {
	font-size: 1.4em;
	font-weight: bold;
	margin:0.5em;
	padding:1em;}

.title5 {
	font-size: 1.3em;
	font-weight: bold;
	margin: 0.2em;
	background-image: url(images/icon1.gif);
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 1.5em;
	border-bottom: medium solid #C3A6DA;
	border-top: medium solid #C5A7DC;}

.title6 {
	font-size: 1.2em;
	margin:5px;	
	background-image: url(images/button02.gif);
	background-repeat: no-repeat;
	background-position: left;
	font-weight: bold;
	text-indent: 1em;	
}
.title6 a{
	text-decoration: none;	
}


/* indexhtml menubar */
.title7 a{
	font-size: 1.3em;
	background-image: url(images/gold.jpg);
	background-repeat: no-repeat;
	font-weight: bold;
	color: #000;
	display: block;
	text-decoration: none;
	list-style-type: none;
	margin: 5px;
	padding: 10px;
}

.title7 a:hover{
	font-size: 1.5em;
	color: #FFF;
	text-decoration: none;
	}
.title7 a:active{
	font-size: 1.5em;
	color: #FF0;
	text-decoration: none;
	}
	
.title_blue{
	font-size: 1.2em;
	font-weight: bold;
	color: #785878;
	margin: 10px;
	padding: 10px 0px;
}	
	
.sub_title{
	margin-bottom: 20px;
	margin-left: 25px;}
	
.subtext1 {
	font-size: 10px; vertical-align: sub;}	
	
/* table */
.table2	{
	width: 100%;
	border-collapse: collapse;
	line-height: 1em;
	}

.table2	th	{
	border: solid 1px #aaaaaa;
	padding: 10px;
	color: #FFF;
	background-color:#977197;
	text-align:center;
	vertical-align: middle;
}

.table2	td	{
	border: solid 1px #aaaaaa;
	vertical-align: middle;
	padding: 10px;
	text-align:center;
}
.table2	td ol{
	padding:0px;
	line-height: 1em;
	color: #009;
	list-style-position: outside;
	font-size: 0.9em;
}

/*table4-blue*/
.table4	{
	width: 100%;
	border-collapse: collapse;
	line-height: 1.2em;
	}

.table4	th	{
	border: solid 1px #aaaaaa;
	padding: 10px;
	background-color: #366092;
	text-align:center;
	vertical-align: middle;
	color: #FFF;
}

.table4	td	{
	border: solid 1px #aaaaaa;
	padding: 5px;	
}


/* Style the tab */
.tabs {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
	margin-top: 10px;
	margin-bottom: 10px;
}



/* Style the buttons inside the tab */
.tabs button .tablinks {
	background-color: inherit;
	float: left;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;	
}

/* Change background color of buttons on hover */
.tabs button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tabs button.active {
	background-color: #036;
	color:white;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.ul{
	list-style-position: outside;
	padding: 10px;
	list-style-type: none;
	line-height: 1.5em;
			}
.ul li{
	padding-left: 15px;
	text-indent: -2.5em;
}	
.ul li ol{
	padding-left: 15px;	
	text-indent: 0em;
}	

.panel-heading .accordion-toggle:before {
	/* symbol for "opening" panels */
   	content: "◆";    /* adjust as needed, taken from bootstrap.css */
	
	float: left;        /* adjust as needed */
	text-decoration: none;
}


.panel-heading .accordion-toggle:after {
	/* symbol for "opening" panels */
   	content: "-";    /* adjust as needed, taken from bootstrap.css */
	float: right;        /* adjust as needed */
	text-decoration: none;
}

.panel-heading .accordion-toggle.collapsed:after {
	/* symbol for "collapsed" panels */
    content: "+";    /* adjust as needed, taken from bootstrap.css */
    float: right;  
}

.panel-body ol{
	display: block;
	float: left;
	line-height: 1.5em;
}
	
.panel-body ol li{
	padding: 5px;
	text-align: left;
	vertical-align: middle;
	list-style-position: outside;
}	
	

/*text*/
.text{
		padding:5px 15px;
		border:2px #23749f solid;
		cursor:pointer;
		-webkit-border-radius: 5px;
		border-radius: 5px; }
		
.text2em{
	text-indent: -2em;
	margin-left: 2em;
	margin-right: 2em;	/*內縮2em*/
	 	 }

.text3em{
	text-indent: -2em;
	margin-left: 3em;
	margin-right: 2em;		/*內縮3em*/
	 	 }

.text0em{
	text-indent: -1.5em;
	margin-left: 0em;
	margin-right: 2em;	/*內縮0em*/
	 	 }
.t-ul{
	list-style-position: outside;
	padding: 10px;
	list-style-type: none;
	line-height: 1.5em;
			}
.t-ul li{
	padding-left: 15px;
	text-indent: -2.5em;
}	
.t-ul li ol{
	padding-left: 15px;	
	text-indent: 0em;
}	

	 
.pc {
	display:  block;
}
.mo {
	display: none;!important
}

@media only screen and (max-width:768px)
{

.pc {
	display: none;!important
}
.mo {
	display: block;
}

.table2	th	{
	padding: 0px;	
}
.table2	td	{
	padding: 0px;
}
.panel{
	padding: 0px;	
}
.panel-body{
	margin: 0px;
	padding: 0px;	
}

.title7 a{
	background-image: none;
	border-radius: 5px;
	background-color: #CCC;
	color: #333;
}
}