.box27 {
background: #fffff4;
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #ff9b9b;
}
.box27 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 17px;
background: #ff9b9b;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box27 p {
margin: 0; 
padding: 0;
} .box30 {
margin: 2em 0;
background: #f1f1f1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
font-size: 1.2em;
background: #17184b;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box30 p {
padding: 15px 20px;
margin: 0;
}
.box26 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #17184b;
border-radius: 8px;
}
.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #ff9b9b;
font-weight: bold;
}
.box26 .box-title:before{
content: "\f046";
font-family: FontAwesome;
padding-right: 6px;
font-size: 20px;
color: #17184b;
}
.box26 p {
margin: 0; 
padding: 0;
}
ul.arrowList li{
list-style:none;
padding-left:1.5rem;
position:relative;
}
ul.arrowList li:before,
ul.arrowList li:after{
content:"";
display:block;
position:absolute;
}
ul.arrowList li:before{
width:12px;height:12px;
border-radius:2px;
background:#8CC4D9;
left:0;
top:5px;
}
ul.arrowList li:after{
border:3px solid transparent;
border-left-color:#fff;
left:5px;
top:8px;
}
.box2 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #f9e96c;
border-radius: 8px;
}
.box2 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #FF837B;
font-weight: bold;
}
.box2 p {
margin: 0; 
padding: 0;
}