* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body{font-size:14px;display:flex;flex-direction:column;align-items:center;}
em,i{font-style:normal} 
ul{list-style:none} 

a:link,a:active,a:visited{color:#000;text-decoration:none}
.mgb38{ margin-bottom:38px;}

.maintop { width: 100%; display: flex; flex-direction: row; justify-content: center; background-color: rgba(0, 0, 0, 0.85); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.toptypebox { display: flex; width: 1600px; height: 90px; flex-direction: row; justify-content: space-between; }
.toptypelogo { width:413px; display: flex;  align-items:center}
.toptypelogo img { width: 413px; height: 74px; display: block; }
.typeboxcen { display: flex; list-style: none; width: 1000px; align-items: center; font-size:16px; justify-content: space-around; }
.typeboxcen > li { position: relative; padding: 15px 5px; color: #f8f9fa; cursor: pointer; white-space: nowrap; display: flex; align-items: center; height: 100%; font-weight: 500; transition: color 0.3s ease; }
.typeboxcen>li a:link,.typeboxcen>li a:active,.typeboxcen>li a:visited,.typeboxcen>li{color:#ffffff;}.typeboxcen>li a:hover {color:#bd9969;} /* 棕黄*/


.typeboxcen > li:hover { color: #FFC107; }
.typeboxcen > li.active { color: #FFC107; border-bottom: 3px solid #FFC107; }
.typeboxcen > li ul { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-10px); width: 200px; background-color: rgba(255, 255, 255, 0.95); list-style: none; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); border-radius: 0 0 8px 8px; overflow: hidden; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); z-index: 1000; border-top: 3px solid #FFC107; }
.typeboxcen > li ul.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.typeboxcen > li ul li { padding: 12px 15px; font-size: 14px; color: #333; border-bottom: 1px solid #f0f0f0; border-bottom:1px solid #CCCCCC; transition: all 0.3s ease; position: relative; overflow: hidden; }
.typeboxcen > li ul li:before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background-color: #FFC107; transform: translateX(-100%); transition: transform 0.3s ease; }

.typeboxcen > li ul li:hover:before { transform: translateX(0); }
.typeboxcen > li ul li:last-child { border-bottom: none; }

.typeboxcen>li>ul>li a:link,.typeboxcen>li>ul>li a:active,.typeboxcen>li>ul>li a:visited,.typeboxcen>li>ul>li{color:#333333;}.typeboxcen>li>ul>li a:hover {color:#ffa329;} /* 深灰*/
.typeboxcen>li>ul>li:hover {background-color: #fff8e1; color: #FF8F00; padding-left: 20px; }

/* 页脚样式 */
.footbox { width: 100%; height: 323px; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/huandeng/footbg.jpg'); background-size: cover; background-position: center; color: white; padding: 40px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.footer-top { width: 1400px; max-width: 90%; display: flex; justify-content: center; flex-wrap: wrap; margin-bottom:10px; }
.footer-section { flex: 0 0 30%; min-width: 250px; margin-bottom: 10px; padding: 0 15px; text-align: center; }
.footer-section h3 { font-size: 18px; margin-bottom: 15px; color: #FFC107; position: relative; padding-bottom: 8px; }
.footer-section h3:after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 40px; height: 2px; background-color: #FFC107; }
.footer-section p { color: #e0e0e0; line-height: 1.8; margin-bottom: 0; }
.footer-bottom { width: 1400px; max-width: 90%; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 20px; text-align: center; font-size: 14px; color: #e0e0e0; }
.footer-bottom p { margin-bottom: 8px; }
.footer-links { margin-top: 10px; }
.footer-links a { color: #e0e0e0; text-decoration: none; margin: 0 10px; transition: color 0.3s; }
.footer-links a:hover { color: #FFC107; }
@media (max-width: 1200px) { .footer-top { width: 100%; max-width: 100%; } .footer-section { flex: 0 0 33.333%; } }
@media (max-width: 768px) { .footer-top { flex-direction: column; align-items: center; } .footer-section { flex: 0 0 100%; margin-bottom: 25px; } }


/* ***********************************************************  布局  ****************************************************** */
.bjh{display:flex;flex-direction:row}/* 横向布局 */
.bjs{display:flex;flex-direction:column}/* 纵向布局 */
.bjn{flex-wrap:wrap}/* 换行 */
.bjxia{flex-direction:column-reverse;}

/* 对齐方式  justify-content 对应的是横向的*/
.bjall{justify-content:space-evenly}/* 距离相等*/
.bjlef{justify-content:flex-start}/* 左对齐默认*/
.bjrig{justify-content:flex-end}/* 右对齐*/
.bjcen{justify-content:center}/* 居中对齐*/
.bjed{justify-content:space-between}/* 二端对齐*/
.bjaround{justify-content:space-around}/* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/

.bjscen{align-items:center}/* 横轴排列纵向居中*/

.bjend{align-items:flex-end}/*元素位于容器的结尾 */

.newbc1{ background:#f5f5f5}/*头部*/
.newbc2{ background:#1b1b1b}/*头部菜单背景*/
.newbc3{ background:#eeeeee}/*中部*/
.newbc5{ background:#292929}/*底部*/
.newbc6{ background:#dd5e9e}/*案例切换 紫*/
.newbc7{ background:#e5e5e5}/*案例切换 灰*/


/* *********************************************************************************************************************************** */

.wb100{ width:100%;}
.w1400{ width:1400px;}
.ret{ position:relative;}
.abs{ position:absolute;}

/*=========================================*/
.hd_ul{width: 100%;bottom: 20px;text-align: center;}
.hd_ul ul{display:inline-block;height:15px;font-size:0;}
.hd_ul ul li{display:inline-block;width:15px;height:15px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background: #000000;margin: 0 10px;}
.hd_ul ul .on{background:#8d0c7e;}