
/*首頁翻轉*/
.index_icon{ text-align:center; color:#FFF;display: table; width:100%; position:relative; z-index:20}
.index_icon div{
	padding-top: 80px;
	padding-right: 20px;
	padding-bottom: 80px;
	padding-left: 20px;
	cursor: pointer;
}
.index_icon div h2{
	color:#FFF;
	width:100%;
	padding-top: 30px;
	padding-bottom: 0px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: rgba(255, 255, 255, 0.8) ;
	margin-bottom:10px;
}
.index_icon div h2 img{width:100%; max-width:166px;}
.index_icon div>img{ width:100%; max-width:130px;}
.index_icon div p,.index_icon figcaption p{ padding-bottom:0px;}

.index_icon figure span{
	display:block;
	width:100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	height: 100%;
}

.index_icon figure span img{ display:block; margin-left:auto; margin-right:auto;    width: 100%;}
.index_icon figure:nth-of-type(1) figcaption span{
	background-image: url(../images/index/index_photo1.jpg);
}
.index_icon figure:nth-of-type(2) figcaption span{
	background-image: url(../images/index/index_photo2.jpg);
}
.index_icon figure:nth-of-type(3) figcaption span{
	background-image: url(../images/index/index_photo3.jpg);
}
.index_icon figure:nth-of-type(4) figcaption span{
	background-image: url(../images/index/index_photo4.jpg);
}
.index_icon figure:nth-of-type(5) figcaption span{
	background-image: url(../images/index/index_photo5.jpg);
}
.index_icon figure:nth-of-type(6) figcaption span{
	background-image: url(../images/index/index_photo6.jpg);
}
.index_icon figcaption p,.index_icon figcaption a{
display:block;
	width:90%;
	max-width:200px;
	margin-right: auto;
	margin-left: auto;
}
.index_icon figcaption dd{ padding-bottom:20px; width:100%}
.index_icon figcaption p{ line-height:130%;}
.index_icon figcaption h4{
	padding-top: 15px;
	padding-bottom: 0px;
	font-weight: bold;
}
.index_icon figcaption a{
	-webkit-border-radius: 5px;
	color:#FFFFFF;
	border-radius: 5px;
	background-color:#2e8e90;
	padding-top:5px;
	padding-bottom:5px;
	margin-top:10px;
}
.index_icon figcaption a::After {
	content: "\f105";
	margin-left: 5px;
	font-family: FontAwesome;
	font-size: 18px;
	font-style: normal;
	line-height: 1;
	font-weight: normal;
	font-variant: normal;
}

.index_icon figure{display: table-cell;position: relative; width:16.6%;}
.index_icon figure:nth-of-type(1) div,.index_icon figure:nth-of-type(1) figcaption{ background-color:#ff9292}
.index_icon figure:nth-of-type(2) div,.index_icon figure:nth-of-type(2) figcaption{ background-color:#dfc075}
.index_icon figure:nth-of-type(3) div,.index_icon figure:nth-of-type(3) figcaption{ background-color:#23c3c4}
.index_icon figure:nth-of-type(4) div,.index_icon figure:nth-of-type(4) figcaption{ background-color:#70a6dd}
.index_icon figure:nth-of-type(5) div,.index_icon figure:nth-of-type(5) figcaption{ background-color:#b588ca}
.index_icon figure:nth-of-type(6) div,.index_icon figure:nth-of-type(6) figcaption{ background-color:#ffbb92}

.index_icon figure:nth-of-type(1) figcaption a{background-color:#ca595a;}
.index_icon figure:nth-of-type(2) figcaption a{background-color:#b89647;}
.index_icon figure:nth-of-type(3) figcaption a{background-color:#2e8e90;}
.index_icon figure:nth-of-type(4) figcaption a{background-color:#567fac;}
.index_icon figure:nth-of-type(5) figcaption a{background-color:#8d659f;}
.index_icon figure:nth-of-type(6) figcaption a{background-color:#bf7f57;}


/*捐款說明翻轉*/
.open_cnt{ margin-top:50px; padding-bottom:60px;}
.open_cnt figure{
	width:31.5%;
	display:inline-block;
	vertical-align: top;
	height:390px;
}
.open_cnt figure:nth-of-type(2){ margin-left:2%; margin-right:2%;}
.open_cnt figure div{
	background-repeat: no-repeat;
	background-position: center top;
	background-image: url(../images/donate/open_li1.png);
	
	position:relative;
	padding-top:265px;
	text-align:center;
	color:#FFFFFF;
	height:100%;
	
}
.open_cnt figure div h2{color:#FFFFFF;padding-bottom: 0px; }
.open_cnt figure figcaption h3{color:#FFFFFF;padding-bottom: 10px; }
.open_cnt figure div h2 img{ width:90%; max-width:348px}
.open_cnt figure div>span>img{
	position:absolute;
	right:0px;
	bottom: 0px;
}
.open_cnt figure figcaption{
	color:#fff;
	background-image: url(../images/index/index_li22.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	text-align:center;
	padding-top: 150px;
	padding-right: 20px;
	padding-left: 20px;
}
.open_cnt figure figcaption a{	
-webkit-border-radius: 5px;
	color:#FFFFFF;
	border-radius: 5px;
	background-color:#b89647;
	padding-top:10px;
	padding-bottom:10px;
	margin-top:10px; display:inline-block; width:90%; max-width:220px;}
.open_cnt figure figcaption td{
	text-align: left;
	vertical-align: top;
	line-height: 150%;
	padding-bottom: 5px;
}
.open_td {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e893a7;
	margin-bottom:10px;
}
.open_cnt figure:nth-of-type(1) div,.open_cnt figure:nth-of-type(1) figcaption{background-color: #d5ad4d;}
.open_cnt figure:nth-of-type(2) div,.open_cnt figure:nth-of-type(2) figcaption{background-color: #2fbcbd;}
.open_cnt figure:nth-of-type(3) div,.open_cnt figure:nth-of-type(3) figcaption{background-color: #dd6380;}
.open_cnt figure:nth-of-type(2) div{background-image: url(../images/donate/open_li2.png);}
.open_cnt figure:nth-of-type(3) div{background-image: url(../images/donate/open_li3.png);}
.open_cnt figure:nth-of-type(2) figcaption{background-image: url(../images/index/index_li12.png);padding-top: 120px;}
.open_cnt figure:nth-of-type(2) figcaption a{background-color:#2e8e90;}
.open_cnt figure:nth-of-type(3) figcaption{background-image: url(../images/index/index_li32.png);padding-top: 60px;}

.index_icon div dt{ padding-bottom:10px!important;}



@media (max-width: 1290px) {
.service_text p{ font-size:17px;}
}


@media (max-width: 1210px) {
	.index_icon figure,.open_cnt figure{
    display: inline-block;
    width: 33%;	/*height:440px;*/

}
.open_cnt figure div{ background-size:120%;}
.open_cnt figure:nth-of-type(2) figcaption{padding-top: 100px;}
.open_cnt figure:nth-of-type(2){ margin-left:0%; margin-right:0%;}
.open_cnt figure:nth-of-type(3) figcaption{padding-top: 30px;}
	
}
@media (max-width: 800px){
	.index_icon figure h2 span img{ display:none}.index_icon figure h2{ margin-bottom:0px}
		.index_icon figure{
       display: inline-block;
    width: 50%;
    height: auto;
	margin-left: -3px;
margin-right: -3px;
}

.open_cnt figure{
       display: inline-block;
    width: 100%;
    height: auto;
	margin-left: -3px;
margin-right: -3px;
}


.open_cnt figure div{
	background-size:auto;
	background-position: left center;padding-top:30px
}
.open_cnt figure div>span{ display:inline-block; margin-top:5%; margin-left:40%;}
.open_cnt figure{ margin-bottom:20px; }
.open_cnt figure figcaption,.open_cnt figure:nth-of-type(2) figcaption{ padding-bottom:30px; padding-top: 40px;}

	}
@media (max-width: 600px) {
	.index_icon figure { display: block;
    width: 100%;margin-left:0px;}
	.index_icon div dl,.index_icon figcaption dl{
	display: table;
	width:100%;
	text-align: center;
	height:100%;
}



	.index_icon div dt,.index_icon div dd,.index_icon figcaption dt,.index_icon figcaption dd{display: table-cell;	vertical-align: middle;}
	.index_icon div dt{ width: 40%; min-width:130px;}
	.index_icon figcaption dt{ width:25%; height:100%}
	.index_icon figcaption dt img{ width:100%;height:100%}
	.index_icon div dt img{ display:block; margin-left:auto; margin-right:auto;}
	.index_icon  dd,.index_icon div h2,.index_icon h4{
	text-align:left;

}
.figurefx figcaption span{ height:100%}
.index_icon figcaption dd p br{ display:none}
.index_icon figcaption dd p{
max-width:100%;width:100%;}
 .index_icon figcaption a { width:45%;max-width:45%; display:inline-block; text-align:center; margin-right: 5px;}
.index_icon dd{ padding-left:20px;}
	.index_icon div h2{
	padding-top: 0px;
	border-top-style: none;

}
.index_icon div{ padding:10px;}
	}
	
@media (max-width: 360px) {
	.index_icon div dt img{ width:100%;}
	.index_icon div dt {
    width: 35%;
    min-width: 35%;
}
	}