@import url('/css/community.css');

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 */
#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)}
[data-action="loader"] .loader_circle {width:50px;height:50px;border-radius:50%}

/* #lodbg */
[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 .menu {background:var(--white)}

/* #menubtn */
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:rgb(32 62 52 / 38%);top:0;left:0;z-index:2;content:""}
#sub_banner:before {content:"";position:absolute;width:100%;aspect-ratio:2103/386;bottom:0;left:0;background:url(/images/40/nayabannermask.png);z-index:5;background-position:50% 100%;background-size:cover}

/* #page_title */
#page_title>div {margin:auto;padding-bottom:100px}
#page_title .pag_tit {line-height:1.25em;letter-spacing:.15em;font-size:2em}
.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>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 15px}
aside>ul>li h4 a {padding:10px 5px 10px 10px;font-weight:300;font-size:18px}
aside>ul>li.action h4 a,aside>ul>li.action h4 i {color:var(--primary)}
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}

/* #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 {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 30px;margin:0;padding:0;list-style:none;white-space:normal!important}
#book_list>li {position:relative!important;display:block!important;width:auto!important;max-width:none!important;padding:0!important;overflow:hidden}
#book_list .img_box {position:relative;width:100%;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:#eef0eb}
#book_list .img_box:before {content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(20,55,46,0) 45%,rgba(20,55,46,.08) 62%,rgba(20,55,46,.42) 100%);pointer-events:none;transition:opacity .4s ease}
#book_list .img_box:after {content:"";position:absolute;z-index:3;left:20px;top:20px;width:38px;height:38px;border-top:1px solid rgba(255,255,255,.55);border-left:1px solid rgba(255,255,255,.55);pointer-events:none;transition:width .4s ease,height .4s ease}
#book_list .img_box img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .85s cubic-bezier(.2,.65,.3,1)}
#book_list>li>.atag_item {z-index:5;inset:0;align-items:flex-end!important;justify-content:flex-start!important;padding:0 25px 23px}
#book_list .badge {position:relative;display:inline-flex!important;align-items:center;max-width:calc(100% - 10px);padding:11px 18px 11px 44px!important;border-radius:100px!important;background:rgba(255,255,255,.92)!important;font-size:15px;line-height:1.5;font-weight:500;letter-spacing:.04em;color:#315047!important;backdrop-filter:blur(5px);transition:background .35s ease,color .35s ease,transform .35s ease}
#book_list .badge:before {content:"";position:absolute;left:18px;top:calc(50% - 0px);width:16px;height:1px;background:#b79063;transform:translateY(-50%)}
#book_list .badge:after {content:"";position:absolute;left:28px;top:calc(50% - 3px);width:6px;height:5px;border-top:1px solid #b79063;border-right:1px solid #b79063;transform:rotate(45deg)}
#book_list>li:hover .img_box img {transform:scale(1.055)}
#book_list>li:hover .img_box:before {opacity:.55}
#book_list>li:hover .img_box:after {width:52px;height:52px}
#book_list>li:hover .badge {background:#23433a!important;color:#fff!important;transform:translateY(-4px)}
#book_list>li:hover .badge:before {background:#d7b487}
#book_list>li:hover .badge:after {border-color:#d7b487}

/* #album_list */
#album_list {display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#album_list>div {margin:0 1px 1px 0;height:300px}
#album_list>div img {width:auto;min-width:100%;height:300px;border-radius:15px}

/* #content_wrap */
#content_wrap {position:relative;padding:5vw 0;z-index:1;background:linear-gradient(180deg,#faf3e8,#ebeae7)}
#content_wrap h1 {margin-bottom:5px;padding:0 20px 5px;border-bottom:1px rgba(var(--black-rgb),.1) solid;line-height:130%}
#content_wrap .top_box {padding:0 20px}
#content_wrap .quote_box {margin-right:30px}

