.pep-document-banner .por-section {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.pep-document-banner .por-section-head {
    padding-bottom: 24px
}

.pep-document-banner .por-section-title {
    font-size: 44px;
    line-height: 66px
}

.pep-document-banner .por-section-subtitle {
    margin-bottom: 0;
    margin-top: 20px
}

.pep-document-banner .document-banner-search {
    height: 64px
}

.pep-document-banner .document-search-box {
    background-color: var(--por-color-background-white);
    border-radius: 32px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .078);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .078);
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 980px;
    z-index: 1
}

.pep-document-banner .por-text-input {
    border: none;
    font-size: 16px;
    height: 64px;
    padding: 0 64px;
    width: 100%
}

.pep-document-banner .por-text-input:focus~.por-icon,
.pep-document-banner .por-text-input:hover~.por-icon,
.pep-document-banner .por-text-input~.por-icon:hover {
    color: var(--por-color-text-primary)
}

.pep-document-banner .document-search-box>.por-icon {
    color: var(--por-color-text-weak);
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    top: 22px
}

.pep-document-banner .document-search-box>.por-icon.por-icon-search {
    left: 32px;
    border: none;
    background: none;
}

.pep-document-banner .document-search-box>.por-icon.por-icon-close {
    display: none;
    right: 32px
}

.pep-document-banner .document-search-box>.por-icon.por-icon-close.show {
    display: block
}

.pep-document-banner .document-search-droplist {
    max-height: 500px;
    overflow: auto;
    padding: 4px 32px 32px
}

.pep-document-banner .document-search-droplist li:not(.featured-title):not(.featured-item) a:not(.por-link-more) {
    display: block;
    left: -32px;
    position: relative;
    width: calc(100% + 64px)
}

.pep-document-banner .document-search-droplist li:not(.featured-title):not(.featured-item) a:not(.por-link-more):hover {
    background-color: #f5f5f5
}

.pep-document-banner .document-search-droplist li:not(.featured-title):not(.featured-item) a:not(.por-link-more) .color_text_primary_dark {
    font-weight: var(--por-base-font-weight-bold)
}

.pep-document-banner .document-search-droplist li:not(.featured-title):not(.featured-item).active a:not(.por-link-more) {
    background-color: #f5f5f5
}

.pep-document-banner .featured-title {
    margin-bottom: 8px
}

.pep-document-banner .featured-item {
    display: inline-block;
    margin: 8px 8px 0 0
}

.pep-document-banner .featured-item .featured {
    border: 1px solid var(--por-base-color-gray-40);
    display: inline-block;
    font-size: 14px;
    line-height: 30px;
    padding: 0 24px;
    -webkit-transition: .2s;
    transition: .2s;
    white-space: nowrap
}

.pep-document-banner .featured-item .featured:hover {
    border-color: var(--por-base-color-gray-90);
    color: var(--por-color-text-primary) !important
}

.pep-document-banner .docentry {
    padding: 12px 32px
}

.pep-document-banner .docentry>span {
    display: block;
    margin-bottom: 8px
}

.pep-document-banner .docentry .por-btn {
    border-color: var(--por-base-color-gray-40)
}

.pep-document-banner .searchall {
    line-height: 38px;
    padding: 0 32px
}

.pep-document-banner .searchall+.por-link-more {
    display: block;
    font-weight: var(--por-base-font-weight-bold);
    padding-bottom: 8px;
    padding-top: 16px
}

.pep-document-banner .searchall+.por-link-more .por-icon {
    font-size: 16px;
    margin-top: -3px
}

.pep-document-banner .splitline {
    margin-top: 32px;
    position: relative
}

.pep-document-banner .splitline:before {
    border-top: 1px solid #d8d8d8;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: -20px
}

.pep-document-banner .document-banner-wtsnew {
    background-color: #fff;
    border-radius: 16px;
    margin-top: 76px;
    padding: 16px 32px
}

