#menuWrapper.inactive{/* display: block; *//* position: fixed; */}
#banner { background-image: url(../../common/images/volunteer/top_banner.jpg); }

#sc { position: fixed; }
ul#catList>li{ margin-right: 115px; }

.coming { position: relative; }
.coming span {display: none;position: absolute;width: 80px;height:29px;z-index:1;background: url(../../common/images/comingsoon.png) no-repeat 0 0;bottom: -5px;}
.coming:hover span { display: block; }

.txtComingSoon { padding: 40px 21px; margin: 0 auto; width: 909px; }

.desc {/* font-size: 20px; *//* font-family: 'MyriadPro-Regular', Microsoft JhengHei, Arial, sans-serif; */}
.section { position: relative; }
.section.row1 {/* height: 390px; */  width: 100%;}
.section.row1 .bg { position: absolute; top:0; left:0; width:100%;height: 300px; /*background: url(../../common/images/volunteer/volunteer.jpg) no-repeat center center;*/}
.section.row1 .bg.no-motion { background: url(../../common/images/volunteer/volunteer.jpg) no-repeat center center; }
.section.row1 .bg .text_box { position: relative; display: block; margin: 0 auto; width: 56%;/* min-width:768px; */ height:100%; overflow: hidden;}
.section.row1 .bg .text_box .char { 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}
.sectionTitleChi{ line-height: 36px; letter-spacing:25px; padding-left: 21px;}
.sectionTitleEng{ font-size:12px; letter-spacing:3px;line-height: 24px; font-family: "Times New Roman", Times, serif;}
.section.row2 .section-row.first .desc-box {
    padding-left: 0px;
}

.section.row2 .section-row.second .desc-box {
    padding-right: 0px;
}

