@charset "utf-8";

/** techView **/
.techView {
	width: 100%;
	margin:0 auto;
	overflow:hidden;
	background:#ffdb47;
}


/** topSection **/
#topSection {
	position:relative;
	width: 100%;
	padding:100px 0;
	margin:0 auto;
}
#topSection .bg1 {
	position: absolute;
    display: block;    
    right: 0;
	bottom:-45px;
	width:760px;
	height:358px;
	background:url(../images/topSection-bg1.png) no-repeat 50% bottom;
	background-size:auto 100%;
	z-index:1;
}
#topSection .ifon h2 {
	width:50%;
	color:#A40481;
	font-size:5em;
	font-family: 微軟雅黑, "Microsoft YaHei";	
	font-weight:bold;
	line-height:150%;
	margin-top:40px;
}
#topSection .ifon h2 span {
	position:relative;
	font-family: 微軟雅黑, "Microsoft YaHei";
	font-size:0.8em;
	font-style: italic;
	padding:5px 10px 5px 12px;
	margin:-2px 5px 10px 0;
}
#topSection .ifon h2 span:before {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 12px;
    width: 100%;
    height: 3px;
    background: #A40481;
}
#topSection .ifon h2 span:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
	left:0;
    width: 100%;
    height: 3px;
	background:#A40481;
}
#topSection .ifon h3 {
	width:510px;
	box-sizing:border-box;
	margin-top:20px;
	color:#000;
	font-size:1.7em;
	line-height:170%;
	text-align:justify;
	margin-left:0px;
	margin-top:10px;
}
@media screen and (max-width: 1500px) {
	#topSection {padding:60px 0;}
	#topSection .bg1 {bottom:0; background: url(../images/topSection-bg1.png) no-repeat 70% bottom; background-size:auto 90%;}		
	#topSection .ifon h2, #topSection .ifon h3 {width:45%; margin-right:60px;}	
	#topSection .ifon h2 span {display:block;text-align:right;}	
}
@media screen and (max-width: 1300px) {
	#topSection .bg1 {top:5px; background: url(../images/topSection-bg1.png) no-repeat 90% bottom; background-size:auto 80%;}
	#topSection .ifon h2 {font-size:4.2em;}			
}
@media screen and (max-width: 1100px) {
	#topSection .bg1 {top:5px; background: url(../images/topSection-bg1.png) no-repeat 100% bottom; background-size:auto 70%;}
	#topSection .ifon h2 {font-size:3.8em;}		
}
@media screen and (max-width: 990px) {
	#topSection {padding:30px 0;}
	#topSection .bg1 {top:5px; background: url(../images/topSection-bg1.png) no-repeat 100% 50%; background-size:auto 50%;}		
	#topSection .ifon {
		float:left;
		width:100%;
		padding-right:300px;
		box-sizing:border-box;
	}
	#topSection .ifon h2{
		margin-top:20px;
		position:relative;
		width:450px; 
	}
	#topSection .ifon h3 {
		width:90%; 
	}
	#topSection .ifon h2 span {
		display:inline-block;
		font-size:0.7em;
	}

	#topSection .ifon dl {
		width:100%;
	}
	#topSection .ifon dl dd {
		margin-left:0;
	}
}
@media screen and (max-width: 768px) {
	#topSection .bg1 {width:100%; top:170px; background: url(../images/topSection-bg1.png) no-repeat 50% 70%; background-size:auto 50%;}		
	#topSection .ifon {
		float:left;
		width:100%;
		padding:0 0 200px 0;
		box-sizing:border-box;
	}	
	#topSection .ifon h2 {
		width:100%;
		text-align:center;
	}
	#topSection .ifon h3 {
		width:100%; 
		text-align:center;		
	}	
}
@media screen and (max-width: 480px) {
	#topSection .bg1 {width:100%; top:180px; background: url(../images/topSection-bg1.png) no-repeat 50% 75%; background-size:auto 50%;}		
	#topSection .ifon {
		padding:0 0 190px 0;
	}
}
@media screen and (max-width: 450px) {
	#topSection .bg1 {width:100%; top:240px; background: url(../images/topSection-bg1.png) no-repeat 50% 85%; background-size:auto 45%;}		
	#topSection .ifon {
		padding:0 0 160px 0;
	}
}

