* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.n-projece-page img {
    width: 100%;
}

.n-project-info {
    padding: 72px 0;
}

.n-project-btn {
    display: inline-block;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    padding: 0 40px;
    height: 46px;
    line-height: 46px;
    border-radius: 4px;
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    transition: background .16s linear;
}

.bannerCont {
    position: relative;
}

.bannerInfo {
    position: absolute;
    left: calc((100% - 1400px)/2);
    top: 50%;
    transform: translateY(-50%);
}

.n-project-btn.red {
    background: #CC002D;
    color: #FFF;
}

.n-project-btn.redBorder {
    color: #E60039;
    border: 1px solid #E60039;
}

.bannerInfo h1 {
    color: #292929;
    font-size: 36px;
    font-weight: 700;
    line-height: 150%;
}

.bannerInfo p {
    color: #6A6B6D;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    margin: 12px 0 24px 0;
}

.n-page-content {
    width: 1400px;
    margin: 48px auto 0 auto;
}

.n-projece-page h2 {
    text-align: center;
    color: #292929;
    font-size: 32px;
    font-weight: 700;
    line-height: 150%;
}

.reasonCont {
    position: relative;
}

.reasonInfo {
    position: absolute;
    top: 380px;
    left: 0;
    padding: 0 32px 24px 32px;
}

.reasonInfo h3 {
    color: #292929;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.reasonInfo b {
    display: block;
    color: #292929;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 8px;
}

.reasonInfo p {
    color: #7D7D7D;
    font-size: 12px;
    font-weight: 400;
    line-height: 150%;
}

.tabCont {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tabCont div::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #E3E5E6;
    position: absolute;
    left: 0;
    bottom: 0;
}

.tabCont div {
    position: relative;
    color: #6A6B6D;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    padding: 8px 24px;
    cursor: pointer;
}

.tabCont div.active::after {
    height: 2px;
    background: #CC002D;
}

.tabCont div.active {
    color: #2A2B2E;
    font-weight: 700;
    pointer-events: none;
}

.tabInfo {
    position: relative;
    margin-top: 24px;
}

.productNext,
.productPrev {
    position: absolute;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
}

.productNext::after,
.productPrev::after {
    content: '';
    display: block;
    background-position: 0 0;
    width: 32px;
    height: 32px;
}

.productPrev::after {
    background-image: url(/special/fa-ykt/20240815/RJ-img/prev.svg);
}

.productNext::after {
    background-image: url(/special/fa-ykt/20240815/RJ-img/next.svg);
}

.productPrev {
    left: -80px;
}

.productNext {
    right: -80px;
}

.productPrev.swiper-button-disabled,
.productNext.swiper-button-disabled {
    opacity: 1;
}

.productPrev.swiper-button-disabled::after,
.productNext.swiper-button-disabled::after {
    background-position: 0 -32px;
}

.productDesc {
    color: #7D7D7D;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 48px;
    padding: 0 130px;
}

.proudctInfo {
    height: 100%;
    position: relative;
    background: #FFF;
    box-shadow: 0px 4px 20px 0px rgba(226, 237, 248, 0.50);
}

.proudctInfo a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.productText {
    padding: 24px;
}

.productText h3 {
    color: #292929;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 12px;
}

.productText p {
    color: #7D7D7D;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 24px;
}

.learnBtn {
    display: flex;
    align-items: center;
    color: #E60039;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
}

.learnBtn::after {
    width: 24px;
    height: 24px;
    content: '';
    display: block;
    background-image: url(/special/fa-ykt/20240815/RJ-img/arrow.svg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-left: 8px;
}

.btnAlign {
    text-align: center;
    width: 100%;
    margin: 24px auto 48px auto;
}

.solutionCont {
    margin-right: calc(100% - 86%);
}

.solutionInfo {
    position: relative;
    margin-top: 48px;
    display: flex;
}

.solutionInfo a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.solutionImg {
    position: relative;
    width: 57%;
    z-index: 3;
}

.solutionText {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 10% 0 22%;
}

.solutionText h3 {
    color: #292929;
    font-size: 24px;
    font-weight: 700;
    line-height: 150%;
}

.solutionText p {
    color: #7D7D7D;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    margin-top: 12px;
    margin-bottom: 36px;
}

.solutionFloat {
    position: relative;
    width: 44%;
    flex-shrink: 0;
    transform: translateX(-7%);
}

#solutionSwiper .swiper-pagination-bullet {
    width: 48px;
    height: 24px;
    border-radius: 20px;
    padding: 8px 20px;
    background: unset;
    opacity: 1;
}