.section.row1 .bg .text_box .char.pc1 {/* width: 202px; *//* height: 132px; *//* background: url(../../common/images/animated-text/volunteer/letter-001.png) no-repeat 0 0; *//* background-size: contain; */}
.section.row1 .bg .text_box .char.pc2 {/* width: 95px; *//* height: 120px; *//* background: url(../../common/images/animated-text/volunteer/letter-002.png) no-repeat 0 0; *//* background-size: contain; */}
.section.row1 .bg .text_box .char.pc3 {/* width: 246px; *//* height: 204px; *//* background: url(../../common/images/animated-text/volunteer/letter-003.png) no-repeat 0 0; *//* background-size: contain; */}
.section.row1 .bg .text_box .char.pc4 {/* width: 121px; *//* height: 23px; *//* background: url(../../common/images/animated-text/volunteer/letter-004.png) no-repeat 0 0; *//* background-size: contain; */}
.section.row1 .bg .text_box .char.pc5 {/* width: 172px; *//* height: 133px; *//* background: url(../../common/images/animated-text/volunteer/letter-005.png) no-repeat 0 0; *//* background-size: contain; */}
.section.row1 .text {position: relative; top:0; left:0; width:100%;height: 300px; display: table;}
.section.row1 .page-title { position: relative; display: table-cell; text-align: center; vertical-align: middle; font-size: 22px; letter-spacing: 10px; color: #986A50; }
.section.row1 .line { color: #986A50; margin-bottom: 10px; }
.section.row1 .line.chi { font-size: 22px; letter-spacing: 25px; text-indent: 25px;text-align: center;      letter-spacing: 15px;      padding-left: 13px;      line-height: 25px;      font-size: 16px;      letter-spacing: 10px;      color: #986A50;      text-align: center;      padding-left: 20px;      line-height: 36px;}
.section.row1 .line.eng { font-family: "Times New Roman", Times, serif;font-size: 14px; letter-spacing: 3px;width: 60%;margin: 0 auto;line-height: 16px;text-align: justify;}
.section.row1 .page-desc { position:absolute; bottom: 22%; left:0; width: 100%; font-size: 18px; text-align: center; }

.section.row2 { background-color: #efebe0;padding: 50px 0; overflow: hidden;  z-index: 5;}
.section.row2 .section-row { margin: 50px auto; width: 100%; text-align: center; }
.section.row2 .section-row .desc-box { display: inline-block; padding: 0 20px; vertical-align: middle; }
.section.row2 .section-row .desc-box .header {/* color: #956b52; *//* font-size: 62pt; *//* line-height: 80pt; *//* width: 142px; *//* margin: 30px auto 50px; */color: #986A50;      text-align: center;/* font-size: 36px; */      letter-spacing: 2px;padding-bottom: 10px;border-bottom: 1px #986A50 solid;width: 40px;margin: 0 auto;font-size: 40px;      letter-spacing: 10px;line-height: 60px;}
.section.row2 .section-row .desc-box .header .underline { display:inline-block; bottom: 0; left:0;width: 54px; height:1px; background-color: #956b52; margin-top: 30px;display: none;}
.section.row2 .section-row .desc-box .desc { width: 285px;padding: 2px;padding-top: 50px;text-align: justify;font-family: serif;}
.section.row2 .section-row .pic-box {display: inline-block;vertical-align: middle;}
.section.row2 .section-row .pic-box img { width: 100%; height: auto; max-width: 600px;}

.section.row3 { background-color: #986a50; }
.section.row3 .header {font-size: 26pt;color: #fff;/* letter-spacing: 30px; *//* text-indent: 30px; *//* text-align: center; *//* margin: 30px 0; *//* width: 100%; *//* display: inline-block; */text-align: center;/* font-size: 36px; */      letter-spacing: 2px;padding-bottom: 10px;/* border-bottom: 1px #986A50 solid; */width: 400px;      margin: 0 auto;padding-top: 35px;}
.section.row3 .header .underline { display:inline-block; bottom: 0; left:0; width: 60px; height:1px; background-color: #fff; margin-top: 30px; }
.section.row3 ul {
    /* display: inline-block; */
    text-align: center;
    margin: 40px 0;
    max-width: 830px;
    padding: 0;
    margin: 0 auto;
    padding-bottom: 30px;
    padding-top: 60px;
    width: 90%;
}

.section.row3 ul li { display: inline-block; text-align: center;/* margin: 0 18px; *//* font-size: 16px; */ color: #fff;line-height: 20px;width: 32%;vertical-align: top;margin-bottom: 40px;}
.section.row3 ul li .icon {width: 109px; height: 109px; background: url(../../common/images/volunteer/icon-quality.png) no-repeat;margin: 0 auto;margin-bottom: 15px;}
.section.row3 ul li .icon.pray {background-position: -2px 0;}
.section.row3 ul li .icon.footstep {background-position: -109px 0;}
.section.row3 ul li .icon.brain {background-position: -217px 0;}
.section.row3 ul li .icon.home {background-position: -324px 0;}
.section.row3 ul li .icon.team {background-position: -432px 0;}
.section.row3 ul li .icon.hearthand {background-position: -541px 0;}

.section.row4 { background-color: #efebe0; }
.section.row4 .desc-box { display: inline-block;width: 50%; vertical-align: middle;}
.section.row4 .desc-box .header { font-size: 26pt; color: #986a50; letter-spacing: 30px;/* text-indent: 30px; */ text-align: center; margin: 30px 0; width: 100%;/* display: inline-block; */color: #986A50;/* text-align: justify; *//* font-size: 36px; */      letter-spacing: 2px;      padding-bottom: 10px;/* border-bottom: 1px #986A50 solid; */width: 430px;      margin: 0 auto;}
.section.row4 .desc-box .header .underline { display:inline-block; bottom: 0; left:0; width: 60px; height:1px; background-color: #986a50; margin-top: 30px; }
.section.row4 .desc-box .desc {     width: 60%;
    margin: 10px auto;
    text-align: justify;
    font-family: serif;}
.section.row4 .pic-box { display: inline-block; width: 50%; height:524px; vertical-align: middle; background: url(../../common/images/volunteer/side-service.jpg) no-repeat center center; background-size:cover; }

.section.row5 { background-color: #fff; }
.section.row5 .tag-title {padding: 20px 0;font-size: 16pt;text-align:center;color: #fff;letter-spacing: 2px;/* text-indent: 25px; */background-color: #986a50;}
.section.row5 .desc-box { width: 100%; margin: 80px 0; display: inline-block; }
.section.row5 .desc-box .desc {text-align: justify; width: 50%; margin: 30px auto 90px;    font-family: serif;}
.section.row5 .desc-box .join-now { text-align:center; }
.section.row5 .desc-box .join-now-txt {/* font-size: 18pt; */ color: #986a50;}
.section.row5 .desc-box .btn-join { display:inline-block; text-align: center;/* font-size: 18px; */ color: #986a50; border: 1px solid #986a50;padding: 8px 35px !important;background-color: #FFFFFF;/* outline: none; */ margin-top: 30px; cursor:pointer;font-family: serif;transition: 500ms ease-out;      -moz-transition: 500ms ease-out;      -webkit-transition: 500ms ease-out;      -o-transition: 500ms ease-out;      -ms-transition: 500ms ease-out; text-decoration: none;}
.content_wrapper ul,.content_wrapper li,.content_wrapper div{vertical-align:top;text-align: left;}
.section.row2 .content_wrapper .brief{ font-size: 18px; max-width: 820px; width: 60%; margin: 0 auto; padding-bottom: 50px;}
.section.row2 .list_wrapper{max-width: 900px;width: 90%;margin: 0 auto;position: relative;text-align: center;}
.section.row2 .list_wrapper #share-list{display:inline-block;/* margin: 0 auto; *//* left: 0; *//* right: 0; */}
.section.row2 .list_wrapper #share-list .grid-list{margin: 0 auto;/* display:inline-block; *//* width: 33%; *//* min-width:300px; */z-index: 20;/* left: 0; *//* right: 0; */width: 300px;}
.section.row2 .list_wrapper #share-list .grid-list .list-content{ padding: 20px 20px;}
.section.row2 .list_wrapper #share-list .grid-list .list-content .profile{ display: block; width:100%; height:auto; }
.section.row2 .list_wrapper #share-list .grid-list .list-content .profile img{width:100%;}
.section.row2 .list_wrapper #share-list .grid-list .list-content .details{ background-color:#FFF; padding: 20px 20px;}
.section.row2 .list_wrapper #share-list .grid-list .list-content .details .topic{ padding-top:5px; padding-bottom:10px; font-size:15px;  }
.section.row2 .list_wrapper #share-list .grid-list .list-content .details .topic .name{ color:#986A50; font-size: 18px; line-height: 1.5; }
.section.row2 .list_wrapper #share-list .grid-list .list-content .details .topic .date{ float:right; font-size: 12px; margin-top: -21px;}
.section.row2 .list_wrapper #share-list .grid-list .list-content .details .paragraph{ overflow: hidden; height:75px;}
.section.row2 .list_wrapper #share-list .grid-list .list-content .details .paragraph p{ font-size:15px; text-align: justify; font-family: serif; line-height: 1.5; color: #4C4C4E;}
.section.row2 .list_wrapper #share-list .grid-list .list-content .push-btn{ text-align:center; width:100%; height:30px; background-color:#FFF; cursor:pointer;}
.section.row2 .list_wrapper #share-list .grid-list .list-content .push-btn .img1{width:30px;height: auto;margin-top:4px;/* transform: rotate(180deg); */}
.section.row2 .list_wrapper #share-list .grid-list .list-content .push-btn .img2{ width:30px; height: auto; margin-top:4px; opacity:0; display:none;}
[data-columns]::before{
	opacity: 0;
}


#2{z-index:-10;}
@-webkit-keyframes fadeinout1 {
  0%,100% { opacity: 0; }
  50%,80% { opacity: .5; }
}

@keyframes fadeinout1 {
  0%,100% { opacity: 0; }
  50%,80% { opacity: .5; }
}

@-webkit-keyframes charmove1 {
    0%   { 
		-ms-transform: scale(1,1);
		-webkit-transform: scale(1,1); 
		transform: scale(1,1); 
		-ms-transform-origin: 0% 50%;
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		filter: alpha(opacity=20);
		-moz-opacity:0.2;
		-khtml-opacity: 0.2;
		opacity: 0.2;
	}
    50%  { 
		-ms-transform: scale(1.5,1.5); -webkit-transform: scale(1.5,1.5); transform: scale(1.5,1.5); 
		-ms-transform-origin: 0% 50%;
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		filter: alpha(opacity=40);
		-moz-opacity:0.4;
		-khtml-opacity: 0.4;
		opacity: 0.4;
	}
    100% { 
		-ms-transform: scale(1,1);
		-webkit-transform: scale(1,1); 
		transform: scale(1,1); 
		-ms-transform-origin: 0% 50%;
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		filter: alpha(opacity=20);
		-moz-opacity:0.2;
		-khtml-opacity: 0.2;
		opacity: 0.2;
	}
} 

@keyframes charmove1 {
    0%   { 
		-ms-transform: scale(1,1);
		-webkit-transform: scale(1,1); 
		transform: scale(1,1); 
		-ms-transform-origin: 0% 50%;
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		filter: alpha(opacity=20);
		-moz-opacity:0.2;
		-khtml-opacity: 0.2;
		opacity: 0.2;
	}
    50%  { 
		-ms-transform: scale(1.5,1.5); -webkit-transform: scale(1.5,1.5); transform: scale(1.5,1.5); 
		-ms-transform-origin: 0% 50%;
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		filter: alpha(opacity=40);
		-moz-opacity:0.4;
		-khtml-opacity: 0.4;
		opacity: 0.4;
	}
    100% { 
		-ms-transform: scale(1,1);
		-webkit-transform: scale(1,1); 
		transform: scale(1,1); 
		-ms-transform-origin: 0% 50%;
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		filter: alpha(opacity=20);
		-moz-opacity:0.2;
		-khtml-opacity: 0.2;
		opacity: 0.2;
	}
}

@-webkit-keyframes charmove2 {
    0%   { 
		-ms-transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); 
		filter: alpha(opacity=50);
		-moz-opacity:0.5;
		-khtml-opacity: 0.5;
		opacity: 0.5;
	}
    50%  { 
		-ms-transform:  translate(50px,-10px) scale(1,1); -webkit-transform:  translate(50px,-10px) scale(1,1); transform:  translate(50px,-10px) scale(1,1); 
		filter: alpha(opacity=30);
		-moz-opacity:0.3;
		-khtml-opacity: 0.3;
		opacity: 0.3;
	}
    100%  { 
		-ms-transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); 
		filter: alpha(opacity50);
		-moz-opacity:0.5;
		-khtml-opacity: 0.5;
		opacity: 0.5;
	}
} 

@keyframes charmove2 {
    0%   { 
		-ms-transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); 
		filter: alpha(opacity=50);
		-moz-opacity:0.5;
		-khtml-opacity: 0.5;
		opacity: 0.5;
	}
    50%  { 
		-ms-transform: translate(30px,-10px) scale(1,1); -webkit-transform: translate(30px,-10px) scale(1,1); transform: translate(30px,-10px) scale(1,1); 
		filter: alpha(opacity=30);
		-moz-opacity:0.3;
		-khtml-opacity: 0.3;
		opacity: 0.3;
	}
    100%  { 
		-ms-transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); 
		filter: alpha(opacity50);
		-moz-opacity:0.5;
		-khtml-opacity: 0.5;
		opacity: 0.5;
	}
}

@-webkit-keyframes charmove3 {
    0%   { 
		-ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); 
		filter: alpha(opacity=30);
		-moz-opacity:0.3;
		-khtml-opacity: 0.3;
		opacity: 0.3;
	}
    50%  { 
		-ms-transform:  translate(-40px,-10px) scale(1,1); -webkit-transform:  translate(-40px,-10px) scale(1,1); transform:  translate(-40px,-10px) scale(1,1); 
		filter: alpha(opacity=50);
		-moz-opacity:0.5;
		-khtml-opacity: 0.5;
		opacity: 0.5;
	}
    100%  { 
		-ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); 
		filter: alpha(opacity=30);
		-moz-opacity:0.3;
		-khtml-opacity: 0.3;
		opacity: 0.3;
	}
} 

@keyframes charmove3 {
    0%   { 
		-ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); 
		filter: alpha(opacity=30);
		-moz-opacity:0.3;
		-khtml-opacity: 0.3;
		opacity: 0.3;
	}
    50%  { 
		-ms-transform:  translate(-40px,-10px) scale(1,1); -webkit-transform:  translate(-40px,-10px) scale(1,1); transform:  translate(-40px,-10px) scale(1,1); 
		filter: alpha(opacity=50);
		-moz-opacity:0.5;
		-khtml-opacity: 0.5;
		opacity: 0.5;
	}
    100%  { 
		-ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); 
		filter: alpha(opacity=30);
		-moz-opacity:0.3;
		-khtml-opacity: 0.3;
		opacity: 0.3;
	}
}

@-webkit-keyframes charmove4 {
    0%   { 
		-ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); 
		filter: alpha(opacity=30);
		-moz-opacity:0.3;
		-khtml-opacity: 0.3;
		opacity: 0.3;
	}
    50%  { 
		-ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); 
		filter: alpha(opacity=60);
		-moz-opacity:0.6;
		-khtml-opacity: 0.6;
		opacity: 0.6;
	}
    100%  { 
		-ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); 
		filter: alpha(opacity=30);
		-moz-opacity:0.3;
		-khtml-opacity: 0.3;
		opacity: 0.3;
	}
} 

@keyframes charmove4 {
    0%   { 
		-ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); 
		filter: alpha(opacity=30);
		-moz-opacity:0.3;
		-khtml-opacity: 0.3;
		opacity: 0.3;
	}
    50%  { 
		-ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); 
		filter: alpha(opacity=60);
		-moz-opacity:0.6;
		-khtml-opacity: 0.6;
		opacity: 0.6;
	}
    100%  { 
		-ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); 
		filter: alpha(opacity=30);
		-moz-opacity:0.3;
		-khtml-opacity: 0.3;
		opacity: 0.3;
	}
}

@-webkit-keyframes charmove5 {
    0%   { 
		-ms-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); 
		filter: alpha(opacity=60);
		-moz-opacity:0.6;
		-khtml-opacity: 0.6;
		opacity: 0.6;
	}
    50%  { 
		-ms-transform: translate(-40px,-10px) scale(1,1); -webkit-transform: translate(-40px,-10px) scale(1,1); transform: translate(-40px,-10px) scale(1,1); 
		filter: alpha(opacity=30);
		-moz-opacity:0.3;
		-khtml-opacity: 0.3;
		opacity: 0.3;
	}
    100%  { 
		-ms-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); 
		filter: alpha(opacity=60);
		-moz-opacity:0.6;
		-khtml-opacity: 0.6;
		opacity: 0.6;
	}
} 

@keyframes charmove5 {
    0%   { 
		-ms-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); 
		filter: alpha(opacity=60);
		-moz-opacity:0.6;
		-khtml-opacity: 0.6;
		opacity: 0.6;
	}
    50%  { 
		-ms-transform: translate(-40px,-10px) scale(1,1); -webkit-transform: translate(-40px,-10px) scale(1,1); transform: translate(-40px,-10px) scale(1,1); 
		filter: alpha(opacity=30);
		-moz-opacity:0.3;
		-khtml-opacity: 0.3;
		opacity: 0.3;
	}
    100%  { 
		-ms-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); 
		filter: alpha(opacity=60);
		-moz-opacity:0.6;
		-khtml-opacity: 0.6;
		opacity: 0.6;
	}
}