/** infoSection **/
#infoSection {
	position:relative;
	width: 100%;
	padding:60px 0;
	margin:0 auto;
}
#infoSection.f1 {
	background-color:#96146e;
}
#infoSection.f2 {
	background-color:#eee;
}
#infoSection h2 {
	width:100%;	
	font-size:3.3em;
	font-weight:bold;
	margin-bottom:40px;
	line-height:150%;
}
#infoSection h2 span {
	display:inline-block;
	position:relative;
	font-family: 微軟雅黑, "Microsoft YaHei";
	font-size:3.1rem;
	padding:5px 0;
	margin:-2px 5px 0 5px;
}
#infoSection h2 span:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
	left:0;
    width: 100%;
    height: 3px;
	background:#9a0d5f;
}
#infoSection.f1 h2 {
	color:#fff;
}
#infoSection.f1 h2 span:after {
	background:#fff;
}
#infoSection.f2 h2 {
	color:#9a0d5f;
	width:100%;
	text-align:right;
}
#infoSection.f2 h2 span:after {
	background:#9a0d5f;
}
@media screen and (max-width: 990px) {
	#infoSection .container{
		width:90%;
		margin:0 auto;
	}
	#infoSection.f1:before {
		left: 40px;
		margin-left:0px;
	}
	#infoSection.f2:before {
		right: 40px;
		margin-right:0px;
	}
}
@media screen and (max-width: 768px) {
	#infoSection h2,
	#infoSection.f2 h2 {
		text-align:center;
	}
	#infoSection.sect1,
	#infoSection.sect3 {
		padding-bottom:180px;
	}
}
@media screen and (max-width: 420px) {
	#infoSection.sect2 {
		padding-bottom:180px;
	}
	#infoSection.f1:before {
		left: 20px;
		margin-left:0px;
		border-width: 20px 20px 0 20px;
	}
	#infoSection.f2:before {
		right: 20px;
		margin-right:0px;
		border-width: 20px 20px 0 20px;
	}
	#infoSection h2 span {
		font-size:2.3rem;
	}
	#infoSection h2 span:after {
		bottom: 0px;
	}
}


/* ----- .sect1 ----- */
.sect1 h2 {
	margin-left:40%;
}
.sect1 ul {
	margin-left:40%;	
	list-style:none;
}
.sect1 ul li {
	float:left;
	width:49%;	
	color:#000;
	font-size:2.1em;
	line-height:170%;
	margin:25px 1% 0 0;
}
.sect1 ul li span {
	width:100%;
	box-sizing:border-box;
	position:relative;
	display:inline-block;
	color:#af551e;
	font-weight:bold;
	padding:10px 20px 10px 50px;
	background:#e9c093;
	-webkit-border-radius:30px;
	   -moz-border-radius:30px;
			border-radius:30px;
}
.sect1 ul li:nth-of-type(2n) span {
	color:#FFF;	
	background:#101841;
}
.sect1 ul li span strong {
	font-family: 微軟雅黑, "Microsoft YaHei";
	font-size:1.5rem;
}
.sect1 ul li span i {
	position: absolute;
	display: block; 
	left:15px;
	top:0;
	width:40px;
	height:40px;
	background: url(../images/icon-lightning.png) no-repeat;
}
.sect1 ul li span:after {
    content: "";
    display: block;
    position: absolute;    
	left:15px;
	top:13px;
    width:24px;
	height:24px;
	border:3px solid #c17654;
	-webkit-border-radius:50px;
	   -moz-border-radius:50px;
			border-radius:50px;
}
.sect1 ul li:nth-of-type(2n) span:after {
	border:3px solid #fad8be;
}
.sect1 .pic1 {
	float:left;
	position: absolute;
    display: block;    
    left: 4%;
	bottom:0;
	width:520px;
	height:343px;
	background: url(../images/infoSection-bg1.png) no-repeat 0 100%;
	background-size:100% auto;
	z-index:2;
}
@media screen and (max-width: 1500px) {
	.sect1 h2, .sect1 ul {margin-left:38%;}
	.sect1 .pic1 {background-size:80% auto;}
	.sect1 ul li {	
		font-size:1.8em;
		line-height:140%;
		margin-top:0;
	}
	.sect1 ul li span strong {
		font-size:1.3rem;
	}	
	.sect1 ul li span:after {
		top:10px;
		width:18px;
		height:18px;
	}			
}
@media screen and (max-width: 1300px) {
	.sect1 h2{width:100%; margin:0;}
	.sect1 ul {margin:0 0 0 35%;}
	.sect1 ul li span strong {font-size:1.2rem;}	
	.sect1 .pic1 {background-size:65% auto;}	
}
@media screen and (max-width: 1200px) {
	.sect1 ul li {
		width:100%;	
		margin:5px 0 0 0;
	}	
}
@media screen and (max-width: 990px) {
	.sect1 h2{ width:90%; margin:0 5%;}	
	.sect1 .pic1 {background-size:50% auto;}			
}
@media screen and (max-width: 768px) {
	.sect1 h2{width:100%; margin:0; text-align:center;}	
	.sect1 h2 small {display:block;}
	.sect1 ul {margin:0 5%;}
	.sect1 .pic1 {
		left: 50%;
		margin-left:-260px;
		background: url(../images/infoSection-bg1.png) no-repeat 50% 100%;
		background-size:50% auto;
	}
	#infoSection.sect1 {
		padding-bottom:220px;
	}			
}


