#sub_banner_box {opacity: 1;background: #ffffff;margin-top: 30px;}
#sub_banner_box .parallax_bg {margin-bottom: 0;min-height: 500px;opacity: 1;width: 100vw;}
.webBox .parallax_svg.bann { -webkit-animation: parallax_top 10s linear infinite; animation: parallax_top 10s linear infinite; position: fixed; top: 87px }
#wrap { margin-top: -80px; z-index: 4 }
#wrap *{
  box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#wrap >.workframe { width: var(--width-xl); }
#wrap .pag_tit {line-height: 170%;margin-top: 120px;color: var(--primary);font-size: 2.75rem;position: relative;display: inline-block;padding-bottom: 0;font-weight: 700;width: 100%;margin-bottom: 30px;}
aside{display:none;}

#wrap .pag_tit::before,#wrap .pag_tit::after {content: "";position: absolute;left: 50%;bottom: 0;height: 2px;transform: translateX(-50%);border-radius: 999px;}
#wrap .pag_tit::before {width: 33.3%;background: rgba(var(--primary-rgb),0.22);}
#wrap .pag_tit::after { width: 42px; background: var(--primary); }


.waylink ol { margin-bottom: 25px; text-align: center; }
.waylink ol li,.waylink ol li a { letter-spacing: .1em; font-weight: 100; font-size: 13px; vertical-align: bottom }
.waylink ol li:after { margin: 0 10px; display: inline-block; font-weight: 100; font-size: 12px; color: var(--info); content: "/" }
.waylink ol li:last-child:after { margin: 0; content: "" }
aside { margin-bottom: 60px; z-index: 5 }
aside ul li b { padding: 5px 10px 5px 5px }
aside ul li b .fa:before { content: "\f107" }
aside >ul >li { position: relative; display: inline-block }
aside >ul >li h4 { padding: 0 5px; }
aside >ul >li h4 a { padding: 10px 15px; font-weight: 400; font-size: 17px; background: #eae7e7; color: #5a4c4c; }
aside >ul >li.action h4 a,aside >ul >li.action h4 i { background: var(--primary); color: var(--white); }
aside >ul >li .subUL { position: absolute; margin-top: 10px; width: 180px; background: var(--white); left: calc((100% - 180px)/2) }
aside >ul >li .subUL >li { border-bottom: 1px rgba(var(--gray-rgb),.1) solid }
aside >ul >li .subUL >li a { padding: 3px 15px; display: block; line-height: 140%; font-weight: 300 }
aside >ul >li .subUL >li .subULHead a { padding: 10px 15px; color: var(--black); font-weight: 400 }
aside >ul >li .subUL >li b { display: none }
aside >ul >li .sub2UL { margin: 0 10px 10px }
aside >ul >li[data-type="1"] { overflow: hidden }
aside >ul >li[data-type="1"] .subUL { box-shadow: 0 0 15px rgba(var(--black-rgb),0); opacity: 0; z-index: -1 }
aside >ul >li[data-type="2"] { overflow: visible }
aside >ul >li[data-type="2"] .subUL { box-shadow: 0 0 15px rgba(var(--black-rgb),.15); opacity: 1; z-index: 1 }
.mb_nav { display: none }
#content_wrap { padding: 0 0 60px; min-height: 350px }
#content_wrap >h2 { font-size: 30px; font-weight: 500; }
#content_wrap .list_box { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin: 40px 0 50px; }
#content_wrap .list_box li { margin-bottom: 0; vertical-align: top; margin-right: 0; margin-left: 0; width: 100%; display: flex; flex-direction: column; padding: 20px; box-shadow: 20px 20px 35px 10px rgb(0 0 0/5%); border: #7e522c 2px solid; border-radius: 6px; }
#content_wrap .list_box li svg { width: 100%; aspect-ratio: 2/3; }
.webBox .list_box .img_scale:hover img { transform: scale(1.01); }
#content_wrap .list_box li .h3 { font-size: 1.33rem; height: auto; font-weight: 700; color: var(--primary); padding: 10px 0 0; }
#content_wrap .list_box li p{color:#7f7f7f;}
#content_wrap .img_box { background-color: #f9f9f9 }
#content_wrap .info_box { margin: 10px 0  0; }
#content_wrap .info_box .time {width: 88px;font-weight: 400;font-size: 13px}
#content_wrap .info_box .more_btn {margin-left: 10px;padding: 2px 15px;max-width: calc(100% - 105px);height: 22px;font-weight: 100;font-size: 13px;z-index: 3;background: var(--primary);}
#content_wrap .info_box .quote_box * { font-weight: 400; font-size: 13px }
#content_wrap .info_box h3 { height: 34px; font-size: 20px }
#content_wrap .info_box article { margin-top: 10px; height: auto; -webkit-line-clamp: 2; font-size: 15px; font-weight: 300; }
#content_wrap .info_box >div { padding: 20px; border-radius: 0 15px 15px 15px }
#content_wrap .info_box >div article { height: 42px; line-height: 140%; font-weight: 300; font-size: 15px; -webkit-line-clamp: 2 }




#book_list li .h3 { margin-top: 10px; height: 30px; font-size: 18px }
#content_wrap #book_list.list_box li p{
    -webkit-line-clamp: none;
    height: auto;
    margin-top: 10px;
}

