@import url('/css/community.css'); header:not(.headerfixed) #cis { opacity: 1; } 
header #cis img { -webkit-filter: initial; filter: initial; height: 100px; } 
header.headerfixed #cis img { height: 65px; -webkit-filter: contrast(0) brightness(150%); filter: contrast(0) brightness(200%); } 

/* sub_banner */
#sub_banner { width: 86%; position: relative; margin-left: auto; border-radius: 0 230px 0 0; } 

#sub_banner a { position: relative; display: inline-block; } 
#sub_banner a img { width: 100vw; height: 350px; object-fit: cover; object-position: 50% 60%; border-radius: 0 0 0 140px; } 
#sub_banner a:after { position: absolute; width: 100%; height: 100%; background: rgb(31 31 31 / .3); display: block; top: 0; left: 0; content: ""; border-radius: 0 0 0 140px; } 

/* wrap */
#wrap { padding: 5vw 0; background-image: url(/images/37/bg.jpg); background-repeat: no-repeat; background-position: top left; background-size: 100%; } 
#wrap #content { position:relative; z-index: 5; } 
#content .workframe { width: min(80%, 1300px); } 
.webBox .wrapper:after { display:none; } 

/* sPictureBox */
#sPictureBox { padding: 5vw 0; border-top: 1px solid #ddd; position: relative; } 
#sPictureBox:after { content:''; bottom: 0vw; right: 1.5vw; position: absolute; animation: aboutImgAnimation 10s ease-in-out infinite; width: 350px; aspect-ratio: 3.5/5; background-image: url(/userfiles/images/20250116021916636.jpg); background-position: 50% 50%; background-size: cover; } 
@keyframes aboutImgAnimation { 
 0% { -webkit-transform:translateY(0); transform:translateY(0); } 50% { -webkit-transform:translateY(20px); transform:translateY(20px); } 100% { -webkit-transform:translateY(0); transform:translateY(0); } 
 }

#sPictureBox .workframe { width: min(80%, 1250px); margin: 0 auto; padding-left: 126px; } 
#sPictureBox .title { line-height: 120%; text-transform: uppercase; letter-spacing: 3px; font-size: 30px; color: #1f1f1f; font-weight: 400; } 
#sPictureBox .entitle { font-style: unset; margin: 0 auto; font-family: "Cormorant", serif; font-size: 24px; margin-bottom: 20px; display: block; line-height: 1.2; margin-top: 10px; } 
#sPictureBox .titleBox p { color: #555; letter-spacing: 1px; } 
#sPictureBox h5 { font-size: 16px; margin: 30px 0 20px; letter-spacing: 1px; color: #555; font-weight: 400; } 
#sPictureBox a { color:var(--black); border: 1px solid #9f9f9f; padding: 11px 40px; position: relative; margin-right: 15px; } 
#sPictureBox a:hover { color:#fff; } 
#sPictureBox a:after { content:''; width: 0; height: 100%; position: absolute; top: 0; left: 0; background: var(--black); z-index: -1; } 
#sPictureBox a:hover:after { width:100%; } 

