#sloganBox{overflow:hidden;position:relative;padding: 0 0;color: #1e1e1e;background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;}
#sloganBox section{padding: 3% 0;display: flex;flex-direction: column;}
#sloganBox h3{
    text-align: center;
    font-size: 28px;
    margin-bottom: 10px;
    text-align: justify;
    font-weight: 700;
    border-bottom: 1px solid #70717538;
    margin: 0 auto 30px;
    width: 96%;
    padding-bottom: 20px;
    color: #4a4b4d;
    display: flex;
    flex-direction: column;
}
#sloganBox h3 span{
    font-size: 24px;
    width:100%;
    font-weight: 300;
}
#sloganBox h3 span.reed{
    color: #f46263;
    font-size: 34px;
    font-weight: 500;
}
#sloganBox p{
    text-align: justify;
    font-size: 18px;
    width: 95%;
    margin: 0 auto;
    color: #767676;
    font-weight: 300;
}
#sloganBox p.tobo{
    color: #686565;
}
#sloganBox ul{text-align:center;margin-top: 40px;}
#sloganBox ul li{margin:0 1%;width:30%;display:inline-block;-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-ms-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp;vertical-align:top;}
#sloganBox ul li:nth-child(2){-webkit-animation-delay:0.5s;-moz-animation-delay:0.5s;-ms-animation-delay:0.5s;-o-animation-delay:0.5s;animation-delay:0.5s;}
#sloganBox ul li:nth-child(3){-webkit-animation-delay:1s;-moz-animation-delay:1s;-ms-animation-delay:1s;-o-animation-delay:1s;animation-delay:1s;}
#sloganBox ul li p i{margin:0 auto 20px;width: 90px;height: 90px;display:block;border: 1px #1e1e1e38 solid;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;text-align:center;line-height:100px;font-size: 30px;}
#sloganBox ul li:hover p i{background: #ffffff17;}
 #sloganBox ul li p:hover i{
    -webkit-animation: tada 1s;
    animation: tada 1s;
  }


@-webkit-keyframes tada {
   0% {-webkit-transform: scale(1);transform: scale(1);} 
   10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);transform: scale(0.9) rotate(-3deg);} 
   30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);transform: scale(1.1) rotate(3deg);} 
   40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);transform: scale(1.1) rotate(-3deg);} 
   100% {-webkit-transform: scale(1) rotate(0);transform: scale(1) rotate(0);} 
}
@keyframes tada {
   0% {-webkit-transform: scale(1);transform: scale(1);} 
   10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);transform: scale(0.9) rotate(-3deg);} 
   30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);transform: scale(1.1) rotate(3deg);} 
   40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);transform: scale(1.1) rotate(-3deg);} 
   100% {-webkit-transform: scale(1) rotate(0);transform: scale(1) rotate(0);} 
} 
#sloganBox ul li h4{margin-bottom:10px;font-size: 23px;text-align:center;color: #f46263;}
#sloganBox ul li article{margin:auto;width: 100%;height:65px;text-align:center;font-size: 17px;color: #858585;overflow:hidden;font-weight: 300;}
@media screen and (max-width:480px) {
    #sloganBox{
    margin-top: 0px;
}
#sloganBox ul{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#sloganBox ul li article{
    height:auto;
}
#sloganBox ul li{
    width: 100%;
    margin-bottom: 50px;
}
}