body { padding-top:0 !important;}
.heroSection { background:#071e2e url(../../Images/AMaterial/support-banner.jpg) no-repeat center / cover; padding-top:12rem;}
.supportPageBanner { width:100%; height:250px; position:relative; background:url(../../Images/AMaterial/support-banner-after.svg) no-repeat center / auto 100%; text-align:center;}
.supportPageBanner h1 { font-size:3.438rem; color:#fff;}
.supportPageBanner .searchBar { position:relative; display:inline-block; width:500px; margin-top:2.5rem;}
.supportPageBanner .searchBar input { padding:0.3rem 2.5rem .3rem 1.3rem;}
.supportPageBanner .searchBar .angucomplete-dropdown { width:100%;}
.supportPageBanner p { font-size:1.375rem; color:#fff;}

.supportBox { background:#f7f8fa;}
.supportBoxCard { background:#fff; margin-bottom:30px; padding:20px 30px; border-radius:4px; text-align:center; box-shadow:0 2px 6px #4d5c651a;}
.supportBoxCard:hover { box-shadow:0 3px 6px rgb(51 69 79 / 30%);}
.supportCardImg { width:50px; height:50px; margin:auto;}

.supportTypeTitle { font:500 24px 'Roboto', Arial, Helvetica, sans-serif; color:#333;}
.supportTypeBox { display:inline-block; width:100%; min-height: 67px; padding:20px 15px; margin-bottom:20px; background:#f8f8f8; text-align:center; box-shadow:0 1px 2px 0 rgba(0,0,0,.15); transition:all 0.2s;}
.supportTypeBox:hover { background:#f4f4f4; cursor:pointer;}
.supportTypeBox.active { background:#eee;}
.supportTypeBox img { width:72px;}
.supportTypeBox .typeTitle { display:block; margin-top:5px; color:#666; font:300 18px 'Roboto', Arial, Helvetica, sans-serif;}

.supportCategoryTitle { color:#333; font:500 18px 'Roboto', Arial, Helvetica, sans-serif; margin-top:0;}
.supportCategoryBox { display:inline-block; padding:10px 15px; margin-right:15px; margin-bottom:15px; background:#f4f4f4; color:#333;}
.supportCategoryBox:hover { color:#00cafd; cursor:pointer;}
.supportCategoryBox.active { background:#eee;}
.supportCategoryBox .categoryName { font:16px 'Roboto', Arial, Helvetica, sans-serif;}
.noCategory { color:#666; font:300 14px 'Roboto', Arial, Helvetica, sans-serif; margin-top:-10px;}

.supportSubCategoryTitle { color:#333; font:500 16px 'Roboto', Arial, Helvetica, sans-serif; margin-bottom:10px;}
.supportSubCategoryTitle i { font-size:20px; line-height:18px;}
.supportSubCategoryBox { background:#f4f4f4; color:#000; font:300 15px/30px 'Roboto', Arial, Helvetica, sans-serif; display:inline-block; padding:0 15px; margin:5px; position:relative; border-radius:16px; cursor:pointer;}
.supportSubCategoryBox:hover { color:#00cafd;}
.supportSubCategoryBox.active { background:#eee;}
.noSubCategory { color:#666; font:300 14px 'Roboto', Arial, Helvetica, sans-serif; margin-top:-5px; margin-left:25px;}

.supportArticleListTitle { color:#333; font:500 16px 'Roboto', Arial, Helvetica, sans-serif; margin-bottom:5px;}
.supportArticleListTitle i { font-size:20px; line-height:18px;}
.supportArticleListItem { display:inline-block; padding-left:25px; color:#00cafd; font:16px 'Roboto', Arial, Helvetica, sans-serif;}
.supportArticleListItem:hover { color:#0293ef; text-decoration:underline; cursor:pointer;}
.noArticle { color:#666; font:300 14px 'Roboto', Arial, Helvetica, sans-serif; margin-top:0; margin-left:25px;}

.supportArticle { background:#f7f8fa; padding-top:72px; padding-bottom:60px;}
.breadcrumb { display:flex; align-items:center; color:#001623; margin-top:20px; margin-bottom:20px;}
.breadcrumb a { color:#4b94ef;}

.supportArticleBox { max-width:70%; background:#fff; box-shadow:0 2px 6px #4d5c651a; border-radius:4px; padding:3em 2rem 1em 2em;}
.supportPost { padding:0 2rem;}
.supportPost h1 { font-size:2.25rem; color:#1a2d39; margin-bottom:2rem;}
.supportPost .mainImg { width:100%; margin:1rem 0;}
.supportPost ul { margin-top:initial; margin-bottom:initial; padding-left:initial;}

.articalBtn .btn { background-color:#e6e8e9; padding:4px 42px;}
.articalBtn { margin:4rem 0 1rem; padding:2rem 0; display:flex; align-items:center; justify-content:center; border-top:1px solid #e6e8e9; border-bottom:1px solid #e6e8e9;}
.articalBtn h3 { margin-right:20px;}

.StillNeed { display:flex; align-items:center; justify-content:space-between;}
.StillNeed h4 { display:flex; align-items:center; color:#1a2d39;}
.StillNeed h4 .material-icons { margin-right:5px;}
.StillNeed a { color:#ff008a;}
/****************************************************************************************************/
@media screen and (min-width:0) and (max-width:768px)
{
  .mob-hide { display:none;}
  .supportCategoryBox { width:100%;}
  
  .searchBar, .supportPageBanner .searchBar { width:100%;}
  .heroSection { padding-top:7rem;}
  .supportPageBanner h1 { font-size:2.438rem;}
  .supportPageBanner h1 img { width:35px;}
  .supportPageBanner { background:none;}

  .supportArticleBox { max-width:100%; padding:2em 0; box-shadow:none;}
  .supportPost h1 { font-size:1.5rem; margin-bottom:1rem;}
  .articalBtn { display:block; text-align:center;}
  .StillNeed { display:block;}
  .breadcrumb { display:block;}
  .supportPageBanner p { font-size:1rem }
}