#solutionSwiper .swiper-pagination-bullet::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E3E5E6;
}

#solutionSwiper .swiper-pagination-bullet-active {
    border: 1px solid #63A9E0;
}

#solutionSwiper .swiper-pagination-bullet-active::after {
    background: #63A9E0;
}

.resourceCont {
    display: flex;
    align-items: flex-start;
    margin-bottom: 72px;
}

.resourceInfo {
    display: flex;
}

.reasonCard {
    position: relative;
    width: 520px;
    padding: 24px;
    border-radius: 8px;
    background: #F8FCFF;
    margin-right: 24px;
}

.reasonCard a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.reasonCard h3 {
    color: #292929;
    font-size: 20px;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 24px;
}

.resourceTab {
    position: relative;
    margin-right: 72px;
}

.resourceTab::after {
    content: '';
    width: 1px;
    height: 100%;
    background-color: #D5D5D5;
    position: absolute;
    display: block;
    left: 0;
    top: 0;
}

.resourceTab div {
    position: relative;
    margin-top: 48px;
    color: #6A6B6D;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    padding-left: 24px;
    cursor: pointer;
}

.resourceTab div.active {
    color: #2A2B2E;
    font-weight: 700;
    pointer-events: none;
}

.resourceTab div.active::after {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: #E60039;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.resourceTab div:first-child {
    margin-top: 0;
}

.contactInfo {
    margin-left: calc((100% - 1400px)/2);
}

.contactInfo h2 {
    text-align: left;
    font-size: 20px;
}

.contactInfo p {
    margin-top: 12px;
    margin-bottom: 20px;
    color: #6A6B6D;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
}

.contactCont {
    padding: 80px 0;
    background-image: url(/special/fa-ykt/20240815/RJ-img/contact.webp);
    background-size: cover;
    background-position: center;
}

.spebg {
    background-image: url(/special/fa-ykt/20240815/RJ-img/spebg.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

.navCont {
    position: sticky;
    width: 100%;
    margin: 0 auto;
    z-index: 9;
    box-shadow: 0px 4px 20px 0px rgba(226, 237, 248, 0.50);
    background: #FFF;
}

.navBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    width: 1400px;
    margin: 0 auto;
}

.navInfo {
    display: flex;
}

.navInfo div {
    padding: 24px 20px;
    color: #6A6B6D;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    cursor: pointer;
}

.navInfo div:first-child {
    padding-left: 0;
}

.navInfo div.active {
    color: #2A2B2E;
    font-weight: 700;
    pointer-events: none;
}

.n-projece-page .swiper-slide {
    height: unset;
}

#solutionSwiper .swiper-pagination {
    width: 90%;
    bottom: 0;
}

#productSwiper1 .swiper-pagination,
#productSwiper2 .swiper-pagination,
#productSwiper3 .swiper-pagination,
#reasonSwiper .swiper-pagination {
    display: none;
}

#productSwiper1,
#productSwiper2,
#productSwiper3,
#reasonSwiper {
    padding-bottom: 40px;
}

.navWord {
    display: none;
}

@media screen and (min-width: 768px) {
    .n-project-btn.red:hover {
        background: #F23E5E;
    }
    .n-project-btn.redBorder:hover {
        background: rgba(230, 0, 57, 0.03);
    }
}