/* ----- .sect2 ----- */
.sect2 .talkbox {
	position:relative;
	display:block;
	border:10px solid #bbb;
	padding:20px 40px 20px 140px;
	box-sizing:border-box;
	-webkit-border-radius:10px;
	   -moz-border-radius:10px;
			border-radius:10px;
}
.sect2 .talkbox:before {
    content: "";
    display: block;
    position: absolute;
    left:20px;
	bottom:-1px;
    width: 91px;
    height: 180px;
    background: url(../images/field-sect2-icon.svg) no-repeat 50% bottom;
	background-size: 100% auto;
}
.sect2 .talkbox p {
	position:relative;
	color:#68280E;
	font-size:2.1em;
	font-weight:bold;
	line-height:170%;
	padding:10px 0;
	/*padding-left:40px;*/
	/*background: url(../images/field-sect2-icon3.png) no-repeat 0 10px;*/
	border-bottom:2px dotted #68280E;
}
.sect2 .talkbox p a {
	display:inline-block;
	color:#a40481;
}
.sect2 .talkbox p a:hover,
.sect2 .talkbox p a:focus {
	color:#541b85;
}
.sect2 .talkbox p strong {
	padding:5px 15px 5px 40px;
	color:#fff;
	background: #333 url(../images/ico-plus-on.png) no-repeat 15px 50%;
	-webkit-border-radius:35px;
	   -moz-border-radius:35px;
			border-radius:35px;	
}
.sect2 .talkbox p a:hover strong,
.sect2 .talkbox p a:focus strong {
	background: #000 url(../images/ico-plus-on.png) no-repeat 15px 50%;	
}
.sect2 .talkbox p span {
	background:#a40481;
	padding:5px 10px;
	color:#fff;
	margin:0 10px;
	-webkit-border-radius:35px;
	   -moz-border-radius:35px;
			border-radius:35px;	
}
.sect2 .talkbox p a:hover span,
.sect2 .talkbox p a:focus span {
	background:#541b85;
}
.sect2 .talkbox p:last-child {
	border-bottom:none;
}
.sect2 h3 {
	width:100%;	
	font-size:3.3em;
	font-weight:bold;
	margin-bottom:30px;
}
.sect2 dl {
	width:740px;
	padding-top:10px;
	padding-left:50px;
	margin-top:50px;
	box-sizing:border-box;
	background:url(../images/field-sect2-icon1.png) no-repeat;
}
.sect2 dl:nth-of-type(2) {
	background-image:url(../images/field-sect2-icon2.png);
}
.sect2 dl dt {
	font-family: 微軟雅黑, "Microsoft YaHei";
	color:#541b85;
	font-size:2.7em;
	line-height:170%;
	font-weight:bold;
}
.sect2 dl dd {
	color:#000;
	font-size:1.7em;
	line-height:170%;
	margin-top:10px;
}
.sect2 dl dd a {
	padding:5px 15px 5px 40px;
	font-size:1.235em;
	font-weight:bold;
	line-height:170%;	
	color:#fff;
	background: #333 url(../images/ico-plus-on.png) no-repeat 15px 50%;
	-webkit-border-radius:35px;
	   -moz-border-radius:35px;
			border-radius:35px;	
}
.sect2 dl dd a.new_c{
	background: #a40481 url(../images/ico-plus-on1.png) no-repeat 15px 50%;
}
.sect2 dl dd a.new_c:hover,
.sect2 dl dd a.new_c:focus{
	background: #750044 url(../images/ico-plus-on1.png) no-repeat 15px 50%;
}

.sect2 dl dd a:hover,
.sect2 dl dd a:focus {
	background: #000 url(../images/ico-plus-on.png) no-repeat 15px 50%;	
}
.sect2 dl dd .newTag{
	background-color:#c00000;
	color:#fff;
	border-radius:5px;
	display:inline-block;
	margin: 0 10px;
	padding:3px 10px;
}
.sect2 ul li {
	margin-left:1.5em;
}
.sect2 .pic1 {
	position: absolute;
    display: block;    
    right: 50%;
	bottom:0;
	width:520px;
	height:560px;
	margin-right:-650px;	
	background: url(../images/infoSection-bg5.svg) no-repeat 50% bottom;
	background-size:auto 100%;
}
@media screen and (max-width: 1500px) {
	.sect2 .pic1 {   
		right: 5%;
		margin-right:0;	
		background: url(../images/infoSection-bg5.svg) no-repeat 100% bottom;
		background-size:auto 80%;
	}
	.sect2 dl {padding-left:0; width:100%;}		
}
@media screen and (max-width: 1200px) {
	.sect2 .pic1 {background-size:auto 65%;}	
}
@media screen and (max-width: 990px) {
	.sect2 .pic1 {background-size:auto 45%;}
	.sect2 .talkbox {padding:20px 40px;}	
	.sect2 .talkbox:before {background: none;}		
}
@media screen and (max-width: 768px) {
	.sect2 .pic1 {background:none;}	
}
@media screen and (max-width: 580px) {
	.sect2 .talkbox {padding:20px;}	
}
@media screen and (max-width: 530px) {
	.sect2 .talkbox p strong {
		display:block;		
		padding:1px 11px 1px 36px;
	}
	.sect2 .talkbox p span {
		padding:1px 10px;
		margin:0 10px 0 35px;
	}
}
@media screen and (max-width: 360px) {
	.sect2 .talkbox {
		border:5px solid #bbb;
		padding:10px;
	}
	.sect2 .talkbox p span {
		margin:0 10px 0 0;
	}		
}