/* #news_list */
#news_list>li:before,#news_list>li:after {display:none!important}
#news_list.list_box>li {border-radius:0;background:unset}
#news_list>li>div:first-child {position:relative;width:100%;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:#eef0eb}
#news_list>li>div:first-child:after {content:"";position:absolute;z-index:2;inset:0;border:1px solid rgba(164,122,76,.12);border-radius:inherit;pointer-events:none}
#news_list>li>div:first-child:before {content:"";position:absolute;z-index:2;left:20px;top:20px;width:36px;height:36px;border-top:1px solid rgba(255,255,255,.6);border-left:1px solid rgba(255,255,255,.6);pointer-events:none;transition:width .4s ease,height .4s ease}
#news_list>li>div:first-child img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .8s cubic-bezier(.2,.65,.3,1)}
#news_list .info_box {position:relative!important;padding:23px 4px 0;background:transparent!important;color:inherit!important;opacity:1!important;transform:none!important;pointer-events:auto!important;margin-top:16px}
#news_list .info_box:before {content:"";position:absolute;left:4px;top:0;width:48px;height:2px;background:#b79063}
#news_list .info_box>p {display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 10px!important;font-size:inherit!important;line-height:1.5!important;color:inherit!important}
#news_list .info_box>p>a {position:relative;z-index:5;max-width:65%;padding-left:24px;font-size:14px;line-height:1.6;font-weight:500;letter-spacing:.16em;color:#a47a4c!important;display:flex;align-items:center}
#news_list .info_box>p>a:before {content:"";position:absolute;left:0;top:49%;width:15px;height:1px;background:#b79063;transform:translateY(-50%)}
#news_list .info_box .time {flex-shrink:0;font-family:"Noto Serif TC","Noto Serif CJK TC",serif;font-size:11px;line-height:1.6;letter-spacing:.06em;color:#929b97!important}
#news_list .info_box .h3 {position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;z-index:3;margin:0;padding:0 34px 0 0;font-size:21px;line-height:1.7;font-weight:500;letter-spacing:.035em;text-align:left!important;color:#315047!important;text-shadow:none!important;opacity:1!important;transform:none!important;-webkit-line-clamp:1}
#news_list .info_box .h3:after {content:"";position:absolute;right:3px;top:15px;width:22px;height:1px;background:rgba(164,122,76,.45);transition:width .35s ease}
#news_list .info_box .h3:before {content:"";position:absolute;right:3px;top:12px;width:6px;height:6px;border-top:1px solid #b79063;border-right:1px solid #b79063;transform:rotate(45deg)}
#news_list>li>.atag_item {z-index:4!important;inset:0!important}
#news_list>li:hover>div:first-child img {transform:scale(1.045)}
#news_list>li:hover>div:first-child:before {width:50px;height:50px}
#news_list>li:hover .info_box {opacity:1!important;transform:none!important}
#news_list>li:hover .info_box .h3 {color:#23433a!important}
#news_list>li:hover .info_box .h3:after {width:30px}

/* #pagenav */
#pagenav {padding-top:50px}
#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}

/* #describe */
#describe {margin:2em 0 5vw}
#describe * {vertical-align:bottom}
.form_box {display:grid;grid-template-columns:repeat(2,1fr);gap:20px 30px}
.form_box p.large {grid-column:1/3}
.form_box p.note {margin-bottom:20px}