@media screen and (max-width:1600px) {
    .bannerInfo {
        left: calc((100% - 1200px)/2);
    }
    .navBox {
        width: 1200px;
    }
    .n-page-content {
        width: 1200px;
    }
    .n-projece-page h2 {
        font-size: 28px;
    }
    .reasonInfo {
        top: 308px;
    }
    .reasonInfo h3 {
        font-size: 20px;
    }
    .n-page-content {
        margin: 36px auto 0 auto;
    }
    .productDesc {
        padding: 0 100px;
    }
    .resourceTab {
        flex-shrink: 0;
    }
    .reasonCard {
        width: 448px;
    }
    .contactInfo {
        margin-left: calc((100% - 1200px)/2);
    }
    .productPrev {
        left: -40px;
    }
    .productNext {
        right: -40px;
    }
}

@media screen and (max-width:1440px) {
    .ys_header {
        height: 74px !important;
    }
}

@media screen and (max-width:1400px) {
    .bannerInfo {
        left: calc((100% - 1024px)/2);
    }
    .bannerInfo h1 {
        font-size: 32px;
    }
    .n-project-btn {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding: 0 32px;
    }
    .navBox {
        width: 1024px;
    }
    .n-page-content {
        width: 1024px;
    }
    .reasonInfo {
        padding: 0 24px 16px 24px;
        top: 262px;
    }
    .reasonInfo b {
        font-size: 14px;
    }
    .reasonCard {
        width: 380px;
    }
    .reasonCard h3 {
        font-size: 16px;
    }
    .learnBtn {
        font-size: 14px;
    }
    .learnBtn::after {
        width: 20px;
        height: 20px;
    }
    .contactInfo {
        margin-left: calc((100% - 1024px)/2);
    }
    .n-projece-page h2 {
        font-size: 24px;
    }
    .navInfo div {
        font-size: 14px;
        padding: 12px 14px;
    }
    .productDesc {
        font-size: 14px;
        margin-bottom: 24px;
        padding: 0 48px;
    }
    .productText h3 {
        font-size: 16px;
    }
    .productText p {
        font-size: 14px;
    }
    .productText {
        padding: 16px;
    }
    .speTabInfo {
        width: 750px;
        margin-left: auto;
        margin-right: auto;
    }
    .solutionCont {
        margin-right: 60px;
    }
    .solutionText h3 {
        font-size: 22px;
    }
    .solutionText p {
        font-size: 14px;
    }
    .productPrev {
        left: -34px;
    }
    .productNext {
        right: -34px;
    }
}

@media screen and (max-width:1280px) {
    .productPrev,
    .productNext {
        top: 100%;
    }
    .productPrev {
        left: 46%;
    }
    .productNext {
        right: 46%;
    }
    .speInfo {
        padding-bottom: 24px;
    }
}

@media screen and (max-width:1068px) {
    .bannerInfo {
        left: 40px;
        max-width: 42%;
    }
    .n-page-content {
        width: calc(100% - 80px);
    }
    .navBox {
        width: calc(100% - 80px);
    }
    .bannerInfo h1 {
        font-size: 24px;
    }
    .bannerInfo p {
        font-size: 14px;
        margin: 8px 0 12px 0;
    }
    .resourceInfo {
        flex-wrap: wrap;
        gap: 24px;
    }
    .solutionCont {
        margin-right: 40px;
    }
    #solutionSwiper .swiper-pagination-bullet {
        width: 36px;
        height: 16px;
        padding: 4px 13px;
        text-align: center;
    }
    .solutionText h3 {
        font-size: 18px;
    }
    .solutionText p {
        margin: 8px 0 12px 0;
    }
    .speTabInfo {
        width: 100%;
    }
    .contactInfo {
        margin-left: 40px;
    }
    .reasonInfo {
        top: 60%;
        padding: 0 8px 12px 8px;
    }
    .reasonInfo h3 {
        font-size: 18px;
    }
    .reasonInfo b {
        font-size: 12px;
    }
    .navBox {
        padding: 0;
    }
    .productPrev,
    .productNext {
        display: none;
    }
    .speInfo {
        padding-bottom: 0;
    }
}

@media screen and (max-width:1200px) {
    .ys_header {
        height: 64px !important;
    }
}

