@charset "utf-8";
/*	*/
.boxer{ height:1000px; background:#ccc; text-align:center; overflow:hidden;}
.boxer:before{ content:"主体"; line-height:600px; font-size:36px;}

/*公共元素*/
a.readmore{font:normal 400 14px/1.5 Santral W01, serif; color: #000; padding: 12px 24px; border: 1px solid #000; display:inline-block;}
a.readmore:after{ content:""; display: block; width: 0px; border-bottom:#81d8d0 1px solid; transition: 0.5s;}
a.readmore:hover:after{ width: 100%;}
.topic h3{ font:normal 400 40px/1 Sterling Display A, serif; padding-bottom: 9px;}

/*Home*/
.breadcrumbs{ border-bottom: 8px #81d8d0 solid;}
.breadcrumbs .hometitle{text-align: center;}
.breadcrumbs .row .the-title h3{ line-height: 1.33; font-size: 30px;}

.topBlk{ height: 104px; }

/*header*/
.header{ width: 100%; background-color: #FFF; z-index: 9997; position: fixed; box-shadow: 2px 0 20px 0px rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
.header .flex{display: flex; justify-content: space-between;}
.header-tools{ box-shadow: 0 1px 0 0 #eae8e4; height: 40px;}
.header-tools .services ul{ display: flex; justify-content: flex-start; align-items: center; }
.header-tools .services ul li{ padding-right: 24px; line-height: 40px; }
.header-tools .tools ul{ display: flex; justify-content: flex-end; align-items: center; }
.header-tools .tools ul li{ padding-left: 24px; line-height: 40px;}
.header-tools .tools ul li:first-child{padding-left: 0;}
.header-tools .tools ul li i.iconfont{ font-size: 18px; }
.header-tools .tools ul li.navbtn{ display: none; }
.header-tools .tools ul li.lg{ display: none;flex: 1 0 auto; text-align: center;  }
.header-tools .tools ul li.lg img{ height: 20px; padding-bottom: 5px; }


.header-navigation{ background-color: var(--vicolor); }
.header-navigation .wraper{ display: flex; justify-content: flex-start; align-items: center;}
.header-navigation .logo{ margin-right: 48px; }
.header-navigation nav{ flex: 1 0 auto; }
.header-navigation nav ul{ display: flex; justify-content: flex-start; align-items: center; }
.header-navigation nav ul li{ height: 64px; line-height: 64px; margin-right: 32px; }
.header-navigation nav ul li a{ line-height: 64px; color: #FFF; font-size: 12px; cursor: pointer; }
.header-navigation .search-form{ justify-content: flex-end;}
.header-navigation .search-form input{ width: 300px; height: 35px; background-color: #FFF; border-radius: 17px; outline: none; box-sizing: border-box; padding:0 20px; }
.header-navigation .searchForm{ position: relative; }
.header-navigation .searchForm button{ height: 35px; width: 60px; position: absolute; right: 0; top: 0; background-color: transparent; border: none; outline: none; }
.header-navigation .searchForm button i.iconfont{ font-size: 20px; color: #ccc; }
.header-navigation .searchForm:hover i.iconfont{color: var(--vicolor);}

#drawerNav{ position: relative; }
#drawerNav .drawerNav{ position: fixed; top: 0; left: 0; width: 400px; height:100vh; box-sizing: border-box; background-color: #FFF; transform: translateX(-768px); transition: 0.5s; z-index: 9999; }
#drawerNav .drawerNav ul{ display: flex; align-items: center; justify-content: space-around; padding:30px 10%; }
#drawerNav .drawerNav ul li a{ color: #000;}
#drawerNav .drawerNav ul li i.iconfont{ font-size: 20px; padding-left:12px;}
#drawerNav .drawerNav ul li:first-child i.iconfont{ padding-left: 0; }
#drawerNav .drawerNav ul li.lg{ flex: 1 0 auto; text-align: center; }
#drawerNav .drawerNav ul li.lg img{ height: 18px; padding-bottom: 5px; }
#drawerNav .drawerNav dl{ padding:0 10%; }
#drawerNav .drawerNav dl dt{ padding:16px 0; line-height: 20px; border-bottom: 1px solid #eae8e4;}
#drawerNav .drawerNav dl dt a{ font-size: 14px; display: block; display: flex; justify-content: space-between; }

@media screen and (max-width : 768px) {
	.topBlk{ height: 110px; }
	.header .flex{ display: block; }
	.header-tools{ height: 56px; }
	.header-tools .services{ display: none; }
	.header-tools .tools ul li{ line-height: 56px; }
	.header-tools .tools ul li.navbtn{ display: block; }
	.header-tools .tools ul li.lg{ display: block;}
	.header-tools .tools ul li i.iconfont{ font-size: 20px; }

	.header-navigation .logo{ display: none;}
	.header-navigation nav{ display: none;}
	
	.header-navigation .wraper{ display: block; }
	.header-navigation .search-form{ padding:10px 0; }
	.header-navigation .search-form input{ width: 100%; }

	#drawerNav .drawerNav{ width: 100%; }	
}


/*footer*/
.footer{ background-color: var(--vicolor); color: #FFF; min-height:500px; padding-bottom:40px 40px 0;}
.footer hr{ background-color: rgba(255,255,255,0.2);}
.footer .sitemap{ padding: 60px 0; display: flex; justify-content: space-between;}
.footer .sitemap dl{ width:25%;}
.footer .sitemap dl dt{margin-bottom:30px;font-size: 16px; font-weight: normal; text-transform: uppercase; color: #FFF; line-height:1.618;}
.footer .sitemap dl dt em{color: #FFF; font-style:normal;}
.footer .sitemap dl dd{ margin-bottom: 15px;}
.footer .sitemap dl dd a{ font-size:14px; font-weight: normal; text-transform: uppercase; color: #FFF; -webkit-transition:color 0.25s;-moz-transition:color 0.25s;transition:color 0.25s;}
.footer .sitemap dl dd a:hover{ color:#000; text-decoration: underline;}
.footer .sitemap dl dd i.iconfont{ padding-right: 10px; }
.footer .wechat{ width:135px; text-align:center;}
.footer .wechat b{ display:block; font-size:14px; padding-bottom:10px; font-weight:normal;}
.footer .copyright{ color: #FFF; font-weight: lighter; text-align: center; font-size: 14px; line-height: 1.5; padding: 15px 0;}
.footer .copyright a{ color: #FFF;}
.footer .copyright a:hover{ color:#222021;}
@media screen and (max-width : 768px) {
	.footer .sitemap{ display: block; padding: 60px 0 30px; }
	.footer .sitemap dl{ width: 100%; padding-bottom: 20px; }
	.footer .sitemap dl dt{ border-bottom: rgba(255,255,255,0.2) 1px solid; line-height: 2; margin-bottom:15px; }
	.footer .sitemap dl dd{ width: 49%; display: inline-block; box-sizing: border-box; }

}