@charset "utf-8";
/* CSS Document */
* {margin: 0;padding: 0;}
body,h1,h2,p, span{ font-family: 微軟正黑體 ; /*overflow-x:hidden;*/}
a {text-decoration: none; color:#ffffff;}
a:hover,a.selected {text-decoration: none; color:#ffffff; opacity: 0.9;}
a img {outline : none;}
img { width: 100%;/* and for IE 8 */width: auto\9; border:none;}
img.bk { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}
/*----------------------top---------------------------*/
.img-top{display: inline-block;position: relative;width: 100%;margin: 0px 0px 20px 80px;}
.logo{width: 40%;display: inline-block;margin-right: 20px;margin-left: 20px;position: relative; vertical-align: top;margin-top: 80px;}
.tree{width: 40%;display: inline-block;position: relative;top: 50px;}
.top_box{ width:100%; min-height:40px; position:relative;}
.top_link{ margin:0 auto; text-align:right; line-height:50px; padding-right:10px; color: #ffffff; font-weight:bold; background-color: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#48b6ab+0,008e79+100 */
background: #48b6ab; /* Old browsers */
background: -moz-linear-gradient(top, #48b6ab 0%, #008e79 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #48b6ab 0%,#008e79 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #48b6ab 0%,#008e79 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48b6ab', endColorstr='#008e79',GradientType=0 ); /* IE6-9 */box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);}
.top_link a{ color:#ffffff;}	
/*----------------------main---------------------------*/
.warpper_box{ width:100%; position:relative;}
.main_content{ max-width:1000px; margin:0 auto; background:url(../img/guideline/header_bg.png) no-repeat; box-shadow: 0 0 10px rgba(0,0,0,0.4); position:relative;}
.award_logo{ width:564px; padding:80px 0 0 90px;}
.main_visual{ width:550px; margin:-300px 0 0 420px;}
.nav_buttons{ /*width:450px; height:160px; margin:-140px 0 0 80px;*/margin-left: 80px;position: relative;bottom: 100px;}
.nav_buttons a{ cursor:pointer;/* width:115px;*/ width: 12%; height:103px; margin:2px;}
.nav_buttons a img{ /*width:115px;*/width: 15%; padding-right: 20px;}
.nav_buttons a img:hover{   filter:contrast(150%);}
/*.nav_buttons a#result img{ width:14.5%;}*/
@media screen and (max-width: 680px) {
.img-top{display: inline-block;position: relative;width: 100%;margin: 0px auto;}
.logo { margin-top: 30px; width: 50%;margin-right: 0px;}
.tree{position: relative;top: 20px;}
.nav_buttons {margin-left: 20px;position: relative;bottom: 25px;}
.nav_buttons a img {width: 15%;padding-right: 10px;}
.top_link a {font-size: 10px;}
.main-nav_item a{font-size: 16px;}
.main-nav_link {padding: 0rem;}
}
/*----------------------content---------------------------*/
#switcher-panel{ max-width:900px; /*padding: 30px 0px;*/margin: -30px 10% 0px 10%;}
.switcher-content {display: none;}
.tab_title{ /*width:105px;*/display: inline-block; border-radius:5px; color:#FFFFFF; font-weight:bold; font-size:1.3em; line-height:1.2em; text-align:center; padding: 5px 20px; margin:10px 0 20px 0; background: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f39800+0,ff6e00+100 */
background: #f39800; /* Old browsers */
background: -moz-linear-gradient(top, #f39800 0%, #ff6e00 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f39800 0%,#ff6e00 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f39800 0%,#ff6e00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f39800', endColorstr='#ff6e00',GradientType=0 ); /* IE6-9 */
}

.tab_title2{ width:150px;border-radius:5px; color:#008CA2; font-weight:bold; font-size:1.3em; line-height:1.2em; text-align:center; padding:5px; margin:10px 0 10px 0;}
.tab_title3{ width:145px; border-radius:5px; color:#FFFFFF; font-weight:bold; font-size:1.3em; line-height:1.2em; text-align:center; padding:5px; margin:10px 0 20px 0; background: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f39800+0,ff6e00+100 */
background: #f39800; /* Old browsers */
background: -moz-linear-gradient(top, #f39800 0%, #ff6e00 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f39800 0%,#ff6e00 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f39800 0%,#ff6e00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f39800', endColorstr='#ff6e00',GradientType=0 ); /* IE6-9 */}
.tab_title2 span, .tab_title4 span, .tab_title5 span, .tab_title6 span{ width:43px; height:25px; float:left; padding-right: 10px;}
.tab_title2 img, .tab_title4 img, .tab_title5 img, .tab_title6 img{ width:43px; height:25px;}
.tab_title4{ width:100%;;border-radius:5px; color:#008CA2; font-weight:bold; font-size:1.3em; line-height:1.2em; text-align:left; padding:5px; margin:10px 0 10px 0;}
.tab_title5{ width:100%;border-radius:5px; color:#008CA2; font-weight:bold; font-size:1.3em; line-height:1.2em; text-align:left; padding:5px; margin:10px 0 10px 0;}
.tab_title6{ width:350px;border-radius:5px; color:#008CA2; font-weight:bold; font-size:1.3em; line-height:1.2em; text-align:center; padding:5px; margin:10px 0 10px 0;}
.tab_title7{ width:300px;border-radius:5px; color:#5FAE5A; font-size:1.3em; line-height:1.2em; text-align:center; padding:5px; margin:10px 0 10px 25px;}
.tab_title8{ width:320px;border-radius:5px; color:#5FAE5A; font-size:1.3em; line-height:1.2em; text-align:center; padding:5px; margin:10px 0 10px 25px;}
.tab_title_new{ width:100%;;border-radius:5px; color:#008CA2; font-weight:bold; font-size:1.3em; line-height:1.2em; text-align:left; padding:6px 0px 0px;margin-bottom: 10px;}
.tab_content{ color:#4c4948;font-size:1.1em; line-height:1.7em; margin:10px 0 50px 0px; width:100%;text-align: justify;text-justify:inter-ideograph;}
.tab_content p{ text-indent:-31px;margin-left: 40px;}
.tab_content2{ color:#4c4948;font-size:1.1em; line-height:1.7em; margin:10px 0 32px 20px; width:100%; display: block;}
.tab_content3{ color:#4c4948;font-size:1.1em; line-height:1.7em; margin:50px 0 30px 0;min-height: 50px; width:100%;display: block;}
.tab_content4{ color:#4c4948;font-size:1.1em; line-height:1.7em; margin:10px 0 30px 70px;display: block;}
.tab_content5{ color:#4c4948;font-size:1.1em; line-height:1.7em; margin:10px 0 60px 75px; width:100%; display: block;}
.tab_content6{ color:#4c4948;font-size:1.1em; line-height:1.7em; /*margin:10px 0 40px 75px;*/ width:100%; display: block;text-align: justify;text-justify:inter-ideograph;}
.tab_content6 p {font-weight: bold;}
.tab_content2 span,.tab_content4 span,.tab_content5 span ,.tab_content6 span{ font-weight:bold; /*float:left;*/}
.tab_content3 img{ min-width:224px;}
.tab_content7 .btn1{ display: inline-block;}
.tab_content a{color:#094c98;font-weight: bold;}
.download {
  display: inline-block;
  margin-right: 10px; 
  margin-top: 20px; 
  text-align: left;
  padding: 10px 20px 10px 55px; 
  color: #686868;
  text-decoration: none;
  border: 1px solid #E3E3E3; 
  position: relative; 
  transition: 0.15s; 
  background-color: #fff;
  font-size: 16px;
  font-weight: bold;
  font-family: "微軟正黑體" ;background-color:#ffffff;
  border-radius:.25em;
  width: 250px;
  vertical-align: middle;
  height: 75px;
}

.download:focus,
.download:hover {
  border-color: #008982;
  outline: none;
  cursor: pointer;
}
.download:active {
  animation: enlight 0.5s;
}

.download::before {
  content: ''; 
  background: url('../img/guideline/download.svg') no-repeat center;
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 20px; 
  width: 20px;
}
@keyframes enlight {
  to { box-shadow: 0 0 0 8px #fce8ed; }
}

.number{  float:left; margin:0 14px 0 75px; height: 60px;}
.number2{ float:left; margin:0 14px 0 75px; height: 300px;}
.number3{ float:left; margin:0 14px 0 20px; height: 60px;}
.number4{ float:left; margin:0 14px 0 20px; height: 150px;}
.number5{ float:left; margin:0 14px 0 75px; height: 70px;}
.number6{ float:left; margin:0 14px 0 75px; height: 120px;}
.number img, .number2 img, .number3 img, .number4 img, .number5 img, .number6 img{ max-width:18px;height:28px;}
.shadow {box-shadow: inset 0 -0.65rem #FFDE94, inset 0 -0.65rem #FFDE94;font-weight: bold;}
.more_btn {
	width:70px;
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #C9DE96), color-stop(1, #398235) );
	background:-moz-linear-gradient( center top, #C9DE96 5%, #398235 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#C9DE96', endColorstr='#398235');
	background-color:#ffffff;
	-webkit-border-top-left-radius:5px;
	-moz-border-radius-topleft:5px;
	border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-moz-border-radius-topright:5px;
	border-top-right-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	border-bottom-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-moz-border-radius-bottomleft:5px;
	border-bottom-left-radius:5px;
	text-indent:0;
	border:1px solid #DAD3FF;
	display:inline-block;
	color:#ffffff;
	font-size: 0.9em;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	margin:0 15px 5px 15px;
	background-color:#398235;
}
.more_btn a{color:#ffffff; text-decoration:none; display: block;}
.more_btn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #398235), color-stop(1, #C9DE96) );
	background:-moz-linear-gradient( center top, #398235 5%, #C9DE96 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#398235', endColorstr='#C9DE96');
	background-color:#398235;}.more_btn:active {position:relative;top:1px;}

/*----------------------content new---------------------------*/
.list li {/*background: url(images/icon_arrow_right.png) no-repeat 97% 50%;border-bottom: 1px solid #ccc;*/display: table;border-collapse: collapse;width: 100%;}
.inner {display: table-row;overflow: hidden;}
.li-img{display: table-cell;vertical-align:top;width: 10%; }
.li-img2 {display: table-cell;vertical-align:top;width: 5%; }
.li-img img {display: block;width: 20px;height: 30px;margin-left: 50px; margin-right: 10px;}
.li-img2 img {display: block;width: 20px;height: 30px;margin-right: 10px; margin-left: 10px;}
.li-text {/*display: table-cell;*/padding: 0px 0px 20px 0px;color:#4c4948;font-size:1.1em; line-height:1.7em; width:100%; text-align: justify;text-justify:inter-ideograph;}
.li-text p {font-weight: bold;}
.li-text a{color: #094c98;font-weight: bold;}
.list-1{margin-left: 60px;}
.list-2{/*margin-left: 15px;*/margin-bottom: 15px;}
.li-head {margin: 0;}
.li-summary {display: none;margin: 0;}
.li-action {margin: 0;}

@media screen and (min-width: 60em) {
  .list li {float: left;}
}
/*----------------------work info---------------------------*/
#inline1, #inline1 p, #inline2, #inline2 p, #inline3, #inline3 p, #inline4, #inline4 p, #inline5, #inline5 p, #inline6, #inline6 p, #inline7, #inline7 p, #inline8, #inline8 p, #inline9, #inline9 p, #inline10, #inline10 p, #inline11, #inline11 p, #inline12, #inline12 p, #inline13, #inline13 p, #inline14, #inline14 p, #inline15, #inline15 p, #inline16, #inline16 p,  #inline17, #inline17 p, #inline18, #inline18 p, #inline19, #inline19 p, #inline20, #inline20 p, #inline21, #inline21 p, #inline22, #inline22 p, #inline23, #inline23 p, #inline24, #inline24 p, #inline25, #inline25 p, #inline26, #inline26 p{color: #4c4948;font-size: 1.1em;line-height: 1.6em;}
h2.first{ border-bottom:1px solid #231815;}
h2.first span{ color:#0096b2; font-size: 1.3em;line-height: 1.6em; padding-right: 10px;}
#inline1 p.work_title, #inline2 p.work_title, #inline3 p.work_title, #inline4 p.work_title, #inline5 p.work_title, #inline6 p.work_title, #inline7 p.work_title, #inline8 p.work_title, #inline9 p.work_title, #inline10 p.work_title, #inline11 p.work_title, #inline12 p.work_title, #inline13 p.work_title, #inline14 p.work_title, #inline15 p.work_title, #inline16 p.work_title, #inline17 p.work_title, #inline18 p.work_title, #inline19 p.work_title, #inline20 p.work_title, #inline21 p.work_title, #inline22 p.work_title, #inline23 p.work_title, #inline24 p.work_title, #inline25 p.work_title, #inline26 p.work_title{ color:#f08336; font-size: 2em;line-height: 1.6em; font-weight:bold;}
.unit{font-size: 1.3em;line-height: 1.6em;}
.pic_box{ display:inline-block;}
.pic_info{ width:150px; height: 180px; margin:15px 15px 15px 0; float:left; display:inline-block;}
.pic_info img{ width:150px;}
.pic_info span{ text-align:left; float:left; font-size: 1.1em;line-height: 1.6em;}
/*----------------------footer---------------------------*/
.footer_box{background-color: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#48b6ab+0,008e79+100 */
background: #48b6ab; /* Old browsers */
background: -moz-linear-gradient(top, #48b6ab 0%, #008e79 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #48b6ab 0%,#008e79 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #48b6ab 0%,#008e79 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48b6ab', endColorstr='#008e79',GradientType=0 ); /* IE6-9 */
box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);}
.footer{ min-height:180px; margin:0 auto; text-align:center; padding-top:20px;/* line-height:2em; */color: #ffffff; max-width:880px;}
.cna_logo{ float:left;}
.footer_links{ float:right;}
.footer_links a{ color:#ffffff;}