@font-face {
    font-family: 'BlackHanSans';
    font-weight: normal;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/zess/BlackHanSans.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/zess/BlackHanSans.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/zess/BlackHanSans.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/zess/BlackHanSans.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/zess/BlackHanSans.ttf') format("truetype");
    font-display: swap;
} 
.ab-container {
    margin-top: 2rem;
}
.about-outer.actionground {
    position: relative;
    display: block;
}

a.playdonation,
p.playground {
    color: #fff;
    font-size: 3.4rem;
    background: #ea6924;
    padding: 2rem 10px;
    text-align: center;
    font-weight: normal;
    margin-top: -1px;font-family: 'BlackHanSans';
}
p.playground.bottom a {color:#1475b5;}
p.playground.end a {color:#e96527;}
p.playground.bottom {    background: #efe081; color:#1475b5;font-size: 2.8rem;}
.about-actionground.bottom a,
p.playground.end {    background: #efe081; color:#e96527;font-size: 2.8rem;width: 100%;
    display: block;}
	
p.end span,
p.playground.bottom span {font-size:1.3em;}
.about-actionground {
    background: #2571b9;
	    padding: 2rem 0;	position:relative; width:100%;
}
.about-actionground.middle {
	background:#fff;
}
.about-actionground img {
background: url(../img/playground_topbg.svg) no-repeat center;	
    max-height: 600px;margin: 0 auto;
    display: block;
	width:100%;
	position:relative;
}
a.playdonation.top {
    background: #efe081;
    color: #e96527;
    font-size: 2.8rem;
    width: 100%;
    display: block;
}
.about-actionground.bottom img {
background: url(../img/playground_bottombg.svg) no-repeat center;		
}
.about-actionground.middle img {
max-height: 800px;	
background: url(../img/playground_middlebg.svg) no-repeat center;		
}
.about-actionground.white {
    background: transparent;
}
.about-actionground h2 {    font-family: 'BlackHanSans';
    font-size: 4rem;
    color: #fff; font-weight: normal;text-align: center;
}
.about-actionground h2 small{
    font-size: 3rem;
    display:block;    
}

.about-actionground.bottom ul {
    display: flex;    flex-wrap: wrap;font-family: 'BlackHanSans';margin: 2rem 0;
}
.about-actionground.bottom ul li {
    position: relative;
    margin: 2% .5%;
    transition: all .4s;
    display: flex;
    flex-direction: column;
    flex: 1 1 24%;
    background: #e96527;
    text-align: center;
    color: #111;
    padding: 10px 15px;
    max-width: 24%;
    border-radius: 7px;
	color:#fff;    font-size: 2.3rem;transition:all .4s;
}
.about-actionground.bottom ul li span {
    display: block;
    text-align: center;
    font-size: 3rem;
    width: 100px;
    margin: 0 auto;
    height: 100px;
    background: #efe081;
    line-height: 100px;
    color: #e96527;
    border-radius: 50%;
    margin-top: -50px;
    transition: all .4s;margin-bottom: 20px;
}
em a,
em {
    font-style: italic;
    color: #efe081 !important; background:none !important;font-size: 2.3rem!important;
}
.about-actionground.bottom ul li:hover em {color:#000;transition:all .4s;}
p.playground a {
    color: #fff;
}
p.finish {
font-size: 2rem;	
	color:#aaa;
}
p.end.finish {
    background: transparent;
    color: #000; font-size:2.3rem!important;font-family: 'BlackHanSans' !important;
}
.bottomtext {
	font-family: 'BlackHanSans';
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
a:hover {color:#000 !important}
.pro.description p {
    line-height: 1.7;
    font-size: 1.2rem;
    font-weight: 300;
}
@media only screen and (max-width: 768px) { 
.pro.description p {max-width:100%; }

.about-actionground.bottom ul li,
.about-actionground.bottom a, p.playground.end,
.about-actionground h2,p.playground.bottom,
a.playdonation, p.playground {
    font-size: 1.7rem;
}
p.end.finish, p.finish,
.about-actionground h2 small {    font-size: 1.4rem !important; padding:0 10px;}
a.playdonation.top {font-size: 2.3rem;}

.pro.description {
    padding: 0 10px;
}
}
@media only screen and (max-width : 639px) { 

.about-actionground.bottom ul {
    display: block;
    margin: 1rem 0;
}
.about-actionground.bottom ul li {
    display: block;
    max-width: 98%;margin-bottom: 2.8rem;
}
em {
    display: block;
	font-size:.9em;
}
}