@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%; }

/* page_title */
#page_title .banner_txt {margin: auto;display: flex;flex-direction: column;align-items: flex-start;}
#page_title .pag_tit { line-height: 1.3em; letter-spacing: .15em; font-size: 2em; }

/* 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{position:relative;z-index: 20;}
aside::before{content:"";position:absolute;top:0;left:calc(50% - 50vw);width:calc(100vw - -70px);height:100%;}
aside ul ul.subUL{background-color:#fff;-webkit-box-shadow:0 5px 15px rgba(0,0,0,0.1);box-shadow:0 5px 15px rgba(0,0,0,0.1)}
aside #sidebtn {padding: 10px 20px;width: calc(100% - 40px);z-index: 2;background: var(--primary);}
aside #sidebtn:before { position: absolute; width: 100%; height: 100%; background: rgba(var(--white-rgb), .1); top: 0; left: 0; transition: .4s cubic-bezier(.23,1,.32,1); content: ""; }
aside #sidebtn i { top: calc((100% - 16px) / 2); right: 20px; }
aside >ul >li b[data-action="sideOpen"] { position: absolute; padding: 5px 20px; display: block; top: calc((100% - 42px) / 2); right: 0; cursor: pointer; }
aside >ul >li b[data-action="sideOpen"] i:before { content: "\f067"; }
aside >ul >li[data-type="2"] b[data-action="sideOpen"] i:before { content: "\f068"; }
aside >ul >li h4 a {min-width: 170px;display: block;color: #5a5a5a;font-size: 16px;font-weight: 500;padding: 15px 15px 17px;text-align: center;border: 1px solid #e5e5e5;background-color: #ffffff;}
aside >ul >li ul.subUL {position: absolute;width: 190px;background: rgba(var(--black-rgb), .85);left: calc(50% - 95px);z-index: 5;opacity: 0;top: 32px;}
aside >ul >li ul.sub2UL {margin-left: 10px;}
aside >ul >li ul.subUL li >div { position: relative; }
aside >ul >li ul.subUL li{background-color:#eee}
aside >ul >li ul.subUL li a {padding: 8px 10px 8px 10px;display: block;background-color: #ffffff;}
aside >ul >li ul.subUL li [data-action="sideOpen"] { display: none; }
aside >ul >li ul.sub2UL li a {color: #888;}

/* list_box */
.list_box li img { background: rgba(var(--primary-rgb), .05); }

/* article_list */
#article_list{display:grid;grid-template-columns: repeat(4,1fr);gap:30px}
#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: 25vw;}
#article_list .arrow img{height:44px}
#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{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
#news_list li .info_box {padding-top: 15px;}
#news_list li .info_box p a { margin-right: 10px; max-width: calc(100% - 100px); font-weight: 400; z-index: 2; }
#news_list li .info_box p .time { width: 90px; font-weight: 300; }
#news_list li .info_box h3 { height: 34px; font-size: 20px; }

/* 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;line-height: 130%;font-weight: 500;}
#content_wrap .quote_box { margin-right: 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:last-child{display:flex;justify-content:flex-end}
#pagenav p a{margin:0;padding:0 20px;width:fit-content;border-radius:20px;display:flex;align-items:center;justify-content:flex-start;gap:5px}
#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 0vw;}
#describe * { vertical-align: bottom; }

/* form_box */
.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; }
.form_box p #btnOK { width: 150px; }

/* 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){
	aside >ul{padding:0 15px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:3vw}
	aside >ul >li{overflow:hidden;position:relative;display:inline-block;margin:0 10px}
	aside >ul li b[data-action="sideOpen"]{display:none}
	aside >ul >li:hover{overflow:visible;position:relative}
	aside >ul >li:hover h4 a,aside >ul >li.action h4 a{color:var(--white);background-color:var(--primary)}
	aside >ul >li:not(:first-child)::before{content:"";position:absolute;top:50%;left:0;margin-top:-9px;width:1px;height:18px;background-color:#e1e1e1}
	aside >ul >li:hover ul.subUL{opacity:1}
	aside ul ul.subUL >li:not(:first-child){border-top:1px solid #d2d2d2}
	aside >ul >li ul.sub2UL li:hover a{color:var(--primary)}
	#sub_banner a,#page_title{padding-top:100px;height: 550px;}
	#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:1280px){
	aside{position:relative}
	aside #sidebtn{display:inline-block}
	aside #sidebtn font,aside #sidebtn i{color:#fff}
	aside >ul{position:absolute;overflow:hidden;margin-top:1px;width:100%;height:0;background:rgba(var(--black-rgb),.85);top:0;left:0;z-index:1}
	aside >ul.open{height:auto;border-width:1px;top:50px;background-color:#fff;-webkit-box-shadow:0 5px 15px rgba(0,0,0,0.1);box-shadow:0 5px 15px rgba(0,0,0,0.1);z-index:10}
	aside >ul >li{position:relative}
	aside >ul >li:not(:first-child){border-top:1px solid #ccc}
	aside >ul >li h4{display:flex;justify-content:center}
	aside >ul >li h4 a{padding:10px 15px;background-color:#ffffff;border-radius:0;border:0px solid #e5e5e5}
	aside >ul >li ul.subUL{overflow:hidden;width:100%;height:0;background:var(--secondary);top:0;left:0}
	aside >ul.open >li[data-type="2"] >ul{position:relative;height:auto;top:auto;bottom:0;opacity:1}
}
@media screen and (max-width:1024px){
	#article_list{grid-template-columns: repeat(3,1fr);}
	#sub_banner a,#page_title{height:300px}
	.form_box{grid-template-columns:1fr}
	.form_box p.large{grid-column:inherit}
}
@media screen and (max-width:768px){
	#article_list{grid-template-columns: repeat(2,1fr);}
	#article_list li img{height:50vw}
	#news_list{grid-template-columns:repeat(2,1fr)}
	#news_list li .info_box{padding:15px 0}
}
@media screen and (max-width:640px){
	aside{width:100%}
	#sub_banner a,#page_title{height:250px}
	#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}
}
@media screen and (max-width:550px){
	#article_list{grid-template-columns: repeat(1,1fr);}
	#community{margin-top:10px}
	#pagenav p a i,#pagenav p:last-child a i{margin:0}
	#news_list{grid-template-columns:repeat(1,1fr)}
}
@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}
}