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

/* layout.less */
aside #sidebtn:before{transform:translateX(-140%) skewX(63deg);-webkit-transform:translateX(-140%) skewX(63deg)}
aside #sidebtn i{transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;transform:rotate(0);-webkit-transform:rotate(0)}
aside #sidebtn[data-type="2"]:before{transform:translateX(0) skewX(0);-webkit-transform:translateX(0) skewX(0)}
aside #sidebtn[data-type="2"] i{transform:rotate(180deg);-webkit-transform:rotate(180deg)}
aside > ul > li{overflow:hidden}
aside > ul > li .subUL{opacity:0}
@media (min-width:1281px){aside > ul > li .subUL{transform:translate(0,30px);-webkit-transform:translate(0,30px)}
aside > ul > li:hover{overflow:visible}
aside > ul > li:hover .subUL{transform:translate(0,0);-webkit-transform:translate(0,0);opacity:1}
}@media (max-width:1280px){aside > ul > li > ul{transform:translate(0,-30px);-webkit-transform:translate(0,-30px)}
aside > ul > li[data-type="2"] > ul{transform:translate(0,0);-webkit-transform:translate(0,0)}
}#orderfunction a,.orderWrap .list .info p.qBox a{width:25px;height:25px;border-radius:50%}
[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)}
}
/* sub_banner */
#sub_banner {width: 100%;height: 350px;margin-top: 76px;z-index: 10;}
#sub_banner:before , #sub_banner:after {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;content: "";opacity: .3;background: -webkit-linear-gradient(bottom, rgba(var(--secondary-rgb), 1) 0%, rgba(var(--secondary-rgb), .5) 100%);background: linear-gradient(to top, rgba(var(--secondary-rgb), 1) 0%, rgba(var(--secondary-rgb), .5) 100%);}
#sub_banner a {height: 100%;background: no-repeat 50% / cover;background-size: cover;}

