@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)}}

/* #wrap */
#wrap {z-index:6;background:url(/images/40/web_bg.webp)}
#wrap .page_area {margin:auto;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 {height:400px}
#sub_banner a img {height:100%}
#sub_banner a:after {position:absolute;width:100%;height:100%;background:rgba(var(--black-rgb),.4);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}
.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;color: white;}
.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}

/* #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;bottom: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:90px;line-height:220%;font-weight:300;font-size:14px;-webkit-line-clamp:3}

/* #news_list */
#news_list .news_section .inner_head {margin-bottom:58px}
#news_list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:58px 32px;width:100%;margin:0;padding:0;white-space:normal;list-style:none}
#news_list>li {display:block;width:100%;max-width:none;padding:0;vertical-align:top;white-space:normal}
#news_list .news_item {position:relative;height:100%;padding-top:17px;border-top:1px solid var(--inner-line)}
#news_list .news_img {width:100%;aspect-ratio:4/3;background:#eee9e2}
#news_list .news_img img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .75s cubic-bezier(.22,.61,.36,1)}
#news_list .news_img_line {position:absolute;z-index:2;top:0;left:0;width:52px;height:2px;background:var(--inner-red);transition:width .45s cubic-bezier(.22,.61,.36,1)}
#news_list .news_item .info_box {padding:20px 2px 0}
#news_list .news_meta {display:flex;width:100%;margin-bottom:13px;align-items:center;justify-content:space-between;gap:16px;white-space:normal}
#news_list .news_category {position:relative;z-index:6;max-width:58%;color:var(--inner-red);font-size:16px;font-weight:600;line-height:1.5;letter-spacing:.06em;transition:color .3s ease}
#news_list .news_category:hover {color:var(--inner-red-dark)}
#news_list .news_item .time {flex-shrink:0;color:var(--inner-light);font-size:14px;font-weight:400;line-height:1.5;letter-spacing:.035em}
#news_list .news_title {min-height:62px;color:var(--inner-text);font-size:20px;font-weight:700;line-height:1.55;letter-spacing:.04em;-webkit-line-clamp:2}
#news_list .news_more {display:flex;margin-top:20px;padding-top:15px;align-items:center;justify-content:space-between;border-top:1px solid var(--inner-line)}
#news_list .news_more span {color:var(--inner-light);font-size:16px;font-weight:500;line-height:1.5;letter-spacing:.1em;transition:color .35s ease}
#news_list .news_more i {display:flex;width:34px;height:34px;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(181,16,21,.38);border-radius:50%;color:var(--inner-red);font-size:17px;font-style:normal;line-height:1;transition:background .35s ease,color .35s ease,transform .35s ease}
#news_list .news_item .atag_item {z-index:5;inset:0;width:100%;height:100%}
#news_list .news_item:hover .news_img img {transform:scale(1.045)}
#news_list .news_item:hover .news_img_line {width:95px}
#news_list .news_item:hover .news_more span {color:var(--inner-red)}
#news_list .news_item:hover .news_more i {background:var(--inner-red);color:#fff;transform:translateX(4px)}