/* ----- .sect3 ----- */
.sect3 ul {
	list-style:none;
	margin-top:50px;
	margin-left:320px;
}
.sect3 ul li {
	position:relative;
	color:#18A452;
	font-size:2.1em;
	font-weight:bold;
	line-height:170%;
	padding-left: 60px;
	margin-top: 20px;
}
.sect3 ul li:nth-of-type(2n) {
	color:#2c5871;
}
.sect3 ul li i {
	position: absolute;
	color: #FFF;
	font-style: initial;	
	left: 20px;
	z-index: 2;
}
.sect3 ul li i:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    background: #18A452;    
    -webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    z-index: -1;
}
.sect3 ul li:nth-of-type(2n) i:before {
	background:#2c5871;
}
.sect3 .pic1 {
	position: absolute;
    display: block;    
    left: 60px;
	bottom:0;
	width:335px;
	height:470px;
	margin-left:0;	
	background: url(../images/infoSection-bg3.png) no-repeat;
	background-size:100% auto;
	z-index:2;
}
.sect3 .pic2 {
	position: absolute;
    display: block;    
    left: 50%;
	bottom:0;
	width:350px;
	height:170px;
	margin-left:-680px;	
	/*background: url(../images/infoSection-bg4.svg) no-repeat 50% bottom;*/
	background-size:100% auto;
	z-index:3;
}
blockquote {
	width: 100%;
	padding: 10px 20px 10px 50px;
	position: relative;
	color: #333;	
	background:#fff;
	box-sizing:border-box;
	-webkit-border-radius:10px;
	   -moz-border-radius:10px;
			border-radius:10px;	
}
blockquote:before {
	font-family: Georgia, serif;	
	display: block;
	content: "\201C";
	font-size: 3em;
	position: absolute;
	left: 10px;
	top: 10px;
	color: #999;
}
blockquote:after {
    content: "";
    display: block;
    position: absolute;
	border-color: transparent #fff transparent transparent;
    border-style: solid; 
	border-width: 10px 20px 10px 0;
    left: -20px;
    top: 20px;
    width: 0;
    height: 0	
}
blockquote span {
	font-weight:normal;
	font-size:0.8em;
}
@media screen and (max-width: 990px) {
	.sect3 ul {
		margin-left:290px;
	}
	.sect3 .pic1 {
		left: 10px;
		width:270px;
		height:85%;
		margin-left:0;
	}
	.sect3 .pic2 {
		left: 10px;
		width:300px;
		margin-left:0;
	}
}
@media screen and (max-width: 640px) {
	.sect3 ul {
		margin-left:0;
	}
	.sect3 .pic1 {
		left: 5%;
		width: 240px;
		height:170px;
		background: url(../images/infoSection-bg3-sp.svg) no-repeat;
		background-size:100% auto;
	}
	.sect3 .pic2 {
		left: 18%;
		width:200px;
		height:100px;
		margin-left:0;
		z-index:0;
	}
}