/* pageTop */
.pageTop { position: relative; margin: 0 auto 5vw; width: min(80%, 1360px); z-index: 6; } 
.pageTop h1 { margin-bottom: 25px; line-height: 120%; letter-spacing: 2px; color: var(--black); font-weight: 500; } 
.pageTop .waylink ol { font-size: 0; } 
.pageTop .waylink ol li , .pageTop .waylink ol li a { display: inline-block; letter-spacing: 1px; color: #5a5a5a; font-family: "Noto Sans TC", serif; font-size: 13px; } 
.pageTop .waylink ol li:after { margin: 0 10px; font-weight: 100; font-size: 12px; vertical-align: text-top; content: "-"; } 
.pageTop .waylink ol li:last-child:after { margin: 0; content: ""; } 

/* subnav */
#subnav { margin: 3vw auto 0; text-align: center; } 
#subnav #sideBtn { position: relative; overflow: hidden; padding: 10px 20px; width: calc(100% - 40px); background: #fbfbfb; border: 1px #aaa solid; display: inline-block; text-align: center; color: #535353; z-index: 2; } 
#subnav #sideBtn:before { position: absolute; width: 100%; height: 100%; background: #8a7860; top: 0; left: 0; transform: translateX(-140%) skewX(63deg); transition: .4s cubic-bezier(.23,1,.32,1); content: ""; } 
#subnav #sideBtn font { position: relative; z-index: 1; } 
#subnav #sideBtn i { position: absolute; top: calc((100% - 8px) / 2); right: 20px; z-index: 2; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transform: rotate(0); transform: rotate(0); } 
#subnav #sideBtn[data-type="2"]:before { -webkit-transform: translateX(0) skewX(0); transform: translateX(0) skewX(0); } 
#subnav #sideBtn[data-type="2"] font { color: #fff; } 
#subnav #sideBtn[data-type="2"] i { color: #fff; -webkit-transform: rotate(180deg); transform: rotate(180deg); } 
#subnav ul { font-size: 0; } 
#subnav ul li b[data-action="sideOpen"] { position: absolute; padding: 10px 20px; display: block; color: #fff; right: 0; top: 0; cursor: pointer; } 
#subnav ul li b[data-action="sideOpen"] i:before { content: "\f067"; } 
#subnav ul >li h4 { position: relative; } 
#subnav ul >li h4 a { font-weight: 400; color: #fff; } 
#subnav ul >li >ul.subUL li a { padding: 5px 15px; display: block; color: #1f1f1f; } 
#subnav ul >li >ul.subUL li .sub2ULHead a { padding: 2px 15px 2px 35px; color: #2f8bd1; } 
#subnav ul >li >ul.subUL b[data-action="sideOpen"] { display: none; } 

/* content list_article */
#content .list_article section { padding: 5vw 0; } 
#content .list_article section .workframe { display: flex; align-items: center; justify-content: space-between; } 
#content .list_article section .info { width: 50%; } 
#content .list_article section .info h3 a , #content .list_book ul li .info h3 { margin-bottom: 20px; height: 54px; font-weight: 400; letter-spacing: 4px; font-size: 32px; color: #1f1f1f; } 
#content .list_article section .info article { height: 140px; font-weight: 300; line-height: 35px; letter-spacing: 1px; font-size: 15px; color: #1f1f1f; -webkit-line-clamp: 4; } 
#content .list_article section .img { margin: 0 5% 0 0; width: 45%; } 
#content .list_article section .img img { width: 100%; height: 400px; background: #fafafa; object-fit: cover; } 
#content .list_article section a.more , #content .list_book ul li .info a.more { padding: 40px 0 2px; display: inline-block; border-bottom: 1px #6b6b6b solid; } 
#content .list_article section a.more font , #content .list_book ul li .info a.more font { margin-right: 40px; display: inline-block; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 15px; color: #1f1f1f; } 
#content .list_article section:nth-child(odd) { background: #f1f4f6; } 
#content .list_article section:nth-child(odd) .img { margin: 0 0 0 5%; order: 1; } 

/* content list_news */
#content .list_news li { position: relative; padding: 35px 10px; border-bottom: 1px #e8e8e8 solid; font-size: 0; display: flex; align-items: center; flex-wrap: wrap; } 
#content .list_news li >a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 2; } 
#content .list_news li >p { position: relative; width: 180px; display: inline-block; text-align: center; z-index: 1; } 
#content .list_news li >p.cat { z-index: 3; } 
#content .list_news li >p.cat a , #content .news_top_box p.cat a { padding: 5px 19px; background: var(--primary); display: inline-block; color: #fff; font-size: 14px; } 
#content .list_news li >p.txt { width: calc(100% - 360px); display: -webkit-inline-box; text-align: left; font-size: 18px; } 

/* content list_book */
#content .list_book ul { font-size: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } 
#content .list_book ul li { position:relative; } 
#content .list_book ul li >a { position:absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; } 
#content .list_book ul li span { font-family: "Cormorant Garamond", serif; font-size: 80px; position: absolute; top: 10px; right: 2vw; z-index: 3; color: #fff; line-height: 1; } 
#content .list_book ul li span:after { content:''; display: block; width: 100%; height: 3px; background: #fff; margin-top: 10px; } 
#content .list_book ul li .img { overflow: hidden; position: relative; z-index: 1; } 
#content .list_book ul li .img img { position: relative; width: 100%; aspect-ratio: 7.2 / 4.7; object-fit: cover; z-index: 1; } 
#content .list_book ul li .info { position: absolute; padding: 25px 40px; width: calc(100% - 80px); background: rgb(0 0 0 / 50%); z-index: 2; left: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; } 
#content .list_book ul li .info h3 { height: auto; font-weight: 300; font-size: 22px; color: #fff; letter-spacing: 2px; margin: 0; } 
#content .list_book ul li .info .more a { color: #fff; border: 0; font-family: "Cormorant", serif; font-size: 15px; font-weight: 600; line-height: 1; display: inline-flex; gap: 15px; align-items: center; text-transform: uppercase; letter-spacing: .5px; } 
#content .list_book ul li:hover .info .more a { margin-right:15px; } 
#content .list_book ul li .info .more a:after { width: 7px; height: 7px; border: #ffffff solid; border-width: 1px 0 0 1px; display: inline-block; content: ""; -webkit-transform: rotate(135deg) translate(-1px, -1px); } 

/* list_faq */
.list_faq >ul >li { margin-bottom: 25px; } 
.list_faq ul li .title { position: relative; padding: 20px 65px 20px 25px; background: #e5d6ba; display: block; } 
.list_faq ul li .title font { font-size: 18px; color: #1f1f1f; } 
.list_faq ul li .title span { position: absolute; width: 16px; height: 16px; display: block; top: calc((100% - 16px) / 2); right: 25px; } 
.list_faq ul li .title span:before , .list_faq ul li .title span:after { width: 16px; height: 1px; background: #696969; display: block; content: ""; -webkit-transform: translateY(9px); transform: translateY(9px); } 
.list_faq ul li .title span:after { -webkit-transform: translateY(8px) rotate(90deg); transform: translateY(8px) rotate(90deg); } 
.list_faq ul li .info { padding: 15px 25px; background: #fff; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } 
.list_faq ul li.current .title span:after { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translateY(8px) rotate(180deg); transform: translateY(180deg) rotate(0); } 

/* content */
#content #describe * { vertical-align: bottom; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 
#content .news_top_box { margin-bottom: 3vw; padding: 10px 0; font-size: 0; } 
#content .news_top_box p { margin-right: 10px; width: 120px; display: inline-block; } 
#content .news_top_box p.quotebox { margin-right: 0; width: calc(100% - 260px); text-align: right; font-weight: 300; color: #1f1f1f; } 
#content .news_top_box p.quotebox a { color: #1f1f1f; } 
#content .album_list { margin-top: 4vw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } 
#content .album_list >div img { aspect-ratio: 16/9; } 
#content .album_list >div a { display: block; } 

/* pagenav */
#pagenav { position: relative; overflow: hidden; padding: 60px 0 20px; text-align: center; font-size: 0; } 
#pagenav a , #pagenav strong { margin: 0 10px; display: inline-block; font-weight: 400; font-size: 18px; color: #1a191f; vertical-align: middle; } 
#pagenav a[class^="page-"] { float: left; width: calc(50% - 20px); display: block; } 
#pagenav a[class^="page-"] font { width: calc(100% - 22px); display: inline-block; vertical-align: text-top; } 
#pagenav a[class^="page-"] i { margin: 0 10px 0 0; display: inline-block; } 
#pagenav a.page-next { float: right; text-align: right; } 
#pagenav a.page-next font { text-align: right; } 
#pagenav a.page-next i { margin: 0 0 0 10px; } 

/* page_form */
.page_form form { font-size: 0; } 
.page_form form p.col { padding: 35px 20px; border-bottom: 1px #e8e8e8 solid; font-size: 0; } 
.page_form form p.col label { padding: 10px 0; width: 250px; display: inline-block; color: #1f1f1f; vertical-align: text-top; } 
.page_form form p.col label span { width: calc(100% - 115px); display: inline-block; } 
.page_form form p.col label b { padding: 0 20px; background: #1f1f1f; display: inline-block; font-weight: 100; font-size: 13px; color: #fff; } 
.page_form form p.col font { margin-left: 30px; width: calc(100% - 280px); display: inline-block; vertical-align: text-top; } 
.page_form form p input , .page_form form select , .page_form form textarea { padding: 10px 15px; width: calc(100% - 0px); background: #ffffff; border: 0; display: block; } 
.page_form form p select { padding: 15px; width: 100%; background: #ffffff; } 
.page_form form p input#Checknum { margin-right: 10px; width: min(200px , 100%); display: inline-block; } 
.page_form form p.send { padding: 35px 0; text-align: center; } 
.page_form form p.send a#btnOK { position: relative; padding: 15px 100px; border: 1px #1f1f1f solid; display: inline-block; color: #1f1f1f; } 
.page_form form p.send a#btnOK font { text-align: center; letter-spacing: 3px; color: #1f1f1f; } 
.page_form form p.send a#btnOK a svg.arrow { position: absolute; width: 20px; right: 20px; top: calc((100% - 11.41px) / 2); } 


.page_form * { box-sizing: border-box; outline: none; } 
.page_form .mooe_box {display:flex;gap:10px;flex-wrap: wrap;} 
.form_box { width: 100%; max-width: 100%; margin: 0 auto; padding: 40px 20px; } 
.nowrap_box { width: 100%; } 
.form_box p { margin: 0 0 20px 0; position: relative; } 
.form_box .rood_box { } 
.form_box .rood_box .twochexk { display:flex; } 
.form_box .checknum font { display:flex; align-items: center; } 
.txt_white_5 { color: #191919; font-size: 15px; letter-spacing: 1px; margin-bottom: 8px; font-weight: 500; } 
.txt_primary_5 { color: var(--secondary); margin-left: 4px; } 
.d_block { display: block; } 
.form_box input[type="text"], .form_box select, .form_box textarea { width: 100%; padding: 12px 15px; border: 1px solid var(--gray); background-color: var(--white); color: var(--black); font-size: 16px; border-radius: 4px; font-family: var(--font-family); transition: all 0.3s ease; } 
.form_box input[type="text"]:focus, .form_box select:focus, .form_box textarea:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(209, 169, 128, 0.2); } 
.form_box select + select {} 
.form_box select + input { margin-top: 10px; } 
.form_box input[type="radio"] { accent-color: var(--primary); transform: scale(1.2); vertical-align: middle; cursor: pointer; } 
#btnOK { display: block; width: 100%; max-width: 200px; margin: 30px auto 0; padding: 15px 0; background-color: var(--primary); color: var(--white); text-decoration: none; font-size: 18px; letter-spacing: 2px; border-radius: 4px; transition: background-color 0.3s, transform 0.2s; border: 1px solid var(--primary); } 
#btnOK:hover { background-color: var(--secondary); border-color: var(--secondary); } 
#btnOK:active { transform: translateY(2px); } 
.checknum input[type="text"] { width: 120px; margin-right: 10px; display: inline-block; vertical-align: middle; } 
.checknum img { vertical-align: middle; height: 30px; border-radius: 4px; } 
.talign_center { text-align: center; } 
.col_md_6 { width: 100%; } 
.d_inblock { display: inline-block; } 

@media (min-width: 768px){
 .form_box { padding: 60px 40px; } 
 .col_md_6 { width: 49%; display: inline-block; vertical-align: top; } 
 .d_md_inblock { display: inline-block; } 
 .checknum { margin-right: 1%; } 
 .talign_md_right { text-align: right; } 
 #btnOK { margin: 0 0 0 auto; display: inline-block; width: 100%; } 
 .form_box select + select { margin-top: 0; width: 24%; display: inline-block; } 
 .form_box select + input { margin-top: 0; width: 49%; display: inline-block; } 
 #CityID, #AreaID {width: calc(25% - 9px);display: inline-block;} 
 #Address { width: calc(50% - 5px); display: inline-block; } 
 .col_md_6.talign_md_right { width: 49%; } 
 }
@keyframes fadeIn { 
 from { opacity: 0; transform: translateY(10px); } 
 to { opacity: 1; transform: translateY(0); } 
 }
.form_box { animation: fadeIn 0.8s ease-out; } 
 




@media screen and (min-width:1281px) {
  #subnav { overflow: hidden; position: relative; padding: 1px 0 10px 1px; }
  #subnav:hover { overflow: visible; }
  #subnav #sideBtn { display: none; }
  #subnav >ul >li { overflow: hidden; width: calc((100%/5) - 1px); display: inline-block; position: relative; }
  #subnav >ul >li:before { content: ''; width: 0; height: 4px; background: var(--secondary); position: absolute; top: 0; left: 0; z-index: 10; }
  #subnav >ul >li:hover:before,#subnav >ul >li.action:before { width: 100% }
  #subnav ul >li h4 { border-top: 1px var(--black) solid; text-align: center; z-index: 3; }
  #subnav ul >li h4 a { padding: 0 15px; width: calc(100% - 30px); height: 57px; display: -webkit-box; text-align: center; line-height: 57px; color: #1f1f1f; }
  #subnav ul >li h4 b[data-action="sideOpen"] { display: none; }
  #subnav ul >li >ul.subUL { position: absolute; margin-top: -1px; padding: 5px 0; width: calc((100%/1) - 1px); background: #fff; border: 1px #1f1f1f solid; opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
  #subnav ul >li.action h4 a,#subnav ul >li:hover h4 a,.page_form form p.send a#btnOK:hover font { color: var(--primary); }
  #subnav ul >li.action h4:before,#subnav ul >li.action h4:after,#subnav ul >li:hover h4:before,#subnav ul >li:hover h4:after { opacity: 1; }
  #subnav ul >li.action,#subnav ul >li:hover { overflow: visible; }
  #subnav ul >li:hover >ul.subUL { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
  #content .list_article section a.more:hover font,#content .list_book ul li .info a.more:hover font { margin-right: 60px; }
  #content .list_news li:hover { background: #f6f6f6; }
  .page_form form p.send a#btnOK:hover svg { fill: #fff; }
}
@media screen and (max-width:1440px) {
  #wrap { background-size: cover; }
}
@media screen and (max-width:1280px) {
  #sPictureBox:after { width: 300px; }
  #subnav { position: relative; width: 100%; margin: 3vw 0 0; }
  #subnav >ul { overflow: hidden; position: absolute; width: 100%; height: 0; background: var(--complement); border: 1px var(--complement) solid; top: 0; left: 0; z-index: 1; }
  #subnav ul li h4 { background: #ffffff; z-index: 2; }
  #subnav ul li.action h4 { background: #ffffff; }
  #subnav ul li h4:before { border-color: #3a3a3a; }
  #subnav ul li h4 a { padding: 0 60px 0 20px; height: 47px; line-height: 47px; color: #040404; }
  #subnav ul li[data-type="2"] b[data-action="sideOpen"] i:before { content: "\f068"; }
  #subnav >ul.open { height: auto; top: 52px; }
  #subnav >ul.open li { overflow: hidden; position: relative; }
  #subnav >ul.open li >ul.subUL { position: absolute; width: 100%; background: #3d3d3d; border: #454545 solid; border-width: 1px 0; bottom: 100px; -webkit-transition-duration: .2s; transition-duration: .2s; opacity: 0; z-index: 1; }
  #subnav >ul.open li[data-type="2"] >ul.subUL { position: relative; padding: 5px 0; bottom: 0; opacity: 1; }
  #subnav ul >li >ul.subUL li a { padding: 5px 20px; font-weight: 300; font-size: 15px; color: #d0d0d0; }
  #content .list_article section .img img { width: 36vw; height: 36vw; }
  #sub_banner a img { height: 160px; border-radius: 0 }
  #sub_banner { padding-top: 90px; width: 100%; border-radius: 0 }
  #sub_banner a:after { border-radius: 0 }
}
@media screen and (max-width:1024px) {
  #content .list_book ul { grid-template-columns: repeat(1,1fr); }
  .pageTop,#sPictureBox .workframe,#content .workframe { width: 90% }
  #sPictureBox:after { width: 270px; }
  #wrap,#sPictureBox .workframe { padding-left: 0 }
  #content .list_news li >p { width: 120px; text-align: left; }
  #content .list_news li >p.txt { width: calc(100% - 240px); }
}
@media screen and (max-width:768px) {
  #content .album_list { grid-template-columns: repeat(1,1fr); }
  #wrap,#sPictureBox { padding: 8vw 0 }
  #sPictureBox:after { display: none; }
  #content .list_article section .workframe { display: block; }
  #content .list_article section .img,#content .list_article section:nth-child(odd) .img { margin: 0; width: 100%; text-align: center; }
  #content .list_article section .img img { width: 90vw; height: 350px; }
  #content .list_article section .info { margin: 20px 0 0; width: 100%; }
  #content .list_article section .info article { height: 85px; line-height: 180%; -webkit-line-clamp: 3; }
  #content .list_article section a.more { padding: 10px 0 2px; }
  .page_form form p.col label,.page_form form p.col label span { width: auto; }
  .page_form form p.col label b { margin-left: 10px; padding: 0 15px; }
  .page_form form p.col font { margin-left: 0; width: 100%; }
}
@media screen and (max-width:640px) {
  .pageTop h1 { font-size: 26px; }
  #content .list_book ul li .info .more a { font-size: 13px; }
  #content .list_book ul li .info { padding: 15px 20px; width: calc(100% - 40px); }
  #content .list_book ul li .info h3 { font-size: 18px; }
  #subnav { margin: 7vw auto; }
  #content .list_news li { padding: 35px 10px; }
  #content .list_news li >p { margin-right: 15px; width: auto; }
  #content .list_news li >p.txt,#content .news_top_box p.quotebox { margin-top: 10px; width: 100%; text-align: left; }
  #content .album_list >div,#content .album_list >div img { height: 40vw; }
  header #cis img { height: 65px; }
}
@media screen and (max-width:550px) {
  #content .list_article section .img img { height: 55vw; }
  #content .list_book ul { grid-template-columns: 1fr; }
  #content .album_list >div,#content .album_list >div img { height: 50vw; }
  .page_form form p.col { padding: 35px 0; }
}
@media screen and (max-width:400px) {
  #content .list_book ul li { width: 100%; }
}