@import url(reset.css);
@import url(header.css);
@import url(footer.css);
@import url(index.css);
@import url(housing.css);
@import url(findings.css);
@import url(teamService.css);
@import url(swiper-bundle.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css);
@import url(bootstrap.min.css);
body { font-family: Noto Sans TC; }
.test { width: 82.8%; margin: 0 auto }

/*----------------------------------*\
  # big title
\*----------------------------------*/
.title { background: url('../images/bg_title.webp'),linear-gradient(to top right,#ffaa33 20%,#ff8000 60%,#ffaa33 100%); width: 100%; height: 9rem; text-align: center; background-repeat: no-repeat; background-position: center; background-size: 100% auto; }
.title h1 span { line-height: 9rem; letter-spacing: .18rem; color: var(--main); color: #FFF; font-family: var(--mingle); font-weight: 800; font-size: var(--topic); display: inline-block; animation: slideLeft 1.5s forwards; opacity: 0; transition-timing-function: cubic-bezier(0.075,0.82,0.165,1); }
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(200px); }
  to { opacity: 1; transform: translateX(0%); }
}

/*----------------------------------*\
  # main
\*----------------------------------*/
.page__wrap { padding-top: calc(var(--header-h) + .1rem); padding-left: .1rem; padding-right: .1rem; min-height: calc(var(--vh,.45vh) * 100); }

/*----------------------------------*\
  # 社交功能容器 - 固定右下角
\*----------------------------------*/
.socialContainer { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 15px; align-items: center; }
.social-btn,.socialContainer a { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; color: white !important; text-decoration: none; margin: 5px; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.social-btn:hover,.socialContainer a:hover { transform: scale(1.1); box-shadow: 0 4px 10px rgba(0,0,0,0.3); text-decoration: none; }
.social-btn i,.socialContainer a i { font-size: 30px; }

/* 收藏按鈕背景樣式 */
.socialContainer a[title="收藏"] { background: #e91e63; /* 粉紅色背景，符合愛心收藏的主題 */ }
.socialContainer a[title="收藏"]:hover { background:#c2185b;/* hover 時變成深一點的粉紅色 */ transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.25);}

/* 其他社群按鈕的背景色 */
.socialContainer .line-btn { background: #06B04F; /* LINE 綠色 */ }
.socialContainer .line-btn svg{width: 40px;height: 40px;}
.socialContainer .main-btn { background: #23A6A7;padding-right: 0.2rem; /* 分享 黃色 */ }
.socialContainer .main-btn svg{width: 50px;height: 50px;}
.socialContainer .facebook-btn { background: #1877f2; /* Facebook 藍色 */ }
.socialContainer .phone-btn { background: #ff5722; /* 電話橘紅色 */ }
.socialContainer .share-btn{background: #f8c558;}
/* 其他按鈕的通用 hover 效果 */
.socialContainer .line-btn:hover {
background:#00a000;/* 更深的綠色 */
transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
.socialContainer .main-btn:hover {
cursor: pointer;
background:#1e9494;/* 更深的綠色 */
transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
.socialContainer .facebook-btn:hover {
background:#166fe5;/* 更深的藍色 */
transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
.socialContainer .phone-btn:hover {
background:#e64a19;/* 更深的橘紅色 */
transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
.socialContainer .share-btn:hover {
background:#f7c04a;/* 更深的橘紅色 */
transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
.socialContainer .material-icons,#back-to-top .material-icons { font-size: 30px; color: #ffffff; }
#other-btn{position: absolute;right: 70px;bottom: 15px;flex-direction: column;background-color: #ffffffc9;margin-right: .5rem;border-radius: 25px;z-index: 5;}
#back-to-top {
  /* 完全隱藏回到頂部按鈕 */
  display:none !important;visibility:hidden;opacity:0;
}
#back-to-top:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); background: #ffaa33; }

/* 初始狀態：隱藏 & 下方位移 */
#other-btn { opacity: 0; transform: translateY(20px); transition: all .3s ease; }
/* 顯示時：往上滑出 + 淡入 */
#other-btn.show { opacity: 1; transform: translateY(0); }


/*平板響應式設計*/
@media (max-width:1199px) {
  .page__wrap { padding-top: var(--header-h); padding-left: 0px; padding-right: 0px; }
  .test { width: 100% }
  .title { width: 100%; margin: 0 auto; height: 5em; }
  .title h1 span { line-height: 4.5rem; }
}
/* 手機版響應式設計 */
@media (max-width:768px) {
  .socialContainer { bottom: 15px; right: 15px; gap: 10px; }
  .socialContainer .material-icons { font-size: 25px; }
  .social-btn,.socialContainer a { width: 45px; height: 45px; margin: 3px; }
  .social-btn i,.socialContainer a i { font-size: 25px; }
  .socialContainer .line-btn svg{width: 30px;height: 30px;}
  #back-to-top { width: 50px; height: 50px; }
  #back-to-top .material-icons { font-size: 25px; }
  #other-btn{right:60px;padding: 0rem;margin-right: 0rem;right: 0px;bottom:115px}
}
/*----------------------------------*\
  # 查封筆錄
\*----------------------------------*/
.record-modal { display: none; position: fixed; z-index: 1;left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
.record-modal.active { display: flex; align-items: flex-start; justify-content: center; padding: 90px 20px 100px; overflow-y: hidden; min-height: 100vh;z-index: 3;}
.record-content { max-height: calc(100vh - 160px); overflow-y: auto; position: relative; top: 1.5rem; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; border-radius: 10px; width: 55%; box-shadow: rgba(0,0,0,0.4) 0px 30px 90px; -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; }
.record-header{border-radius: 5px 5px 0 0;}
.record-header i { background: #bebebe91; border: none; color: #000000; font-size: 28px; cursor: pointer; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; line-height: 1; }
.record-header i:hover { background: #ff8a15; transform: rotate(90deg); }
.record-header {padding: .8rem 1rem;color: white;border-bottom: #e6e6e6 solid 1px; }
.record-header .record-title{font-size: 1.3rem;font-weight: 700;color: #FFF;margin-left: 1rem;background-image: linear-gradient(45deg, #ff8000 0%, #ffaa33 40%,#ffaa33 60%,#ff8000 100%);padding: 0 1rem;}
.record-body {padding: 0.5rem 2rem;text-align: justify;}
.record-body ul li{list-style-type:decimal;list-style-position: inside;padding: 0.8rem 0;text-indent: -1.1em;margin-left: 1em;border-bottom: #f7d3b069 solid 1px;}
.record-body ul li::marker{color: #fc962f;font-weight: 700;}
.record-body ul li:last-child{border-bottom: none;}
/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* 手機版響應式設計 */
@media (max-width:1199px) {
    .record-content{width: 90%;}
}
@media (max-width:767px) {
    .record-content {max-height: calc(100vh - 130px);}
    .record-modal.active{padding: 65px 15px;}
    .record-header {padding: .6rem 1rem;}
    .record-header .record-title{font-size: 1.1rem;}
    .record-header i {width: 30px; height: 30px;font-size:20px}
    .record-body ul li{padding: 0.5rem 0;font-size: 0.9rem;}
}