#banner-intro-section {
    position: relative;
    text-align: center;
    padding: 100px 0;
    background-color: rgba(var(--custom-rgb-color-primary-light),1);
}
#banner-intro-section .title-row,
#banner-intro-section .content-row,
#banner-intro-section .btn-row {
    position: relative;
}
#banner-intro-section .title-row+.content-row {
    margin-top: 20px;
}
#banner-intro-section .title-row+.btn-row,
#banner-intro-section .content-row+.btn-row {
    margin-top: 30px;
}

/* ============================================================================================== */
/* ========================================== PROJECT SEARCH ==================================== */
/* ============================================================================================== */

#project-search-section {
    position: relative;
    border-bottom: 10px solid rgba(var(--custom-rgb-color-gray-light),1);
    padding-bottom: 60px;
    margin-bottom: 20px;
}
#project-search-section hr {
    margin-top: 40px;
    margin-bottom: 0;
    display: none !important;
}

/* ============================================================================================== */
/* ========================================== PROJECT RESULT ==================================== */
/* ============================================================================================== */

#project-section {
    min-height: 500px;
}
#project-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed,
#project-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed>.sf-box-fixed {
    width: 426.67px;
}
#project-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed>.sf-box-fixed {
    padding-right: 100px;
    /* background-color: rgba(255,255,0,0.5); */
}
#project-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-content {
    width: calc((100% / 3) * 2);
    /* background-color: rgba(255,0,0,0.5); */
}
#project-section #search-result-section .card-block-row.project.inline .card-block.project {
    width: calc(100% / 2);
}
#project-section #search-result-section .container {
    padding: 0 !important;
}

/* --------------------------------------------------------------- */
/* ---------------------------- TOPIC ---------------------------- */
/* --------------------------------------------------------------- */

#project-section .topic-section {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    /* background:rgba(0,0,0,0.1); */
}
#project-section .topic-section .title-row + .content-row  {
    margin-top: 40px;
}
#project-section .topic-section .title-row .description {
    margin-top: 5px;
    color: rgba(var(--custom-rgb-color-gray-dark),1);
}
#project-section .topic-section .content-row>.on-desktop {
    display: block;
}
#project-section .topic-section .content-row>.on-mobile {
    display: none;
}
#project-section .topic-section .search-row {
    margin-top: auto;
    padding-top: 80px;
}

/* search */
#search-zone-section {
    position: relative;
}
#search-zone-section>.title {
    position: relative;
    margin-bottom: 5px;
}
#search-zone-section>.note {
    position: relative;
    margin-top: 20px;
    display: flex;
    align-items: baseline;
    display: none !important;
}
#search-zone-section .shortcut-filter-btn {
    color: rgba(var(--custom-rgb-color-black),1) !important;
    border-color: rgba(var(--custom-rgb-color-primary-light),1) !important;
    background-color: rgba(var(--custom-rgb-color-primary-light),1) !important;
}
#search-zone-section .shortcut-filter-btn:hover,
#search-zone-section .shortcut-filter-btn.selected {
    color: rgba(var(--custom-rgb-color-white),1) !important;
    border-color: rgba(var(--custom-rgb-color-primary),1) !important;
    background-color: rgba(var(--custom-rgb-color-primary),1) !important;
}

/* --------------------------------------------------------------- */
/* ------------------------- PROJECT TYPE ------------------------- */
/* --------------------------------------------------------------- */

#project-type-menu-section .project-type-menu-row.on-desktop {
    margin-top: 50px;
}
#project-type-menu-section .project-type-menu-row.on-desktop .project-type-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 20px;
}
#project-type-menu-section .project-type-menu-row.on-desktop .project-type-menu-item {
    border: 1px solid rgba(0,0,0,0.08);
    border-left: none;
    border-right: none;
    background-color: rgba(var(--custom-rgb-color-primary-light),0) !important;
    transition: background-color 0.3s ease;
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -ms-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
}
#project-type-menu-section .project-type-menu-row.on-desktop .project-type-menu-item:hover {
    background-color: rgba(var(--custom-rgb-color-primary-light),1) !important;
}
#project-type-menu-section .project-type-menu-row.on-desktop .project-type-menu-item+.project-type-menu-item {
    border-top: none !important;
}
#project-type-menu-section .project-type-menu-row.on-desktop .project-type-menu-item>.icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    font-size: 45px;
    line-height: 50px;
    text-align: center;
    color: rgba(var(--custom-rgb-color-primary),1) !important;
}
#project-type-menu-section .project-type-menu-row.on-desktop .project-type-menu-item>.icon>img {
    position: relative;
    max-width: 100%;
}
#project-type-menu-section .project-type-menu-row.on-desktop .project-type-menu-item>.detail {
    position: relative;
    padding-left: 15px;
}
#project-type-menu-section .project-type-menu-row.on-desktop .project-type-menu-item>.detail>.text-title {}
#project-type-menu-section .project-type-menu-row.on-desktop .project-type-menu-item>.detail>.text-description {
    color: rgba(var(--custom-rgb-color-gray-dark),1) !important;
}

