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

/* header */
header { position: static; background: #fff; border-bottom: 1px #ccc solid; }
header #menubtn span { background: #454545; }
header #webmenu .menu_box >ul >li >p a { color: #252525; }
header.headerfixed { position: fixed; }
header #webmenu .menu_box >ul >li >p a:hover{color: #000000;}
/* banner_layout */
#banner_layout .waylink { position: absolute; width: 100%; top: 0; right: 0; z-index: 2; }
#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: #fff;font-size: 12px;}
#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; }
#banner_layout .pagetitle {position: absolute;width: 100%;top: 42%;left: 13vw;padding-left: 10px;display: flex;width: 77vw;}
#banner_layout .pagetitle:before {content: "";position: absolute;width: 3px;height: 30px;background: linear-gradient(180deg, #44b659 0%, #FFB800 100%);left: 0;top: 5px;display: flex;opacity: 1;z-index: 3;}
#banner_layout .pageh1 {color: white;font-size: 2.5rem;line-height: 1.2;}

.shape-divider { position: absolute; left: 0; width: 100%; overflow: hidden; line-height: 0; z-index: 6; pointer-events: none; }
.shape-divider svg { display: block; width: calc(100% + 1.3px); height: 200px; }
.shape-divider.z-20 { z-index: 20; }
.shape-bottom { bottom: -1px; }

/* side_box */
#side_box {width: 100%;background: #f3f3f3;z-index: 998;display: none;}
#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 1vw;min-height: 300px;position: relative;}
#content-wrap .layout_title { margin-bottom: 20px; padding-bottom: 5px; border-bottom: 2px #000 solid; }
#content-wrap .layout_title h2 { font-weight: 400; font-size: 25px; color: #000; }
#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: #053769; vertical-align: text-bottom; }
#content-wrap .description_box * { vertical-align: bottom; }
#content-wrap:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-image: radial-gradient(#cde0d1 2px,transparent 2px); background-size: 36px 36px; opacity: 0.3; pointer-events: none; }
/* article_list */
.article_list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px; }
.article_list .list_box { display: block; height: 100%; }
.article_list .relat_box { position: relative; background: #FFFFFF; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #F5F5F5; display: flex; flex-direction: column; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); height: 100%; }
.article_list .relat_box:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(68,182,89,0.08); border-color: rgba(68,182,89,0.15); }
.article_list .abso_tag { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; }
.article_list .img_box_cover { width: 100%; aspect-ratio: 4/3; position: relative; overflow: hidden; background-color: #F1F9F3; }
.article_list .img_box_cover img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); }
.article_list .relat_box:hover .img_box_cover img { transform: scale(1.08); }
.article_list .info_box { padding: 24px 28px; flex-grow: 1; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; }
.article_list .h4 { font-size: 20px; font-weight: 900; color: #1A1A1A; line-height: 1.5; margin: 0; transition: color 0.3s ease; }
.article_list .relat_box:hover h4 { color: #44b659; }
.article_list .text-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.bottompaddeJ{
    margin: 50px 0 0;
    display: flex;
    justify-content: center;
}
/* news_list */
#news-section .news_list .nowrap_box { display: flex; flex-direction: column; gap: 32px; list-style: none; white-space: normal !important; padding: 0; margin: 0; }
#news-section .news_list .relat_box { position: relative; background: #FFFFFF; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #F5F5F5; display: flex; flex-direction: row; align-items: stretch; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); white-space: normal !important; }
#news-section .news_list .relat_box:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(68,182,89,0.08); border-color: rgba(68,182,89,0.15); }
#news-section .news_list .abso_tag { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; }
#news-section .news_list .img_box_cover { width: 35%; flex-shrink: 0; position: relative; overflow: hidden; background-color: #F1F9F3; min-height: 220px; }
#news-section .news_list .img_box_cover img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); }
#news-section .news_list .relat_box:hover .img_box_cover img { transform: scale(1.08); }
#news-section .news_list .info_box { padding: 32px 40px; display: flex; flex-direction: column; justify-content: center; flex-grow: 1; }
#news-section .news_list h4 { font-size: 22px; font-weight: 900; color: #1A1A1A; margin-bottom: 12px; line-height: 1.4; transition: color 0.3s ease; }
#news-section .news_list .relat_box:hover h4 { color: #44b659; }
#news-section .news_list article { font-size: 16px; color: #666666; line-height: 1.7; margin-bottom: 20px; }
#news-section .news_list .text-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#news-section .news_list .time { font-size: 14px; font-weight: 700; color: #FFB800; display: flex; align-items: center; gap: 8px; margin-top: auto; }
#news-section .news_list .time::before { content: ''; display: inline-block; width: 6px; height: 6px; background-color: #44b659; border-radius: 50%; }

#news-section .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 60px; }
#news-section .page-link { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #E8F6EB; background: #FFFFFF; color: #666666; font-weight: 700; text-decoration: none; transition: all 0.3s ease; }
#news-section .page-link:hover { border-color: #44b659; color: #44b659; }
#news-section .page-link.active { background: #44b659; border-color: #44b659; color: #FFFFFF; box-shadow: 0 4px 12px rgba(68,182,89,0.2); }



/* faq_list */
.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: #1f1f1f; }
.faq_list ul li .title font { width: calc(100% - 80px); display: inline-block; font-size: 18px; color: #1f1f1f; }
.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: 14px; -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;margin-top: 50px;}
#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; }
#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; }



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

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


#contact-intro-section { background-color: #FFFFFF; position: relative; z-index: 2; padding-top: 60px; animation: fadeInUp 0.8s ease-out forwards; border-radius: 0 0 40px 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.01); }
#contact-intro-section .page-header { text-align: center; margin-bottom: 40px; }

#contact-section {padding: 0;}
#contact-section:before{content:"";position: absolute;z-index: 0;pointer-events: none;border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;animation: morphBlob 15s ease-in-out infinite alternate;opacity: 0.4;width: 16vw;height: 16vw;background: rgb(63 179 94 / 15%);top: 15vw;left: -10vw;}
#contact-section:after {content: '';position: absolute;top: auto;bottom: 0;right: -13vw;width: 19vw;height: 19vw;background: rgb(63 179 94/15%);border-radius: 40% 60% 70% 30%/40% 50% 60% 50%;opacity: 0.4;animation: badgeRing 20s linear infinite;z-index: 0;}

#contact-section .form_box {background-color: #FFFFFF;border-radius: 32px;padding: 48px;box-shadow: 0 20px 50px rgba(68,182,89,0.04);border: 1px solid #E8F6EB;max-width: 800px;margin: 0 auto;z-index: 6;position: relative;}
#contact-section .m_title { margin-bottom: 32px; }
#contact-section .form-title-row { display: flex; align-items: baseline; flex-wrap: wrap; margin-bottom: 16px; }
#contact-section .form-main-title { font-size: 28px; font-weight: 900; color: #1A1A1A; display: inline-flex; align-items: center; letter-spacing: 1px; }
#contact-section .form-main-title::before { content: ''; display: inline-block; width: 6px; height: 22px; background: linear-gradient(180deg, #44b659 0%, #FFB800 100%); border-radius: 4px; margin-right: 12px; }
#contact-section .form-note { font-size: 14px; color: #FFB800; font-weight: 700; margin-left: 12px; display: inline-block; }
#contact-section .description_box {font-size: 15px;color: #666666;line-height: 1.8;background-color: #fefefe;padding: 20px 24px;border-radius: 20px;border: 1px solid #F5F5F2;}
#contact-section .text-red { color: #44b659; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
#contact-section .input_list { display: flex; flex-direction: column; gap: 24px; }
#contact-section .nowrap_box { display: flex; flex-direction: column; gap: 8px; }
#contact-section label { font-size: 15px; font-weight: 700; color: #1A1A1A; display: flex; align-items: center; gap: 4px; }
#contact-section input[type="text"], #contact-section select, #contact-section textarea {width: 100%;padding: 14px 20px;border: 2px solid #E8F6EB;background-color: #fefefe;border-radius: 16px;font-size: 15px;color: #2C2C2C;transition: all 0.3s ease;font-family: inherit;}
#contact-section input[type="text"]:focus, #contact-section select:focus, #contact-section textarea:focus { border-color: #44b659; background-color: #FFFFFF; outline: none; box-shadow: 0 4px 15px rgba(68,182,89,0.08); }
#contact-section select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg fill='%2344b659' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; background-size: 20px; }
#contact-section textarea { resize: vertical; min-height: 120px; }
#contact-section .checknum font.nowrap_box { display: flex; flex-direction: row; gap: 16px; align-items: center; }
#contact-section .checknum input { max-width: 200px; }
#contact-section .checknum img {height: 20px;border-radius: 0;border: 2px solid #E8F6EB;background-color: #FFFFFF;cursor: pointer;transition: opacity 0.2s ease;}
#contact-section .checknum img:hover { opacity: 0.8; }
#contact-section .send_box { margin-top: 40px; text-align: center; }
#contact-section .btn { display: inline-block; padding: 16px 64px; background: linear-gradient(90deg, #44b659 0%, #55C76A 100%); color: #FFFFFF; font-size: 18px; font-weight: 900; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 10px 25px rgba(68,182,89,0.3); border: none; cursor: pointer; }
#contact-section .btn:hover { box-shadow: 0 15px 35px rgba(68,182,89,0.45); transform: translateY(-2px); }


@media screen and (min-width: 1440px){
	#content-wrap .workframe { width: 1300px; }
	#banner_layout #sub_banner a img { height: 500px; }
}
@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: #aaa; }
	#side_box ul.cate >li:hover h4 a , #side_box ul.cate >li.action h4 a { color: #004487; }
	#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; }
	
}
@media screen and (max-width: 1280px){
	#banner_layout #sub_banner a img { height: 40vw; }
	#side_box { background: #004387; }
	#side_box .workframe { width: 100%; }
	#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; }
	#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; }
	
	.album_list { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; }
}
@media screen and (max-width: 1024px){
	
	.form_box { width: 90%; }
}
@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); }
	#banner_layout .pageh1{font-size: 1.75rem;overflow: hidden;margin: 0px 0;text-align: center;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
	#banner_layout .pagetitle:before{top: 1px;}
}
@media screen and (max-width: 768px){
	#banner_layout #sub_banner a img { height: 350px; }
	.article_list { grid-template-columns: 1fr; gap: 24px; }
    .article_list .info_box { padding: 20px 24px; }
    .article_list .h4 { font-size: 18px; }

	#news-section .page-header { margin-bottom: 32px; }
  #news-section .category-nav { gap: 8px; margin-bottom: 32px; }
  #news-section .category-btn { padding: 8px 18px; font-size: 14px; }
  #news-section .news_list .nowrap_box { gap: 24px; }
  #news-section .news_list .relat_box { flex-direction: column; border-radius: 20px; }
  #news-section .news_list .img_box_cover { width: 100%; aspect-ratio: 16/10; min-height: auto; }
  #news-section .news_list .img_box_cover img { position: static; }
  #news-section .news_list .info_box { padding: 24px; }
  #news-section .news_list h4 { font-size: 18px; -webkit-line-clamp: 2; }
  #news-section .news_list article { font-size: 15px; -webkit-line-clamp: 3; margin-bottom: 16px; }
  #news-section .pagination { margin-top: 40px; }

	#contact-intro-section { padding-top: 40px; }
  #contact-section .form_box { padding: 32px 20px; border-radius: 24px; }
  #contact-section .form-title-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  #contact-section .form-note { margin-left: 0; }
  #contact-section .description_box { padding: 16px; font-size: 14px; }
  #contact-section .checknum font.nowrap_box { flex-direction: column; align-items: flex-start; gap: 12px; }
  #contact-section .checknum input { max-width: 100%; }
  #contact-section .checknum img {width: auto;height: auto;}
  #contact-section .btn { width: 100%; text-align: center; }
	.faq_list ul li .title label{width: 40px;}
	#content-wrap{margin-bottom:40px;}
}


@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; }
	.input_list p >font { width: 100%; }
}
@media screen and (max-width: 550px){
	
	.album_list { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
}