.section.row1 .bg .text_box .char.pc1 { 
	position: absolute; top: -11px;left: 20px;
	-webkit-animation: charmove1 10s infinite; /* Safari 4+ */
	-moz-animation:    charmove1 10s infinite; /* Fx 5+ */
	-o-animation:      charmove1 10s infinite; /* Opera 12+ */
	animation:         charmove1 10s infinite; /* IE 10+, Fx 29+ */
}
.section.row1 .bg .text_box .char.pc2 {
	position: absolute;
	bottom: -7px;
	left: 2px;
	-webkit-animation: charmove2 10s infinite;/* Safari 4+ */
	-moz-animation:    charmove2 10s infinite;/* Fx 5+ */
	-o-animation:      charmove2 10s infinite;/* Opera 12+ */
	animation:         charmove2 10s infinite;/* IE 10+, Fx 29+ */
}
.section.row1 .bg .text_box .char.pc3 {
	position: absolute;
	bottom: -25px;
	left: 124px;
	-webkit-animation: charmove3 10s infinite;/* Safari 4+ */
	-moz-animation:    charmove3 10s infinite;/* Fx 5+ */
	-o-animation:      charmove3 10s infinite;/* Opera 12+ */
	animation:         charmove3 10s infinite;/* IE 10+, Fx 29+ */
}
.section.row1 .bg .text_box .char.pc4 { 
	position: absolute; top: 28px;right: 73px; 
	-webkit-animation: charmove4 10s infinite; /* Safari 4+ */
	-moz-animation:    charmove4 10s infinite; /* Fx 5+ */
	-o-animation:      charmove4 10s infinite; /* Opera 12+ */
	animation:         charmove4 10s infinite; /* IE 10+, Fx 29+ */
}
.section.row1 .bg .text_box .char.pc5 { 
	position: absolute; top: 60px;right: 20px; 
	-webkit-animation: charmove5 10s infinite; /* Safari 4+ */
	-moz-animation:    charmove5 10s infinite; /* Fx 5+ */
	-o-animation:      charmove5 10s infinite; /* Opera 12+ */
	animation:         charmove5 10s infinite; /* IE 10+, Fx 29+ */
}