/* ----- .sect4 ----- */
.sect4 ul {
	list-style:none;
	margin:0 -15px;
}
.sect4 ul li {
	position:relative;
	display:inline-block;
	width:49.5%;
	min-height:100px;
	padding:0 15px 0 130px;
	box-sizing:border-box;
	vertical-align:top;
	margin:20px 0;
}
.sect4 ul li:before {
    content: "";
    display: block;
    position: absolute;
    left: 15px;
    top: -10px;
    width: 100px;
    height: 100px;
    background: #FFF;
	-webkit-border-radius:50%;
	   -moz-border-radius:50%;
			border-radius:50%;
}
.sect4 ul li:nth-of-type(1):before {
	background: url(../images/field-sect4-icon1.svg) no-repeat 50% 50%;
	background-size:cover;
}
.sect4 ul li:nth-of-type(2):before {
	background: url(../images/field-sect4-icon2.svg) no-repeat 50% 50%;
	background-size:cover;
}
.sect4 ul li:nth-of-type(3):before {
	background: url(../images/field-sect4-icon3.svg) no-repeat 50% 50%;
	background-size:cover;
}
.sect4 ul li:nth-of-type(4):before {
	background: url(../images/field-sect4-icon4.svg) no-repeat 50% 50%;
	background-size:cover;
}
.sect4 ul li:nth-of-type(5):before {
	background: url(../images/field-sect4-icon5.svg) no-repeat 50% 50%;
	background-size:cover;
}
.sect4 ul li:nth-of-type(6):before {
	background: url(../images/field-sect4-icon6.svg) no-repeat 50% 50%;
	background-size:cover;
}
.sect4 ul li dt {
	font-family: 微軟雅黑, "Microsoft YaHei";
	color:#541b85;
	font-size:2.5em;
	font-weight:bold;
}
.sect4 ul li:nth-of-type(2) dt { color:#7EBF3A; }
.sect4 ul li:nth-of-type(3) dt { color:#F28A19; }
.sect4 ul li:nth-of-type(4) dt { color:#50BFD8; }
.sect4 ul li:nth-of-type(5) dt { color:#EF8F99; }
.sect4 ul li:nth-of-type(6) dt { color:#41D89E; }
.sect4 ul li dd {
	color:#000;
	font-size:1.7em;
	line-height:170%;
	margin-top:10px;
}
@media screen and (max-width: 640px) {
	.sect4 ul li {
		width:100%;
		margin:10px 0;
	}
}
@media screen and (max-width: 420px) {
	.sect4 ul li {
		padding-left:85px;
	}
	.sect4 ul li:before {
		width: 60px;
		height: 60px;
	}
}


/** viewSection **/
#viewSection {
	position:relative;
	width: 100%;
	padding:60px 0;
	margin:0 auto;
	background-color:#fff;
}
#viewSection h2 {
	width:100%;
	color:#333;	
	font-size:3.3em;
	font-weight:bold;
	margin-bottom:40px;
	line-height:150%;
	text-align:center;
}
#viewSection h2 span {
	display:block;
	position:relative;
	font-family: 微軟雅黑, "Microsoft YaHei";
	font-size:2.1rem;
	padding:5px 0;
	margin:-2px 5px 0 5px;
}
/*#viewSection:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    width: 0;
    height: 0;
	margin-left:-450px;
    border-style: solid;
    border-width: 25px 25px 0 25px;
    border-color: #ffdb47 transparent transparent transparent;
}*/
.viewSection-bg {
	width:100%;
	margin:0 auto;
	padding:0;
	box-sizing:border-box;
}
@media screen and (max-width: 990px) {
	#viewSection:before {
		left: 40px;
		margin-left:0px;
	}
}
@media screen and (max-width: 640px) {
	.viewSection-bg {
		padding:20px;
	}
}
@media screen and (max-width: 420px) {
	#viewSection:before {
		left: 20px;
		margin-left:0px;
		border-width: 20px 20px 0 20px;
	}
}