/* #btnOK */
.form_box p #btnOK {width:150px}
[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 */
#lodbg {opacity:1;z-index:99999}
.list_box {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 30px;margin:0;padding:0;list-style:none;white-space:normal!important}
.list_box>li {position:relative!important;display:block!important;width:auto!important;max-width:none!important;padding:0;border-radius:24px;background:#eef0eb;overflow:hidden}
.list_box>li:before {content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(20,55,46,0) 42%,rgba(20,55,46,.12) 62%,rgba(20,55,46,.68) 100%);pointer-events:none;transition:opacity .45s ease}
.list_box>li:after {content:"";position:absolute;z-index:5;left:20px;top:20px;width:38px;height:38px;border-top:1px solid rgba(255,255,255,.48);border-left:1px solid rgba(255,255,255,.48);pointer-events:none;transition:width .4s ease,height .4s ease}
.list_box>li>img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .8s cubic-bezier(.2,.65,.3,1)}
.list_box>li>.h3 {z-index:4;left:28px;right:28px;bottom:24px;top:auto!important;margin:0;font-size:21px;line-height:1.65;font-weight:500;letter-spacing:.045em;text-align:left;color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.18);transition:opacity .3s ease,transform .4s ease}
.list_box>li>.atag_item {z-index:6;inset:0}
.list_box .info_box {z-index:7;left:0;right:0;bottom:0;top:auto!important;padding:34px 30px 27px;background:linear-gradient(180deg,rgba(23,60,51,.92),rgba(20,55,46,.98));color:#fff;opacity:0;transform:translateY(25px);pointer-events:none;transition:opacity .42s ease,transform .48s cubic-bezier(.2,.65,.3,1)}
.list_box .info_box:before {content:"";position:absolute;left:30px;top:0;width:58px;height:2px;background:#c5a174}
.list_box .info_box>p {position:relative;z-index:2;margin:0 0 8px;font-size:26px;height:auto;line-height:1.55;font-weight:500;letter-spacing:.04em;color:#fff!important}
.list_box .info_box .cate {position:relative;z-index:2;margin-bottom:14px;padding-left:28px;font-size:14px;line-height:1.6;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#d5b78e!important}
.list_box .info_box .cate:before {content:"";position:absolute;left:0;top:39%;width:18px;height:1px;background:#d5b78e;transform:translateY(-50%)}
.list_box .info_box article {position:relative;z-index:2;margin:0 0 22px;font-size:16px;line-height:1.9;letter-spacing:.02em;color:rgba(255,255,255,.73);-webkit-line-clamp:1}
.list_box .info_box .more_btn {position:relative;z-index:2;display:inline-flex!important;align-items:center;gap:15px;padding:0 40px 0 0!important;background:transparent!important;font-size:13px;line-height:30px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff!important}
.list_box .info_box .more_btn:before {content:"";position:absolute;right:0px;top:calc(50% - -1px);width:28px;height:1px;background:#d3b181;transform:translateY(-50%);left:unset;opacity:1}
.list_box .info_box .more_btn:after {content:"";position:absolute;right:2px;top:calc(50% - 3px);width:7px;height:7px;border-top:1px solid #d3b181;border-right:1px solid #d3b181;transform:rotate(45deg)}
.list_box .info_box>.atag_item {z-index:5;inset:0;pointer-events:auto}
.list_box>li:hover>img {transform:scale(1.055)}
.list_box>li:hover:before {opacity:.25}
.list_box>li:hover:after {width:52px;height:52px}
.list_box>li:hover>.h3 {opacity:0;transform:translateY(10px)}
.list_box>li:hover .info_box {opacity:1;transform:translateY(0)}

/* @media */
@media screen and (max-width:1200px) {
  #book_list { gap: 32px 22px }
  #book_list .img_box { border-radius: 21px }
  #book_list>li>.atag_item { padding: 0 20px 19px }
  #book_list .badge { font-size: 14px }
  #news_list>li>div:first-child { border-radius: 21px }
  #news_list .info_box { padding-top: 21px!important }
  #news_list .info_box .h3 { font-size: 19px }
  .list_box { gap: 30px 22px }
  .list_box>li { border-radius: 21px }
  .list_box>li>.h3 { left: 23px; right: 23px; bottom: 20px; font-size: 19px }
  .list_box .info_box { padding: 28px 24px 23px }
  .list_box .info_box:before { left: 24px }
  .list_box .info_box>p { font-size: 20px }
  .list_box .info_box article { font-size: 13px }
}
@media screen and (max-width:1024px) {
  .form_box { grid-template-columns: 1fr }
  .form_box p.large { grid-column: inherit }
}
@media screen and (max-width:900px) {
  #book_list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 20px }
  #news_list .info_box>p { gap: 12px }
  #news_list .info_box .h3 { padding-right: 30px }
  .list_box { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 20px }
  .list_box>li { aspect-ratio: 4/3 }
  #album_list { grid-template-columns: repeat(2,1fr) }
}
@media screen and (max-width:640px) {
  #album_list>div,#album_list>div img { height: 40vw }
  #sub_banner a,#page_title { height: 300px }
  #page_title>div { padding-bottom: 50px }
  #sub_banner:before { width: 200% }
}
@media screen and (max-width:600px) {
  #book_list { grid-template-columns: 1fr; gap: 30px }
  #book_list .img_box { border-radius: 18px }
  #book_list .img_box:after { left: 14px; top: 14px; width: 30px; height: 30px }
  #book_list>li>.atag_item { padding: 0 15px 15px }
  #book_list .badge { max-width: calc(100% - 5px); padding: 9px 15px 9px 38px!important; font-size: 13px }
  #book_list .badge:before { left: 15px; width: 14px }
  #book_list .badge:after { left: 26px }
  #book_list>li:hover .img_box img { transform: none }
  #book_list>li:hover .badge { transform: none }
  #news_list>li>div:first-child { aspect-ratio: 4/3; border-radius: 18px }
  #news_list>li>div:first-child:before { left: 14px; top: 14px; width: 28px; height: 28px }
  #news_list .info_box { padding: 19px 3px 0!important }
  #news_list .info_box:before { left: 3px; width: 40px }
  #news_list .info_box>p { margin-bottom: 7px!important }
  #news_list .info_box>p>a { padding-left: 20px; font-size: 16px }
  #news_list .info_box>p>a:before { width: 12px }
  #news_list .info_box .time { font-size: 10px }
  #news_list .info_box .h3 { padding-right: 27px; font-size: 20px; line-height: 1.65 }
  #news_list .info_box .h3:after { width: 18px }
  #news_list>li:hover>div:first-child img { transform: none }
  #news_list>li:hover>div:first-child:before { width: 28px; height: 28px }
  .list_box { grid-template-columns: 1fr; gap: 34px }
  .list_box>li { aspect-ratio: auto; border-radius: 18px; background: transparent; overflow: visible; background: #ffffff; padding: 20px }
  .list_box>li:before,.list_box>li:after,.list_box>li>.h3 { display: none!important }
  .list_box>li>img { width: 100%; aspect-ratio: 4/3; height: auto; border-radius: 18px; object-fit: cover }
  .list_box .info_box { position: relative!important; left: auto; right: auto; bottom: auto; top: auto!important; margin: 25px 0 0; padding: 20px 10px 0; background: transparent; color: #23433a; opacity: 1; transform: none; pointer-events: auto }
  .list_box .info_box:before { left: 4px; top: 0; width: 45px; background: #b79063 }
  .list_box .info_box>p { margin-bottom: 5px; font-size: 28px; color: #315047!important }
  .list_box .info_box .cate { margin-bottom: 10px; padding-left: 24px; color: #a47a4c!important }
  .list_box .info_box .cate:before { width: 15px; background: #b79063 }
  .list_box .info_box article { margin-bottom: 15px; font-size: 16px; line-height: 1.8; color: #77827d; -webkit-line-clamp: 1 }
  .list_box .info_box .more_btn { color: #315047!important }
  .list_box .info_box>.atag_item { display: block!important }
  .list_box>li:hover>img { transform: none }
}
@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: 110px }
  #pagenav a,#pagenav strong { margin: 0 3px; 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 }
}
@media screen and (min-width:1281px) {
  #sub_banner a,#page_title { height: 500px }
  aside>ul>li:hover h4 a,aside>ul>li:hover h4 i { color: var(--primary) }
  #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) }
}