body { min-height: 100vh; color: #272727; font-family: "Microsoft YaHei", SimSun, Arial, Helvetica, sans-serif; } input, textarea, select { outline-color: #f3920d; } h1, h2, h3, h4, h5, h6, p { margin: 0; font-size: 16px; } ul, ol { list-style-type: none; margin: 0; padding: 0; } li { padding: 0; list-style-type: none; } a { text-decoration: none; color: #272727; } * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } ::-webkit-scrollbar { width: 8px; height: 8px; background-color: #f5f5f5; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #cccecf; } .flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .fl { float: left !important; } .fr { float: right !important; } .clearfix::after { content: ""; display: block; clear: both; } @-webkit-keyframes rowup-left { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-600px, 0, 0); transform: translate3d(-600px, 0, 0); } } @keyframes rowup-left { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-600px, 0, 0); transform: translate3d(-600px, 0, 0); } } @-webkit-keyframes rowup-right { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(600px, 0, 0); transform: translate3d(600px, 0, 0); } } @keyframes rowup-right { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(600px, 0, 0); transform: translate3d(600px, 0, 0); } } @media screen and (min-width: 768px) { html { font-size: 16px !important; } .only-mobile { display: none !important; } .container { width: 1200px; margin: 0 auto; } .mt18 { margin-top: 18px; } .mr18 { margin-right: 18px; } .mb18 { margin-bottom: 18px; } .ml18 { margin-left: 18px; } .section-title { position: relative; text-align: center; height: 70px; margin: 100px 0 60px; } .section-title img { display: block; height: 58px; margin: 0 auto; } .section-title h3 { position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 41px; font-weight: normal; font-weight: bold; } .banner.swiper-container { width: 100%; height: 700px; } .banner.swiper-container .swiper-slide img { display: block; height: 100%; } .banner.swiper-container .swiper-pagination-bullet { width: 10px; height: 10px; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #000; } .banner.swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #000; } .banner.single { width: 100%; height: 530px; } .banner.single img { display: block; height: 530px; } .navbar { height: 90px; background-color: #fff; position: -webkit-sticky; position: sticky; left: 0; top: 0; z-index: 90; } .navbar .container { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 40px; height: 90px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .navbar .navbar-header .logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .navbar .navbar-header .logo h1 { font-size: 0; } .navbar .navbar-header .logo img { display: block; height: 42px; } .navbar .navbar-collapse .nav { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .navbar .navbar-collapse .nav > li { margin-left: 56px; position: relative; } .navbar .navbar-collapse .nav > li::after { content: ""; display: none; width: 28px; height: 3px; background: #f3920d; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .navbar .navbar-collapse .nav > li.active > a { color: #f3920d; } .navbar .navbar-collapse .nav > li.active::after { display: block; } .navbar .navbar-collapse .nav > li:hover > a { color: #f3920d; } .navbar .navbar-collapse .nav > li:hover::after { display: block; } .navbar .navbar-collapse .nav > li:first-child { margin-left: 0; } .navbar .navbar-collapse .nav > li > a { height: 66px; display: block; } .navbar .navbar-collapse .nav > li > a span { display: block; text-align: center; } .navbar .navbar-collapse .nav > li > a span:first-child { font-size: 28px; } .navbar .navbar-collapse .nav > li > a span:last-child { font-size: 20px; margin-top: 2px; } .navbar .navbar-collapse .nav .dropdown { position: relative; } .navbar .navbar-collapse .nav .dropdown:hover .dropdown-menu { display: block; } .navbar .navbar-collapse .nav .dropdown .dropdown-menu { display: none; top: 66px; position: absolute; background: #fff; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .navbar .navbar-collapse .nav .dropdown .dropdown-menu > li:hover { background: #f3920d; } .navbar .navbar-collapse .nav .dropdown .dropdown-menu > li:hover > a { color: #fff; } .navbar .navbar-collapse .nav .dropdown .dropdown-menu > li:hover .dropdown-submenu { display: block; } .navbar .navbar-collapse .nav .dropdown .dropdown-menu > li > a { display: block; line-height: 50px; text-align: center; width: 128px; font-size: 20px; } .navbar .navbar-collapse .nav .dropdown .dropdown-menu .submenu-toggle { background: url(/img/icon-arrow-right.png) no-repeat; background-position: 98% center; background-size: 18px; } .navbar .navbar-collapse .nav .dropdown .dropdown-menu .dropdown-submenu { display: none; position: absolute; top: 0; left: 128px; background: #fff; width: 220px; min-height: 200px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 24px; border-left: 1px solid #e8e8e8; } .navbar .navbar-collapse .nav .dropdown .dropdown-menu .dropdown-submenu > li { margin: 9px 0; } .navbar .navbar-collapse .nav .dropdown .dropdown-menu .dropdown-submenu > li > a { display: block; line-height: 32px; text-align: center; background: #eee; color: #000; font-size: 14px; } .navbar .navbar-collapse .nav .dropdown .dropdown-menu .dropdown-submenu > li > a:hover { color: #f3920d; background-color: rgba(243, 146, 13, 0.3); } .footer { margin-top: 120px; padding-top: 42px; background: #1b1b1b; } .footer .container { width: 1650px; } .footer .container .section { margin-right: 34px; float: left; } .footer .container .section .logo img:first-child { width: 188px; } .footer .container .section .logo img:last-child { width: 136px; margin-left: 30px; } .footer .container .section .item { position: relative; margin-top: 20px; padding-left: 44px; font-size: 25px; color: #fff; font-weight: lighter; } .footer .container .section .item::before { content: ""; display: block; width: 27px; height: 27px; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-repeat: no-repeat; background-position: center; background-size: 27px; } .footer .container .section .item.mobile::before { background-image: url(/img/icon-mobile.png); } .footer .container .section .item.mobile span:last-child { margin-left: 16px; } .footer .container .section .item.email::before { background-image: url(/img/icon-email.png); } .footer .container .section .item.address::before { background-image: url(/img/icon-address.png); } .footer .container .section .item.contact::before { background-image: url(/img/icon-contact.png); } .footer .container .section .item.site::before { background-image: url(/img/icon-site.png); } .footer .container .nav { margin-left: 86px; float: left; } .footer .container .nav li { text-align: center; margin-top: 14px; } .footer .container .nav li:first-child { margin-top: 12px; } .footer .container .nav li a { font-size: 20px; font-weight: lighter; color: #fff; } .footer .container .nav li a:hover { color: #f3920d; } .footer .container .qrcode-content { float: right; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-top: 80px; } .footer .container .qrcode-content .qrcode { width: 141px; text-align: center; margin-left: 25px; } .footer .container .qrcode-content .qrcode img { width: 119px; height: 119px; background-color: #fff; } .footer .container .qrcode-content .qrcode .tip { font-size: 25px; color: #ffffff; margin-top: 11px; text-align: center; font-weight: lighter; } .footer .line { width: 1784px; margin: 0 auto; height: 1px; background-color: #fff; margin-top: 40px; } .footer .link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer .link i { display: block; height: 10px; width: 1px; background-color: rgba(255, 255, 255, 0.4); margin: 0 16px; } .footer .link a { color: rgba(255, 255, 255, 0.4); font-size: 12px; } .footer .link a:hover { color: #f3920d; } .footer .copyright { text-align: center; color: #bebebe; font-size: 22px; font-weight: lighter; line-height: 64px; } .footer .copyright a { color: #fff; text-decoration: underline; } .footer .copyright * { margin: 0 24px; } } @media screen and (max-width: 768px) { html { font-size: 50px; } .only-pc { display: none !important; } .scroll-box { overflow-x: auto; white-space: nowrap; font-size: 0; } .scroll-box::-webkit-scrollbar { width: 0; height: 0; } .scroll-box::-webkit-scrollbar-thumb { display: none; } .section-title { position: relative; text-align: center; height: 0.64rem; margin: 1rem 0 0.65rem; } .section-title img { display: block; height: 0.58rem; margin: 0 auto; } .section-title h3 { position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 0.34rem; font-weight: bold; } .banner.swiper-container { width: 7.5rem; height: 2.74rem; } .banner.swiper-container .swiper-slide img { display: block; width: 7.5rem; height: 2.74rem; } .banner.swiper-container .swiper-pagination { bottom: 0; } .banner.swiper-container .swiper-pagination .swiper-pagination-bullet { width: 0.1rem; height: 0.1rem; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; border: 0.01rem solid #000; } .banner.swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #000; } .banner.single { width: 100%; height: 2.08rem; } .banner.single img { display: block; width: 100%; height: 2.08rem; } .navbar { font-size: 0.26rem; height: 1.04rem; background: #fff; position: -webkit-sticky; position: sticky; left: 0; top: 0; z-index: 90; } .navbar .navbar-header { position: relative; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #fff; } .navbar .navbar-header .logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 2rem; height: 1.04rem; background: #f3920d; } .navbar .navbar-header .logo h1 { font-size: 0; } .navbar .navbar-header .logo img { display: block; width: 1.78rem; } .navbar .navbar-header .navbar-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .navbar .navbar-header .navbar-toggle .name { font-size: 0.3rem; color: #f3920d; margin-right: 0.16rem; } .navbar .navbar-header .navbar-toggle .icon-bar { display: inline-block; width: 0.48rem; height: 0.48rem; background: url(/img/icon-menu.png) no-repeat center; background-size: 0.42rem; font-size: 0; margin-right: 0.32rem; margin-bottom: 0.03rem; } .navbar .navbar-header .navbar-toggle[aria-expanded=true] .icon-bar { background-image: url(/img/icon-menu-close.png); background-size: 0.48rem; } .navbar .navbar-header .navbar-toggle[aria-expanded=true] .name { display: none; } .navbar .navbar-collapse { display: none; position: absolute; width: 100%; height: 100vh; overflow-y: auto; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 1.34rem; right: 0; top: 0; z-index: 1; background-color: transparent; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } .navbar .navbar-collapse::-webkit-scrollbar { width: 2px; height: 2px; background-color: #f5f5f5; } .navbar .navbar-collapse::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #cccecf; } .navbar .navbar-collapse .nav { background: #fff; padding: 0.48rem; padding-top: 1.04rem; -webkit-box-sizing: border-box; box-sizing: border-box; min-height: 100vh; } .navbar .navbar-collapse .nav li a { display: block; } .navbar .navbar-collapse .nav > li { border-top: 0.01rem solid #d8d8d8; border-bottom: 0.01rem solid #d8d8d8; } .navbar .navbar-collapse .nav > li > a { font-size: 0.3rem; line-height: 1rem; } .navbar .navbar-collapse .nav > li > a span:last-child { display: none; } .navbar .navbar-collapse .nav .dropdown .dropdown-toggle { background-image: url(/img/icon-menu-arrow-down.png); background-position: right center; background-size: 0.48rem; background-repeat: no-repeat; } .navbar .navbar-collapse .nav .dropdown.open .dropdown-toggle { background-image: url(/img/icon-menu-arrow-up.png); } .navbar .navbar-collapse .nav .dropdown .dropdown-menu { display: none; padding-bottom: 0.24rem; } .navbar .navbar-collapse .nav .dropdown .dropdown-menu > li > a { line-height: 0.66rem; color: #666666; } .navbar .navbar-collapse .nav .dropdown .dropdown-submenu { padding: 0.24rem 0; } .navbar .navbar-collapse .nav .dropdown .dropdown-submenu li { float: left; margin-right: 0.4rem; margin-top: 0.24rem; } .navbar .navbar-collapse .nav .dropdown .dropdown-submenu li:nth-child(2n) { margin-right: 0; } .navbar .navbar-collapse .nav .dropdown .dropdown-submenu li:nth-child(-n+2) { margin-top: 0; } .navbar .navbar-collapse .nav .dropdown .dropdown-submenu li a { line-height: 0.56rem; width: 2.08rem; height: 0.56rem; background: #f7f7f7; text-align: center; color: #666666; } .footer { position: relative; background: #050001; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: 1rem; } .footer .container { width: 6.86rem; margin: 0 auto; position: relative; } .footer .container .logo img:first-child { width: 1.88rem; } .footer .container .logo img:last-child { width: 1.36rem; } .footer .container .title { font-size: 0.3rem; color: #fff; margin-top: 0.46rem; } .footer .container .section { opacity: 0.8; width: 100%; padding: 0.32rem 0; margin-top: 3.8rem; border: 0.01rem solid #fff; border-left: 0; border-right: 0; border-bottom-color: rgba(255, 255, 255, 0.3); } .footer .container .section .item { position: relative; margin-top: 0.25rem; padding-left: 0.6rem; font-size: 0.24rem; color: #fff; } .footer .container .section .item:nth-child(2) { margin-top: 0; } .footer .container .section .item::before { content: ""; display: block; width: 0.4rem; height: 0.4rem; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-repeat: no-repeat; background-position: center; background-size: 0.4rem; } .footer .container .section .item.mobile::before { background-image: url(/img/icon-mobile.png); } .footer .container .section .item.mobile span:last-child { margin-left: 0.4rem; } .footer .container .section .item.email::before { background-image: url(/img/icon-email.png); } .footer .container .section .item.address::before { background-image: url(/img/icon-address.png); } .footer .container .section .item.contact::before { background-image: url(/img/icon-contact.png); } .footer .container .section .item.site::before { background-image: url(/img/icon-site.png); } .footer .container .nav { opacity: 0.8; position: absolute; top: 2.11rem; } .footer .container .nav.first { left: 0; } .footer .container .nav.second { left: 3.91rem; } .footer .container .nav li { margin-top: 0.24rem; } .footer .container .nav li a { display: block; font-size: 0.24rem; color: #fff; } .footer .container .qrcode-content { position: absolute; right: 0; bottom: -2.04rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer .container .qrcode-content .qrcode:first-child { margin-right: 0.16rem; } .footer .container .qrcode-content .qrcode img { display: block; width: 1.19rem; height: 1.19rem; background-color: #fff; } .footer .container .qrcode-content .qrcode .tip { font-size: 0.2rem; color: #ffffff; margin-top: 0.16rem; text-align: center; opacity: 0.8; } .footer .copyright { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left; color: #fff; font-size: 0.2rem; padding: 0.4rem; opacity: 0.8; } .footer .copyright a { width: 4.2rem; color: #fff; } .footer .copyright * { display: block; margin-bottom: 0.16rem; } }