@charset "utf-8"; /**@import url("glyphicon.css");**/ /**初始**/ * {outline: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box} html {font: normal 14px;-webkit-text-size-adjust: 100%} body {padding: 0;margin: 0 auto;font-size: 14px;color: #666;background-color: #fff;font-family: arial, sans-serif; -webkit-text-size-adjust: none; /*取出点击出现半透明的灰色背景*/ -webkit-tap-highlight: rgba(0,0,0,0); } input[type="button"],input[type="submit"],input[type="reset"] {-webkit-appearance: none;}ul, li, form, dl, dt, dd, div, ol,figure,article,nav,menu,aside{padding: 0;margin: 0;} .ul, .ul li {list-style: none;} table {border-collapse: collapse;border-spacing: 0} table td {border-collapse: collapse;font-size: 14px;} select, input, textarea {font-size: 14px;color: #333;border-radius: 0;-webkit-border-radius: 0;font-family: arial, sans-serif;} img{border: none;max-width: 100%;vertical-align: middle;} a {color: #333;text-decoration: none;-webkit-tap-highlight-color:rgba(0,0,0,0);} a:hover {color: #47a0ec;text-decoration: none;} a:focus {color: #333;outline: none;-moz-outline: none;} a:active {color: #333;} pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;margin:0;font-family: arial, sans-serif;text-align:justify;text-justify:inter-ideograph;} .clear {clear: both;height: 0px;overflow: hidden;zoom: 0;} .clearfix {*zoom:1;}/*IE/7/6*/ .clearfix:after { content:''; display:block; height:0; clear:both; } .dot{display: block;white-space: nowrap; text-overflow: ellipsis;overflow: hidden;} .dot2,.dot3,.dot4{display: -webkit-box;display: box;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;} .dot2 {-webkit-line-clamp: 2;} .dot3 {-webkit-line-clamp: 3;} .dot4 {-webkit-line-clamp: 4;} .ytable{ display:table; width:100%;table-layout:fixed;} .ytable-cell{ display:table-cell; vertical-align:middle;} /*垂直居中,容器设置宽高*/ .ycenter {align-items: center; display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */} /*水平居中,容器设置宽高*/ .xcenter {justify-content: center; display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */} /*盒子布局*/ .flexbox{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;} /*弹性布局水平垂直居中 兼容性高*/ .xycenterbox{ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ -webkit-box-pack: center; -moz-justify-content: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-align-items: center; -webkit-align-items: center; align-items: center; } /*弹性布局水平居中 兼容性高*/ .xcenterbox{ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ -webkit-box-pack: center; -moz-justify-content: center; -webkit-justify-content: center; justify-content: center; } /*弹性布局垂直居中 兼容性高*/ .ycenterbox{ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ -webkit-box-align: center; -moz-align-items: center; -webkit-align-items: center; align-items: center; } .Ispic{ background-repeat:no-repeat; background-position:center center; background-size:cover;} :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .nM{ margin:0;} .nP{ padding:0;} /**字体大小**/ .fz_24{ font-size:24px;} .fz_20{ font-size:20px;} .fz_18{ font-size:18px;} .fz_16{ font-size:16px;} .fz_14{ font-size:14px;} .fz_12{ font-size:12px;} /**初始 End**/ .fl{ float:left;} .fr{ float:right;} .w22{ width:22%; padding-bottom:4%;} .w75{ width:75%; padding-bottom:4%;} @media(max-width:1024px){ .fl, .fr{ float:none;} .w22, .w75{ width:auto; padding-bottom:2%;} } /*用于图片变黑白*/ .grayscale{filter:url("data:image/svg+xml;utf8,#grayscale");-webkit-filter:grayscale(1);filter:grayscale(1);filter:gray}.grayscale.grayscale-fade{transition:filter .5s}@media screen and (-webkit-min-device-pixel-ratio:0){.grayscale.grayscale-fade{-webkit-transition:-webkit-filter .5s;transition:-webkit-filter .5s}}.grayscale.grayscale-fade:hover,.grayscale.grayscale-off{-webkit-filter:grayscale(0);filter:grayscale(0)}.grayscale.grayscale-replaced{-webkit-filter:none;filter:none}.grayscale.grayscale-replaced>svg{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.grayscale.grayscale-replaced.grayscale-fade:hover>svg,.grayscale.grayscale-replaced.grayscale-off>svg{opacity:0;} /*↑↑↑如修改栏目左右结构宽度比例 请不要修改这里的 在style.css 加上修改*/ /**页面框架 End**/ .auto{ margin:0 auto;} .auto_1280{ max-width:1280px;} @media(max-width:1280px){.auto_1280{ padding:0 2%;}} .auto_1200{ max-width:1200px;} @media(max-width:1200px){.auto_1200{ padding:0 2%;}} .auto_1180{ max-width:1180px;} @media(max-width:1180px){.auto_1180{ padding:0 2%;}} .auto_1150{ max-width:1150px;} @media(max-width:1150px){.auto_1150{ padding:0 2%;}} .auto_1100{ max-width:1100px;} @media(max-width:1100px){.auto_1100{ padding:0 2%;}} .auto_1050{ max-width:1050px;} @media(max-width:1050px){.auto_1050{ padding:0 2%;}} .auto_1000{ max-width:1000px;} @media(max-width:1000px){.auto_1000{ padding:0 2%;}} .auto_950{ max-width:950px;} @media(max-width:950px){.auto_950{ padding:0 2%;}} /*导航公共样式*/ .header-menu li.aon em > a{ color:#82c4c7;} .header-menu li em{ display:block; font-style:normal; text-align:center;} .header-menu li em a{ display:block;} .header-menu li .sub dt{ line-height:40px;} .header-menu li .sub dt a{display:block;white-space:nowrap; text-overflow:ellipsis; overflow:hidden; padding:0 10px;} .header-menu li .sub dt a:hover{ background:#009; color:#fff;} .header-menu .sub-has-sub dl{display:none;} @media(min-width:1025px){ #header-menu{ display:none;} .relative{ position:relative; z-index:100;} .header-menu li{ float:left; } .header-menu li .sub{position:absolute;} .header-menu li .sub{ opacity:0;overflow:hidden; } .header-menu li.aon .sub{ opacity:1; } .no-fullbground .sub{background-color:rgba(255,255,255,0.9)} .no-fullbground .sub-left{left:0;} .no-fullbground .sub-right{right:0;} .sub-horizontal .sub .sub-menu > dl{ float:left;} .sub-horizontal .sub-right >dl{ float:right;} .sub-horizontal .sub-menu >dl dt{ float:left;} /*.sub-horizontal .sub-right-txt-r .sub-menu >dl{ text-align:right; float:right; } .sub-horizontal .sub-right-txt-r .sub-menu >dl dt{ float:none; display:inline-block;}*/ .sub-horizontal .sub-right .sub-menu >dl{ text-align:right; float:right; } .sub-horizontal .sub-right .sub-menu >dl dt{ float:none; display:inline-block;} .sub-vertical .has-sub{ position:relative; z-index:100;} .sub-vertical .sub{background-color:rgba(255,255,255,0.9); left:0; width:100%;} .sub-vertical .sub-row-2{ width:200%;} .sub-vertical .sub-row-3{ width:300%;} .sub-vertical .sub-row-2 .sub-menu dt{ float:left; width:50%;} .sub-vertical .sub-row-3 .sub-menu dt{ float:left; width:33.3333333%;} .sub-vertical .sub-has-sub{ position:relative;} .sub-vertical .sub-has-sub dl{ background-color:rgba(255,255,255,0.9);position:absolute; left:100%; top:0; width:100%;} .sub-vertical dt.aon > a{background:#009; color:#fff;} .sub-vertical .sub-position-right{left:auto; right:0;} .sub-vertical .sub-position-right .sub-has-sub dl{ left:auto; right:100%;} .sub-txt-img .sub{ width:300%; } .sub-txt-img .sub-intro{padding:5px; overflow:hidden;} .sub-txt-img .sub-intro .sub-left{ float:left; width:40%;} .sub-txt-img .sub-intro .sub-right{ float:right; width:56%;} .sub-txt-img .sub-img img{ display:block; width:100%;} .sub-txt-img .sub-txt{ font-size:12px; line-height:24px;} .fullbground .sub{} .fullbground .sub-menu >dl, .fullbground .sub-menu >dl dt{ float:left;} .sub-menu-layer{ position:absolute; left:0; top:100%; width:100%;background-color:rgba(255,255,255,0.9);} .sub-slideDown .sub-menu-layer{ display:none; /*transition:0.3s;*/} .fullbground .sub-menu-layer{display: none;} } /*图标*/ .has-icon-v{text-align:center;} .has-icon-v i{ display:block; padding:10px 0;} .has-icon-v i img{ width:50px; height:50px; } .has-icon-h i{ display:inline-block; vertical-align:middle;} .has-icon-h i img{ width:20px; height:20px; margin-right:5px;} /*图标 end*/ @media(max-width:1024px){ .header-menu{ display:none;} .Public_nav_style #header-menu, .Public_nav_style #header-menu ul{position:fixed;top:0;height:100%; z-index:100;right:-100%; opacity:0;transition:opacity 0.3s;} .Public_nav_style #header-menu{ background-color:rgba(0,0,0,0.5); width:100%; } .Public_nav_style #header-menu ul{ width:60%; max-width:280px; background:rgba(32, 151, 155, 0.9); height:100%; max-height:100%; overflow:auto;padding:50px 2% 0; transition:0.3s;} .Public_nav_style #header-menu.header-menu-show, .Public_nav_style #header-menu.header-menu-show ul{ right:0;opacity:1;} #header-menu li .sub{ display:none;} #header-menu li{ line-height:40px; } #header-menu li em{ font-style:normal; display:block; font-size:16px;border-bottom:1px solid rgba(255,255,255,0.3);} #header-menu li a{display:block;} #header-menu li em a{ border-bottom:1px solid rgba(0,0,0,0.3); font-weight:bold; padding:0 10px;} #header-menu li:last-child em, #header-menu li:last-child em a{ border-bottom:0;} #header-menu li a:hover, #header-menu li a{ color:#fff;} #header-menu li.has-sub em{ position:relative;} #header-menu li.has-sub em::before{ position:absolute; content:''; width:100%; height:100%; left:0; top:0; z-index:2; background-color:transparent;} #header-menu li.has-sub em .op{position:absolute; width:15px; height:15px; right:3%; top:50%; margin-top:-6px;display:none; transition:0.3s;} #header-menu li.has-sub.clickon em .op{ transform:rotate(45deg);} #header-menu li.has-sub em .op::before, #header-menu li.has-sub em .op::after{ position:absolute; content:''; background:#fff;} #header-menu li.has-sub em .op::before{width:100%; height:3px;left:0; top:6px;} #header-menu li.has-sub em .op::after{ width:3px; left:6px; top:0; height:100%;} .Public_nav_style #header-menu li.has-sub em::after{position:absolute; content:''; right:2%; border:6px solid transparent; border-top-color:#fff; top:50%; margin-top:-3px;} .Public_nav_style #header-menu li.clickon em::after{border-bottom-color:#fff;border-top-color:transparent;margin-top:-9px;} .Public_nav_style #header-menu li.clickon em a{ background:rgba(0,0,0,0.2);} #header-menu li .sub-menu dt.has-dt{ position:relative;} #header-menu li .sub-menu dt.has-dt::before{position:absolute; content:''; width:100%; height:100%; left:0; top:0; background-color:transparent;} #header-menu li .sub-menu dt a{padding:0 10px; border-bottom:1px dashed rgba(0,0,0,0.5);display:block;white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } #header-menu li .sub-menu dt:last-child > a{ border-bottom:0;} #header-menu li .sub-has-sub{ position:relative;} #header-menu li .sub-has-sub i{ position:absolute; left:0; top:0; height:40px; width:100%; background-color:transparent; z-index:2;} .Public_nav_style #header-menu li .sub-has-sub i::before, .Public_nav_style #header-menu li .sub-has-sub i::after{ position:absolute; content:''; top:50%; background:#fff;} .Public_nav_style #header-menu li .sub-has-sub i::before{ width:10px; height:2px; margin-top:-1px; right:5px;} .Public_nav_style #header-menu li .sub-has-sub i::after{ width:2px; height:10px; margin-top:-5px; right:9px;} .Public_nav_style #header-menu li .clickon > i::after{ display:none;} .Public_nav_style #header-menu li .clickon > a{ background-color:rgba(0,0,0,0.2);} .Public_nav_style #open_menu{ position:absolute; right:2%; width:40px; height:40px; border:2px solid #20979b; border-radius:50%; top:5px; z-index:200;} #open_menu i, #open_menu i::before, #open_menu i::after{ position:absolute;} .Public_nav_style #open_menu i, .Public_nav_style #open_menu i::before, .Public_nav_style #open_menu i::after{background:#20979b;} #open_menu i{ top:50%;} .Public_nav_style #open_menu i{ width:60%; left:20%; margin-top:-1px; height:2px;} #open_menu i::before, #open_menu i::after{ left:0; width:100%; height:100%; content:'';transition:transform 0.3s;} #open_menu i::before{ top:6px;} #open_menu i::after{top:-6px;} .Public_nav_style #open_menu.open_menu_on{ border-color:#fff;} #open_menu.open_menu_on i{ background:none !important;} .Public_nav_style #open_menu.open_menu_on i::before, .Public_nav_style #open_menu.open_menu_on i::after{ background:#fff; margin-top:0;} #open_menu.open_menu_on i::before, #open_menu.open_menu_on i::after{ top:0 !important;} #open_menu.open_menu_on i::before{ transform:rotate(45deg);} #open_menu.open_menu_on i::after{ transform:rotate(-45deg);} } /*导航公共样式 end*/ /*by 20190122*/