html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ,textarea,input { margin:0; padding:0; } address,cite,dfn,em,var, i {font-style:normal;} *, *:before, *:after {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} body {font-family:'Microsoft Yahei','simsun','arial','tahoma';font-size: 14px;} body,html{color: #666;} table { border-collapse:collapse; border-spacing:0; } h1, h2, h3, h4, h5, h6, th { font-size: 100%; } button,input,select,textarea{font-size:100%;} fieldset,img{border:0;} a, img {-webkit-touch-callout: none} a{color:#333;transition: all .3s ease-in-out 0s;} a:hover{transition: all .5s;} a, a:active, a:focus, a:hover, a:visited {text-decoration: none} input[type=password],input[type=text], textarea { resize: none; outline: 0; -webkit-appearance: none; white-space: pre-wrap; word-wrap: break-word; } ul, ol { list-style: none; } :focus{ outline:none;} .clear {zoom: 1} .clear:after,.container:after{content: "";display: block;clear: both;} .fl{ float: left; } .fr{float: right;} .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto} @media (min-width:768px){.container{width:100%;}} @media (min-width:1200px){.container{width:1170px}} /*弹性布局*/ .rows{display: flex;flex-direction: row;align-items: center;} .cent{display: flex;align-items: center;justify-content: center;} .column{display: flex;flex-direction: column;align-items: center;} .between{display: flex;flex-direction: row;align-items: center;justify-content: space-between;} /*顶部底部*/ header{position: relative; width: 100%;} #swiper1{width:100%;} .swiper img{display: block;} :root {--swiper-theme-color:#e6212a;} .top {height: 36px;line-height: 36px;border-bottom: 1px solid #e2e2e2;} .top a {padding: 5px 8px;} .head{height:115px;overflow:hidden;} .head .logo{margin:10px 20px 20px 0;} .head .logo img{max-height:80px;} .head .company{margin-top:30px; border-left:1px solid #ddd; padding-left:20px;max-width: 44%;} .head .fl>h2{font-size: 24px;color: #e6212a;font-weight: bold;white-space: nowrap;} .head .fl>p{font-size: 18px;margin-top: 5px;white-space: nowrap;} .head .fr>p{font-size: 16px;margin-top:30px;} .head .fr>p>strong{ font-size:26px;display: block;} .head .fr>.iconfont{font-size:52px;margin-top:30px;margin-right:10px;color: #e6212a;} .menu{background:#252525;position: relative;} .menu .nav:after{content:"";display: block;clear: both;} .menu .redbg{content:"";width:100px;height:60px; background: #e6212a; position: absolute;left:0;bottom:0;} .menu .nav li{float: left;width:12.5%;text-align: center;font-size:16px;position: relative;} .nav>li>a {color: #FFF;display: block;line-height:53px;position: relative;z-index: 2;white-space: nowrap;} .nav>li>dl {position: absolute;z-index:999;display: none;width:100%;} .nav>li>dl>dt>a {display: block;width:100%;height: 50px;line-height: 50px;text-align: center;background: #252525;color: #fff;} .nav>li>dl>dt>a:hover {background: #e6212a;color: #fff;display: block;width:100%;height: 50px;} .nav .home:after{content:"";position: absolute; top:-6px;right:-20px;z-index: 1; width:calc(100% + 21px);height:60px;background: url("../images/navbg.png")no-repeat top right;} .nav>li a:hover, .nav>li.on>a {color: #e6212a;} .nav>li:first-child a {color: #FFF;} .nav>li:first-child a:hover {color: #FFF;} .nav>li.on>dl{display: block;} /*footer*/ .footer { width: 100%; color: #fff; padding-bottom: 48px; background: #2E3033; border-top: 8px solid #dc0000; } .footer .links { padding: 20px 0; font-size: 16px; border-bottom: 1px solid #1a1d21; } .footer .links span { color: #fff; display: inline-block; } .footer .links a { display: inline-block; font-size: 14px; color: #939393; padding-right: 10px; } .footer .links a:hover { color: #dc0000; } .footer .bottom { border-top: 1px solid #464a50; } .footer .bNav { width:50%; height: 180px; margin-top: 48px; } .footer .di_logo img { width: 111px; height: 111px; background-size: 100%; } .footer .bNav dl { display: inline-block; float: left; width: 25%; overflow: hidden; text-align: left; padding-top: 10px; } .footer .bNav dl dt { height: 16px; display: block; padding-bottom: 32px; } .footer .bNav dl dt a { display: block; font-size: 16px; color: #fff; line-height: 16px; } .footer .bNav dl dd { display: block; padding-bottom: 16px; } .footer .bNav dl dd a { display: block; font-size: 14px; color: #939393; line-height: 14px; } .footer .bNav dl dd a:hover { color: #dc0000; } .footer .ewm { width:20%; height: 180px; text-align: center; margin-top: 48px; border-left: 1px solid #464a50; } .footer .ewm dl { width: 140px; float: left; display: block; margin-top: 10px; height: 164px; } .footer .ewm dl dt { width: 140px; height: 140px; background-color: #fff; text-align: center; } .footer .ewm dl dt img { width: 130px; height: 130px; display: inline-block; background-size: 100%; margin-top: 5px; } .footer .ewm dl dd { font-size: 14px; color: #939393; line-height: 24px; padding-top: 5px; } .footer .contact_info { width:30%; height: 180px; padding-left:4%; border-left: 1px solid #464a50; margin-top: 48px; } .footer .contact_info h2{font-size: 36px;color: #dc0000;line-height: 36px;padding-top: 4px;font-weight: bold;padding-bottom: 12px;} .footer .contact_info h3 {font-size:18px;padding-top: 8px;font-weight: normal;} .footer .contact_info p{font-size: 14px;color: #939393;line-height: 22px;} /*copyright*/ .copyright {line-height: 50px;color: #666;font-size: 12px;background: #27292B;} .copyright p {color: #939393;} .copyright span {margin: 0 6px;} .copyright a {color: #939393; -webkit-transition: all ease 300ms; -moz-transition: all ease 300ms; -ms-transition: all ease 300ms; -o-transition: all ease 300ms; transition: all ease 300ms; } .copyright a:hover {color: #dc0000;} .t_right{text-align: right;} .mt20{margin-top: 20px;} #swiper1 .swiper-button-next:after,#swiper1 .swiper-button-prev:after{color:#fff;opacity:.3;} #swiper1 .swiper-button-next:hover:after,#swiper1 .swiper-button-prev:hover:after{opacity:1;} #swiper1 .swiper-pagination-bullet{width:12px;height:12px;} img{max-width:100%;} .bot{background:#2E3033; padding:15px 0;} .bot a{color: #888; margin-right: 10px;} .bot a:hover{color:#fff;} /*浮动客服*/ .toolbar {position: fixed;right: 1%;bottom:3vh;z-index: 999;} .toolbar dd {height:60px;margin-bottom:5px;position: relative;} .toolbar dd>a{ text-align: center;cursor:pointer;position:absolute; color:#fff; right:0; top:0;width:60px;height:60px; padding:5px 0; overflow:hidden; background: #dc0000;font-size:25px;line-height:30px;} .toolbar dd>a>p{font-size:12px; line-height:20px;} .toolbar dd .iconfont{font-size:25px;margin: 0 5px;} .toolbar dd:hover>a{background: #dc0000;color:#fff; width:auto;display: flex; align-items: center; justify-content: flex-start; padding: 0 20px; white-space: nowrap;} .toolbar dd:hover{width:auto;} .toolbar dd:hover>a .iconfont{color:#fff;} .toolbar dd.erwm:hover>a .iconfont,.toolbar dd:hover>a>p{display: none;} .toolbar dd.erwm .column{display: none;} .toolbar dd.erwm:hover .column{display:block;} .toolbar dd.erwm:hover,.toolbar dd.erwm:hover>a{height:140px; width:120px;border-radius:10px;} .toolbar dd.erwm:hover>a{padding:10px; font-size: 14px; line-height:16px;} .mt40{margin-top: 40px;} .mtb30{margin: 30px auto;} @media (max-width:1200px) { } @media (max-width:1024px) { .head .company{display: none;} .head .company{display: block;max-width:70%;} .head .fl>h2{line-height: 30px; font-size:20px;white-space: normal;} .head .fl>p{line-height:30px; margin-top: 0; font-size: 14px;} } @media (max-width:768px) { .top{display: none} .head{height: 70px; float: left;} /*.head>.container{width: auto;}*/ .head .logo img {max-height:45px;} .head .fr {display: none;} /*.head .fr>p{margin-top:15px; font-size: 12px;}*/ /*.head .fr>.iconfont{margin-top: 15px; font-size:40px;}*/ /*.head .fr>p>strong{font-size: 24px; line-height: 30px;}*/ .menu{position:absolute; top:15px;right: 20px; width: 40px; height:40px;border-radius:10px; border:1px solid #ddd;z-index: 999; background: url("../images/menu.png") no-repeat center center; } .menu .redbg{display: none;} .nav .home:after{display: none;} .menu .nav{background: rgba(0,0,0,.7); width:30vw; position: absolute; right:-20px; top:40px; display: none;} .menu:hover .nav{display: block;} .menu .nav li{display: block;float: none; width: 100%;} .menu .nav li>a{display: block;} .nav>li a:hover, .nav>li.on>a {background: #e6212a; color: #fff;} .footer .bNav{width: 100%;} .footer .contact_info,.footer .ewm{display: none;} .footer .bNav{margin-top: 20px;} .copyright .fr{float: none;} .copyright{height:auto; line-height: 20px; padding: 15px 0;} .head .company{display: block;margin:5px 0; height:60px; overflow:hidden;max-width:70%;} .head .fl>h2{line-height: 30px; font-size:20px;white-space: normal;} .head .fl>p{line-height:30px; margin-top: 0; font-size: 14px;} } @media (max-width:567px) { .head .between{display: none;} .head{height:50px;} .head .logo img {max-height:30px;} .menu{top:5px; right: 10px;} .menu .nav{right: -10px; width: 40vw} .head .company{display: block;margin:5px 0; height:40px; overflow:hidden;max-width: 50%;} .head .fl>h2{line-height:20px; font-size:14px;white-space: normal;} .head .fl>p{line-height:20px; margin-top: 0; font-size:12px;} }