@charset "utf-8"; /* CSS Document */ /*-------重设浏览器默认样式--------*/ html { font-size: 62.5%; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, select, input, textarea, p, blockquote, table, th, td, hr, button { margin: 0; padding: 0; vertical-align: baseline; } body, select, input, textarea { color: #333; font: 1.4rem Helvetica, Arial, Microsoft YaHei, sans-serif; /*font: 1.5rem Segoe, "Segoe UI", "Segoe WP", Helvetica, Arial, Microsoft YaHei, sans-serif;*/ word-wrap: break-word; /*允许长单词换行到下一行*/ word-break: normal; /*word-break: break-all;*/ /*允许在单词内换行*/ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } address, caption, cite, code, dfn, var { font-style: normal; font-weight: normal; } /*定位*/ .fl { float: left; } .fr { float: right; } ol, ul, li { list-style: none; } img, input, button, select { border: 0 none; vertical-align: middle; /*定义行内元素*/ max-width: 100%; } textarea, input:not([type="submit"]), select { -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.075); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.075); -webkit-transition: border linear .2s, box-shadow linear .2s; -moz-transition: border linear .2s, box-shadow linear .2s; -o-transition: border linear .2s, box-shadow linear .2s; transition: border linear .2s, box-shadow linear .2s; display: inline-block; padding: 4px 6px; font-size: 1.3rem; color: #555; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; outline: 0 none; border: 1px solid #ccc; background: #fcfcfc; line-height: 20px; } textarea:focus, input:focus, textarea:hover, input:hover { border-color: rgba(102, 102, 102, 0.8); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 102, 102, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 102, 102, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 102, 102, 0.6) } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clearfix:after { content: "\20"; display: block; clear: both; } .clearfix { *zoom: 1; overflow: hidden; /* overflow: auto; */ } /*返回顶部*/ .met-scroll-top { position: fixed; right: 10px; bottom: 10px; z-index: 10; } /*弹性布局*/ .flex { display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; } .hide { display: none !important; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } table { width: 100%; border-collapse: collapse; border-spacing: 0; empty-cells: show; font-size: inherit; margin: 0 auto 20px; } table th, table td { line-height: 1.5; border: 1px solid #d2d2d2; vertical-align: middle; } table th { padding: 8px 10px; font-size: 1.5rem; background-color: #efefef; background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#fdfdfd), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #fdfdfd 0%, #e6e6e6 100%); background-image: -moz-linear-gradient(top, #fdfdfd 0%, #e6e6e6 100%); background-image: -ms-linear-gradient(top, #fdfdfd 0%, #e6e6e6 100%); background-image: -o-linear-gradient(top, #fdfdfd 0%, #e6e6e6 100%); background-image: -linear-gradient(top, #fdfdfd 0%, #e6e6e6 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#e6e6e6', GradientType=0); } table td { padding: 5px 10px; } table p { margin-bottom: 0; } table tr:nth-of-type(odd) { background: #f7f7f7; } table tbody tr:hover { background: #e5ebee; } /*去掉链接虚线,针对Firefox*/ a:focus { outline-style: none; } /*去掉链接虚线,针对IE*/ a, area { color: #333; text-decoration: none; cursor: pointer; } a:hover { color: #008FE2; text-decoration: none; } /*html5*/ main, article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; display: block; } .animate-box { opacity: 0; } .container { max-width: 1280px; margin: 0 auto; padding: 0 10px; } .row { margin-right: -10px; margin-left: -10px; } /*-----查看更多----*/ .readmore { position: relative; margin: 50px auto 0; text-align: center; color: #666; } .readmore a.more { width: 220px; height: 50px; line-height: 50px; border: 1px solid #ddd; position: relative; display: inline-block; color: inherit; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 1.8rem; overflow: hidden; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; } .readmore a.more:hover { color: #fff; background-color: #0F3E72; } /*-------FONT AWESOME CORE-----*/ [class^="icon-"], [class*=" icon-"] { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; background-image: none; } [class^="icon-"]:before, [class*=" icon-"]:before { text-decoration: inherit; display: inline-block; speak: none; } .icon-search::before { font-size: 1.6rem; content: "\f002"; } .icon-remove::before, .icon-close::before { content: "\f00d"; } /*-------定义公共样式--------*/ #header, main, footer { width: 100%; margin: 0px auto; } /*------响应式菜单-----*/ .top-menu { display: none; margin-left: 30px; } /*------内页与公共部分------*/ main > .wrapper > h1, #content > h1, #content .page, #productSlide, #content .news-info header p.p2 { display: none; } /*---------弹性布局两端对齐---------*/ footer .row.flex { justify-content: space-between; } /*---------头部文件---------*/ #container { padding-top: 80px; transition: all .2s ease-in-out; } #container.stuck { padding-top: 60px; } #header { width: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, .1); position: fixed; top: 0; z-index: 99; background: #fff; } #header > .container { position: relative; } #header .flex { justify-content: space-between; align-items: center; } #header .logo { padding: 20px 0; transition: all .2s ease-in-out; } #header .logo img { max-height: 40px; transition: all .2s ease-in-out; } #header .language { display: none; margin-right: 1rem; } /*-----------语言与搜索--------------*/ #header .language a { line-height: 1.7; padding-left: 28px; } #header .language a.cn { background: url(../images/cn-flag.png) no-repeat left; margin-right: 1rem; } #header .language a.es { background: url(../images/es-flag.png) no-repeat left; } /*-----移动效果-----*/ #header.stuck .logo { padding: 15px 0; } #header.stuck .logo img { max-height: 30px; } #header.stuck nav.menu > ul > li > a, #header.stuck .search-menu > a { height: 60px; line-height: 60px; } /*------------菜单-----------*/ nav.menu > ul > li { position: relative; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; margin: 0 20px; } nav.menu > ul > li:last-child { margin: 0; } nav.menu > ul > li:hover > a, nav.menu > ul > li.active > a, nav.menu > .dropdown:hover > a, nav.menu > .dropdown.active > a { color: #3285f3; text-decoration: none; } nav.menu > ul > li > a::after, nav.menu > ul > li.active > a::after, nav.menu > ul > li:hover > a::after { content: ''; width: 0; background-color: #008fe2; left: 0px; position: absolute; top: 0px; height: 2px; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } nav.menu > ul > li > a:hover::after, nav.menu > ul > li.active > a::after, nav.menu > ul > li:hover > a::after { width: 100%; } nav.menu > ul > li > a, .search-menu > a { color: #333; font-size: 1.5rem; /* font-size: 1.6rem; */ text-align: center; height: 80px; line-height: 80px; transition: all .2s ease-in-out; text-transform: uppercase; } nav.menu > ul > li > a > i { margin-left: 5px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } nav.menu > ul > li > ul > li > a > i { position: absolute; right: 15px; top: 10px; } nav.menu > ul > li > a:hover > i.fa-angle-down, nav.menu > ul > li.open > a > i.fa-angle-down { -webkit-transform: rotate(180deg); transform: rotate(180deg); } nav.menu > ul > li:hover > a, nav.menu > ul > li.active > a { color: #008fe2; text-decoration: none; } nav.menu ul li a { position: relative; display: block; } /*-------level 2---------*/ nav.menu ul.dropdown { min-width: 100%; z-index: 1002; visibility: hidden; opacity: 0; position: absolute; top: 100%; left: 0; text-align: left; background: #fff; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } nav.menu ul.dropdown > li a { color: #333; display: block; overflow: hidden; padding: 8px 30px 8px 15px; white-space: nowrap; font-size: 1.4rem; border-bottom: 1px solid #eee; text-transform: capitalize; } nav.menu ul.dropdown > li:hover > a { background: #f2f2f2; color: #008fe2 } nav.menu ul.dropdown > li { position: relative; } nav.menu ul.dropdown > li > ul { position: absolute; min-width: 100%; left: 100%; background: #fff; top: 0; visibility: hidden; opacity: 0; } nav.menu ul.dropdown > li > ul { position: absolute; min-width: 100%; left: 100%; background: #fff; top: 0; visibility: hidden; opacity: 0; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -webkit-transition: opacity .2s ease; transition: opacity .2s ease; } nav.menu ul.dropdown > li:hover ul { visibility: visible; opacity: 1; } nav.menu ul.dropdown > li > ul > li > a { font-size: 1.4rem; } nav.menu ul.dropdown > li > ul > li:hover > a { background: #fafafa; color: #008fe2; } /*---------搜索-----------------*/ .search-menu { position: relative; margin-left: 20px; } .search-menu:hover > a, .search-menu.active > a { color: #008fe2; text-decoration: none; } .search-menu > a { display: block; text-align: center; } .search-menu i { width: 20px; text-align: center; display: inline-block; } /*-------子菜单-------*/ .search-menu > ul.dropdown-menu2 { display: none; position: absolute; top: 100%; z-index: 1000; min-width: 300px; padding: 12px; background-color: #434343; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border-top-right-radius: 0; border-top-left-radius: 0; left: auto; right: 0; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .search-menu > ul.dropdown-menu2 form { position: relative; } .search-menu > ul.dropdown-menu2 form input[type="search"] { width: 100%; padding: 0 10px; height: 32px; color: #999; background-color: #fbfbfb; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 0 none; } .search-menu > ul.dropdown-menu2 form button[type="submit"] { color: #666; background: #fbfbfb; position: absolute; right: 7px; line-height: 28px; } .search-menu > ul.dropdown-menu2 form button[type="submit"]:hover { color: #000; } /*---------移动端导航-------------*/ .bigmegamenu { position: relative; } .wsmenu-list form { font-weight: normal; color: #fff; font-size: 1.8rem; margin-top: 8px; margin-bottom: 8px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); padding: 10px 15px; position: relative; } .wsmenu-list form input[type="text"] { height: 32px; line-height: 32px; padding-left: 6px; width: 100%; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .wsmenu-list form input[type="submit"] { width: 24px; height: 24px; background: url(../images/search_bg.png) no-repeat center center; cursor: pointer; position: absolute; top: 13px; right: 18px; } /*-----内页导航----*/ nav.breadcrumb { background-color: #f8f8f8; text-transform: capitalize; font-weight: normal; border-bottom: 1px solid #e5e5e5; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } nav.breadcrumb .flex { z-index: 10; position: relative; justify-content: space-between; align-items: center; } nav.breadcrumb h2 { height: 56px; line-height: 56px; font-size: 2.2rem; font-weight: normal; } nav.e-breadcrumb i { margin-right: 6px; color: #0078CC; } /*-----面包屑导航列表-----*/ ul.category-nav li { border-right: 1px solid #e4e5e8; } ul.category-nav li a { display: block; position: relative; font-size: 1.6rem; color: #939393; text-align: center; line-height: 56px; padding: 0 20px; } ul.category-nav li:first-child { border-left: 1px solid #e4e5e8; } ul.category-nav li.active a, ul.category-nav li:hover a { color: #008fe2; background-color: #f2f2f2; text-decoration: none; } ul.category-nav li a::after { content: ''; width: 0; background-color: #008fe2; left: 0px; position: absolute; bottom: 0; height: 2px; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } ul.category-nav li.active > a::after, ul.category-nav li:hover > a::after { width: 100%; } /*------内页与公共部分------*/ #content { padding: 40px 0; } /*------产品滚动-----*/ #productSlide { width: 100%; overflow: hidden; position: relative; } #productSlide .swiper-slide { position: relative; text-align: center; } #productSlide img { width: 100%; display: block; } #productSlide .pagination { position: absolute; z-index: 20; bottom: 3px; text-align: center; right: 0; } #productSlide .swiper-pagination-bullet { display: inline-block; width: 5px; height: 5px; border-radius: 5px; background: #333; margin: 0 2px; opacity: 0.8; cursor: pointer; } #productSlide .swiper-pagination-bullet-active { background: #2767BF; } /*------图片左右滚动箭头-----*/ .owl-carousel .owl-controls .owl-nav div { background: #fff none repeat scroll 0 0; border: 2px solid #ebebeb; border-radius: 0; color: #ebebeb; font-size: 18px; height: 40px; left: -35px; line-height: 34px; margin-top: -20px; opacity: 0; padding: 0; position: absolute; text-align: center; top: 50%; transition: all 400ms ease-in 0s; width: 40px; } .owl-carousel .owl-controls .owl-nav div.owl-next { left: auto; right: -35px; } .owl-carousel:hover .owl-controls .owl-nav div { opacity: 1 } .owl-carousel .owl-controls .owl-nav div:hover { color: #0067ac; border-color: #0067ac; } /*---------选项卡切换-----------------*/ .details ul.tabs { background-color: #f2f2f2; border-bottom: 1px solid #ddd; display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; } .details ul.tabs li { border-right: 1px solid #ddd; } .details ul.tabs li a { text-align: center; display: block; padding: 5px 20px; } .details ul.tabs li a:hover { background: #e2e2e2; } .details ul.tabs li.active a { color: #2767BF; background-color: #fff; border-top: 2px solid #2767BF; margin-top: -1px; margin-bottom: -1px; border-bottom: 1px solid #fff; padding: 4px 20px 5px; } #content .tab-box .tab-content, #content .tab-content { display: none; padding: 20px; } /*--------底部--------*/ footer { color: #ddd; background-color: #282828; padding: 30px 0px; } footer a { color: #ddd; } footer a:hover { color: #fff; text-decoration: underline; } /*-------底部联系方式------*/ footer .footer-left { padding: 0 10px; } footer .footer-left.flex { align-items: center; } footer .footer-logo { padding-right: 20px; border-right: 1px dashed #666; } footer .footer-logo img { max-height: 50px; } footer .footer-nav { padding-left: 20px; } footer .footer-nav ul { margin-bottom: 10px; } footer .footer-nav p { line-height: 1.7; } footer .footer-nav p span { padding-left: 20px; } footer .footer-nav ul li:first-child { padding-right: 20px; text-align: left; position: relative; } footer .footer-nav ul li:not(:first-child) { padding: 0 20px; position: relative; text-align: center; } footer .footer-nav ul li:not(:last-child)::after { bottom: 0; color: #ddd; content: "|"; right: 0; position: absolute; } footer .scan { padding: 0 10px; } footer .scan img { max-width: 100px; border: 1px solid #606060; } footer .scan p { text-align: center; line-height: 2; } /*------------------*/ footer h3 { color: #fff; font-size: 2rem; position: relative; margin-bottom: 20px; padding-bottom: 10px; text-transform: uppercase; } footer h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 1px; background: #FFCCCC; } footer strong { font-weight: normal; } /*----------------------*/ #bottom { width: 100%; background: #3e3e3e; color: #fff; line-height: 1.7; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } #bottom a { color: #fff; } #bottom a:hover { color: #e8eaec; text-decoration: underline; } #bottom > .wrapper { /*width: 100%; padding: 15px 50px;*/ max-width: 1400px; margin: 0 auto; padding: 15px 10px; background: #3e3e3e; color: #fff; height: auto !important; overflow: hidden; } #bottom > .wrapper .left { width: 80%; float: left; display: inline; } #bottom > .wrapper .left span { padding-left: 10px; } #bottom > .wrapper .right { width: 20%; text-align: right; float: right; display: inline; } /*----回到顶部---*/ .btn { font-size: 1.4rem; display: inline-block; text-align: center; white-space: nowrap; vertical-align: middle; } .btn-icon { padding: 10px; line-height: 1em } .btn .icon { color: #fff; width: 1em; line-height: inherit; text-align: center } .btn-squared { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .btn-primary { background-color: #008fe2; border-color: #008fe2; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; opacity: .78; } .btn-primary:hover { opacity: 1; } [class*=animation-] { -webkit-animation-duration: .5s; -o-animation-duration: .5s; animation-duration: .5s; -webkit-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } .animation-slide-bottom { -webkit-animation-name: slide-bottom; -o-animation-name: slide-bottom; animation-name: slide-bottom; } /*-------分页--------*/ #content .page { line-height: 30px; text-align: center; font-size: 1.2rem; padding: 20px 0; } #content .page a, #content .page span { padding: 4px 8px; border: 1px solid #555; } #content .page span { margin: 0 6px; } #content .page a:hover { background: #E5E5E5; text-decoration: none; } /*-----分页样式-----*/ nav.pagelist { clear: both; text-align: center; padding: 20px 0px; } nav.pagelist a { border: #008fe2 1px solid; margin-right: 6px; padding: 4px 7px; color: #008fe2; -webkit-border-radius: .2rem; -moz-border-radius: .2rem; border-radius: .2rem; } nav.pagelist a:hover { color: #fff; background: #008fe2; text-decoration: none; } nav.pagelist span.current { border: #008fe2 1px solid; background-color: #008fe2; margin-right: 6px; padding: 4px 7px; color: #fff; -webkit-border-radius: .2rem; -moz-border-radius: .2rem; border-radius: .2rem; } nav.pagelist span.disabled { border: #ccc 1px solid; margin-right: 6px; padding: 4px 7px; color: #3C3C3C; } /*--------上下翻页------------*/ #content .prevnext { clear: both; padding: 10px 15px 0; text-align: center; height: auto !important; overflow: hidden; border-top: 1px dotted #959595; } #content .prevnext .previous { width: 50%; float: left; text-align: left; } #content .prevnext .next { width: 50%; float: right; text-align: right; } .nothing { text-align: center; } /*-------百度地图API-------*/ .iw_poi_title { color: #CC5522; font-weight: bold; overflow: hidden; padding-right: 13px; white-space: nowrap } .iw_poi_content { font: 12px arial, sans-serif; overflow: visible; padding-top: 4px; white-space: -moz-pre-wrap; word-wrap: break-word } #dituContent { width: 60%; height: 400px; border: #ccc solid 1px; } /*------内页banner-----*/ #page-banner { clear: both; width: 100%; margin: 0 auto; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } #page-banner .content { height: 100%; background-position: center center; background-size: cover; background-color: #fff; min-height: 350px; } #page-banner .content > h3 { color: #fff; font-size: 3rem; text-transform: uppercase; font-weight: 500; text-align: center; } #page-banner .content > h3 span { color: #353535; } #page-banner .content.flex { justify-content: center; position: relative; align-items: center; } /*----回到顶部---*/ #back-to-top2 { position: fixed; bottom: 302px; right: 0; width: 66px; height: 66px; display: none; overflow: hidden; z-index: 99; } #back-to-top2 a { background: #99969e url(../images/icontop.png) no-repeat top left; width: 66px; height: 66px; display: block; top: 0; left: 0; opacity: .7; } /*------手机底部导航---------*/ #wap-footer { display: none; position: fixed; top: auto; bottom: 0; width: 100%; z-index: 9; } #wap-footer ul li { padding: 5px 0; position: relative; width: 25%; background: #494949; float: left; border-right: 1px solid #666; } #wap-footer ul li i { display: block; font-size: 2.2rem; } #wap-footer ul li a { color: #fff; display: block; text-align: center; } #wap-footer ul li a:hover { color: #0099e1; } #wap-footer ul li .wap-list { display: block; font-size: 1.4rem; position: relative; }