/* 项目列表页样式 - 繁体中文版 */

/* 基础容器 */
.pjl_con{padding: 5.4vw 0 0 0;}
.pjl_con .ny_crumbs{margin-bottom: 1vw;}

/* Banner区域 - PC端 */
.pjl_con .pjl_banner .pc{width: 100%;height: calc(100vw * 951 / 1916);position: relative;overflow: hidden;}
.pjl_con .pjl_banner .pc .swiper-slide{background: no-repeat center;background-size: cover;position: relative;display: block;}
.pjl_con .pjl_banner .pc .swiper-slide video{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;height: 100%;object-fit: cover;}
.pjl_con .pjl_banner .pc .swiper-slide .txt{position: absolute;left: 14.48vw;top: 50%;transform: translateY(-50%);color: #fff;font-family:nn;line-height: 44px;text-align: left;z-index: 2;}
.pjl_con .pjl_banner .pc .swiper-slide .txt .h1{text-transform: capitalize;}
.pjl_con .pjl_banner .pc .swiper-slide .txt .h2{text-transform: uppercase;}
.pjl_con .pjl_banner .pc .swiper-pagination{width: auto;height: 12px;top: auto;bottom: 3.33vw;left: 50%;right: auto;transform: translateX(-50%);display: flex;align-items: center;justify-content: center;}
.pjl_con .pjl_banner .pc .swiper-pagination-bullet{width: 12px;height: 12px;background-color: rgba(255,255,255,0.5);opacity: 1;margin: 0 6px;}
.pjl_con .pjl_banner .pc .swiper-pagination-bullet-active{background-color: #FD4438;}
.pjl_con .pjl_banner .pc .tab{display: none;}
.pjl_con .pjl_banner .mm{display: none;}

/* 内容区域 */
.pjl_con .pjl1{padding: 0;background-color: #E2CCBC;}
.pjl_con .pjl1 .nu_crumbs{display: none;}

/* 白色背景区域 - 包含面包屑、标题、简介、社区模式 */
.pjl_con .pjl1 .white-bg-section{background-color: #fff;padding: 5vw 14.6vw 0 14.6vw;}
.pjl_con .pjl1 .white-bg-section .txt{ font-family: nr; font-weight: normal; color: #131e2b; line-height: 2; margin-bottom: 4.218vw;}
.pjl_con .pjl1 .white-bg-section .ny_tit{margin-top: 2.4vw;margin-bottom: 3.7vw;}
.pjl_con .pjl1 .white-bg-section .ny_tit{position: relative;}
.pjl_con .pjl1 .white-bg-section .ny_tit:after{content: ""; display: block; width: 61px; height: 3px; background-color: #FF2426; margin-top: 12px;}

/* 社区模式卡片区域 */
.pjl_con .pjl1 .white-bg-section .community-mode-row{margin-left: -14.6vw;margin-right: -14.6vw;}
.pjl_con .pjl1 .white-bg-section .community-mode-list{display: flex;justify-content: space-between;align-items: stretch;list-style: none;margin: 0;padding: 0;}
.pjl_con .pjl1 .white-bg-section .community-mode-item{position: relative;display: block;flex: 1;height: calc(((100vw - 0.31vw) / 4) * 726 / 477);aspect-ratio: 477 / 726;overflow: hidden;cursor: pointer;--mode-color:#D85C5C;transition: transform 0.4s ease;will-change: transform;}
.pjl_con .pjl1 .white-bg-section .community-mode-item + .community-mode-item{margin-left: 0.1vw;}
.pjl_con .pjl1 .white-bg-section .community-mode-item .cm-link{display: block;position: absolute;left: 0;top: 0;right: 0;bottom: 0;text-decoration: none;z-index: 1;}
.pjl_con .pjl1 .white-bg-section .community-mode-item .cm-bg{position: absolute;left: 0;top: 0;right: 0;bottom: 0;background: no-repeat center;background-size: cover;transition: all 0.4s;filter: grayscale(1);}
.pjl_con .pjl1 .white-bg-section .community-mode-item .cm-mask{position: absolute;left: 0;top: 0;right: 0;bottom: 0;mix-blend-mode: multiply;transition: all 0.4s;}
.pjl_con .pjl1 .white-bg-section .community-mode-item .cm-title{position: absolute;left: 0;right: 0;top: 1.5625vw;text-align: center;font-family: nm;letter-spacing: 1px;color: var(--mode-color);z-index: 2;}
.pjl_con .pjl1 .white-bg-section .community-mode-item.on .cm-bg,
.pjl_con .pjl1 .white-bg-section .community-mode-item:hover .cm-bg{filter: none;transform: none;}
.pjl_con .pjl1 .white-bg-section .community-mode-item.on .cm-mask,
.pjl_con .pjl1 .white-bg-section .community-mode-item:hover .cm-mask{background: var(--mode-color, rgba(216,92,92,0.85));}
.pjl_con .pjl1 .white-bg-section .community-mode-item.on .cm-title,
.pjl_con .pjl1 .white-bg-section .community-mode-item:hover .cm-title{color: #fff;}

/* 滑過卡片整體放大 */
.pjl_con .pjl1 .white-bg-section .community-mode-item:hover{transform: scale(1.03);z-index: 2;}

/* 城市筛选区域 */
.pjl_con .pjl1 .xl_box{margin-bottom: 2.6vw;padding: 5.73vw 14.6vw 0 14.6vw;}
.pjl_con .pjl1 .xl_box .h{font-family: nm;text-transform: uppercase;line-height: 28px;margin-bottom: 4px;}
.pjl_con .pjl1 .xl_box .select{width: 215px;font-family: nl;position: relative;background-color: transparent;}
.pjl_con .pjl1 .xl_box .select .year{width: 100%; line-height: 38px;border: 1px solid #131e2b;padding: 0 26px 0 15px;background: url(../img-en/xl.png)no-repeat right center;}
.pjl_con .pjl1 .xl_box .select ul{position: absolute;top: 100%;left: 0;width: 100%;overflow: auto;  border: 1px solid #131e2b;border-top: none;display: none;background-color: #fff;}
.pjl_con .pjl1 .xl_box .select ul::-webkit-scrollbar{ width:4px;height: 1px;}
.pjl_con .pjl1 .xl_box .select ul::-webkit-scrollbar-thumb{ background:#000;}
.pjl_con .pjl1 .xl_box .select ul::-webkit-scrollbar-track{ background:rgba(0,0,0,0.2);}
.pjl_con .pjl1 .xl_box .select a{display: block;line-height: 38px;padding: 0 26px 0 15px;transition: all 0.5s;color: #131e2b;}
.pjl_con .pjl1 .xl_box .select a:hover{color: #FF2426;}

/* 项目列表区域 */
.pjl_con .pjl1 .boxs{display: flex;flex-wrap: wrap;justify-content: space-between;padding: 0 14.6vw 5.73vw 14.6vw;}
.pjl_con .pjl1 .boxs .box{width: 16.5625vw;margin-bottom: 1vw;}
.pjl_con .pjl1 .boxs .box .pics{width: 100%;overflow: hidden;margin-bottom: 1vw;}
.pjl_con .pjl1 .boxs .box .pics .pic{width: 100%;height: 21.25vw;background: no-repeat center;background-size: cover;transition: all 0.5s;}
.pjl_con .pjl1 .boxs .box .pics .pic:hover{transform: scale(1.05);}
.pjl_con .pjl1 .boxs .box .h1{line-height: 1.6;font-family:nn;color: #131e2b;transition: all 0.5s;}
.pjl_con .pjl1 .boxs .box:hover .h1{color: #FF2426;}
.pjl_con .pjl1 .boxs .box .p1{display: table;padding-right: 1vw;line-height: 28px;font-family: nl;color: #131e2b;position: relative;text-transform: uppercase;}
.pjl_con .pjl1 .boxs .box .p1:after{content: "";position: absolute;bottom: 0;left: 0;width: 0%;height: 2px;background-color: #FF2426;transition: all 0.5s;}
.pjl_con .pjl1 .boxs .box:hover .p1:after{width: 100%;}
.pjl_con .pjl1 .boxs .box1{width: 16.5625vw;height: 0;}

/* 移动端响应式 */
@media (max-width: 768px) {
    .pjl_con .pjl1 .white-bg-section{padding: 30px 23px 0 23px;}
    .pjl_con .pjl1 .white-bg-section .community-mode-row{margin-left: -23px;margin-right: -23px;}
    .pjl_con .pjl1 .white-bg-section .community-mode-row .community-mode-list{display: grid;grid-template-columns: 1fr 1fr;gap: 12px;}
    .pjl_con .pjl1 .white-bg-section .community-mode-row .community-mode-item{flex: 0 0 auto;width: calc((100vw - 12px) / 2);height: calc(((100vw - 12px) / 2) * 726 / 477);}    
    .pjl_con .pjl1 .white-bg-section .community-mode-row .community-mode-item + .community-mode-item{margin-left: 0;}
    .pjl_con .pjl1 .white-bg-section .community-mode-row .community-mode-item:nth-child(n+5){display: none;}
    .pjl_con .pjl1 .white-bg-section .community-mode-item.on .cm-bg,
    .pjl_con .pjl1 .white-bg-section .community-mode-item:active .cm-bg{filter: none;transform: scale(1.02);}
    .pjl_con .pjl1 .white-bg-section .community-mode-item.on .cm-mask,
    .pjl_con .pjl1 .white-bg-section .community-mode-item:active .cm-mask{background: var(--mode-color, rgba(216,92,92,0.85));}
    .pjl_con .pjl1 .white-bg-section .community-mode-item.on .cm-title,
    .pjl_con .pjl1 .white-bg-section .community-mode-item:active .cm-title{color: #fff;font-size: 13px;margin-top: 50px;}

    .pjl_con .pjl1 .xl_box{padding: 30px 23px 0 23px;}
    .pjl_con .pjl1 .xl_box .select{width: 100%;margin-bottom: 24px;}
    .pjl_con .pjl1 .boxs{padding: 0 23px 36px 23px;}
    .pjl_con .pjl1 .boxs .box{width: 48%;margin-bottom: 21px;}
    .pjl_con .pjl1 .boxs .box .pics .pic{height: 52vw;}
    .pjl_con .pjl1 .boxs .box1{width: 48%;margin-bottom: 21px;}
    .pjl_con .pjl1 .boxs .box .h1{font-size: 15px;line-height: 20px;color: #151E2A;}
    .pjl_con .pjl1 .boxs .box .p1{font-size: 11px;line-height: 14px;color: #151E2A;}
    .pjl_con .pjl1 .boxs .box .txt1{height: auto;}
    
    .pjl_con .pjl_banner .pc{display: none;}
    .pjl_con .pjl_banner .mm{height: calc(100vw * 951 / 1916);display: block;position: relative;overflow: hidden;margin-top: 80px;}
    .pjl_con .pjl_banner .mm .swiper-pagination{width: auto;height: 6px;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;align-items: center;justify-content: center;}
    .pjl_con .pjl_banner .mm .swiper-pagination-bullet{width: 6px;height: 6px;margin: 0 3px;}
    .pjl_con .pjl_banner .mm .tab{display: none;}
    .pjl_con .pjl_banner .mm .swiper-slide{background: no-repeat center;background-size: cover;position: relative;}
    .pjl_con .pjl_banner .mm .swiper-slide video{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;height: 100%;object-fit: cover;}
    .pjl_con .pjl_banner .mm .swiper-slide .txt{position: absolute;left: 20px;top: 50%;transform: translateY(-50%);color: #fff;font-family: nn;font-size: 20px;line-height: 26px;text-align: left;z-index: 2;}
    .pjl_con .pjl1 .white-bg-section .txt{font-size: 13px !important;line-height: 25px !important;color: #151E2A !important;}
    .pjl_con .pjl_banner .mm .swiper-slide .txt .h1{font-size: 20px;line-height: 26px;text-transform: capitalize;}
    .pjl_con .pjl_banner .mm .swiper-slide .txt .h2{text-transform: uppercase;}
    
    .pjl_con .pjl1 .txt{font-size: 13px !important;line-height: 25px !important;color: #151E2A !important;}
}