@charset "utf-8";
/***************************************
    copyright by MakeWeb.com.tw 
***************************************/

/*-------------------------------------------- 
	內頁
---------------------------------------------*/
.canvas_post p {
	color: #5B565A;
	font-size: 1.8rem;
	line-height: 2;
}
section img{
	width: 100%;
}
.stakeholder h2{
	color: #007AC6;
	font-weight: bold;
}
.stakeholder h2:before{
	color: #007AC6;
	font-weight: bold;
	/*content: "▎";*/
	content: "▏";
	margin-right: -16px;
}

.stakeholder .content{
	margin-top: 60px;
}

.stakeholder .text{
	margin-top: 40px;
}
.stakeholder > div:nth-child(2) {
	margin-top: 30px;
}
.stakeholder .button{
	margin-top: 40px;
}

.column{
	display: flex;
}
.column div{
	flex:1;
}
.bg1{
	background: #e6e6e6;
	border-radius:20px;
	padding: 30px;
	height: 50%;
	margin:10px;
}
.bg2{
	background: #e6e6e6;
	border: #fff solid 2px ;
	border-radius:20px;
	padding: 30px;
}
.bg2 h1{
	color: #828484;
}


.stakeholder  .button a{
	display: inline-block;
	padding: 10px 20px;
	background: #4E97D1;
	border-radius: 20px;
	color: #fff;
}
.stakeholder  .button a:hover{
	color: #333;
	text-decoration: none;
}
.stakeholder .two-column{
	display: flex;
	align-items:center;
}
.stakeholder .content .text{
	flex:1;
}
.stakeholder .content .images{
	flex:1.5;
}
.stakeholder .content .images h4{
	color: #007bc7;
	text-align: center;
}
.stakeholder .img_28_2{
	display: flex;			
}
.img_26 img{
	margin-top:60px;
}
.img_28 img{
	margin-top:60px;
}
.img_28_2 img{
	margin-top:60px;
}
/*-------------------------------------------- 
	Media Queries 
---------------------------------------------*/
/* Portrait and Landscape */
/*@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
}*/

@media screen and (max-width: 1279px) {
	.column{
		flex-wrap:wrap;
	}
	.stakeholder .img_28_2{
		flex-wrap:wrap;
	}
	.stakeholder .content img:nth-child(2){
		margin-top: 60px;
	}

}


/*iPad*/
@media screen and (max-width: 1023px) {

}

/*iPhoe*/
@media screen and (max-width: 767px) {
	.column{
		flex-direction:column;
	}
	.bg1{
		margin: 10px 0 0 ;
	}
	.bg2{
		text-align: center;
		padding: 5px;
	}
	.stakeholder .content{
		margin-top: 30px;
	}
	.stakeholder .content img:nth-child(2){
		margin-top: 30px;
	}
	.img_26 img{
		margin-top:30px;
	}
	.img_28 img{
		margin-top:30px;
	}
	.img_28_2 img{
		margin-top:30px;
	}

}