/* =========================================================
   建案 Gallery
   ========================================================= */
#projectGallery{position:relative;}
#projectGallery .project_gallery_wrap{position:relative;margin-top:65px;}
#projectGallery .slider-for{position:relative;}
#projectGallery .slider-for .slick-list{overflow:hidden;}
#projectGallery .slider-for .img{position:relative;}
#projectGallery .slider-for .img a{position:relative;display: flex;overflow:hidden;aspect-ratio: 16/7;background:#eee;}
#projectGallery .slider-for .img a:before{content:"";position:absolute;left:14px;top:14px;z-index:3;width:75px;height:75px;border-left:1px solid rgba(210,161,109,.7);border-top:1px solid rgba(210,161,109,.7);pointer-events:none;}
#projectGallery .slider-for .img a:after{content:"VIEW";position:absolute;right:22px;bottom:20px;z-index:3;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(23,32,77,.18);color:#fff;font-family:"Times New Roman",serif;font-size:8px;letter-spacing:.18em;backdrop-filter:blur(5px);transition:background .4s ease,border-color .4s ease;}
#projectGallery .slider-for img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform 1.2s cubic-bezier(.22,.61,.36,1);}
#projectGallery .slider-for .img:hover img{transform:scale(1.04);}
#projectGallery .slider-for .img:hover a:after{border-color:#D2A16D;background:#D2A16D;}
#projectGallery .project_gallery_bottom{position:relative;display:grid;grid-template-columns:90px minmax(0,1fr) 120px;align-items:center;gap:28px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(210,161,109,.18);}
#projectGallery .project_gallery_count{display:flex;align-items:center;gap:9px;font-family:"Times New Roman",serif;}
#projectGallery .project_gallery_count .current{color:#D2A16D;font-size:18px;}
#projectGallery .project_gallery_count .total{color:#aca198;font-size:10px;}
#projectGallery .project_gallery_count i{display:block;width:24px;height:1px;background:#d1c8c0;transform:rotate(-52deg);}
#projectGallery .slider-nav{min-width:0;margin:0 -5px;}
#projectGallery .slider-nav .slick-list{overflow:hidden;}
#projectGallery .slider-nav .slick-track{display:flex;align-items:center;}
#projectGallery .slider-nav .slick-slide{padding:0 5px;cursor:pointer;opacity:.45;transition:opacity .4s ease;}
#projectGallery .slider-nav .slick-current{opacity:1;}
#projectGallery .slider-nav .img{position:relative;overflow:hidden;aspect-ratio:4/3;}
#projectGallery .slider-nav .img:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:#D2A16D;transition:width .45s ease;}
#projectGallery .slider-nav .slick-current .img:after{width:100%;}
#projectGallery .slider-nav img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.72);transition:filter .4s ease,transform .5s ease;}
#projectGallery .slider-nav .slick-current img{filter:saturate(1);}
#projectGallery .slider-nav .img:hover img{transform:scale(1.05);}
#projectGallery .project_gallery_arrow{display:flex;justify-content:flex-end;gap:8px;}
#projectGallery .project_gallery_arrow .slick-arrow{position:relative!important;left:auto!important;right:auto!important;top:auto!important;display:flex!important;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(80,69,60,.18);border-radius:50%;background:#fff;transform:none!important;transition:border-color .35s ease,background .35s ease;}
#projectGallery .project_gallery_arrow .slick-arrow:before{display:none;}
#projectGallery .project_gallery_arrow svg{width:22px;height:22px;fill:none;stroke:#5e5751;stroke-width:1.2;transition:stroke .35s ease;}
#projectGallery .project_gallery_arrow .slick-arrow:hover{border-color:#D2A16D;background:#D2A16D;}
#projectGallery .project_gallery_arrow .slick-arrow:hover svg{stroke:#fff;}