#ink1 {
    opacity: 0;
    -webkit-animation: fadeinout1 10s linear infinite;
    animation: fadeinout1 10s linear infinite;
    background: url(../../common/images/volunteer/water1.png);
    width: 40%;
    height: 906px;
    position: absolute;
    top: -145px;
    left: -186px;
    background-size: 110%;
    background-repeat: no-repeat;
    opacity: .7;
    background-size: 100%;
}
.content_wrapper #ink1 {
    opacity: 0;
    -webkit-animation: fadeinout1 10s linear infinite;
    animation: fadeinout1 10s linear infinite;
    background: url(../../common/images/volunteer/water1.png);
    width: 40%;
    height: 906px;
    position: absolute;
    top: 50px;
    left: 100px;
    background-size: 110%;
    background-repeat: no-repeat;
    opacity: .7;
    background-size: 100%;
	z-index:-1;
}
#ink4 {
    opacity: 0;
    -webkit-animation: fadeinout1 10s linear infinite;
    animation: fadeinout1 10s linear infinite;
    background: url(../../common/images/water1.png);
    width: 16%;
    height: 306px;
    position: absolute;
    /* top: 0px; */
    bottom: 100px;
    right: 82px;
    background-size: 110%;
    background-repeat: no-repeat;
    opacity: .5;
    background-size: 100%;
    background-position: 0;
    z-index: -1;
}
.section_desc_wrapper {
    position: relative;
    background-image: url(../../common/images/volunteer/second_volunteers_ban.jpg);
    /* z-index: 123; */
    height: 300px;
}

