/**** blogCategoryBanner ****/
#blogCategoryBanner {margin: 0; padding: 0;}
#blogCategoryBanner .searchResult {height: 500px; position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
#blogCategoryBanner .searchResult:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1;}
#blogCategoryBanner .searchResult .searchResultBannerContent {position: relative; z-index: 2; width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
#blogCategoryBanner .searchResult .searchResultBannerContent h1 {margin: 0 0 20px 0; padding: 0 0 15px 0; color: #fff; font-size: 40px; line-height: 50px; font-weight: 600; text-align: center; position: relative; width: 100%;}
#blogCategoryBanner .searchResult .searchResultBannerContent h1:after {width: 84px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); content: "";}
#blogCategoryBanner .searchResult .searchResultBannerContent h1:before {width: 34px; height: 8px; background: #fff; border-radius: 4px; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); content: "";}
#blogCategoryBanner .searchResult .searchResultBannerContent p {margin: 0; padding: 0 100px 20px 100px; color: #fff; font-size: 24px; line-height: 34px; font-weight: 400; text-align: center; width: 100%;}

/**** blogCategory ****/
#blogCategory {margin: 0; padding: 100px 0;}
#blogCategory ul {margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center;}
#blogCategory ul li {margin: 0 15px 30px 15px; padding: 0; width: calc(33.3334% - 30px); /* background: #FFF; border-radius: 11px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1); */ transition: all ease-in-out 0.2s; display: inline-flex; flex-wrap: wrap; justify-content: center;}
#blogCategory ul li a {width: 100%; position: relative; display: flex; flex-wrap: wrap;}
#blogCategory ul li a p.imageWrapper {margin: 0; padding: 0; width: 100%; height: 240px; border-radius: 11px; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative;}
#blogCategory ul li a p.imageWrapper:before {content: ""; position: absolute; left: 0; top: 0; border-radius: 11px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);}
#blogCategory ul li a h2 {position: absolute; width: 100%; height: 100%; border-radius: 11px; font-size: 24px; font-weight: 500; color: #fff; margin: 0; padding: 0 20px; text-align: center; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
#blogCategory ul li:hover {transform: scale(1.05);}

@media only screen and (min-width: 0px) and (max-width: 575px) {#blogCategoryBanner .searchResult {height: 300px;}
    #blogCategoryBanner .searchResult .searchResultBannerContent h1 {font-size: 30px; line-height: 30px;}
    #blogCategory {padding: 80px 0;}
    #blogCategory ul {width: 100%; max-width: 400px; margin: 0 auto;}
    #blogCategory ul li {width: 100%;}
    #blogCategory ul li a p.imageWrapper {height: 210px;}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    #blogCategoryBanner .searchResult {height: 300px;}
    #blogCategoryBanner .searchResult .searchResultBannerContent h1 {font-size: 30px; line-height: 30px;}
    #blogCategory {padding: 80px 0;}
    #blogCategory ul li {width: calc(50% - 16px); margin: 0 8px 16px 8px;}
    #blogCategory ul li a p.imageWrapper {height: 210px;}
    #blogCategory ul li a h2 {font-size: 19px;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #blogCategoryBanner .searchResult {height: 340px;}
    #blogCategory {padding: 80px 0;}
    #blogCategory ul li {width: calc(50% - 16px); margin: 0 8px 16px 8px;}
    #blogCategory ul li a p.imageWrapper {height: 210px;}
    #blogCategory ul li a h2 {font-size: 22px; line-height: 32px;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #blogCategoryBanner .searchResult {height: 340px;}
    #blogCategory {padding: 80px 0;}
    #blogCategory ul li {width: calc(33.3334% - 16px); margin: 0 8px 16px 8px;}
    #blogCategory ul li a p.imageWrapper {height: 210px;}
    #blogCategory ul li a h2 {font-size: 22px; line-height: 32px;}
}