@import url('/css/community.css');
#content-wrap .workframe{
	z-index:99;
}
/* header */
header {position: static;background: #fff;border-bottom: 1px #ccc solid;z-index: 999999;position: fixed;}
header #menubtn span { background: #454545; }
header #webmenu .menu_box >ul >li >p a { color: #252525; }
header.headerfixed { position: fixed; }

.webBox .wrapper_lines .center_box{
	border:none;
	display: none;
}
.webBox .wrapper_lines{
	display:none;
}
/* banner_layout */
#banner_layout{z-index: 99;margin-top: 98px;position: fixed;top: 0;}
#banner_layout.bannerfixed{
    margin-top: 78px;
}
#banner_layout .waylink {position: absolute;width: 100%;top: 0;right: 0;z-index: 2;background-color: #3d333861;}
#banner_layout .waylink ol {padding: 10px 0;text-align: right;}
#banner_layout .waylink ol li , #banner_layout .waylink ol li a {display: inline-block;line-height: 27px;letter-spacing: 3px;color: #ffffff;font-weight: 300;}
#banner_layout .waylink ol li:after { margin: 0 10px; display: inline-block; line-height: 27px; font-weight: 100; font-size: 12px; content: "/"; }
#banner_layout .waylink ol li:last-child:after { margin: 0; content: ""; }
#banner_layout #sub_banner:before {position: absolute;width: 100%;height: 100%;/* background: rgb(0 0 0 / .3); */display: block;top: 0;right: 0;z-index: 1;content: "";}
#banner_layout #sub_banner a { display: block; }
#banner_layout #sub_banner a img { height: 30vw; }
#wrap{
    margin-top: 488px;
    background-color: white;
    position: relative;
    z-index: 999;
}
/* side_box */
#side_box {width: 100%;background: #fcfcfcf7;z-index: 998;border-bottom: #dfdfdf6e 1px solid;}
#show_side_nav {display: block;text-align: center;line-height: 60px;font-weight: 500;font-size: 20px;color: #fff;}
#show_side_nav:after { margin: 4px 20px; width: 10px; height: 10px; border: solid #fff; border-width: 0 0 1px 1px; display: inline-block; transform: rotate(-45deg); content: ""; }
#side_box ul.cate >li#close_layout_nav { padding-top: 30px; }
#side_box ul.cate >li#close_layout_nav a { position: relative; margin: 0 0 0 auto; width: 25px; height: 20px; }
#side_box ul.cate >li#close_layout_nav a:before , #close_layout_nav a:after { position: absolute; width: 100%; height: 2px; background: #454545; display: block; top: 0; right: 0; top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ""; }
#side_box ul.cate >li#close_layout_nav a:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#side_box ul.cate { text-align: center; }