@media screen and (max-width:900px) {
  #projectGallery .project_gallery_wrap { margin-top: 50px; }
  #projectGallery .slider-for .img a { aspect-ratio: 4/2.5; }
  #projectGallery .project_gallery_bottom { grid-template-columns: 70px minmax(0,1fr) 105px; gap: 18px; }
  #projectGallery .project_gallery_arrow .slick-arrow { width: 44px; height: 44px; }
}
@media screen and (max-width:768px) {
  #projectGallery .slider-for .img a { aspect-ratio: 4/3; }
  #projectGallery .project_gallery_bottom { grid-template-columns: minmax(0,1fr) auto; }
  #projectGallery .project_gallery_count { display: none; }
  #projectGallery .slider-nav { grid-column: 1; }
  #projectGallery .project_gallery_arrow { grid-column: 2; }
}
@media screen and (max-width:560px) {
  #projectGallery .project_gallery_wrap { margin-top: 40px; }
  #projectGallery .slider-for .img a:before { left: 8px; top: 8px; width: 48px; height: 48px; }
  #projectGallery .slider-for .img a:after { right: 12px; bottom: 12px; width: 44px; height: 44px; font-size: 7px; }
  #projectGallery .project_gallery_bottom { display: block; margin-top: 18px; padding-top: 18px; }
  #projectGallery .slider-nav { margin: 0 -4px; }
  #projectGallery .slider-nav .slick-slide { padding: 0 4px; }
  #projectGallery .project_gallery_arrow { margin-top: 18px; }
  #projectGallery .project_gallery_arrow .slick-arrow { width: 42px; height: 42px; }
}

/* =========================================================
   建案列表頁
   ========================================================= */
#articleProjectList{position:relative;width:100%;overflow:hidden;padding:80px 0 130px;background:#fff;}
#articleProjectList:before{content:"PROPERTY";position:absolute;right:-40px;top:55px;color:rgba(37,43,85,.025);font-family:"Times New Roman",serif;font-size:155px;line-height:1;letter-spacing:.1em;white-space:nowrap;pointer-events:none;}
#articleProjectList>.article_heading{width:min(1280px,calc(100% - 80px));margin-left:auto;margin-right:auto;}
#articleProjectList #product_list{position:relative;width:min(1280px,calc(100% - 80px));margin:90px auto 0;padding:0;counter-reset:projectList;}
#articleProjectList #product_list>li{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:8%;margin:0;padding:0 0 105px;counter-increment:projectList;text-align:left;}
#articleProjectList #product_list>li+li{padding-top:105px;border-top:1px solid rgba(210,161,109,.16);}
#articleProjectList #product_list>li:nth-child(even){grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);}
#articleProjectList #product_list>li:nth-child(even) .lbox{grid-column:2;grid-row:1;}
#articleProjectList #product_list>li:nth-child(even) .rbox{grid-column:1;grid-row:1;}
#articleProjectList #product_list>li:before{content:counter(projectList,decimal-leading-zero);position:absolute;right:0;top: 0;color:rgba(210,161,109,.09);font-family:"Times New Roman",serif;font-size:96px;line-height:1;letter-spacing:.04em;pointer-events:none;}
#articleProjectList #product_list>li:nth-child(even):before{right:auto;left:0;}

/* =========================================================
   圖片
   ========================================================= */
#articleProjectList .lbox{position:relative;min-width:0;}
#articleProjectList .clip{position:relative;overflow:hidden;background:#eee;}
#articleProjectList .clip>svg{display:block;width:100%;height:auto;}
#articleProjectList .clip>.img_cover{left:0;top:0;width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform 1.2s cubic-bezier(.22,.61,.36,1),filter .7s ease;}
#articleProjectList .clip:before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(22,25,43,0) 55%,rgba(20,22,37,.25) 100%);pointer-events:none;transition:opacity .45s ease;}
#articleProjectList .project_img_frame{position:absolute;inset:13px;z-index:3;border:1px solid rgba(255,255,255,.28);pointer-events:none;}
#articleProjectList .project_img_frame:before{content:"";position:absolute;left:-14px;top:-14px;width:74px;height:74px;border-left:1px solid #D2A16D;border-top:1px solid #D2A16D;}
#articleProjectList .project_view{position:absolute;right:22px;bottom:20px;z-index:4;display:flex;align-items:center;gap:12px;color:#fff;font-family:"Times New Roman",serif;font-size:8px;letter-spacing:.2em;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;}
#articleProjectList .project_view svg{display:block;width:38px;fill:none;stroke:#fff;stroke-width:1;}
#articleProjectList #product_list>li:hover .clip>.img_cover{transform:scale(1.055);}
#articleProjectList #product_list>li:hover .project_view{opacity:1;transform:translateY(0);}

/* =========================================================
   右側資訊
   ========================================================= */
