@import url('/css/community.css');
/* layout.less */
aside b .fa{transform:rotate(0);-webkit-transform:rotate(0);transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;}aside > ul > li .subUL{transform:translate(0,30px);-webkit-transform:translate(0,30px);}aside > ul > li[data-type="2"] .h4 b .fa{transform:rotate(180deg);-webkit-transform:rotate(180deg);}aside > ul > li[data-type="2"] .subUL{transform:translate(0,0);-webkit-transform:translate(0,0);}#faq_list li .title i{transform:rotate(0);-webkit-transform:rotate(0);transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;}#faq_list li.current .title i{transform:rotate(180deg);-webkit-transform:rotate(180deg);}#book_list li .img_box:before,#book_list li .img_box:after{transform:scaleY(0);-webkit-transform:scaleY(0);}#book_list li .img_box:after{transform-origin:center bottom;-webkit-transform-origin:center bottom;}@media (min-width:1281px){#book_list li:hover .img_box:before,#book_list li:hover .img_box:after{transform:scaleY(1);-webkit-transform:scaleY(1);}}[data-action="loader"] .loader_circle{width:50px;height:50px;border-radius:50%;}[data-action="loader"]#lodbg .loader_circle{-webkit-animation:circle infinite 0.75s linear;animation:circle infinite 0.75s linear;}@keyframes circle{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-webkit-keyframes circle{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}
/* header */
header .menu { background: var(--white); }
header #menubtn[data-type="1"] a span { background: var(--secondary); }
/* wrap */
#wrap { z-index: 6; }
#wrap .page_area {margin: auto;width: 100%;z-index: 2;}
#wrap .shadow { box-shadow: 0 0 20px rgba(var(--black-rgb), .2); }
/* sub_banner */
#sub_banner { top: 0; left: 0; }
#sub_banner a , #page_title { padding-top: 70px; height: 400px; }
#sub_banner a img { height: 100%; }
#sub_banner a:after {position: absolute;width: 100%;height: 100%;background: rgba(var(--black-rgb), .3);top: 0;left: 0;z-index: 2;content: "";}
/* page_title */
#page_title >div { margin: auto; }
#page_title .pag_tit { line-height: 1.3em; letter-spacing: .15em; font-size: 2em; }
#page_title >div *{text-shadow: 0 3px 7px rgb(0 0 0 / 90%);}
/* waylink */
.waylink ol { padding-top: 5px; }
.waylink ol li , .waylink ol li a { letter-spacing: 1.5px; font-weight: 300; font-size: 13px; vertical-align: bottom; }
.waylink ol li:after { margin: 0 10px; display: inline-block; font-weight: 100; font-size: 12px; color: var(--white); content: "/"; }
.waylink ol li:last-child:after { margin: 0; content: ""; }
/* aside */
aside >ul { margin-top: 5vw; }
aside ul li b { padding: 5px 10px; }
aside ul li b .fa:before { content: "\f107"; }
aside >ul >li { position: relative; display: inline-block; }
aside >ul >li .h4 {padding: 0 0px;}
aside >ul >li .h4 a {padding: 5px 20px;font-weight: 500;font-size: 18px;border: #f2f2f2 2px solid;border-radius: 11px;}
aside >ul >li.action .h4 a , aside >ul >li.action .h4 i {color: var(--primary);border: var(--primary) 2px solid;}
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(--primary); }
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; }
#category_nav{display:flex;justify-content: center;gap: 15px;flex-wrap: wrap;}
/* list_box */
.list_box li {margin: 0 15px 50px;border-radius: 10px;}
.list_box li img {background: rgba(var(--primary-rgb), .05);background-size: cover;transition: all linear 0.3s;}
/* article_list */
#article_list li .h3 {padding: 10px 20px;width: calc(90% - 40px);height: 34px;background: rgba(var(--white-rgb), .9);line-height: 37px;font-weight: 400;font-size: 20px;left: 5%;}
#article_list li img { height: 35vw; }
#article_list li .info_box { padding: 30px; width: calc(100% - 100px); background: rgba(var(--white-rgb), .9); bottom: -100%; left: 20px; opacity: 0; }
#article_list li .info_box p { height: 34px; font-size: 20px; }
#article_list li .info_box .cate { z-index: 2; }
#article_list li .info_box article {margin: 15px 0 40px;height: 40px;line-height: 220%;font-weight: 300;font-size: 14px;-webkit-line-clamp: 3;}
/* news_list */
#news_list li img { height: 320px; }
#news_list li .info_box {padding: 15px 25px;}
#news_list li .info_box p{border-bottom: 1px dashed #A8DF8E;display: flex;justify-content: space-between;padding-bottom: 10px;}
#news_list li .info_box p a {margin-right: 10px;max-width: calc(100% - 100px);font-weight: 400;z-index: 2;background: aliceblue;color: #ffffff;font-weight: 400;font-size: 0.95rem;padding: 4px 12px;transition: all 0.3s;background: #95ce7a;border-radius: 9px;display: flex;align-items: center;#news_area .txt_clamp {color: #ffffff;font-weight: 400;font-size: 0.95rem;padding: 4px 12px;transition: all 0.3s;background: #95ce7a;border-radius: 9px; };}
#news_list li .info_box p .time { width: 90px; font-weight: 300; }
#news_list li .info_box .h3 {height: 37px;font-size: 22px;font-weight: 500;}
/* faq_list */
#faq_list li { margin-bottom: 30px; }
#faq_list li .title font { padding: 15px 65px 15px 25px; background: var(--white); font-size: 18px; box-shadow: 0 0 15px rgba(var(--black-rgb), .2); }
#faq_list li .title i { font-size: 26px; top: calc((100% - 26px) / 2); right: 25px; }
#faq_list li .info { padding: 25px; font-size: 14px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#faq_list li.current { box-shadow: 0 0 15px rgba(var(--black-rgb), .2); }
#faq_list li.current .title font { background: var(--gray); box-shadow: none; color: var(--white); }
#faq_list li.current .title i { color: var(--white); }
/* book_list */
#book_list img { height: 450px; }
#book_list .img_box { border: var(--white) solid; border-width: 0 1px 1px 0; }
#book_list .img_box:before , #book_list .img_box:after { position: absolute; width: 100%; height: 100%; background: var(--white); z-index: 9; opacity: .4; content: ""; }
#book_list .img_box:after { right: 0; bottom: 0; }
#book_list .atag_item { z-index: 10; }
#book_list .badge { margin: auto; padding: 10px 20px; max-width: calc(80% - 40px); height: 34px; line-height: 36px; font-size: 20px; }
/* album_list */
#album_list { 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; }
/* content_wrap */
#content_wrap { padding: 5vw 0; z-index: 1; }
#content_wrap .h1 {margin-bottom: 5px;padding: 0 20px 5px;border-bottom: 1px rgba(var(--black-rgb), .1) solid;line-height: 130%;font-size: 2.25rem;font-weight: 700;}
#content_wrap .top_box { padding: 0 20px; }
#content_wrap .quote_box { margin-right: 30px; }
/* pagenav */
#pagenav {padding-top: 10px;}
#pagenav a , #pagenav strong { margin: 0 2px; width: 35px; height: 35px; background: rgba(var(--black-rgb), .1); border-radius: 5px; display: inline-block; text-align: center; line-height: 35px; font-weight: 400; }
#pagenav strong { background: var(--primary); color: var(--white); }
#pagenav a:first-child , #pagenav a:last-child { line-height: 30px; }
#pagenav p a { margin: 0; padding: 0 20px; width: auto; border-radius: 20px; }
#pagenav p a i { margin: 0 5px 0 0; }
#pagenav p a font { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#pagenav p:last-child a i { margin: 0 0 0 5px; }
/* contact-form-section */
#contact-form-section {position: relative;overflow: hidden;min-height: 100vh;display: flex;align-items: center;}
#contact-form-section .bg-shape-1 {position: absolute;top: 10%;right: -15%;width: 30vw;height: 30vw;background: radial-gradient(circle,rgba(232,245,233,0.8) 0%,rgba(255,255,255,0) 70%);border-radius: 50%;z-index: 0;pointer-events: none;}
#contact-form-section .bg-shape-2 {position: absolute;bottom: 20%;left: -10%;width: 30vw;height: 30vw;background: radial-gradient(circle,rgba(213,239,200,0.5) 0%,rgba(255,255,255,0) 70%);border-radius: 50%;z-index: 0;pointer-events: none;}
#contact-form-section .container { max-width: 900px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; width: 100%; }
#contact-form-section .section-header { text-align: center; margin-bottom: 40px; }
#contact-form-section .main-title { font-size: 40px; font-weight: 900; color: #2c3e50; display: inline-block; position: relative; letter-spacing: 1px; }
#contact-form-section .main-title::after { content: ''; position: absolute; left: 10%; bottom: 4px; width: 80%; height: 12px; background-color: rgba(109,177,87,0.2); z-index: -1; border-radius: 8px; }
#contact-form-section .form_box {
background:rgba(255,255,255,0.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:30px;padding:50px;box-shadow:0 25px 50px rgba(109,177,87,0.08),0 5px 15px rgba(0,0,0,0.02);border:1px solid #f0f9ed;/* 使用 CSS Grid 實現雙欄排版 */
display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;
}
#contact-form-section .form_box p { margin: 0; width: 100%; }
#contact-form-section .form_box article {grid-column: 1/-1;font-size: 16px;line-height: 1.8;color: #555;background: #fdfdfd;padding: 20px 25px;border-radius: 0;border-left: 4px solid var(--primary);margin-bottom: 5px;}
#contact-form-section .form_box article span { color: #d63031 !important; font-weight: 700; background: rgba(214,48,49,0.08); padding: 2px 6px; border-radius: 4px; }
#contact-form-section .form_box p.note { grid-column: 1/-1; font-size: 14px; color: #888; text-align: right; margin-bottom: 5px; }
#contact-form-section .form_box .txt_complement_5 { color: #e74c3c; font-weight: 900; margin-right: 4px; }
#contact-form-section .form_box p.large:not(.note) { grid-column: 1/-1; }
#contact-form-section .form_box p.checknum { grid-column: 1/-1; max-width: 400px; }
#contact-form-section .form_box p.talign_center { grid-column: 1/-1; text-align: center; margin-top: 20px; }
#contact-form-section .form_box input[type="text"],#contact-form-section .form_box select,#contact-form-section .form_box textarea { width: 100%; background: #fafdf9; border: 1px solid #d5efc8; border-radius: 16px; padding: 16px 20px; font-size: 16px; color: #333; transition: all 0.3s ease; box-shadow: inset 0 2px 5px rgba(0,0,0,0.01); }
#contact-form-section .form_box input[type="text"]::placeholder,#contact-form-section .form_box textarea::placeholder { color: #a0a0a0; }
#contact-form-section .form_box select:focus{background-image: url('data:image/svg+xml;utf8,');}
#contact-form-section .form_box input[type="text"]:focus,#contact-form-section .form_box select:focus,#contact-form-section .form_box textarea:focus {outline: none;border-color: #7ac143;box-shadow: 0 0 0 4px rgba(122,193,67,0.15);}
#contact-form-section .form_box select {appearance: none;-webkit-appearance: none;background-image: url('data:image/svg+xml;utf8,');background-repeat: no-repeat;background-position: right 16px center;background-size: 20px;cursor: pointer;color: #adadad;line-height: 1.8;}
#contact-form-section .form_box textarea { resize: vertical; min-height: 140px; border-radius: 20px; }
#contact-form-section .form_box .nowrap_box { display: flex; align-items: center; gap: 15px; }
#contact-form-section .form_box .nowrap_box input { flex: 1; letter-spacing: 2px; font-weight: 700; }
#contact-form-section .form_box .nowrap_box img {height: 31px;border-radius: 0;border: 1px solid #d5efc8;background: #fff;padding: 2px;transition: transform 0.3s ease;}
#contact-form-section .form_box .nowrap_box img:hover { transform: scale(1.05); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
#contact-form-section .form_box .more_btn {display: inline-block;background: var(--primary);color: #ffffff !important;text-decoration: none;font-size: 18px;font-weight: 700;letter-spacing: 2px;padding: 16px 60px;border-radius: 50px;box-shadow: 0 10px 25px rgba(109,177,87,0.3);transition: all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);border: 2px solid transparent;}
#contact-form-section .form_box .more_btn:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(109,177,87,0.4); background: linear-gradient(135deg,#85d14a 0%,#61aa36 100%); }
/* describe */
#describe { margin: 2em 0 5vw; }
#describe * { vertical-align: bottom; }
/* lodbg */
[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){
#sub_banner a, #page_title {padding-top: 120px;height: 450px;}
aside >ul >li:hover .h4 a , aside >ul >li:hover .h4 i { color: var(--primary); }
#article_list li:hover .h3 { opacity: 0; }
#article_list li img { height: 500px; }
#article_list li:hover .info_box {bottom: 20px;opacity: 1;}
#book_list li:hover .badge { background: var(--primary); color: var(--white); }
#pagenav a:hover { background: var(--primary); color: var(--white); }
#pagenav a:hover font , #pagenav a:hover i , #pagenav a:hover i:before { color: var(--white); }
}
@media screen and (max-width:768px) {
#article_list li img { height: 50vw; }
#news_list li .info_box { padding: 15px 0; }
#contact-form-section { padding: 60px 0; }
#contact-form-section .form_box { grid-template-columns: 1fr; padding: 30px 20px; border-radius: 20px; display: flex; flex-direction: column; }
#contact-form-section .form_box p.checknum { max-width: 100%; }
#contact-form-section .form_box .more_btn { width: 100%; padding: 18px; }
#contact-form-section .form_box article { padding: 15px; font-size: 15px; }
}
@media screen and (max-width:640px) {
#article_list li img { height: 320px; }
#book_list { margin: 0 5%; }
#book_list .img_box { border: 0; }
#book_list img { height: 65vw; }
#album_list >div,#album_list >div img { height: 40vw; }
#content_wrap .h1 { font-size: 1.75rem; }
#category_nav{display:flex;justify-content: flex-start;width: 90%;margin: 25px auto;}
}
@media screen and (max-width:550px) {
#community { margin-top: 10px; }
#pagenav p a i,#pagenav p:last-child a i { margin: 0; }
}
@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 a:first-child,#pagenav a:last-child { line-height: 20px; }
#pagenav p a i,#pagenav p:last-child a i { font-size: 20px; }
}