.section_desc {
    text-align: center;
    top: 38%;
    position: relative;
    color: #fff;
	line-height: 1.5;
    font-family: FangSong, "仿宋", STSong, "华文宋体";
	font-size: 14px;
	letter-spacing: 3;
}
.section.row5 .desc-box .btn-join:hover {
	background-color: #986A50;
	color: #FFFFFF;
	border: 1px solid #986A50;
}
@media screen and (min-width: 1024px){
	#share-list[data-columns]::before {
		content: '3 .columns.size-1of3';
	}

	/* These are the classes that are going to be applied: */
	.columns{float:left;}
	.size-1of3 { width: 33%; }
}
@media screen and (min-width:681px) and ( max-width: 1024px){
	#share-list[data-columns]::before {
		content: '2 .columns.size-1of2';
	}
	/* These are the classes that are going to be applied: */
	.columns{float:left;}
	.size-1of2 { width: 50%;}
}
@media screen and (max-width: 767px) {
	.content_wrapper #ink1{
		top:-30px;
		left:0px;
	}
	/* .section.row2 .list_wrapper #share-list .grid-list {width: 100%;} */
	ul#catList {
		/* width: 490px; */
		height: 53px;
		/* overflow-x: auto; */
		text-align: center;
		white-space: nowrap;
	}
	.section.row2 .list_wrapper{
		width: 100%;
	}
	.section.row2 .list_wrapper #share-list .grid-list {
		/* min-width:100px; */
	}
	.section.row2 .list_wrapper #share-list .grid-list .list-content .details .topic .date{
		margin-top: -40px;
	}
	.section.row3 ul {
		/* display: inline-block; */
		text-align: center;
		margin: 40px 0;
		width: 90%;
		padding: 0;
		margin: 0 auto;
		padding-bottom: 30px;
		padding-top: 60px;
	}
	.section.row3 ul li{
		width: 40%;
	}
	.section.row1 .page-desc {
		position: absolute;
		bottom: 22%;
		left: 50px;
		width: 90%;
		font-size: 18px;
		text-align: center;
	}
	.section.row4 {
		background-color: #efebe0;
		padding: 40px 0;
	}
	.section.row4 .desc-box{
		width: 95%;
		left: 0;
		right: 0;
		margin: 0 auto;
		display: block;
		margin-bottom: 20px;
	}
	.section.row4 .desc-box .header{
		width: 95%;
	}
	.section.row4 .desc-box .desc{
		width: 90%;
		line-height: 1.25em;
	}
	.section.row4 .pic-box{
		width: 90%;
		height: 40%;
		left: 0;
		right: 0;
		margin: 0 auto;
		display: block;
	}
	.section.row2 .section-row .desc-box .desc {
		/* width: 575px; */
		padding: 2px;
		padding-top: 50px;
		text-align: left;
		padding-bottom: 20px;
	}
	.section.row2 .section-row .desc-box .desc {
		/* width: 575px; */
		padding: 2px;
		padding-top: 50px;
		/* text-align: left; */
		padding-bottom: 20px;
		width: 100%;
	}

	.sectionTitleChi {
		text-align: center;
		color: #986A50;
		letter-spacing: 25px;
		padding-left: 13px;
		line-height: 25px;
		letter-spacing: 21px;
		color: #986A50;
		text-align: center;
		padding-left: 20px;
		font-size: 22px;
		line-height: 36px;
	}

	.sectionTitleEng {
		text-align: center;
		color: #986A50;
		letter-spacing: 3px;
		line-height: 24px;
		font-family: "Times New Roman", Times, serif;
		font-size: 12px;
	}

	button.btn-join:hover {
		background-color: #986A50;
		color: #FFFFFF;
		border: 1px solid #986A50;
	}

	.btn-join {
		background-color: #986A50;
		color: #FFFFFF;
		border: 1px solid #986A50;
	}

	.section.row5 .desc-box .btn-join:hover {
		background-color: #986A50;
		color: #FFFFFF;
		border: 1px solid #986A50;
	}
	ul#catList>li:hover {
		cursor: pointer;
		color: #000000;
		transition: all 0.8s;
		color: none;
	}

	.desc-box{
		width: 90%;
	}
	.section.row2 .section-row{
		margin: 0 auto;
		margin-bottom: 30px;
	}
	.section.row2 .section-row .desc-box{
		padding: 0;
	}
	.section_desc{
		/* width: 80%; */
		left: 0;
		right: 0;
		margin: 0 auto;
		transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-moz-opacity: translateY(-50%);
		letter-spacing: 1;
	}
	.section.row5 .desc-box{
		width: 90%;
		display: block;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.section.row5 .desc-box .desc{
		width: 100%;
		margin-bottom: 20px;
	}
	.section.row5 .desc-box .join-now{
		margin-bottom:30px;
	}
	.section.row1 .bg .text_box{
		width: 100%;
	}

	.section.row1 .bg .text_box .char.pc4{
		right: 0;
	}
	.section.row3 .header{
		width: 100%
	}
}
@media screen and (max-width: 680px){
	#share-list[data-columns]::before {
		content: '1 .columns.size-1of1';
	}
	/* These are the classes that are going to be applied: */
	/* .columns{float: c;} */
	.size-1of1 { width: 100%; margin: 0 auto; position: relative; left:0;}
}
@media screen and (max-width: 990px) {
	.section.row2 .section-row .pic-box{
		width: 90%;
		/* margin-left: 5px; */
	}
}