#project-type-menu-section .project-type-menu-row.on-mobile {
    display: none;
    width: calc(100% + 40px);
    margin-top: 30px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 30px 0;
}

/* xxl */
@media (min-width: 1400px) {}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {

/* ============================================================================================== */
/* ========================================== PROJECT RESULT ==================================== */
/* ============================================================================================== */

#project-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed,
#project-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed>.sf-box-fixed {
    width: 366.66px;
}

}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {

/* ============================================================================================== */
/* ========================================== PROJECT RESULT ==================================== */
/* ============================================================================================== */

#project-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed,
#project-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed>.sf-box-fixed {
    width: 306.66px;
}

}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {

.scroll-fixed-box>.sf-box-inside {
    flex-wrap: wrap !important;
    height: auto;
}
#project-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed,
#project-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed>.sf-box-fixed {
    width: 100% !important;
}

#project-section .topic-section .title-row + .content-row {
    margin-top: 30px;
}
#project-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed>.sf-box-fixed {
    padding: 0 0 30px 0 !important;
}

#banner-intro-section {
    padding: 50px 0;
} 

/* --------------------------------------------------------------- */
/* ---------------------------- TOPIC ---------------------------- */
/* --------------------------------------------------------------- */

#project-section .topic-section {
    min-height: auto;
}
#project-section .topic-section .search-row {
    display: none;
}

}

/* sm - xs */
@media (max-width: 767.98px) {

.scroll-fixed-box>.sf-box-inside {
    flex-wrap: wrap !important;
    height: auto;
}
#project-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed,
#project-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed>.sf-box-fixed {
    width: 100% !important;
}


/* ============================================================================================== */
/* ========================================== PROJECT TOPIC ===================================== */
/* ============================================================================================== */

#project-section .topic-section .title-row + .content-row {
    margin-top: 20px;
}
#project-section .topic-section .title-row,
#project-section .topic-section .content-row {
    text-align: center;
}
#project-section .topic-section .title-row .description {
    margin-top: 0;
}
#project-section .topic-section .content-row>.on-desktop {
    display: none;
}
#project-section .topic-section .content-row>.on-mobile {
    display: block;
}


/* --------------------------------------------------------------- */
/* ---------------------------- TOPIC ---------------------------- */
/* --------------------------------------------------------------- */

#project-section .topic-section {
    min-height: auto;
}
#project-section .topic-section .search-row {
    display: none;
}


#project-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed>.sf-box-fixed {
    padding: 0 0 30px 0 !important;
}

#banner-intro-section {
    padding: 50px 0;
}

/* --------------------------------------------------------------- */
/* ---------------------------- SEARCH --------------------------- */
/* --------------------------------------------------------------- */

#project-search-section {
    position: relative;
    padding-bottom: 40px;
    margin-bottom: 0;
}

/* --------------------------------------------------------------- */
/* ---------------------------- RESULT --------------------------- */
/* --------------------------------------------------------------- */

#project-section #search-result-section .card-block-row.project.inline .card-block.project {
    width: 100%;
}
#project-section #search-result-section .card-block.project>.card-block-inner {
    margin-bottom: 30px;
}

}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {}

/* xs */
@media (max-width: 575.98px) {

/* --------------------------------------------------------------- */
/* ------------------------- PROJECT TYPE ------------------------- */
/* --------------------------------------------------------------- */

#project-type-menu-section .project-type-menu-row.on-mobile {
    display: block;
}
#project-type-menu-section .project-type-menu-row.on-desktop {
    display: none;
}

}

/* xs custom */
@media (max-width: 399.98px) {}