#box-pen { float: left; width: 100%; padding: 80px 0; margin: 0; text-align: center; background-color: #ebebeb }
.box-pen { float: left; width: 100%; margin: 0 0 0; position: relative }
.box-pen li { padding: 0; position: relative; list-style: none; float: left; width: 24%; margin: 0 15px 0 0 }
.box-pen li span { margin: 0; padding: 20px 0 0; display: inline-block }
.box-pen li:last-child { margin: 0 }
.box-pen li a { padding: 80px 0 0 0; margin: 0; display: block }
.box-pen li#icon1 a { background: url(../images/home-icon1.png); background-repeat: no-repeat; background-position: top 0 center }
.box-pen li#icon2 a { background: url(../images/home-icon2.png); background-repeat: no-repeat; background-position: top 0 center }
.box-pen li#icon3 a { background: url(../images/home-icon3.png); background-repeat: no-repeat; background-position: top 0 center }
.box-pen li#icon4 a { background: url(../images/home-icon4.png); background-repeat: no-repeat; background-position: top 0 center }
.box-pen h3 { font-size: 28px; color: #223d9a; font-weight: normal; margin:0px; padding:25px 0; }
@media only screen and (max-width:1360px) {
#box-pen { padding: 50px 0 }
}
@media only screen and (max-width:1200px) {
.box-pen li { margin: 0 }
.box-pen li#icon1 a h3, .box-pen li#icon2 a h3, .box-pen li#icon3 a h3, .box-pen li#icon4 a h3 { font-size: 25px; line-height: 30px }
}
@media only screen and (max-width:980px) {
.box-pen { text-align: center }
.box-pen li { width: 38%; float: none; display: inline-block; margin: 0 10px 30px; vertical-align: top }
.box-pen li h3 br { display: none }
}
@media only screen and (max-width:767px) {
.box-pen li { width: 42% }
}
@media only screen and (max-width:560px) {
.box-pen li#icon1 a h3, .box-pen li#icon2 a h3, .box-pen li#icon3 a h3, .box-pen li#icon4 a h3 { font-size: 20px; line-height: 30px }
#box-pen { padding: 30px 0 }
.box-pen li { width: 70%; margin: 0 0 30px }
}
@media only screen and (max-width:420px) {
.box-pen li { width: 100% }
}