#album_list { margin-bottom: 5vw; flex-wrap: wrap }
#album_list >div { margin: 0 1px 1px 0; height: 300px; flex-grow: 1 }
#album_list >div img { width: auto; min-width: 100%; height: 300px }
#faq_list { margin-bottom: 50px }
#faq_list li { border-bottom: 1px rgba(var(--primary-rgb),.7) dashed }
#faq_list li .title { padding: 20px 20px 20px 0 }
#faq_list li .title font { vertical-align: top }
#faq_list li .title .txt { margin-left: 10px; width: calc(100% - 50px); font-size: 20px }
#faq_list li .title .icon { width: 40px; height: 34px }
#faq_list li .title .icon:before,#faq_list li .title .icon:after { position: absolute; margin: auto; width: 14px; height: 2px; background: var(--primary); display: block; top: calc((100% - 2px)/2); left: calc((100% - 14px)/2); content: "" }
#faq_list li .info { padding: 0 20px 30px 50px; font-size: 15px }
#mataJJtext { margin-bottom: 60px; background: #f3f3f3; padding: 30px 50px; }
#mataJJtext h4 { margin: 15px 0; font-size: 20px; }
#mataJJtext p { margin: 15px 0; }
#mataJJtext ol { padding-left: 30px; }
#mataJJtext li { list-style: circle; margin: 5px 0; }
#pagenav a,#pagenav strong { margin: 0 2px; width: 35px; height: 35px; display: inline-block; text-align: center; line-height: 35px; font-weight: 400 }
#pagenav strong { background: var(--primary); color: var(--white); border-radius: 50% }
#pagenav p { margin: 0 5px; width: calc(50% - 10px); vertical-align: top }
#pagenav p a { margin: 15px 0 0; padding: 0 15px; width: auto; height: auto; line-height: initial; font-size: 0 }
#pagenav p a i { margin: 0 5px 0 0; width: 11px; line-height: 23px; font-size: 12px; vertical-align: top }
#pagenav p a font { max-width: calc(100% - 16px); min-width: auto; font-size: 14px; font-weight: 100; vertical-align: top }
#pagenav p:last-child a i { margin: 0 0 0 5px }
#describe { margin: 2em 0; }
#describe *,.tab_content * { vertical-align: bottom; color: currentcolor }
#google_shere { margin-top: 30px }
#content_wrap { width: 100%; padding: 50px 20px; box-sizing: border-box; background-color: transparent; font-family: 'PingFang TC', 'Microsoft JhengHei', sans-serif; }
#content_wrap #form1 {width: min(1024px , 100%);margin: 0 auto;padding: 45px 50px;border: 3px solid #6b635e;border-radius: 12px;background: #ffffff;box-shadow: 0 15px 35px rgba(0,0,0,0.06);}
#content_wrap article { font-size: 16px; color: #5a524c; line-height: 1.8; margin-bottom: 20px; text-align: center; letter-spacing: 0.5px; }
#content_wrap .note { font-size: 14px; color: #d93025; margin-bottom: 25px; text-align: right; letter-spacing: 1px; }
#content_wrap .item { display: flex; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; }
#content_wrap .item label { width: 120px; font-size: 16px; font-weight: 600; color: #4a403a; padding-top: 14px; display: flex; justify-content: flex-end; padding-right: 20px; box-sizing: border-box; letter-spacing: 1px; }
#content_wrap .item label i { color: #d93025; font-style: normal; margin-left: 5px; }
#content_wrap .item font { flex: 1; max-width: calc(100% - 120px); display: block; }
#content_wrap .item input[type="text"], #content_wrap .item input[type="tel"], #content_wrap .item select, #content_wrap .item textarea { width: 100%; padding: 14px 18px; border: 1px solid #dcd7d3; border-radius: 8px; font-size: 16px; color: #333333; background-color: #fbfbf9; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-sizing: border-box; appearance: none; -webkit-appearance: none; outline: none; }
#content_wrap .item textarea { resize: vertical; min-height: 120px; font-family: inherit; line-height: 1.6; }
#content_wrap .item input:focus, #content_wrap .item select:focus, #content_wrap .item textarea:focus { border-color: #8b6240; box-shadow: 0 0 0 4px rgba(139, 98, 64, 0.15); background-color: #ffffff; }
#content_wrap .check_box font { display: flex; align-items: center; gap: 15px; }
#content_wrap .check_box input { width: 160px; text-align: center; letter-spacing: 3px; font-weight: bold; text-transform: uppercase; }
#content_wrap .check_box img { border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform 0.3s ease; background: #fff; padding: 2px; }
#content_wrap .check_box img:hover { transform: scale(1.05); }
#content_wrap .send_box { margin-top: 45px; text-align: center; }
#content_wrap .send_box a { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #a47752 0%, #855b38 100%); color: #ffffff; text-decoration: none; padding: 16px 60px; border-radius: 8px; font-size: 18px; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 8px 20px rgba(133, 91, 56, 0.35); }
#content_wrap .send_box a:hover { transform: translateY(-4px); box-shadow: 0 12px 25px rgba(133, 91, 56, 0.5); background: linear-gradient(135deg, #b58863 0%, #956b48 100%); }
#content_wrap .send_box a font { display: flex; align-items: center; gap: 8px; }
#content_wrap .send_box a b { font-weight: 600; letter-spacing: 2px; }

