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

/* sub_banner */
#sub_banner { padding-top: 110px; }
#banner_img img { height: 40vw; }
#banner_title { width: 100%; height: 100%; top: 0; left: 0; }
#banner_title .workframe { margin: auto; }
#banner_title h2 {text-transform: uppercase;text-decoration: underline;font-family: 'Cardo', serif;line-height: 130%;font-weight: 100;font-size: 39px;color: var(--bs-darkgray);}
#banner_title p { font-weight: 300; font-size: 20px; color: var(--bs-darkgray); }
#banner_title p:before { margin-right: 15px; width: 25px; height: 1px; background: var(--bs-darkgray); display: inline-block; vertical-align: super; content: ""; }

/* wrap */
#wrap { padding-bottom: 5vw; }

/* waylink */
.waylink ol { padding: 20px 0; text-align: right; }
.waylink ol li , .waylink ol li a {font-weight: 300;line-height: 27px;letter-spacing: 0.2px;font-size: 13px;}
.waylink ol li:after {margin: 0 10px;display: inline-block;line-height: 27px;font-weight: 100;font-size: 12px;content: "/";color: #e0e0e0;}
.waylink ol li:last-child:after { margin: 0; content: ""; }

/* aside */
aside #sidebtn { overflow: hidden; padding: 10px 20px; width: calc(100% - 42px); background: var(--bs-white); border: 1px var(--bs-gray) solid; text-align: center; color: var(--bs-darkgray); z-index: 2; }
aside #sidebtn:before { position: absolute; width: 100%; height: 100%; background: var(--bs-darkgray); top: 0; left: 0; transition: .4s cubic-bezier(.23,1,.32,1); content: ""; }
aside #sidebtn font { z-index: 1; }
aside #sidebtn i { top: calc((100% - 16px) / 2); right: 20px; z-index: 2; }
aside #sidebtn[data-type="2"] font { color: var(--bs-white); }
aside #sidebtn[data-type="2"] i { color: var(--bs-white); }
aside >ul { border: 1px var(--bs-lightgray) solid; text-align: center; }
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: 10px 15px;font-weight: 300;font-size: 17px;color: #757575;}
aside >ul >li.action h4 a {color: #ffffff;}
aside >ul >li ul.subUL { position: absolute; width: 170px; background: var(--bs-white); left: calc(50% - 85px); z-index: 1; 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: 5px 15px; display: block; }
aside >ul >li ul.subUL li [data-action="sideOpen"] { display: none; }
aside >ul >li ul.sub2UL li a { color: var(--bs-link); }

/* page_title */
.page_title {padding: 50px 0;text-align: center;line-height: 170%;font-weight: 500;font-size: 20px;letter-spacing: 1.8px;color: var(--bs-darkgray);}
.page_title:before , .page_title:after { margin: 0 15px; width: 30px; height: 1px; background: var(--bs-gray); display: inline-block; vertical-align: super; content: ""; }
.page_txt { text-align: right; }

/* page_list */
.page_list li { margin-bottom: 30px; }
#product_list li .img {overflow: hidden;height: 300px;}
.page_list li .img {overflow: hidden;height: 270px;}
.page_list li .img img {height: 100%;object-position: 50% 10%;}
.page_list li .info.color { padding: 20px 30px; background: var(--bs-darkwhite); }
.page_list li .info h4 {font-weight: 500;color: #4c4c4c;}
.page_list li .info article { margin: 15px 0 0; font-weight: 300; }

/* describe */
#describe * { vertical-align: bottom; }

/* news_list */
#news_list , #sharing_list { margin-top: 50px; }
#news_list li { margin-bottom: 30px; }
#news_list li:before { position: absolute; width: 100%; height: 1px; background: var(--bs-gray); display: block; bottom: 12px; left: 0; content: ""; }
#news_list li .img{display: block;width: 100%;height: 100%;margin: 0 auto;transition: all .5s;position: relative;background-color: #f1c3c5;overflow: hidden;}
#news_list li .img_cover {width: 100%;object-fit: cover;height: 170px;}
#news_list li:hover .img_cover {opacity: 0.5;transform: scale(1.05);}
#news_list li .img:before {content: "\f002";display: block;position: absolute;left: 50%;top: -30px;margin-top: -20px;margin-left: -20px;z-index: 99;width: 40px;height: 40px;line-height: 40px;border-radius: 50%;font-size: 18px;color: #fff;font-family: FontAwesome;text-align: center;background-color: #e28182;transition: all 0.4s ease;}
#news_list li:hover .img:before {top: 50%;}
#news_list li .info , #sharing_list li .info { position: inherit; }
#news_list li .info h4 {font-weight: 400;margin-top: 16px;margin-bottom: 9px;padding-bottom: 10px;letter-spacing: 1px;color: var(--bs-black);height: 20.2px;}
#news_list li .info article { margin: 0 0 10px; font-weight: 300; }
#news_list li .info .other { overflow: hidden; }
#news_list li .info .other >* { background: var(--bs-white); font-weight: 300; color: var(--bs-gray); }
#news_list li .info .other .category_box { position: relative; padding-right: 10px; max-width: calc(100% - 96px); z-index: 6; }
#news_list li .info .other .times { float: right; width: 86px; text-align: right; font-size: 14px; }
#newsdescribe{width: 80%;margin: auto;}

/* sharing_list */
#sharing_list li >div { vertical-align: middle; z-index: 3; }
#sharing_list li .info >div { margin: 0 20px; padding-bottom: 20px; }
#sharing_list li .info h4 { margin-top: 20px; }
#sharing_list li .info article {margin: 20px 0 40px;-webkit-line-clamp: 3;height: 72px;}
#sharing_list li .info .other .category_box {position: relative;border-radius: 20px;z-index: 6;background-color: #f1f1f1;border-color: #f1f1f1;color: #959595;}
#sharing_list li .info .other .times { bottom: 0; left: 20px; }
#sharing_list li .info .more { padding: 5px 30px; border-radius: 20px; border: 1px var(--bs-gray) solid; }
#sharing_list li:first-child { margin: 0 0 90px; padding: 30px 50px; width: calc(100% - 100px); display: flex; align-items: flex-start; justify-content: space-between; }
#sharing_list li:first-child:before { position: absolute; width: calc(100% - 100px); height: calc(100% - 60px); background: var(--bs-white); top: 30px; left: 50px; content: ""; z-index: 2; }
#sharing_list li:first-child .abso_tag { width: calc(100% - 100px); height: calc(100% - 60px); top: 30px; left: 50px; }
#sharing_list li:first-child .img {width: 50%;height: 380px;order: 1;}
#sharing_list li:first-child .info { padding: 60px 50px; width: calc(50% - 100px); }
#sharing_list li:first-child .info >div { padding-bottom: 0; }
#sharing_list li:first-child .info .other .times { position: relative; }
#sharing_list li:first-child .info .more { display: inline-block; }
#sharing_list li:first-child:after { position: absolute; width: 100%; height: 50%; background: var(--bs-lightsecondary); bottom: -20px; left: 0; content: ""; z-index: 1; }

/* pagenav */
#pagenav {overflow: hidden;padding: 50px 0 20px;text-align: center;font-size: 14px;}
#pagenav a , #pagenav strong { margin: 0 10px; display: inline-block; font-weight: 400; color: #1a191f; vertical-align: middle; }
#pagenav a:first-child , #pagenav a:last-child { line-height: 9px; }
#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; }

/* community */
#community ul li { line-height: 170%; }

@media screen and (min-width: 1441px){
	aside >ul >li h4 a {padding: 8px 14px;margin: 5px 6px;border: 1px solid #eeeeeee0;border-radius: 25px;}
}
@media screen and (min-width: 1281px){
	#banner_img img { height: 545px; }
	aside >ul { padding: 0 15px; border-width: 0 0 1px; }
	aside >ul >li {position: relative;display: inline-block;margin: 0 6px;}
	aside >ul li b[data-action="sideOpen"] { display: none; }
	aside >ul >li h4:before , aside >ul >li h4:after {position: absolute;width: 1px;height: 20px;background: var(--bs-gray);display: block;top: calc((100% - 20px) / 2);left: 0;content: "";display: none;}
	aside >ul >li h4:after { right: -1px; left: auto; }
	aside >ul >li:hover h4 a {color: #ffffff;}
	aside >ul >li.action h4 a:after{background: #e86e15;border-radius: 25px;width: 100%;}
	aside >ul >li h4 a:after {position: absolute;width: 100%;height: 100%;background: #f5f5f5b0;border-radius: 25px;display: block;top: 0;left: 0;content: "";z-index: -1;}
	aside >ul >li:hover h4 a:after{width: 100%;background: #f4a977;}
	aside >ul >li:last-child h4:after { right: 0; }
	aside >ul >li ul.subUL { opacity: 1; }
	.page_list li:hover .info.color { background: var(--bs-lightsecondary); }
	.page_list li:hover .info.color >* { color: var(--bs-keyword); }
}
@media screen and (max-width: 1280px){
	aside { position: relative; margin: auto; width: 500px; }
	aside #sidebtn { display: inline-block; }
	aside >ul { position: absolute; overflow: hidden; margin-top: 1px; width: calc(100% - 2px); height: 0; background: var(--bs-white); border-width: 0; border-color: var(--bs-gray); top: 0; left: 0; z-index: 1; }
	aside >ul.open {height: auto;border-width: 1px;top: 52px;z-index: 99;}
	aside >ul >li { position: relative; }
	aside >ul >li h4 a { padding: 10px 15px; }
	aside >ul >li ul.subUL { overflow: hidden; width: 100%; height: 0; background: var(--bs-lightgray); top: 0; left: 0; }
	aside >ul.open >li[data-type="2"] >ul { position: relative; height: auto; top: auto; bottom: 0; opacity: 1; }
aside >ul >li.action h4 a {color: #0b6e56;}
}
@media screen and (max-width: 1024px){
	#sharing_list li:first-child { padding: 30px 20px; width: calc(100% - 40px); align-items: center; }
	#sharing_list li:first-child:before , #sharing_list li:first-child .abso_tag { width: calc(100% - 40px); left: 20px; }
	#sharing_list li:first-child .img { height: 40vw; }
	#sharing_list li:first-child .info { padding: 0 30px; width: calc(50% - 60px); }
	#sub_banner { padding-top: 100px; }
}
@media screen and (max-width: 768px) and (min-width: 641px) {
	.page_list li .img { height: 250px; }
	#sub_banner { padding-top: 100px; }
}
@media screen and (max-width: 767px){
	#banner_img img { height: 400px; }
	#banner_title h2{font-size: 20px;}
	aside { width: calc(100% - 42px); }
	.page_list { text-align: center; }
	.page_list li { width: calc(80% - 30px); }
	#sharing_list li { width: calc(100% - 30px); }
	#sharing_list li .img { height: 25vw; }
	#sharing_list li .info article { margin: 0 0 20px; }
	#sharing_list li:first-child { display: block; }
	#sharing_list li:first-child .img {width: 100%;height: 190px;}
	#sharing_list li:first-child .info {padding: 10px 10px 30px;width: calc(100% - 20px);}
	#sharing_list li:first-child .info article { margin: 10px 0 20px; }
	.page_title{padding: 20px 0;}
	.waylink ol{padding: 8px 0;}
	#newsdescribe{width: 95%;margin: auto;}
}
@media screen and (max-width: 560px){
	#sub_banner {padding-top: 90px;}
	#banner_title .workframe{margin: 140px auto 0;}
	#banner_img img {height: 190px;}
	#sharing_list li .img, #sharing_list .img img {width: 100%;height: 190px;}
	#sharing_list li .info { margin-top: 20px; width: 100%; }
#product_list li .img {overflow: hidden;height: 210px;}
}
@media screen and (max-width: 480px){
	#sub_banner {padding-top: 110px;}
	#banner_title .workframe{margin: 170px auto 0;}
	.page_list li { width: calc(100% - 30px); }
	.page_list li .img { height: 60vw; }
}