/* wrap */
#wrap {z-index: 2;}
#wrap::after{content:"";position:absolute;width: 100%;height:100%;bottom:0;background:url(/images/39/img-cus-bg.png);background-repeat:no-repeat;background-position: 50% 50%;background-size:cover;z-index:-5;opacity: .4;}
.fancybox-infobar__body span {color: #fff;}

/* top_title */
#top_title .pag_tit {line-height: 120%;letter-spacing: 3px;color: #121212;text-align: center;margin: 2vw auto  0;}
#top_title .pag_tit::first-letter { color: var(--primary); }

/* waylink */
.waylink ol {padding: 10px 0;text-align: center;}
.waylink ol li , .waylink ol li a {letter-spacing: 1.5px;font-weight: 400;font-size: 13px;}
.waylink ol li:after { margin: 0 10px; display: inline-block; font-weight: 100; font-size: 12px; content: "/"; }
.waylink ol li:last-child:after { margin: 0; content: ""; }

/* aside */
aside {margin: 20px auto 40px;}
aside #sidebtn { padding: 10px 20px; width: calc(100% - 40px); z-index: 2; }
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 {padding: 20px;font-weight: 400;font-size: 17px;text-align: center;}
aside >ul >li.action h4 a {color: var(--white);text-align: center;}
aside >ul >li.action{background-color:var(--primary)}
aside >ul >li ul.subUL {position: absolute;width: 200px;background: rgba(var(--black-rgb), .85);left: calc(50% - 100px);z-index: 5;opacity: 0;}
aside >ul >li ul.sub2UL { margin-left: 10px; }
aside >ul >li ul.subUL li >div { position: relative; }
aside >ul >li ul.subUL li a {padding: 10px 15px;display: block;color: #fff;text-align: center;}
aside >ul >li ul.subUL li [data-action="sideOpen"] { display: none; }
aside >ul >li ul.sub2UL li a { color: var(--complement); }

/* content_wrap */
#content_wrap {padding: 0vw 0 4vw 0;}
.contentBox{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 60px;
    align-items: start;
    margin-top: 50px;
}

/* list_box */
.list_box li {}
.list_box li h3 { height: 30px; font-weight: 400; font-size: 18px; }

/* describe */
#describe {margin-bottom: 2vw;}
#describe * {}

/* article_list */
#article_list img { height: 350px; }
#article_list .info_box { padding: 25px 30px; }
#article_list .info_box article { font-weight: 300; }

/* news_list */
#news_list,#article_list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 20px}
#news_list li ,#article_list li{padding-bottom: 30px;width: auto;}
#news_list li img {height: 320px;aspect-ratio: 4 / 3;object-position: top;}
#news_list li .info_box {padding: 15px;width: calc(100% - 70px);box-shadow: 0 0 30px rgba(var(--black-rgb), .1);left: 20px;bottom: 0;background-color: #ffffff;}
#news_list li .info_box p * {font-size: 14px;}
#news_list li .info_box p a { margin-right: 10px; padding: 0 2px; max-width: calc(100% - 82px); height: 23px; z-index: 2; }

/* product_list */
#product_list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 20px}
#product_list li{-webkit-box-shadow:0px 0px 24px 0px rgba(0,0,0,0.1);box-shadow:0px 0px 24px 0px rgba(0,0,0,0.1);padding:0 0 20px 0;margin:0;width:100%}
#product_list li .img_cover{width:100%;aspect-ratio:1/ 1;object-fit:cover}
#product_list li a.txt_clamp{width:100%;height:100%;left:0;top:0;z-index:10}
#product_list .info_box{position:relative}
#product_list .info_box >div{margin:auto;width:calc(100% - 60px)}
#product_list .info_box >div p a.txt_primary_5{color:#00a0e9}
#product_list .info_box h3{margin:20px 0 20px 0;display:block;color:#050a10;font-size:26px;font-weight:bold;line-height:1.4;position:relative;padding-bottom:10px;text-decoration:underline;text-align:center}
#product_list .info_box p a{display:none}
#product_list .info_box .line{margin:10px 0 20px;width:50px;height:1px;background:var(--primary);opacity:.7}
#product_list .info_box article{height:30px;font-weight:300;font-size:17px;-webkit-line-clamp:1;text-align:center}
#product_list .info_box .price{margin-top:15px;min-height:30px;display:none}
#product_list .info_box .price font{margin-left:20px;font-weight:300}
#product_list a.atag_item{position:absolute;z-index:10}

/* book_list */
#book_list .row { margin: 30px 15px; display: inline-block; }
#book_list .row img { height: 400px; }
#book_list .row .info_box { padding: 100px 15px 40px; width: calc(100% - 30px); background: -webkit-linear-gradient(top,transparent 0,rgba(var(--black-rgb), .01) 2%, rgba(var(--black-rgb), .8) 90%); background: linear-gradient(to bottom,transparent 0,rgba(var(--black-rgb), .01) 2%, rgba(var(--black-rgb), .8) 90%); bottom: 0; left: 0; }

/* album_list */
#album_list { margin-bottom: 5vw; 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; }

/* faq_list */
#faq_list li { margin-bottom: 30px; }
#faq_list li .title {padding: 10px 45px 10px 5px;background: color-mix(in srgb, #ffffff 80%, white);}
#faq_list li .title label {padding: 0 0 0 10px;width: 40px;}
#faq_list li .title font { width: calc(100% - 80px); font-size: 18px; }
#faq_list li .info {padding: 15px 35px 15px 55px;font-size: 14px;-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;}

/* pagenav */
#pagenav {padding: 50px 0 20px;display: flex;align-items: center;justify-content: center;}
#pagenav a , #pagenav strong { margin: 0 10px; display: inline-block; font-weight: 400; vertical-align: middle; }
#pagenav a:first-child , #pagenav a:last-child { line-height: 9px; }
#pagenav strong { color: var(--primary); }
#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; }

/* form_box */
.form_box {}
.form_box p { margin-bottom: 30px; }
.form_box input#Checknum { margin-right: 10px; width: 100px; }
.form_box #btnOK { padding: 5px 10px; width: 250px; }

/* 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; }
	aside >ul >li {overflow: hidden;position: relative;display: inline-block;font-size: 16px;position: relative;background-color: #e5e5e5;}
	aside >ul li b[data-action="sideOpen"] { display: none; }
    aside >ul{justify-content:center;flex-wrap:wrap;display:flex;align-items:stretch}
	aside >ul >li{margin-right:0;width:15%;border:1px solid #ededed}
	aside >ul >li:hover { overflow: visible; }
	aside >ul >li:hover h4 a {color: var(--white);background-color: var(--primary);}
	aside >ul >li:hover ul.subUL { opacity: 1; }
	#news_list li:hover .info_box { bottom: 30px; }
	#product_list li:hover .info_box .line { width: 100%; }
	#book_list li:hover .info_box { padding-bottom: 60px; }
}
@media screen and (max-width: 1280px){
	aside {position: relative;width: 500px;margin: 3vw auto 0;}
	aside #sidebtn {display: inline-block;background: #ff0000;}
    aside #sidebtn font,aside #sidebtn i{color:#fff}
	aside >ul {position: absolute;overflow: hidden;margin-top: 1px;width: 100%;height: 0;background: rgb(48 48 48);top: 0;left: 0;z-index: 1;}
	aside >ul.open { height: auto; border-width: 1px; top: 50px; }
	aside >ul >li { position: relative; }
	aside >ul >li h4 a {padding: 10px 15px;color: #fff;}
    aside >ul >li h4 b i,aside >ul >li ul.subUL li a{color: #fff;}
	aside >ul >li ul.subUL {overflow: hidden;width: 100%;height: 0;background: #676767;top: 0;left: 0;}
	aside >ul.open >li[data-type="2"] >ul { position: relative; height: auto; top: auto; bottom: 0; opacity: 1; }
	.waylink ol li,.waylink ol li a{color:#1a1a1a}
}
@media screen and (max-width: 1024px){
	#article_list img { height: 35vw; }
    #sub_banner{height: 190px;}
    #wrap{margin-top: 20px;}
    #top_title .pag_tit{text-align:center;color:#000;font-size:30px;font-weight:500}
	.waylink ol{text-align:center;padding:10px 0  0}
    #product_list{grid-template-columns:repeat(2,1fr)}
	#news_list,#article_list{grid-template-columns:repeat(2,1fr)}
        .contentBox{
    grid-template-columns: 1fr;
    margin-top: 0;
    gap: 40px 0;
}
}
@media screen and (max-width: 761px){
	#book_list .row img { height: 350px; }
}
@media screen and (max-width: 640px){
	#product_list .info_box >div{width:calc(100% - 10px)}
	#product_list .info_box article{height:50px;-webkit-line-clamp:2}
	aside{width:100%}
	#product_list .info_box h3{font-size:19px;-webkit-line-clamp:2;height:42px;margin:20px 0 10px 0}
	#album_list >div,#album_list >div img{height:40vw}
	.form_box input#Checknum{width:calc(100% - 90px)}
	#pagenav{display:flex;flex-direction:row;align-items:center}
	#pagenav a[class^="page-"]{width:auto;margin:0 0 20px 0}
	#content_wrap{padding:10vw 0}

}
@media screen and (max-width: 540px){
	#product_list {width: auto;gap: 10px 10px;margin: auto;grid-template-columns: repeat(1, 1fr);}
	#album_list >div,#album_list >div img{height:50vw}
	#sub_banner{height:110px}
	#news_list,#article_list{grid-template-columns:1fr;gap:40px 00}
}