/* ----- .viewMenu ----- */
.viewMenu {
	float:left;
	width: 100%;
	margin:0 auto;
}
.viewMenu ul {
	list-style:none;
	display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	justify-content: center;
	 
}
.viewMenu li {
	/*float:left;*/
	width:16.66%;
	text-align:center;
	padding:0;
	box-sizing:border-box;
	vertical-align:top;
}
.viewMenu li a {
	display: inline-block;
	color:#333;
}
.viewMenu li .icon {
	display:block;
	width:120px;
	height:120px;
	padding:0 15px;
	border:solid 3px #999;
	box-sizing:border-box;
	background:#f2f2f2 no-repeat 50% 50%;
	background-size:80px auto;
	margin:0 auto;
	-webkit-border-radius:50%;
	   -moz-border-radius:50%;
			border-radius:50%;
	-webkit-transition:all 0.3s ease;
	   -moz-transition:all 0.3s ease;
	     -o-transition:all 0.3s ease;
	        transition:all 0.3s ease;
}
.viewMenu li .icon.mbt1 {
	background-image: url(../images/viewMenu-icon1.svg);	
}
.viewMenu li .icon.mbt2 {
	background-image:url(../images/viewMenu-icon2.svg);
}
.viewMenu li .icon.mbt3 {
	background-image:url(../images/viewMenu-icon3.svg);
}
.viewMenu li .icon.mbt4 {
	background-image:url(../images/viewMenu-icon4.svg);
}
.viewMenu li .icon.mbt5 {
	background-image:url(../images/viewMenu-icon5.svg);
}
.viewMenu li .icon.mbt6 {
	background-image:url(../images/viewMenu-icon6.svg);
}
.viewMenu li .icon.mbt7 {
	background-image:url(../images/viewMenu-icon7.svg);
}
.viewMenu li .icon.mbt8 {
	background-image:url(../images/viewMenu-icon8.svg);
}
.viewMenu li a:hover .icon,
.viewMenu li a:focus .icon {
	border:solid 3px #A40481;	
	background-color:#A40481;
    -webkit-transform: rotate(360deg);
	    -ms-transform: rotate(360deg);
            transform: rotate(360deg);
}
.viewMenu li a:hover .icon.mbt1,
.viewMenu li a:focus .icon.mbt1 {
	background-image: url(../images/viewMenu-icon1.svg);	
}
.viewMenu li a:hover .icon.mbt2,
.viewMenu li a:focus .icon.mbt2 {
	background-image:url(../images/viewMenu-icon2.svg);
}
.viewMenu li a:hover .icon.mbt3,
.viewMenu li a:focus .icon.mbt3 {
	background-image:url(../images/viewMenu-icon3.svg);
}
.viewMenu li a:hover .icon.mbt4,
.viewMenu li a:focus .icon.mbt4 {
	background-image:url(../images/viewMenu-icon4.svg);
}
.viewMenu li p {
	font-family: 微軟雅黑, "Microsoft YaHei";
	color:#333;
	font-size:1.8em;
	line-height:1.5;
	font-weight:bold;
	margin-top:15px;
}
.viewMenu li a:hover p,
.viewMenu li a:focus p {
	color:#A40481;
	/*text-shadow: 0px 0px 7px rgba(0,0,0,.3);*/
}
@media screen and (max-width: 1400px) {
	.viewMenu li {
		width:25%;
		margin:15px 0;
	}
}
@media screen and (max-width: 768px) {
	.viewMenu li {width:33.33%;}
}
@media screen and (max-width: 640px) {
	.viewMenu li p {font-size:1.7em;}
}
@media screen and (max-width: 520px) {
	.viewMenu li {width:50%;}
	.viewMenu li p {font-size:1.6em;}
}
@media screen and (max-width: 360px) {
	.viewMenu li .icon {
		width:100px;
		height:100px;
		background-size:60px auto;
	}
	.viewMenu li p {font-size:1.5em;}			
}


/* ----- .viewList ----- */
.viewList {
	float:left;
	width: 100%;
	margin:0 auto;
	margin-top:40px;
	border-top:1px dotted rgba(255,255,255,.8);
}
.viewList ul {
	list-style:none;
	margin:0 -15px;
}
.viewList li {
	float:left;
	width:33.333%;
	padding:0 15px;
	box-sizing:border-box;
	vertical-align:top;
	margin-top:30px;
}
.viewList li a {
	float:left;
	display:block;
	width:100%;
	color:#FFF;
	font-family: 微軟雅黑, "Microsoft YaHei";
	font-size:1.9em;
	font-weight:bold;
	padding:15px;
	background:#22335F;
	box-sizing:border-box;
}
.viewList li a span {
	position:relative;
	float:right;
	display:block;
	width:16px;
	height:16px;
	-webkit-transition:all 0.3s ease;
	   -moz-transition:all 0.3s ease;
	     -o-transition:all 0.3s ease;
	        transition:all 0.3s ease;
}
.viewList li a span:before {
	content: "";
	position: absolute;
	display: block;
	width: 14px;
	height: 2px;
	top: 1px;
	right: 1px;
	margin: 6px 0 0 0;
	background-color: #888;
}
.viewList li a span:after {
	content: "";
	position: absolute;
	display: block;
	width: 2px;
	height: 14px;
	top: 1px;
	right: 1px;
	margin:0 6px 0 0;
	background-color: #888;
}
.viewList li a:hover,
.viewList li a:focus{
	background:#9a0d5f;
}
.viewList li a:hover span,
.viewList li a:focus span{
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
}
.viewList li a:hover span:before,
.viewList li a:focus span:before {
	background-color: #FFF;
}
.viewList li a:hover span:after,
.viewList li a:focus span:after {
	background-color: #FFF;
}
@media screen and (max-width: 640px) {
	.viewList {
		margin-top:20px;
	}
	.viewList ul {
		margin-top:20px;
	}
	.viewList li {
		width:100%;
		margin-top:20px;
	}
}