#articleProjectList .rbox{position:relative;min-width:0;padding:20px 4% 20px 0;}
#articleProjectList #product_list>li:nth-child(even) .rbox{padding:20px 0 20px 4%;}
#articleProjectList .project_meta{display:flex;align-items:center;gap:11px;margin-bottom:17px;color:#a58a70;font-family:"Times New Roman",serif;font-size:9px;line-height:1.2;letter-spacing:.2em;}
#articleProjectList .project_meta>span{color:#D2A16D;}
#articleProjectList .project_meta i{display:block;width:30px;height:1px;background:linear-gradient(90deg,rgba(210,161,109,.7),rgba(210,161,109,0));}
#articleProjectList .titleEn{color:#9f9388;font-size:10px;font-weight:400;letter-spacing:.16em;}
#articleProjectList .h3{margin:0;color:#252b55;font-family:"Noto Serif TC","Times New Roman",serif;font-size:clamp(25px,2.1vw,35px);font-weight:500;line-height:1.5;letter-spacing:.1em;-webkit-line-clamp:2;height: auto;}
#articleProjectList .project_brand_line{display:flex;width:65px;height:3px;margin-top:22px;}
#articleProjectList .project_brand_line span{display:block;height:100%;}
#articleProjectList .project_brand_line span:nth-child(1){width:21px;background:#c4001a;}
#articleProjectList .project_brand_line span:nth-child(2){width:23px;background:#252b55;}
#articleProjectList .project_brand_line span:nth-child(3){width:21px;background:#eda91e;}
#articleProjectList article{max-width:520px;margin-top:28px;color:#6f6761;font-size:14px;font-weight:300;line-height:2.05;letter-spacing:.06em;}
#articleProjectList #product_list>li:nth-child(even) article{max-width:500px;}

/* =========================================================
   查看建案
   ========================================================= */
#articleProjectList .more{position:relative;display:inline-flex;align-items:center;gap:21px;margin-top:35px;padding:10px 0;color:#625850;font-family:"Noto Serif TC","Times New Roman",serif;font-size:11px;font-weight:400;line-height:1;letter-spacing:.12em;transition:color .4s ease;}
#articleProjectList .more:before{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:#D2A16D;transition:width .5s cubic-bezier(.22,.61,.36,1);}
#articleProjectList .more b{display:block;width:48px;transition:width .4s ease;}
#articleProjectList .more svg{display:block;width:100%;fill:none;stroke:#D2A16D;stroke-width:1;}
#articleProjectList #product_list>li:hover .more{color:#252b55;}
#articleProjectList #product_list>li:hover .more:before{width:100%;}
#articleProjectList #product_list>li:hover .more b{width:62px;}
#articleProjectList .project_link{z-index:10;inset:0;}

/* =========================================================
   左右連接裝飾
   ========================================================= */
#articleProjectList .rbox:before{content:"";position:absolute;left:-62px;top:50%;width:42px;height:1px;background:linear-gradient(90deg,rgba(210,161,109,0),#D2A16D);}
#articleProjectList .rbox:after{content:"";position:absolute;left:-21px;top:calc(50% - 3px);width:6px;height:6px;border:1px solid #D2A16D;border-radius:50%;background:#fff;}
#articleProjectList #product_list>li:nth-child(even) .rbox:before{left:auto;right:-62px;background:linear-gradient(90deg,#D2A16D,rgba(210,161,109,0));}
#articleProjectList #product_list>li:nth-child(even) .rbox:after{left:auto;right:-21px;}

/* =========================================================
   Hover 品牌細節
   ========================================================= */
#articleProjectList .h3{transition:color .4s ease;}
#articleProjectList #product_list>li:hover .h3{color:#b47d4b;}
#articleProjectList #product_list>li:hover .project_brand_line span:nth-child(1){animation:projectBrandLine .45s ease forwards;}
#articleProjectList #product_list>li:hover .project_brand_line span:nth-child(2){animation:projectBrandLine .45s .08s ease forwards;}
#articleProjectList #product_list>li:hover .project_brand_line span:nth-child(3){animation:projectBrandLine .45s .16s ease forwards;}

@keyframes projectBrandLine{
0%{transform:scaleX(.2);transform-origin:left;}
100%{transform:scaleX(1);transform-origin:left;}
}