/* #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)}
.store_list_intro {padding-top:90px}
.store_list_head {display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.7fr);gap:80px;align-items:end}
.store_list_head .inner_head {margin:0}
.store_list_intro_text {padding:0 0 7px 30px;border-left:1px solid var(--inner-line)}
.store_list_intro_text p {color:var(--inner-gray);font-size:16px;line-height:2;letter-spacing:.03em}
.store_area_nav {display:grid;grid-template-columns:repeat(3,1fr);margin-top:60px;border-top:1px solid var(--inner-line);border-bottom:1px solid var(--inner-line)}
.store_area_nav a {position:relative;display:flex;min-height:92px;padding:18px 28px;align-items:center;gap:18px;color:var(--inner-text);transition:color .35s ease}
.store_area_nav a+a {border-left:1px solid var(--inner-line)}
.store_area_nav a::after {content:"";position:absolute;bottom:-1px;left:0;width:0;height:3px;background:var(--inner-red);transition:width .45s cubic-bezier(.22,.61,.36,1)}
.store_area_nav span {color:var(--inner-red);font-size:16px;font-weight:600;line-height:1.5;letter-spacing:.1em}
.store_area_nav div {font-size:21px;font-weight:700;line-height:1.5;letter-spacing:.06em}
.store_area_nav a:hover,.store_area_nav a.active {color:var(--inner-red)}
.store_area_nav a:hover::after,.store_area_nav a.active::after {width:100%}
.store_type_nav {display:flex;margin-top:28px;align-items:center;flex-wrap:wrap;gap:10px}
.store_type_nav a {display:inline-flex;min-width:102px;min-height:42px;padding:8px 18px;align-items:center;justify-content:center;border:1px solid var(--inner-line);color:var(--inner-gray);font-size:16px;font-weight:600;line-height:1.5;letter-spacing:.05em;transition:background .3s ease,border-color .3s ease,color .3s ease}
.store_type_nav a:hover,.store_type_nav a.active {border-color:var(--inner-red);background:var(--inner-red);color:#fff}
.store_list_title {display:flex;margin-bottom:42px;align-items:flex-end;justify-content:space-between;gap:30px}
.store_list_area_title {color:var(--inner-text);font-size:28px;font-weight:700;line-height:1.5;letter-spacing:.07em}
.store_list_hint {display:flex;padding-left:22px;align-items:center;gap:14px;border-left:1px solid var(--inner-line)}
.store_list_hint span {color:var(--inner-red);font-size:16px;font-weight:600;line-height:1.5;letter-spacing:.12em}
.store_list_hint p {color:var(--inner-light);font-size:16px;line-height:1.6}

/* #book_list */
#book_list {counter-reset:store;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 32px;width:100%;margin:0;padding:0;list-style:none;white-space:normal}
#book_list .book_item {counter-increment:store;display:block;width:100%;padding:0;white-space:normal}
.store_list_page .store_list_section {padding:10px 0}
.book_card {position:relative;height:100%;padding-top:16px;border-top:1px solid var(--inner-line)}
.booimg {position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#eee9e2}
.booimg>img,.booimg a>img,.booimg picture,.booimg picture img {display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.booimg img {transition:transform .75s cubic-bezier(.22,.61,.36,1)}
.book_img_line {position:absolute;z-index:2;top:0;left:0;width:55px;height:3px;background:var(--inner-red);transition:width .45s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.book_info {position:relative;display:grid;grid-template-columns:43px minmax(0,1fr) 38px;gap:14px;padding:20px 10px 0;align-items:center}
.book_number {color:var(--inner-red);font-size:16px;font-weight:600;line-height:1.5;letter-spacing:.08em}
.book_number::before {content:counter(store,decimal-leading-zero)}
.book_text {min-width:0}
.book_en {margin-bottom:2px;color:var(--inner-light);font-size:16px;font-weight:500;line-height:1.4;letter-spacing:.1em}
.booingoo {overflow:hidden;color:var(--inner-text);font-size:21px;font-weight:700;line-height:1.55;letter-spacing:.055em;text-overflow:ellipsis;white-space:nowrap;transition:color .35s ease}
.book_arrow {display:flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid rgba(181,16,21,.4);border-radius:50%;color:var(--inner-red);font-size:17px;line-height:1;transition:background .35s ease,color .35s ease,transform .35s ease}
.book_card .masklink {position:absolute;z-index:5;inset:0;display:block;width:100%;height:100%}
.book_card:hover .booimg img {transform:scale(1.045)}
.book_card:hover .book_img_line {width:100px}
.book_card:hover .booingoo {color:var(--inner-red)}
.book_card:hover .book_arrow {background:var(--inner-red);color:#fff;transform:translateX(4px)}
.contactext{white-space:pre-line;}

/* #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;background:rgb(248 244 237 / 81%)}
#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}
#content_wrap,#wrap #page_title {padding-left:100px}

/* #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}



/* #btnOK */

[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}

/* @media */
@media screen and (max-width:1199px) {
  #content_wrap,#wrap #page_title { padding-left: 0 }
}
@media screen and (max-width:1024px) {
  #news_list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 50px 28px }
  .store_list_head { grid-template-columns: 1fr .75fr; gap: 50px }
  .store_area_nav a { min-height: 80px; padding: 16px 20px }
  #book_list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px 28px }
}
@media screen and (max-width:768px) {
  #article_list li img { height: 50vw }
  #sub_banner a,#page_title {height: 210px;}
}
@media screen and (max-width:767px) {
  .news_section .inner_head { margin-bottom: 38px }
  #news_list { grid-template-columns: 1fr; gap: 45px }
  #news_list .news_item { padding-top: 14px }
  #news_list .news_item .info_box { padding-top: 17px }
  #news_list .news_category,#news_list .news_item .time { font-size: 15px }
  #news_list .news_title { min-height: 0; font-size: 18px }
  #news_list .news_more { margin-top: 17px; padding-top: 13px }
  #news_list .news_more span { font-size: 15px }
  #news_list .news_more i { width: 32px; height: 32px; font-size: 16px }
  .store_list_intro { padding-top: 55px }
  .store_list_head { grid-template-columns: 1fr; gap: 30px }
  .store_list_intro_text { padding: 20px 0 0; border-top: 1px solid var(--inner-line); border-left: 0 }
  .store_list_intro_text p { font-size: 15px; line-height: 1.9 }
  .store_area_nav { margin-top: 40px }
  .store_area_nav a { min-height: 70px; padding: 12px 8px; flex-direction: column; justify-content: center; gap: 1px; text-align: center }
  .store_area_nav span { font-size: 15px }
  .store_area_nav div { font-size: 17px }
  .store_type_nav { margin-top: 20px; gap: 8px }
  .store_type_nav a { min-width: auto; min-height: 40px; padding: 7px 14px; font-size: 15px }
  .store_list_title { margin-bottom: 32px; align-items: flex-start; flex-direction: column; gap: 20px }
  .store_list_area_title { font-size: 24px }
  .store_list_hint { padding-left: 16px }
  .store_list_hint span,.store_list_hint p { font-size: 15px }
  #book_list { grid-template-columns: 1fr; gap: 45px }
  .book_card { padding-top: 14px }
  .book_info { grid-template-columns: 39px minmax(0,1fr) 34px; gap: 11px; padding-top: 17px }
  .book_number,.book_en { font-size: 15px }
  .booingoo { font-size: 19px }
  .book_arrow { width: 32px; height: 32px; font-size: 16px }
}
@media screen and (max-width:640px) {
  #article_list li img { height: 320px }
  #album_list>div,#album_list>div img { height: 40vw }
}
@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) {
  .news_meta { align-items: flex-start; gap: 10px }
  .news_category { max-width: 60% }
  .store_area_nav div { font-size: 16px; letter-spacing: .02em }
  .store_type_nav a { flex: 1; padding-left: 7px; padding-right: 7px }
  .book_info { grid-template-columns: 34px minmax(0,1fr) 32px }
  .booingoo { font-size: 18px }
  #album_list>div,#album_list>div img { height: 50vw }
  #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: 407px }
  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 }
  #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) }
}