.pep-document-banner .document-banner-wtsnew .document-wtsnew-box {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-icon {
    -ms-flex-negative: 0;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    flex-shrink: 0;
    height: 32px;
    margin-right: 20px;
    width: 32px
}

.pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-title {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: var(--por-base-font-weight-bold);
    line-height: 28px
}

.pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-line {
    -ms-flex-negative: 0;
    background-color: var(--por-color-background-gray);
    flex-shrink: 0;
    height: 18px;
    margin: 0 28px;
    width: 1px
}

.pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-desc {
    color: var(--por-color-text-primary);
    font-size: 16px;
    line-height: 24px
}

.pep-document-banner .document-banner-wtsnew .por-carousel-wrapper {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.pep-document-banner .document-banner-wtsnew .por-link:not(:hover) {
    -webkit-text-decoration: none;
    text-decoration: none
}

.pep-document-banner .document-banner-wtsnew .por-link:hover {
    font-weight: 400
}

.pep-document-banner .product-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 76px
}

.pep-document-banner .document-banner-wtsnew+.product-container {
    margin-top: 40px
}

.pep-document-banner .hot-product,
.pep-document-banner .recommend-product {
    background-color: var(--por-color-background-white);
    border-radius: 24px;
    padding: 40px 40px 48px
}

.pep-document-banner[data-theme=grey] .hot-product,
.pep-document-banner[data-theme=grey] .por-card,
.pep-document-banner[data-theme=grey] .por-tab-container,
.pep-document-banner[data-theme=grey] .recommend-product {
    background-color: var(--por-color-background-gray-2)
}

.pep-document-banner .por-row {
    margin-left: -16px;
    margin-right: -16px
}

.pep-document-banner .por-col {
    padding-left: 16px;
    padding-right: 16px
}

.pep-document-banner .por-card {
    display: block;
    padding: 0
}

.pep-document-banner .por-card .por-card-icon span {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block
}

.pep-document-banner .por-card .por-card-content .por-text-body-t1 {
    color: var(--por-color-text-secondary);
    padding-top: 0
}

.pep-document-banner .por-card:hover .por-text-title-t3 {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.pep-document-banner .por-text-title-t3 {
    font-size: 18px;
    line-height: 28px
}

.pep-document-banner .por-text-title-t7 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    color: var(--por-color-text-primary);
    justify-content: space-between;
    margin-bottom: 40px
}

.pep-document-banner .por-text-title-t7 .por-link {
    font-size: 18px
}

.pep-document-banner .hot-product {
    width: 73%;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.pep-document-banner .hot-product .por-row {
    margin-bottom: -48px
}

.pep-document-banner .hot-product .por-col {
    margin-bottom: 48px
}

.pep-document-banner .hot-product .por-card .por-card-icon {
    margin-bottom: 16px
}

.pep-document-banner .hot-product .por-card .por-card-icon span {
    height: 52px;
    width: 52px
}

.pep-document-banner .hot-product .por-card .por-card-content .por-text-title-t3 {
    margin-bottom: 8px
}

.pep-document-banner .recommend-product {
    margin-left: 24px
}

.pep-document-banner .recommend-product .por-row {
    margin-bottom: -36px
}

.pep-document-banner .recommend-product .por-col {
    margin-bottom: 36px
}

.pep-document-banner .recommend-product .por-card-align-left .por-card-icon.por-card-icon-horizontal {
    padding-right: 20px
}

.pep-document-banner .recommend-product .por-card-align-left .por-card-icon.por-card-icon-horizontal span {
    height: 40px;
    width: 40px
}

.pep-document-banner .recommend-product .por-card-align-left .por-card-content .por-text-title-t3 {
    margin-bottom: 4px
}

.pep-document-banner .por-tab-container {
    display: none
}

@media (max-width:1600px) {
    .pep-document-banner .por-section-head {
        padding-bottom: 20px
    }

    .pep-document-banner .por-section-title {
        font-size: 36px;
        line-height: 54px
    }

    .pep-document-banner .por-section-subtitle {
        font-size: 14px;
        line-height: 22px;
        margin-top: 16px
    }

    .pep-document-banner .document-search-box {
        border-radius: 28px
    }

    .pep-document-banner .document-banner-search {
        height: 56px
    }

    .pep-document-banner .por-text-input {
        font-size: 14px;
        height: 56px
    }

    .pep-document-banner .document-search-box>.por-icon {
        font-size: 16px;
        top: 20px
    }

    .pep-document-banner .document-banner-wtsnew {
        margin-top: 60px;
        padding: 14px 28px
    }

    .pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-icon {
        height: 24px;
        margin-right: 16px;
        width: 24px
    }

    .pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-title {
        font-size: 14px;
        line-height: 22px
    }

    .pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-line {
        height: 16px;
        margin: 0 24px
    }

    .pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-desc {
        font-size: 14px;
        line-height: 22px
    }

    .pep-document-banner .product-container {
        margin-top: 60px
    }

    .pep-document-banner .document-banner-wtsnew+.product-container {
        margin-top: 32px
    }

    .pep-document-banner .hot-product,
    .pep-document-banner .recommend-product {
        padding: 32px 32px 40px
    }

    .pep-document-banner .hot-product .por-text-title-t3,
    .pep-document-banner .recommend-product .por-text-title-t3 {
        font-size: 16px;
        line-height: 24px
    }

    .pep-document-banner .hot-product .por-text-body-t1,
    .pep-document-banner .recommend-product .por-text-body-t1 {
        font-size: 12px;
        line-height: 18px
    }

    .pep-document-banner .por-row {
        margin-left: -14px;
        margin-right: -14px
    }

    .pep-document-banner .por-col {
        padding-left: 14px;
        padding-right: 14px
    }

    .pep-document-banner .por-text-title-t7 {
        font-size: 22px;
        line-height: 34px;
        margin-bottom: 32px
    }

    .pep-document-banner .por-text-title-t7 .por-link {
        font-size: 16px
    }

    .pep-document-banner .hot-product .por-row {
        margin-bottom: -32px
    }

    .pep-document-banner .hot-product .por-col {
        margin-bottom: 32px
    }

    .pep-document-banner .hot-product .por-card .por-card-icon {
        margin-bottom: 12px
    }

    .pep-document-banner .hot-product .por-card .por-card-icon span {
        height: 42px;
        width: 42px
    }

    .pep-document-banner .hot-product .por-card .por-card-content .por-text-title-t3 {
        margin-bottom: 8px
    }

    .pep-document-banner .recommend-product .por-row {
        margin-bottom: -28px
    }

    .pep-document-banner .recommend-product .por-col {
        margin-bottom: 28px
    }

    .pep-document-banner .recommend-product .por-card-align-left .por-card-icon.por-card-icon-horizontal {
        padding-right: 16px
    }

    .pep-document-banner .recommend-product .por-card-align-left .por-card-icon.por-card-icon-horizontal span {
        height: 36px;
        width: 36px
    }
}

@media (max-width:1280px) {
    .pep-document-banner .por-section-head {
        padding-bottom: 16px
    }

    .pep-document-banner .por-section-title {
        font-size: 30px;
        line-height: 46px
    }

    .pep-document-banner .por-section-subtitle {
        margin-top: 12px
    }

    .pep-document-banner .document-search-box {
        border-radius: 24px
    }

    .pep-document-banner .document-banner-search {
        height: 48px
    }

    .pep-document-banner .por-text-input {
        font-size: 12px;
        height: 48px;
        padding: 0 46px
    }

    .pep-document-banner .document-search-box>.por-icon {
        top: 16px
    }

    .pep-document-banner .document-search-box>.por-icon.por-icon-search {
        left: 24px
    }

    .pep-document-banner .document-search-box>.por-icon.por-icon-close {
        display: none;
        right: 24px
    }

    .pep-document-banner .document-search-box>.por-icon.por-icon-close.show {
        display: block
    }

    .pep-document-banner .document-banner-wtsnew {
        margin-top: 52px;
        padding: 11px 24px
    }

    .pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-icon {
        height: 22px;
        margin-right: 14px;
        width: 22px
    }

    .pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-title {
        font-size: 12px;
        line-height: 18px
    }

    .pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-line {
        height: 14px;
        margin: 0 20px
    }

    .pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-desc {
        font-size: 12px;
        line-height: 18px
    }

    .pep-document-banner .product-container {
        margin-top: 52px
    }

    .pep-document-banner .document-banner-wtsnew+.product-container {
        margin-top: 24px
    }

    .pep-document-banner .hot-product,
    .pep-document-banner .recommend-product {
        padding: 28px 28px 32px
    }

    .pep-document-banner .hot-product .por-text-title-t3,
    .pep-document-banner .recommend-product .por-text-title-t3 {
        font-size: 14px;
        line-height: 22px
    }

    .pep-document-banner .por-row {
        margin-left: -10px;
        margin-right: -10px
    }

    .pep-document-banner .por-col {
        padding-left: 10px;
        padding-right: 10px
    }

    .pep-document-banner .por-text-title-t7 {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 28px
    }

    .pep-document-banner .por-text-title-t7 .por-link {
        font-size: 14px
    }

    .pep-document-banner .hot-product .por-row {
        margin-bottom: -28px
    }

    .pep-document-banner .hot-product .por-col {
        margin-bottom: 28px
    }

    .pep-document-banner .hot-product .por-card .por-card-icon {
        margin-bottom: 10px
    }

    .pep-document-banner .hot-product .por-card .por-card-icon span {
        height: 36px;
        width: 36px
    }

    .pep-document-banner .hot-product .por-card .por-card-content .por-text-title-t3 {
        margin-bottom: 4px
    }

    .pep-document-banner .recommend-product .por-row {
        margin-bottom: -16px
    }

    .pep-document-banner .recommend-product .por-col {
        margin-bottom: 16px
    }

    .pep-document-banner .recommend-product .por-card .por-card-content .por-text-title-t3 {
        font-size: 12px;
        line-height: 18px
    }

    .pep-document-banner .recommend-product .por-card-align-left .por-card-icon.por-card-icon-horizontal {
        padding-right: 12px
    }

    .pep-document-banner .recommend-product .por-card-align-left .por-card-icon.por-card-icon-horizontal span {
        height: 28px;
        width: 28px
    }

    .pep-document-banner .document-search-droplist {
        max-height: 425px;
        padding: 4px 24px 24px
    }

    .pep-document-banner .document-search-droplist li:not(.featured-title):not(.featured-item) {
        font-size: 12px
    }

    .pep-document-banner .document-search-droplist li:not(.featured-title):not(.featured-item) a:not(.por-link-more) {
        left: -24px;
        width: calc(100% + 48px)
    }

    .pep-document-banner .featured-item .featured {
        font-size: 12px;
        line-height: 26px;
        padding: 0 24px
    }

    .pep-document-banner .docentry {
        margin-bottom: 12px;
        padding: 4px 24px !important
    }

    .pep-document-banner .featured-title {
        font-size: 12px;
        line-height: 18px
    }

    .pep-document-banner .searchall {
        line-height: 32px;
        padding: 0 24px
    }

    .pep-document-banner .searchall+.por-link-more {
        padding-top: 12px
    }

    .pep-document-banner .splitline {
        margin-top: 32px
    }

    .pep-document-banner .splitline:before {
        top: -16px
    }
}

@media (max-width:1100px) {
    .pep-document-banner .document-search-box {
        width: 100%
    }
}

@media (max-width:1024px) {
    .pep-document-banner .hot-product .por-col {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333333%;
        flex: 0 0 33.33333333%;
        max-width: 33.33333333%
    }
}

@media (max-width:768px) {
    .pep-document-banner .por-section-title {
        font-size: 22px;
        line-height: 34px
    }

    .pep-document-banner .por-section-subtitle {
        margin-top: 8px
    }

    .pep-document-banner .product-container {
        display: none
    }

    .pep-document-banner .document-banner-wtsnew {
        margin-top: 16px;
        padding: 20px
    }

    .pep-document-banner .document-banner-wtsnew .document-wtsnew-box {
        display: block;
        margin-right: 0;
        padding-left: 46px;
        position: relative
    }

    .pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-icon {
        height: 32px;
        left: 0;
        margin-right: 0;
        position: absolute;
        width: 32px
    }

    .pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-title {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 4px
    }

    .pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-line {
        display: none
    }

    .pep-document-banner .document-banner-wtsnew .document-wtsnew-box .document-wtsnew-desc {
        font-size: 12px;
        line-height: 18px
    }

    .pep-document-banner .por-tab-container {
        background-color: var(--por-color-background-white);
        display: block;
        margin-top: 16px;
        padding: 18px 20px 24px
    }

    .pep-document-banner .por-tab ul {
        border-bottom: 1px solid rgba(0, 0, 0, .08);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-bottom: 16px
    }

    .pep-document-banner .por-tab li {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        max-width: 50% !important
    }

    .pep-document-banner .por-tab li a {
        padding-bottom: 0
    }

    .pep-document-banner .por-tab li.active a:after {
        bottom: -16px
    }

    .pep-document-banner .por-tab li+li {
        border-left: 1px solid rgba(0, 0, 0, .08)
    }

    .pep-document-banner .document-banner-search {
        height: 36px
    }

    .pep-document-banner .document-search-box {
        border-radius: var(--por-radius-xl)
    }

    .pep-document-banner .por-text-input {
        font-size: 12px;
        height: 36px;
        padding: 0 40px
    }

    .pep-document-banner .document-search-box>.por-icon {
        top: 10px
    }

    .pep-document-banner .document-search-box>.por-icon.por-icon-search {
        left: 16px
    }

    .pep-document-banner .document-search-box>.por-icon.por-icon-close {
        right: 16px
    }

    .pep-document-banner .featured-title {
        font-size: 12px;
        line-height: 18px
    }

    .pep-document-banner .por-row {
        margin-left: -8px;
        margin-right: -8px
    }

    .pep-document-banner [class*=por-col-]+[class*=por-col-] {
        margin-top: 32px
    }

    .pep-document-banner .por-card .por-card-icon span {
        height: 40px;
        width: 40px
    }

    .pep-document-banner .por-card .por-card-content .por-text-body-t1 {
        font-size: 12px;
        line-height: 18px
    }

    .pep-document-banner .por-card-align-left .por-card-icon.por-card-icon-horizontal {
        padding-right: 12px
    }

    .pep-document-banner .por-card-align-left .por-card-content .por-text-title-t3 {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 0
    }

    .pep-document-banner .btn-container {
        margin-top: 32px;
        text-align: center
    }
}

.pep-hp-guide-cards .c_wrap {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.pep-hp-guide-cards .c_cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px
}

.pep-hp-guide-cards .c_cards[data-cards-per-line="4"] {
    gap: 16px
}

.pep-hp-guide-cards .c_cards[data-cards-per-line="4"] .c_card {
    width: calc(25% - 12px)
}

.pep-hp-guide-cards .c_cards[data-cards-per-line="3"] .c_card {
    width: calc(33.33333% - 16px)
}

.pep-hp-guide-cards .c_cards[data-cards-per-line="2"] .c_card {
    width: calc(50% - 12px)
}

.pep-hp-guide-cards .c_card {
    border-radius: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1.5;
    padding: 32px;
    -webkit-text-decoration: none!important;
    text-decoration: none!important
}

.pep-hp-guide-cards .c_card .c_card_content_title {
    font-size: 20px
}

.pep-hp-guide-cards .c_card .c_card_content_title .c_card_content_title_tag {
    font-size: 14px;
    height: 20px;
    margin-top: 5px
}

.pep-hp-guide-cards .c_card .c_card_content_description {
    font-size: 16px
}

.pep-hp-guide-cards .c_card .c_card_content_title+.c_card_content_description {
    margin-top: 8px
}

.pep-hp-guide-cards .c_card .c_card_logo {
    height: 56px;
    margin-top: 3px;
    width: 56px
}

.pep-hp-guide-cards .c_card[data-card-bg-color=white] {
    background-color: var(--por-base-color-gray-0)
}

.pep-hp-guide-cards .c_card[data-card-bg-color=grey] {
    background-color: var(--por-base-color-gray-5);
    border: 1px solid #f0f0f0
}

.pep-hp-guide-cards .c_card:hover {
    -webkit-box-shadow: 0 4px 12px 0 rgba(0,0,0,.08);
    box-shadow: 0 4px 12px 0 rgba(0,0,0,.08)
}

.pep-hp-guide-cards .c_card .c_card_logo {
    background-size: cover
}

.pep-hp-guide-cards .c_card .c_card_content {
    padding-left: 12px
}

.pep-hp-guide-cards .c_card .c_card_content_title {
    color: #191919;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px
}

.pep-hp-guide-cards .c_card .c_card_content_title_text {
    font-weight: var(--por-base-font-weight-bold)
}

.pep-hp-guide-cards .c_card .c_card_content_title_tag {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 4px;
    padding: 0 8px
}

.pep-hp-guide-cards .c_card .c_card_content_title_tag[data-tag-color=grey] {
    background-color: rgba(89,89,89,.102);
    color: #191919
}

.pep-hp-guide-cards .c_card .c_card_content_title_tag[data-tag-color=red] {
    background-color: rgba(199,0,11,.102);
    color: #c7000b
}

.pep-hp-guide-cards .c_card .c_card_content_description {
    color: #595959
}

@media (max-width: 1600px) {
    .pep-hp-guide-cards .c_card {
        padding:28px
    }

    .pep-hp-guide-cards .c_card .c_card_content_title {
        font-size: 16px
    }

    .pep-hp-guide-cards .c_card .c_card_content_title .c_card_content_title_tag {
        font-size: 12px;
        height: 16px;
        margin-top: 4px
    }

    .pep-hp-guide-cards .c_card .c_card_content_description {
        font-size: 14px
    }

    .pep-hp-guide-cards .c_card .c_card_content_title+.c_card_content_description {
        margin-top: 6px
    }

    .pep-hp-guide-cards .c_card .c_card_logo {
        height: 44px;
        margin-top: 3.5px;
        width: 44px
    }

    .pep-hp-guide-cards .c_card_content_title {
        gap: 8px
    }

    .pep-hp-guide-cards .c_card_content_title .c_card_content_title_tag {
        border-radius: 2px;
        padding: 0 4px
    }
}

@media (max-width: 1280px) {
    .pep-hp-guide-cards .c_card {
        padding:24px
    }

    .pep-hp-guide-cards .c_card .c_card_content_title {
        font-size: 14px
    }

    .pep-hp-guide-cards .c_card .c_card_content_title .c_card_content_title_tag {
        font-size: 12px;
        height: 14px;
        margin-top: 3.5px
    }

    .pep-hp-guide-cards .c_card .c_card_content_description {
        font-size: 12px
    }

    .pep-hp-guide-cards .c_card .c_card_content_title+.c_card_content_description {
        margin-top: 4px
    }

    .pep-hp-guide-cards .c_card .c_card_logo {
        height: 40px;
        margin-top: 1.5px;
        width: 40px
    }
}

@media (max-width: 1024px) {
    .pep-hp-guide-cards .c_cards[data-cards-per-line="4"] .c_card {
        width:calc(33.33333% - 16px)
    }
}

@media (max-width: 768px) {
    .pep-hp-guide-cards .c_cards {
        gap:8px
    }

    .pep-hp-guide-cards .c_card {
        padding: 20px;
        width: 100%!important
    }
}
.pep-document-list .por-section .por-section-body {
    overflow: hidden;
    position: relative
}

.pep-document-list .por-section .por-section-body .anchor-point-list-pc {
    float: left;
    width: 266px
}

.pep-document-list .por-section .por-section-body .anchor-point-list-pc>.list {
    max-height: calc(100% - 94px);
    overflow-y: auto
}

.pep-document-list .por-section .por-section-body .anchor-point-list-pc>.list::-webkit-scrollbar {
    width: 4px
}

.pep-document-list .por-section .por-section-body .anchor-point-list-pc>.list::-webkit-scrollbar-thumb {
    background-color: var(--por-scrollbar-thumb-background-color);
    border-radius: 2px
}

.pep-document-list .por-section .por-section-body .anchor-point-list-pc>.list>ul>li {
    color: #191919;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 16px;
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.pep-document-list .por-section .por-section-body .anchor-point-list-pc>.list>ul>li input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    height: 16px;
    margin-right: 12px;
    outline: none;
    position: relative;
    width: 16px
}

.pep-document-list .por-section .por-section-body .anchor-point-list-pc>.list>ul>li input[type=checkbox]:checked {
    background-color: #1476ff;
    border-width: 0
}

.pep-document-list .por-section .por-section-body .anchor-point-list-pc>.list>ul>li input[type=checkbox]:checked:after {
    border: solid #fff;
    border-width: 0 2px 2px 0;
    content: "";
    height: 10px;
    left: 5px;
    position: absolute;
    top: 1px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 6px
}

.pep-document-list .por-section .por-section-body .anchor-point-list-pc>.list>ul>li .item-name:hover,.pep-document-list .por-section .por-section-body .anchor-point-list-pc>.list>ul>li input[type=checkbox]:hover {
    cursor: pointer
}

.pep-document-list .por-section .por-section-body .search {
    background-color: transparent;
    border: 1px solid #c2c2c2;
    border-radius: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    padding: 0 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 45px
}

.pep-document-list .por-section .por-section-body .search .por-icon-search {
    cursor: pointer;
    font-size: 14px
}

.pep-document-list .por-section .por-section-body .search .por-icon-close {
    cursor: pointer;
    display: none
}

.pep-document-list .por-section .por-section-body .search input {
    background-color: transparent;
    border: none;
    min-width: 120px;
    outline: none;
    width: 100%
}

.pep-document-list .por-section .por-section-body .search input::-webkit-input-placeholder {
    color: grey
}

.pep-document-list .por-section .por-section-body .search input::-moz-placeholder {
    color: grey
}

.pep-document-list .por-section .por-section-body .search input:-ms-input-placeholder {
    color: grey
}

.pep-document-list .por-section .por-section-body .search input::-ms-input-placeholder {
    color: grey
}

.pep-document-list .por-section .por-section-body .search input::placeholder {
    color: grey
}

.pep-document-list .por-section .por-section-body .checked-clear {
    color: #999;
    cursor: pointer;
    font-size: 14px;
    position: absolute;
    top: 56px
}

.pep-document-list .por-section .por-section-body .checked-clear-active {
    color: #1476ff
}

.pep-document-list .por-section .por-section-body .document-list-content {
    float: right;
    height: 1026px;
    overflow-y: auto;
    padding-right: 8px;
    width: 100%
}

.pep-document-list .por-section .por-section-body .document-list-content::-webkit-scrollbar {
    width: 4px
}

.pep-document-list .por-section .por-section-body .document-list-content::-webkit-scrollbar-thumb {
    background-color: var(--por-scrollbar-thumb-background-color);
    border-radius: 2px
}

.pep-document-list .por-section .por-section-body .document-list-content .first-content .first-title {
    font-size: 24px;
    font-weight: var(--por-base-font-weight-bold);
    line-height: 36px;
    padding-bottom: 16px
}

.pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: -16px
}

.pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card {
    border-radius: var(--por-radius-xl);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 16px;
    margin-right: 16px;
    padding: 32px;
    width: calc(33.33333% - 10.66667px);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    background-color: var(--por-color-background-white);
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    position: relative
}

.pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card:nth-child(3n) {
    margin-right: 0
}

.pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card .card-title {
    color: var(--por-color-text-black);
    font-size: 18px;
    font-weight: var(--por-base-font-weight-bold);
    line-height: 24px
}

.pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card .card-description {
    color: var(--por-color-text-secondary);
    font-size: 14px;
    line-height: 21px;
    margin-top: 8px
}

.pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card:hover {
    -webkit-box-shadow: 0 4px 12px 0 rgba(0,0,0,.08);
    box-shadow: 0 4px 12px 0 rgba(0,0,0,.08)
}

.pep-document-list .por-section .por-section-body .document-list-content .first-content:not(:first-child) {
    margin-top: 48px
}

.pep-document-list .por-section .por-section-body .document-list-content.white .first-content .card-list .card {
    background-color: var(--por-color-background-gray-2)
}

.pep-document-list .por-section .por-section-body .document-list-content.grey .first-content .card-list .card {
    background-color: var(--por-color-background-white)
}

.pep-document-list .por-section .por-section-body .anchor-point-list-mb,.pep-document-list .por-section .por-section-body .search-content-mb {
    display: none
}

@media (min-width: 1281px) and (max-width:1600px) {
    .pep-document-list .por-section .por-section-body .anchor-point-list-pc {
        width:220px
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-pc>.list {
        max-height: calc(100% - 48px)
    }

    .pep-document-list .por-section .por-section-body .document-list-content {
        margin-left: 36px;
        width: calc(100% - 256px)
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card {
        padding: 28px
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content:not(:first-child) {
        margin-top: 40px
    }
}

@media (min-width: 1025px) and (max-width:1280px) {
    .pep-document-list .por-section .por-section-body .anchor-point-list-pc {
        width:180px
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-pc .search {
        height: 32px;
        margin-bottom: 48px
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-pc .search .por-icon-search,.pep-document-list .por-section .por-section-body .anchor-point-list-pc .search input {
        font-size: 12px
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-pc>.list {
        max-height: calc(100% - 42px)
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-pc>.list>ul>li {
        margin-bottom: 12px
    }

    .pep-document-list .por-section .por-section-body .document-list-content {
        margin-left: 28px;
        width: calc(100% - 208px)
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .first-title {
        font-size: 18px;
        line-height: 27px;
        padding-bottom: 14px
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card {
        padding: 28px
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card .card-title {
        font-size: 14px;
        line-height: 21px
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card .card-description {
        font-size: 12px;
        line-height: 18px;
        margin-top: 4px
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content:not(:first-child) {
        margin-top: 32px
    }
}

@media (min-width: 769px) and (max-width:1024px) {
    .pep-document-list .por-section .por-section-body .anchor-point-list-pc {
        width:180px
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-pc .search {
        height: 32px;
        margin-bottom: 48px;
        padding: 0 16px
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-pc .search .por-icon-search,.pep-document-list .por-section .por-section-body .anchor-point-list-pc .search input {
        font-size: 12px
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-pc>.list {
        max-height: calc(100% - 42px)
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-pc>.list>ul>li {
        margin-bottom: 12px
    }

    .pep-document-list .por-section .por-section-body .document-list-content {
        margin-left: 28px;
        width: calc(100% - 208px)
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .first-title {
        font-size: 18px;
        line-height: 27px;
        padding-bottom: 14px
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card {
        padding: 28px
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card .card-title {
        font-size: 14px;
        line-height: 21px
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card .card-description {
        font-size: 12px;
        line-height: 18px;
        margin-top: 4px
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content:not(:first-child) {
        margin-top: 32px
    }
}

@media (max-width: 768px) {
    .pep-document-list .por-section .por-section-head+.por-section-body {
        padding-top:0
    }

    .pep-document-list .por-section .por-section-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-top: 20px
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb {
        background-color: var(--por-color-background-white);
        -webkit-box-shadow: var(--por-base-box-shadow-light);
        box-shadow: var(--por-base-box-shadow-light);
        display: block;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: var(--por-base-zindex-fixed)
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.title {
        display: none
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.list>ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        height: 42px;
        min-width: 100%;
        overflow-x: overlay;
        width: auto
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.list>ul::-webkit-scrollbar {
        display: none;
        height: 0;
        opacity: 0;
        width: 0
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.list>ul>li {
        font-size: 12px;
        line-height: 18px;
        padding: 12px 18px;
        white-space: nowrap
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.list>ul>li.selected {
        color: var(--por-color-text-primary);
        font-weight: var(--por-base-font-weight-bold);
        position: relative
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.list>ul>li.selected:after {
        background-color: var(--por-color-background-black);
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        position: absolute;
        width: calc(100% - 36px)
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.list>ul>li:after,.pep-document-list .por-section .por-section-body .anchor-point-list-mb>.list>ul>li:before {
        display: none
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.expand-container {
        background-color: var(--por-color-background-white);
        border-bottom-left-radius: var(--por-radius-xl);
        border-bottom-right-radius: var(--por-radius-xl);
        -webkit-box-shadow: var(--por-shadow-dropdown);
        box-shadow: var(--por-shadow-dropdown);
        display: none;
        position: absolute;
        top: 0;
        width: 100%
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.expand-container .expand-title {
        border-bottom: 1px solid var(--por-color-border-drop);
        color: var(--por-color-text-weak-1);
        font-size: 12px;
        height: 42px;
        line-height: 18px;
        padding: 12px 20px
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.expand-container ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        overflow: hidden;
        padding: 18px 20px 20px
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.expand-container ul li {
        font-size: 12px;
        line-height: 18px;
        margin-right: 16px;
        margin-top: 20px;
        width: calc(33.33333% - 10.66667px)
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.expand-container ul li:nth-child(3n) {
        margin-right: 0
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.expand-container ul li:nth-child(-n+3) {
        margin-top: 0
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.expand-container ul li.selected {
        color: var(--por-color-text-primary);
        font-weight: var(--por-base-font-weight-bold)
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.expand-button {
        background-color: var(--por-color-background-white);
        -webkit-box-shadow: var(--por-shadow-dropdown);
        box-shadow: var(--por-shadow-dropdown);
        display: none;
        height: 41px;
        position: absolute;
        right: 0;
        top: 0;
        width: 42px
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.expand-button .por-icon {
        color: var(--por-color-text-primary);
        font-size: 18px;
        margin-left: calc(50% - 9px);
        margin-top: calc(50% - 9px)
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.expand-button .por-icon-up {
        display: none
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb.expanded>.expand-container {
        display: block
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb.expanded>.expand-button>.por-icon-down {
        display: none
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-mb.expanded>.expand-button>.por-icon-up {
        display: block
    }

    .pep-document-list .por-section .por-section-body .search-content-mb {
        display: block;
        width: 100%
    }

    .pep-document-list .por-section .por-section-body .search {
        height: 36px
    }

    .pep-document-list .por-section .por-section-body .search .por-icon-search,.pep-document-list .por-section .por-section-body .search input {
        font-size: 12px
    }

    .pep-document-list .por-section .por-section-body .document-list-content {
        margin-left: 0;
        width: 100%
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .first-title {
        font-size: 16px;
        line-height: 24px;
        padding-bottom: 12px
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list {
        border-radius: var(--por-radius-xl);
        margin-bottom: 0;
        overflow: hidden
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card {
        border-radius: 0;
        display: block;
        margin-bottom: 0;
        margin-right: 0;
        padding: 32px 20px;
        width: 100%
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card .card-title {
        font-size: 14px;
        line-height: 22px;
        margin-top: 0
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card .card-description {
        font-size: 12px;
        line-height: 18px;
        margin-top: 0
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card+.card {
        padding-top: 0
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card:hover {
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .no-search-result-tip {
        color: grey;
        font-size: 12px;
        line-height: 18px;
        text-align: center;
        width: 100%
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list+.second-title {
        margin-top: 28px
    }

    .pep-document-list .por-section .por-section-body .document-list-content .first-content:not(:first-child) {
        margin-top: 36px
    }

    .pep-document-list .por-section .por-section-body .anchor-point-list-pc {
        display: none
    }
}

.pep-document-list .por-section[data-bg=grey] .list:hover::-webkit-scrollbar-track-piece {
    background-color: var(--por-color-background-gray-2)
}

html[lang=ar-MENA] .pep-document-list .por-section .por-section-body .anchor-point-list-pc {
    float: right
}

html[lang=ar-MENA] .pep-document-list .por-section .por-section-body .document-list-content {
    float: left;
    margin-left: 0;
    margin-right: 48px
}

html[lang=ar-MENA] .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card {
    margin-left: 16px;
    margin-right: 0
}

html[lang=ar-MENA] .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card:nth-child(3n) {
    margin-left: 0;
    margin-right: 0
}

@media (min-width: 1281px) and (max-width:1600px) {
    html[lang=ar-MENA] .pep-document-list .por-section .por-section-body .document-list-content {
        margin-left:0;
        margin-right: 36px
    }
}

@media (min-width: 769px) and (max-width:1280px) {
    html[lang=ar-MENA] .pep-document-list .por-section .por-section-body .document-list-content {
        margin-left:0;
        margin-right: 28px
    }
}

@media (max-width: 768px) {
    html[lang=ar-MENA] .pep-document-list .por-section .por-section-body .anchor-point-list-mb {
        left:auto;
        right: 0
    }

    html[lang=ar-MENA] .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.expand-container ul li {
        margin-left: 16px;
        margin-right: 0
    }

    html[lang=ar-MENA] .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.expand-container ul li:nth-child(3n) {
        margin-left: 0;
        margin-right: 0
    }

    html[lang=ar-MENA] .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.expand-button {
        left: 0;
        right: auto
    }

    html[lang=ar-MENA] .pep-document-list .por-section .por-section-body .anchor-point-list-mb>.expand-button .por-icon {
        margin-left: 0;
        margin-right: calc(50% - 9px)
    }

    html[lang=ar-MENA] .pep-document-list .por-section .por-section-body .document-list-content,html[lang=ar-MENA] .pep-document-list .por-section .por-section-body .document-list-content .first-content .card-list .card {
        margin-left: 0;
        margin-right: 0
    }
}