@media screen and (max-width:768px) {
    .productDesc {
        padding: 0;
    }
    .tabCont div {
        font-size: 12px;
    }
    .n-projece-page h2 {
        font-size: 20px;
        padding: 0 20px;
    }
    .n-page-content {
        margin: 24px auto 0 auto;
    }
    .bannerInfo {
        max-width: unset;
        left: 0;
        padding: 0 20px;
        transform: unset;
        top: 48px;
    }
    .bannerInfo p {
        margin: 12px 0 24px 0;
    }
    .contactInfo h2 {
        padding: 0;
        font-size: 24px;
    }
    .contactInfo {
        margin-left: 0;
        padding: 0 20px;
    }
    .n-project-info.contactCont {
        padding: 24px 0 186px 0;
        background-image: url(/special/fa-ykt/20240815/RJ-img/contact_750.webp);
    }
    .n-page-content {
        width: calc(100% - 40px);
    }
    .resourceCont {
        flex-direction: column;
        margin-bottom: 24px;
    }
    .resourceTab {
        display: flex;
        justify-content: center;
        margin-right: 0;
        width: 100%;
    }
    .resourceTab::after {
        width: 100%;
        height: 1px;
        top: unset;
        bottom: 0;
    }
    .resourceTab div {
        margin-top: 0;
        font-size: 12px;
        padding: 12px 24px;
    }
    .resourceTab div.active::after {
        width: 100%;
        height: 2px;
        top: unset;
        bottom: 0;
    }
    .resourceInfo {
        margin-top: 24px;
    }
    .solutionInfo {
        flex-direction: column;
        box-shadow: 0px 4px 20px 0px rgba(226, 237, 248, 0.50);
    }
    .solutionImg {
        width: 100%;
    }
    .solutionCont {
        margin-right: 0;
        padding: 0 20px;
    }
    .solutionCont .swiper {
        padding-bottom: 40px;
    }
    #solutionSwiper .swiper-pagination {
        width: 100%;
    }
    .solutionFloat {
        transform: unset;
        width: 100%;
        background: #FFF;
    }
    .n-project-info {
        padding: 36px 0;
    }
    .solutionText {
        position: unset;
        padding: 24px;
        transform: unset;
    }
    .solutionFloat img {
        display: none;
    }
    .solutionText h3 {
        font-size: 16px;
    }
    .solutionText p {
        margin: 12px 0 24px 0;
    }
    #productSwiper1 .swiper-pagination,
    #productSwiper2 .swiper-pagination,
    #productSwiper3 .swiper-pagination,
    #reasonSwiper .swiper-pagination {
        display: block;
    }
    .n-projece-page .swiper-pagination-bullet::after {
        display: none!important;
    }
    .n-projece-page .swiper-pagination-bullet {
        width: 12px!important;
        height: 12px!important;
        border-radius: 50%!important;
        padding: unset!important;
        background: #E3E5E6!important;
        opacity: 1;
    }
    .n-projece-page .swiper-pagination-bullet-active {
        background: #63A9E0!important;
    }
    .reasonInfo {
        top: unset;
        bottom: 24px;
        padding: 0 36px;
    }
    .reasonInfo h3 {
        font-size: 20px;
    }
    .reasonInfo b {
        font-size: 16px;
    }
    .navWord {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #2A2B2E;
        font-size: 14px;
        font-weight: 700;
        line-height: 120%;
        padding: 12px 24px;
    }
    .navWord span {
        display: flex;
        align-items: center;
    }
    .navWord span::after {
        content: '';
        display: block;
        background-image: url(/special/fa-ykt/20240815/RJ-img/down.svg);
        width: 24px;
        height: 24px;
        background-size: cover;
        transition: transform .16s linear;
        margin-left: 4px;
    }
    .navWord.active span::after {
        transform: rotate(180deg);
    }
    .navBox {
        width: 100%;
        border-radius: unset;
        transform: unset;
    }
    .navInfo {
        display: none;
    }
    .navInfo div {
        padding: 8px 0;
        border-bottom: 1px solid #F1F3F5;
    }
    .navInfo div.active {
        color: #E60039;
    }
    .navBox a {
        display: none;
    }
}