/* ----- planTble ----- */
.planTble {
	width: 100%;
	border: 1px solid #CDCDCD;
	border-collapse: collapse;
	margin:20px 0;
}
.planTble th {	
	width:15%;
	color:#FFF;
	line-height:150%;
	text-align: center;
	padding:15px 0;
	border: 1px solid #EEE;
	background:#CDCDCD;
	box-sizing:border-box;
}
.planTble td {
	color: #000;
	line-height:150%;
	padding:15px;
	word-break:break-all;
	background:#FCFCFC;
	border: 1px solid #EEE;
	box-sizing:border-box;
}
.planTble td ul,
.planTble td ol {
	margin-left:1.5em;
}
.planTble #e1{
	color:#8fc31f;
	text-align:center;
	vertical-align:middle;
	background:#EBFBE3;
}
.planTble #e2{
	color:#BF8B00;
	text-align:center;
	vertical-align:middle;
	background:#FDFAE6;
}
.planTble #k1,
.planTble #k2 {
	width:25%;
	color:#8fc31f;
	text-align:center;
	vertical-align:middle;
	background:#F8FEF5;
}
.planTble #k3 {
	width:35%;
	color:#BF8B00;
	text-align:center;
	vertical-align:middle;
	background:#FEFCF5;
}
@media screen and (max-width: 640px) {
	.table {
		overflow-x:scroll;
		margin:20px 0;
	}
	.planTble {	
		width:930px;
		margin:0;
	}
	.planTble th {	
		width:100px;
		padding:10px;
	}
	.planTble td {	
		padding:10px;
	}
	.planTble #k1,
	.planTble #k2 {
		width:220px;
	}
	.planTble #k3 {
		width:350px;
	}
}
@media screen and (max-width: 320px) {
	.planTble {	
		width:890px;
	}
	.planTble th {	
		width:60px;
	}
	.planTble #k1,
	.planTble #k2 {
		width:220px;
	}
}


/* ----- totalTble ----- */
.totalTble {
	width: 100%;
	margin:20px 0;
	border:1px solid #27AD88;
	border-collapse: collapse;
}
.totalTble tr {
    background:#FFF;
}
.totalTble th {
	width:50%;
	color:#FFF;
	font-size:1rem;
	line-height:130%;
	text-align: center;
	padding:15px;
	border:1px dotted #24C98E;
	background:#7CD8BE;	
	box-sizing:border-box;
}
.totalTble th:first-of-type {
	width:20%;
}
.totalTble th:last-of-type {
	width:30%;
}
.totalTble td {
	color: #000;
	font-size:1rem;
	line-height:150%;
	padding:15px;
	border:1px dotted #24C98E;
	word-break:break-all;
	box-sizing:border-box;
}
.totalTble td:first-of-type {	
	color:#17A881;
	font-weight:bold;
	text-align: center;
	background:#E8FAF6;
}
.totalTble td ul,
.totalTble td ol {
	margin-left:1.5em;
}


/* ----- scoreTble ----- */
.scoreTble {
	width: 100%;
	margin:20px 0;
	border:1px solid #27AD88;
	border-collapse: collapse;
}
.scoreTble tr {
    background:#FFF;
}
.scoreTble th {
	width:80%;
	color:#FFF;
	font-size:1rem;
	line-height:130%;
	text-align: center;
	padding:15px;
	border:1px dotted #24C98E;
	background:#7CD8BE;	
	box-sizing:border-box;
}
.scoreTble th:last-of-type {
	width:20%;
}
.scoreTble td {
	color: #000;
	font-size:1rem;
	line-height:150%;
	text-align: center;
	padding:15px;
	border:1px dotted #24C98E;
	word-break:break-all;
	box-sizing:border-box;
}
.scoreTble td:last-of-type {	
	text-align: center;
	vertical-align:middle;
}
.scoreTble td ul,
.scoreTble td ol {
	margin-left:1.5em;
}
.scoreTble tr.total td {
	color:#17A881;
	font-weight:bold;
	text-align: center;
	background:#E8FAF6;
}
.scoreTble tr.sp td {
	color:#BF8B00;
	background:#FEFCF5;
}
.scoreTble tr.sp td:first-of-type {
	text-align:left;
}
.scoreTble tr.sp td:first-of-type span{
	display:block;
	width:100%;
	color:#FFF;
	text-align: center;
	padding:10px 0;
	background:#BF8B00;
	margin-bottom:10px;
}
@media screen and (max-width: 990px) {
	.scoreTble th {
		width:70%;
	}
	.scoreTble th:last-of-type {
		width:30%;
	}
}