/* content-wrap */
#content-wrap {padding: 5vw 0;min-height: 300px;}
#content-wrap .layout_title {margin-bottom: 20px;padding-bottom: 5px;border-bottom: 1px #0000002e solid;}
#content-wrap .layout_title h2 {font-weight: 400;font-size: 25px;color: #605658;}
#content-wrap .layout_title .time { color: #959595; }
#content-wrap .quote_box { font-weight: 300; color: #767676; }
#content-wrap .quote_box a {display: inline-block;font-weight: 300;line-height: 19px;color: #bdbdbd;vertical-align: text-bottom;}
#content-wrap .description_box * { vertical-align: bottom; }
.description_box{
    color: #91898b;
    line-height: 180%;
}
/* article_list */
.article_list { font-size: 0; }
.article_list .wall-column {width: calc(100% / 4);display: inline-block;vertical-align: top;}
.article_list .wall-column .relat_box {margin: 0 5px 50px;}
.article_list .wall-column .relat_box .img_box_cover:before { position: absolute; width: 100%; height: 100%; background: #000; display: block; top: 0; left: 0; z-index: 2; opacity: .1; content: ""; }
.article_list .wall-column .relat_box .img_box_cover img {height: 311px;}
.article_list .wall-column:nth-child(2) .relat_box .img_box_cover img {/* height: 500px; */}
.article_list .wall-column .relat_box .info_box h4 { margin: 30px 0 10px; height: auto; max-height: 62px; line-height: 130%; font-weight: 400; font-size: 24px; -webkit-line-clamp: 2; }
.article_list .wall-column .relat_box .info_box article {height: 50px;line-height: 150%;font-weight: 300;font-size: 17px;color: #555;-webkit-line-clamp: 2;width: 95%;}

/* news_list */
.news_list ul li { margin: 20px 15px 20px 0; width: calc((100% - 30px) / 2); display: inline-block; }
.news_list ul li:nth-child(2n) { margin: 20px 0 20px 15px; }
.news_list ul li .img_box_cover , #newsBox ul li .img_box_cover img {height: 345px;}
.news_list ul li .info_box {border: #83838330 1px solid;padding: 10px;}
.news_list ul li .info_box h4 {height: 33px;font-weight: 500;font-size: 21px;color: #605658;margin-top: 15px;}
.news_list ul li .info_box article {margin: 10px 0 0;color: #999;}
.news_list ul li .info_box .time {color: #8f8f8f;display: flex;justify-content: flex-end;margin: 20px 10px 10px;}

/* faq_list */
.faq_list{
	background-image: url(/images/38/so-white.png);
	padding: 10px 0;
}
.faq_list ul { margin-bottom: 50px; }
.faq_list ul li .title { position: relative; padding: 20px 45px 20px 5px; border-bottom: 1px #d7d7d7 solid; display: block; font-size: 0; }
.faq_list ul li .title label {padding: 0 0 0 10px;width: 70px;display: inline-block;color: #a4a4a4;font-size: 28px;}
.faq_list ul li .title font {width: calc(100% - 80px);display: inline-block;font-size: 20px;color: #7d7d7d;}
.faq_list ul li .title span { position: absolute; width: 16px; height: 16px; display: block; top: calc((100% - 16px) / 2); right: 5px; }
.faq_list ul li .title span:before , .faq_list ul li .title span:after { width: 16px; height: 1px; background: #696969; display: block; content: ""; -webkit-transform: translateY(9px); transform: translateY(9px); }
.faq_list ul li .title span:after { -webkit-transform: translateY(8px) rotate(90deg); transform: translateY(8px) rotate(90deg); }
.faq_list ul li .info {padding: 15px 35px 15px 85px;border-bottom: 1px #d7d7d7 solid;font-size: 19px;line-height: 280%;font-weight: 300;letter-spacing: 0.05em;color: #5b5b5b;-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;}
.faq_list ul li.current .title span:after { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translateY(8px) rotate(180deg); transform: translateY(180deg) rotate(0); }

/* album_list */
.album_list { -moz-column-count: 4; -moz-column-gap: 5px; -webkit-column-count: 4; -webkit-column-gap: 5px; column-count: 4; column-gap: 5px; }
.album_list .list_box { margin-bottom: 5px; }
.album_list .list_box a.img_box_cover { width: 100%; border: 1px #f0f0f0 solid; }

/* pagenav */
#pagenav { overflow: hidden; text-align: center; font-size: 0; }
#pagenav a , #pagenav strong { margin: 0 0 0 -1px; width: 37px; height: 36px; border: 1px #f0f0f0 solid; display: inline-block; text-align: center; line-height: 36px; color: #000; }
#pagenav strong { background: #494949; color: #fff; }
#pagenav a:first-child , #pagenav a:last-child { margin: 0 5px; }
#pagenav a:first-child i.fa-angle-double-left:before , #pagenav a:last-child i.fa-angle-double-right:before { position: relative; width: 10px; height: 10px; border: solid #8c8c8c; border-width: 1px 0 0 1px; display: block; left: 3px; transform: rotate(-45deg); content: ""; }
#pagenav a:last-child i.fa-angle-double-right:before { border-width: 1px 1px 0 0; left: -2px; transform: rotate(45deg); }
#pagenav a[class^="page-"] { margin: 30px 5px 0; float: left; width: calc(50% - 10px); height: auto; border: 0; display: block; }
#pagenav a[class^="page-"] font {width: calc(100% - 22px);display: inline-block;font-weight: 300;color: black;}
#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 { margin: 20px auto 30px; width: 800px; }
.form_box .m_title .description_box {margin: 30px 0 10px;font-weight: 300;font-size: 18px;}
.form_box .m_title font { display: inline-block; line-height: 100%; font-weight: 700; font-size: 23px; color: #585858; vertical-align: bottom; }
.form_box .m_title font.note { margin-left: 25px; letter-spacing: 2px; font-weight: 500; font-size: 16px; }

/* input_list */
.input_list{
    margin: 30px auto 0;
}
.input_list p { position: relative; border-bottom: 1px #e8e8e8 solid; }
.input_list p:last-child { border-bottom-color: transparent; }
.input_list p:before {position: absolute;width: 190px;height: 100%;background: #616263;display: block;top: 0;left: 0;content: "";}
.input_list p >label {position: relative;margin-right: 25px;padding: 15px 25px;width: 140px;background: #616263;display: inline-block;font-size: 18px;color: #f2f2f2;vertical-align: top;z-index: 2;}
.input_list p >font { position: relative; padding: 10px 0 11px; width: calc(100% - 240px); display: inline-block; vertical-align: top; }
.input_list p >font input , .input_list p >font textarea { position: relative; padding: 5px 20px; width: calc(100% - 42px); background: none; border: 1px #d2d2d2 solid; z-index: 2; }
.input_list p >font ::-webkit-input-placeholder { color: #999; }
.input_list p >font ::-moz-placeholder { color: #999; }
.input_list p >font :-ms-input-placeholder { color: #999; }
.input_list p >font :-moz-placeholder { color: #999; }
.input_list p >font select { padding: 10px 20px; width: 100%; border: 1px #d2d2d2 solid; color: #000; }
.input_list p.checknum >font input { margin-right: 5px; width: calc(100% - 97px); }

/* send_box */
.send_box { margin: 55px 0 0; }
.send_box p { margin-bottom: 25px; text-align: center; }
.send_box p a.btn {position: relative;padding: 10px 30px;background: #f46263;display: block;text-align: center;line-height: 170%;letter-spacing: 5px;font-weight: 400;font-size: 19px;color: #fff;}
.send_box p a.btn:before {position: absolute;width: calc(100% - 12px);height: calc(100% - 12px);/* border: 1px rgb(255 255 255 / .32) solid; */top: 5px;left: 5px;content: "";}

/* lodbg */
[data-action="loader"] { position: fixed; width: 100vw; height: 100vh; background: rgb(0 0 0 / .3); text-align: center; line-height: 100vh; top: 0; left: 0; opacity: 0; z-index: -1; }
[data-action="loader"] .loader-circle { width: 50px; height: 50px; border: 2px rgba(0, 0, 0, .6) solid; border-left-color: rgb(255 255 255 / .4); border-radius: 100%; display: inline-block; }
#lodbg { opacity: 1; z-index: 99999; }
#lodbg .loader-circle { -webkit-animation: circle infinite .75s linear; -moz-animation: circle infinite .75s linear; -o-animation: circle infinite .75s linear; animation: circle infinite .75s linear; }

/* community */
#community ul li.fbb .fb-like { margin: 0 0 0 -5px; display: inline-block; }
#community ul li.fbb .fb-share-button { margin: -15px 0 0 -6px; display: inline-block; }


/* productBox */
#productBox {padding: 5vw 8vw;padding-top: 2vw;z-index: 999;background-color: #fdfdfd;position: relative;}
#productBox .list_box { position: relative; }
#productBox .relat_box:before {position: absolute;width: 100%;height: 100%;background: rgb(52 52 52 / 79%);display: block;top: 0;left: 0;z-index: 3;content: "";}
#productBox ul li .img_box_cover img { height: 490px; }
#productBox ul li .info_box.abso_box { height: auto; top: calc((100% - 40px) / 2); left: 0; }
section#productBox .more_box >* { padding: 5px 30px; border: 1px rgba(255, 255, 255, .3) solid; display: inline-block; color: #fff; }

#productBox ul li .info_box.abso_box b.sttep{
    position: absolute;
    top: -70px;
    width: 100%;
    color: #ff8687;
    font-size: 70px;
    opacity: 0.6;
}
#productBox ul li .info_box >* {margin: 5px auto;width: 70%;text-align: center;}
#productBox ul li .info_box h4 {height: 40px;font-weight: 400;font-size: 24px;color: #fff;margin-top: 30px;}
#productBox ul li .info_box article { margin: 80px auto 15px; width: 45%; color: rgb(255 255 255 / .7); line-height: 140%; font-size: 15px; -webkit-line-clamp: 2; opacity: 0; }
#productBox ul li .info_box .more_box { opacity: 0; }
#productBox .btn a { position: absolute; width: 26px; height: 26px; border: solid #444; display: block; top: calc((100% - 26px) / 2); }
#productBox .btn a#product_prev { border-width: 1px 0 0 1px; transform: rotate(-45deg); left: -50px; }
#productBox .btn a#product_next { border-width: 1px 1px 0 0; transform: rotate(45deg); right: -50px; }
#productBox .slick-slider { margin-bottom: 60px; }
#productBox .slick-dots li button:before {width: 12px;height: 12px;background: transparent;border: 1px #0000005c solid;border-radius: 50%;text-align: center;opacity: 1;content: "";}
#productBox .slick-dots li.slick-active button:before {
	background: #f46263;
	border: #f46263 1px solid;
}
section#productBox .page_title {margin-bottom: 30px;text-align: center;font-weight: 500;font-size: 55px;color: #363636;font-weight: 700;}
section#productBox .page_title , section#productBox .entitle{
    display: none;
}
@keyframes circle { 0%{ transform: rotate(0); } 100% { transform: rotate(360deg); } }
@-webkit-keyframes circle { 0%{ -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes circle { 0%{ -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } }
@-o-keyframes circle { 0%{ -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } }

@media screen and (min-width: 1440px){
	#content-wrap .workframe {width: 1300px;padding: 10px;background-image: url(/images/38/so-white.png);}
	#banner_layout #sub_banner a img {height: auto;}
}

@media screen and (min-width: 1281px){
	#show_side_nav , #side_box ul.cate >li#close_layout_nav  , #side_box ul.cate >li b[data-action="sideOpen"] { display: none; }
	#side_box ul.cate >li { position: relative; display: inline-block; }
	#side_box ul.cate >li h4 a {padding: 0 20px;line-height: 60px;font-weight: 500;font-size: 20px;color: #aaaaaaba;font-weight: 300;}
	#side_box ul.cate >li:hover h4 a , #side_box ul.cate >li.action h4 a {color: #3c3c3c;}
	#side_box ul.cate >li >.subUL { position: absolute; padding: 5px 0; width: 180px; background: #fff; box-shadow: 0 0 10px rgb(0 0 0 / .2); display: none; left: calc((100% - 180px) / 2); }
	#side_box ul.cate >li >.subUL >li { padding: 0 10px; }
	#side_box ul.cate >li >.subUL >li a { padding: 5px 0; display: block; line-height: 170%; color: #848484; }
	#side_box ul.cate >li >.subUL >li .sub2ULHead a { padding: 0 10px; color: #266a89; }
	.article_list .wall-column .relat_box:hover .img_box_cover:before { opacity: .4; }
    #productBox ul li:hover .relat_box:before  {background: rgb(37 37 37 / 87%);}
	#productBox ul li:hover .info_box.abso_box b.sttep{
    color: white;
}
	#productBox ul li:hover .info_box.abso_box { top: calc((100% - 178px) / 2); }
	#productBox ul li:hover .info_box article { margin: 30px auto 15px;  height: 44px; opacity: 1; }
	#productBox ul li:hover .info_box .more_box { opacity: 1; }

}
@media screen and (max-width: 1280px){
	#banner_layout{
        z-index: 999;
        margin-top: 79px;
    }
    #wrap{
    margin-top: 499px;
}
	#banner_layout #sub_banner a img {height: 420px;}
	#side_box {background: #494949;}
	#side_box .workframe { width: 100%; }
	#show_side_nav{display:none;}
	#banner_layout .waylink{
		bottom: 0;
		top: auto;
		background: #4e494ce3;
	}
	#side_box ul.cate {overflow-y: scroll;position: absolute;width: 100%;height: 0;background: #fff;opacity: 0;}
	#side_box ul.cate[data-type="1"] { padding-bottom: 120px; height: calc(100vh - 251px); opacity: 1; }
	#side_box ul.cate >li { padding: 10px 30px; border-bottom: 1px #ededed solid; }
	#side_box ul.cate >li#close_layout_nav, #side_box ul.cate >li:last-child { border-bottom: 0; }
	#side_box ul.cate >li h4 , #side_box ul.cate li >div { position: relative; }
	#side_box ul.cate >li h4 a { font-size: 20px; }
	#side_box ul.cate >li a { margin-right: 33px; display: block; line-height: 170%; font-weight: 400; color: #464646; }
	#side_box ul.cate >li b { position: absolute; padding: 0 10px; top: calc((100% - 27px) / 2); right: 0; }
	#side_box ul.cate li ul { padding: 15px 0 15px 20px; display: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
	#side_box ul.cate li .subULHead p a {font-size: 18px;color: #464646;overflow: hidden;margin-top: 15px;height: 22px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
	#side_box ul.cate li .sub2UL { margin: 5px 0 10px; padding: 10px 20px; background: #f1f1f1; }
	#side_box ul.cate li.action .subUL , #side_box ul.cate li.action  li.action .sub2UL { display: block; }
	#side_box ul.cate li.action >h4 a , #side_box ul.cate li.action >div a { color: #5188bf; }
	.article_list .wall-column .relat_box .img_box_cover img { height: 35vw; }
	.article_list .wall-column:nth-child(2) .relat_box .img_box_cover img { height: 40vw; }
	.album_list { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; }
    #productBox ul li.slick-current .relat_box:before  {background: rgb(69 70 72 / 91%);}

	#productBox ul li.slick-current .info_box.abso_box { top: calc((100% - 178px) / 2); }
	#productBox ul li.slick-current .info_box article { margin: 30px auto 15px;  height: 44px; opacity: 1; }
	#productBox ul li.slick-current .info_box .more_box { opacity: 1; }
	#productBox ul li .info_box.abso_box b.sttep{
    color: #ffd6e1ad;
}
}
@media screen and (max-width: 1024px){
	.article_list .wall-column .relat_box { margin: 0 10px 50px; }
	.form_box { width: 90%; }
	#productBox ul li .img_box_cover img { height: 400px; }
}
@media screen and (max-width: 980px){
	.input_list p:before { width: 170px; }
	.input_list p >label { padding: 10px 15px; }
	.input_list p >font { width: calc(100% - 220px); }
}
@media screen and (max-width: 768px){
	#banner_layout #sub_banner a img {height: 350px;object-position: 50% 50%;margin-top: -65px;}

	#banner_layout .waylink ol{
        padding: 3px 0;
    }
    #wrap{
    margin-top: 364px;
}
    #banner_layout .waylink ol li, #banner_layout .waylink ol li a{
        font-size: 12px;
        line-height: 14px;
    }
    #banner_layout .waylink ol li:after{margin: 0 5px;}
	.article_list .wall-column { width: 50%; }
	.article_list .wall-column .relat_box .img_box_cover img { height: 50vw; }
	.article_list .wall-column:nth-child(2) .relat_box .img_box_cover img { height: 55vw; }
	.news_list ul li { margin: 20px 5px 20px 0; width: calc((100% - 10px) / 2); }
	.news_list ul li:nth-child(2n) { margin: 20px 0 20px 5px; }
}
@media screen and (max-width: 640px){
	.album_list { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
	.input_list p { margin-bottom: 15px; border-bottom: 0; }
	.input_list p:before { display: none; }
	.input_list p >label {margin-right: 0;padding: 5px 0 0;width: 100%;background: none;color: #545454;}
	.input_list p >font { width: 100%; }
}
@media screen and (max-width: 550px){
	.article_list .wall-column { width: 100%; }
	.article_list .wall-column .relat_box .img_box_cover img { height: 250px; }
	.article_list .wall-column .relat_box .info_box h4 { margin: 15px 0 10px; }
	.news_list ul li , .news_list ul li:nth-child(2n) { margin: 20px 0; width: 100%; }
	.album_list { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
    #productBox .list_box { margin: 0 auto; width: 350px; }
	#productBox .btn { display: none; }
}
@media screen and (max-width: 480px){
	#show_side_nav{
    line-height: 33px;
    }
    #banner_layout #sub_banner a img{
    	height: 226px;
    	object-position: 49% 50%;
    }
    #wrap{
    margin-top: 241px;
}
    .faq_list ul li .info{
    padding: 10px 10px;
    font-size: 17px;
    }
    .news_list ul li .img_box_cover, #newsBox ul li .img_box_cover img{
    height: 275px;
}
    #productBox .list_box { width: 100%; }
    #productBox .list_box { width: 100%; }
    section#productBox .page_title{font-size:30px;}
    .faq_list ul li .title label{
        width: 50px;
    }
    .faq_list ul li .title font{
    font-size: 19px;
}
}