@media (max-width: 768px) {
#content_wrap {padding: 30px 0px;}
#content_wrap #form1 {padding: 30px 15px;border-width: 2px;border-radius: 8px;}
#content_wrap .item { flex-direction: column; margin-bottom: 20px; }
#content_wrap .item label { width: 100%; justify-content: flex-start; padding-right: 0; padding-top: 0; margin-bottom: 10px; font-size: 15px; }
#content_wrap .item font { max-width: 100%; width: 100%; }
#content_wrap .item input[type="text"], #content_wrap .item input[type="tel"], #content_wrap .item select, #content_wrap .item textarea { padding: 12px 15px; font-size: 16px; /* 確保 iOS Safari 不會自動放大 */ }
#content_wrap .check_box font { flex-direction: column; align-items: flex-start; gap: 12px; }
#content_wrap .check_box input { width: 100%; }
#content_wrap .send_box { margin-top: 30px; }
#content_wrap .send_box a { width: 100%; padding: 15px 0; box-sizing: border-box; }
}
[data-action="loader"] { width: 100vw; height: 100vh; background: rgba(var(--black-rgb),.3); line-height: 100vh; top: 0; left: 0; opacity: 0; z-index: -1 }
[data-action="loader"] .loader_circle { border: 2px rgba(var(--black-rgb),.6) solid; border-left-color: rgba(var(--white-rgb),.4) }
#lodbg { opacity: 1; z-index: 99999 }
@media screen and (min-width:1281px) {
  aside >ul >li:hover h4 a,aside >ul >li:hover h4 i { background: var(--primary); color: var(--white); }
}


@media screen and (min-width:980px) {
  #google_shere { margin-top: 6vw }
}
@media screen and (min-width:761px) {
  .form_box p.item { padding: 20px 20px; }
  .form_box p.item label { width: 170px }
  .form_box p.item font { margin: 0 0 0 30px; width: calc(100% - 200px) }
}
@media screen and (max-width:1460px) {
  #wrap .pag_tit {margin-top: 20px;}
  #wrap {margin-top: 10px;}
}
@media screen and (max-width:1280px) {
  #wrap .workframe { width: 90%; }
  #sub_banner_box .parallax_bg { min-height: 350px; }
  #content_wrap .list_box{grid-template-columns: repeat(3, 1fr);}
}
@media screen and (max-width:768px){
  #sub_banner_box .parallax_bg {min-height: 250px;}
}
@media screen and (max-width:640px) {
  aside >ul >li h4 a { display: block !important; }
  aside >ul >li h4 { padding: 0; }
  #sub_banner_box .parallax_bg {min-height: 245px;background-position: 16% 50%;}
  #album_list >div,#album_list >div img { height: 40vw }
  .mb_nav { display: flex; flex-direction: column; align-items: center; border: #79797957 1px solid; padding: 10px 0 }
  .mb_nav p { display: flex }
  .mb_nav b { margin-left: 10px; display: flex; align-items: center }
  .soon.mb_nav b .fa { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg) }
  .mb_nav  .fa:before { content: "\f107" }
  #category_nav { position: absolute; display: flex; flex-direction: column; background: #f3f3f3; width: 100%; height: 0; opacity: 0 }
  #category_nav.showme { height: auto; opacity: 100%; z-index: 999 }
  #content_wrap .list_box{grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width:550px) {
  #content_wrap .list_box li {margin: 0 0 0px;}
  #community { margin-top: 10px }
  #content_wrap .list_box{display:flex;flex-direction: column;align-items: center;margin: 0 auto 50px;gap: 35px;}
}
@media screen and (max-width:450px) {
  #album_list >div,#album_list >div img { height: 50vw }
  #pagenav a,#pagenav strong { margin: 0; width: 24px; height: 24px; line-height: 24px; font-size: 14px }
  #pagenav p a { display: block }
}