/*---------------------------------------*/
/*---------------- 計畫成果 --------------*/
/*--------------------------------------*/
#achSection {
	width: 100%;
	padding:50px 0;
	margin:0 auto;
	background:#eeeeee;	
}
#achSection h2 {
	width:100%;
	color:#333;	
	font-size:3.3em;
	font-weight:bold;
	margin-bottom:40px;
	line-height:150%;
	text-align:center;
}
#achSection h2 span {
	display:block;
	position:relative;
	font-family: 微軟雅黑, "Microsoft YaHei";
	font-size:2.1rem;
	padding:5px 0;
	margin:-2px 5px 0 5px;
}
.titBox {width: 96%; list-style: none; margin: 0 auto;}
.titBox li{ float: left; text-align: center; height:152px;}
.titBox li.arch-ico1{
	width: 27%; 
	background: url(../images/arch-ico-1.png) no-repeat 0 0;
	background-size:330px auto;
}
.titBox li.arch-ico2{
	width: 27%; 
	background: url(../images/arch-ico-2.png) no-repeat 100% 0;
	background-size:330px auto;
}
.titBox li.arch-txt{width: 46%; font-size: 1.85em; color:#333; line-height:1.5; text-align:center; padding:0 0 1% 0; box-sizing:border-box; margin-top:-10px;}
.titBox li.arch-txt span{display:block;}
.complyBox { width: 100%; list-style: none; margin: 0 auto; padding: 0;} 
.complyBox li{ 
	float: left; width: 25%; text-align: center; padding:60px 0; box-sizing:border-box;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f5f5+59,ebebeb+60 */
	background: rgb(245,245,245); /* Old browsers */
	background: -moz-linear-gradient(-45deg, rgb(245,245,245) 59%, rgb(235,235,235) 60%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgb(245,245,245) 59%,rgb(235,235,235) 60%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgb(245,245,245) 59%,rgb(235,235,235) 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ebebeb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.complyBox li.mColor{ 
	color:#fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#96146e+59,9b0d31+60 */
	background: rgb(165,38,112); /* Old browsers */
	background: -moz-linear-gradient(-45deg, rgb(165,38,112) 59%, rgb(155,13,96) 60%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgb(165,38,112) 59%,rgb(155,13,96) 60%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgb(165,38,112) 59%,rgb(155,13,96) 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96146e', endColorstr='#b41e8d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.complyBox li.mColor .counter-wrapper, .complyBox li.mColor .counter-wrapper a{ color: #fff;}
.complyBox li.mColor .text-unit, .complyBox li.mColor .text-unit a{ color:#fff;}
.complyBox li p { margin: 0;}
.complyBox li.mColor .text-block, .complyBox li.mColor .text-block a{ color:#fff;}
.complyBox li .counter-wrapper{ font-size: 5.6em; font-weight:bold; color: #a01c69; font-family: "微軟雅黑", "Microsoft YaHei";}
.complyBox li .text-block{ font-size: 2.5em; font-weight:700; color:#333; margin:10px 0;}
.complyBox li .text-unit{ font-size: 2.0em; font-weight:700; color:#333; margin:10px 0;}
@media screen and (max-width: 1560px) {
    .titBox li{ height:132px;}	
	.titBox li.arch-ico1{background-size:290px auto;}
	.titBox li.arch-ico2{background-size:290px auto;}
	.titBox li.arch-txt{font-size: 1.75em; margin-top:-25px;}		
}
@media screen and (max-width: 1400px) {
    .titBox li{ height:116px;}
	.titBox li.arch-ico1{background-size:260px auto;}
	.titBox li.arch-ico2{background-size:260px auto;}
	.titBox li.arch-txt{font-size: 1.6em; line-height:1.5; padding:0; }		 
	.complyBox li .counter-wrapper{ font-size: 4.6em;}
	.complyBox li .text-block{ font-size: 2.0em;}
	.complyBox li .text-unit{ font-size: 1.6em;}	
}
@media screen and (max-width: 1300px) {
    .titBox li{ height:100px;}
	.titBox li.arch-ico1{background-size:220px auto;}
	.titBox li.arch-ico2{background-size:220px auto;}
	.titBox li.arch-txt{font-size: 1.5em; line-height:1.4; padding:0; margin-top:-10px;}		 
	.titBox li.arch-txt span{display:none;}	
	.complyBox li{ padding:48px 0;}		
}
@media screen and (max-width: 1100px) {
    .titBox li{ height:90px;}	
	.titBox li.arch-ico1{background-size:200px auto;}
	.titBox li.arch-ico2{background-size:200px auto;}	
	.titBox li.arch-txt{font-size: 1.4em; margin-top:-20px;}
}
@media screen and (max-width: 990px) {
	#achSection	.container {width:90%;}
    .titBox li{ height:126px;}	
	.titBox li.arch-ico1{width: 100%; background: url(../images/arch-ico-1.png) no-repeat 50% 0; background-size:260px auto;}
	.titBox li.arch-ico2{display:none;}
	.titBox li.arch-txt{display:none;}
	.complyBox li{ padding:30px 10px;}		
}
@media screen and (max-width: 800px) {
	.titBox li.arch-ico1{display:none;}	
	.complyBox li{width: 50%;}		
}
@media screen and (max-width: 480px) {
	.complyBox li .counter-wrapper{ font-size: 4.0em;}
	.complyBox li .text-block{ font-size: 1.8em;}
	.complyBox li .text-unit{ font-size: 1.5em;}		
}
@media screen and (max-width: 380px) {
	.complyBox li{ padding-top:20px; height:150px; box-sizing:border-box;}		
	.complyBox li .counter-wrapper{ font-size: 3.5em;}
	.complyBox li .text-block{ font-size: 1.5em; height:30px;}
	.complyBox li .text-unit{ font-size: 1.4em;}		
}