@font-face { font-family: "Source Han Sans CN Regular"; src: url("../fonts/Source Han Sans CN Regular.woff2") format("woff2"), url("../fonts/Source Han Sans CN Regular.woff") format("woff"), url("../fonts/Source Han Sans CN Regular.ttf") format("truetype"), url("../fonts/Source Han Sans CN Regular.eot") format("embedded-opentype"), url("../fonts/Source Han Sans CN Regular.svg") format("svg"); } body, html{ width: 100%; overflow-x: hidden; font-family: "Source Han Sans CN Regular","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; font-size: .28rem; line-height: 1.5em; color: #333; background-color: #fff; } h4{ font-size: .4rem; } #index_swiper .slide_img{ width: 100%; } @media (min-width: 1600px){ .container { width: 1300px; } .container_index { width: 1500px; } } .modal{ z-index: 99999; transform: translate(0,-50%); top: 50%; bottom:auto; } .videoModal .modal-body{ padding: 0; } .navbar-default .navbar-toggle .icon-bar{ background-color: #fff; } .navbar, .nav>li{ position: static; } .container2{ max-width: 1400px; margin-left: auto; margin-right: auto; } .no-padding{ padding-left: 0px !important; padding-right: 0px !important; } img { width: auto\9; height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } .common_alert{ top: 10%; position: fixed; z-index: 99999; width: 100%; } .bg_white{ background: #fff; } .bg_gray{ background: #f5f5f5; } .text-white{ color: #fff; } .text-danger{ color: #dc0000; } .red{ color: #ed4e2a !important; } .text-gray{ color: #999999 } .text-red{ color: #920910; } .text-indent{ text-indent: 2em; } .common_alert{ top: 10%; position: fixed; z-index: 99999; width: 100%; } .swiper-pagination-bullet{ width: 6px; height: 6px; opacity: 1; background: rgba(255, 255, 255, 0.6); position: relative; } .swiper-pagination-bullet-active:after{ content: " "; position: absolute; border-radius: 100%; background-color: transparent; width: 10px; height: 10px; top: -2px; left: -2px; border: 1px solid rgba(255, 255, 255, 0.6); } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 40px; } a{ color: #333; } a, a:hover, a:visited, a:focus{ text-decoration: none; } a:hover, a:focus{ color:#258DFF; } .container-fluid { width: 100%; padding: 0; } .container-fluid .row{ margin: 0; } .container>.navbar-collapse{ margin-right: -15px; } /*.sidenav start*/ .sidenav { background: #212121; box-shadow: 2px 2px 6px rgba(0, 0, 0, .3); display: block; font-size: 16px; font-weight: 400; height: 100%; left: 0; position: fixed; overflow: auto; transform: translate(-262px, 0); transition: transform .3s; top: 0; width: 256px; z-index: 9999; } .sidenav.show { transform: translate(0, 0) } .sidenav-menu { list-style: none; margin: 0; padding: 0; padding-top: 40px; } .sidenav-menu li { display: block; position: relative } .sidenav-menu a { background: 0 0; color: #BDBDBD; display: block; line-height: 24px; padding: 10px 20px; text-decoration: none } .sidenav-menu a:hover { background: #616161; color: #fff; } .sidenav-menu a.active, .sidenav-menu a.active .sidenav-dropdown-icon, .sidenav-menu a.active .sidenav-link-icon { color: #FAFAFA } .sidenav-dropdown-icon .material-icons, .sidenav-dropdown-icon .material-icons2{ position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; vertical-align: top; margin-top: -3px; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sidenav-dropdown-icon, .sidenav-link-icon { color: #757575; position: absolute; text-align: center; top: 8px } .sidenav-link-icon { display: block; height: 24px; left: 24px; width: 24px } .sidenav-link-title { display: block; } .sidenav-dropdown { display: none; list-style: none; padding: 0 } .sidenav-dropdown a { background: #191919; padding-left: 32px } .sidenav-dropdown a:hover { background: #616161 } .sidenav-dropdown li:first-child a { box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1) } .sidenav-dropdown-icon { display: none; height: 16px; right: 16px; width: 16px } .sidenav-dropdown-icon.show { display: block } .sidenav-overlay { background: rgba(255, 255, 255, .8); display: none; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 99 } .sidenav-no-scroll { overflow: hidden !important } .sidenav-dropdown-icon:after{ font: normal normal normal 14px/1 FontAwesome; content: "\f105"; font-size: 22px; } .sidenav-dropup:after{ font: normal normal normal 14px/1 FontAwesome; content: "\f107"; font-size: 22px; } .video-js .vjs-big-play-button{ top: 50% !important; left: 50% !important; transform: translate(-50%,-50%); } .video-js .vjs-big-play-button{ width: 1rem !important; height: 1rem !important; line-height: 1rem !important; border-radius: 10rem !important; } /*单选和多选*/ .radio, .checkbox, .t_radio{ margin-top: 0; padding: 10px 10px 10px 40px !important; position: relative; } .radio input[type="radio"], .t_radio input[type="radio"], .checkbox input[type="checkbox"]{ opacity:1; position: absolute; left: 8px; top: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: 0; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; border: 0; padding: 0; outline: 0; background:url("../images/start_heart.png") no-repeat; -webkit-background-size: 90px 180px; -moz-background-size: 90px 180px; -o-background-size: 90px 180px; background-size: 90px 180px; -webkit-background-clip: content-box; -moz-background-clip: content-box; background-clip: content-box; background-origin: content-box; -moz-background-origin: content-box; -webkit-background-origin: content-box; } .t_radio input[type="radio"]{ background:url("../images/radio.png") no-repeat; -webkit-background-size: 20px 20px; -moz-background-size: 20px 20px; -o-background-size: 20px 20px; background-size: 20px 20px; } .t_radio input[type="radio"]:checked{ background:url("../images/radio_check.png") no-repeat; -webkit-background-size: 20px 20px; -moz-background-size: 20px 20px; -o-background-size: 20px 20px; background-size: 20px 20px; } .radio input[type="radio"]:checked{ background-position: -30px 0 } .checkbox input[type="checkbox"]{ background-position: 0 -30px } .checkbox input[type="checkbox"]:checked{ background-position: -30px -30px } /*nav*/ .navbar-default{ background-color: #000; margin-bottom: 0; border:0; min-height: 56px; border-radius: 0; } .brand_hover{ display: none; } .header_top{ position: absolute; top: 0; left: 0; width: 100%; z-index: 9999; } .header_top .navbar-default{ background: transparent; } .header{ background: transparent; height: 80px; /*position: fixed;*/ z-index: 9999; /* left: 50%; top:0; transform: translate(-50%,0);*/ } .dropdown.active .dropdown-menu{ display: block; } .navbar-default .navbar-nav>li>a{ color: #EDEDED; } .navbar-default .navbar-nav>li>a:hover{ color: #fff; } .navbar-default .navbar-nav li.current>a{ color: #fff; font-size: .29rem; } .header_hover{ background-color: #fff; } .header_hover .navbar-default .navbar-nav>li>a{ color:#9B9B9B } .header_hover .navbar-default .navbar-nav>li.active>a{ color: #333333; background-color: #fff; } .header_hover .navbar-default .navbar-nav li.current>a{ color: #333333; font-size: .29rem; } .header_hover .navbar-brand{ display: none; } .header_hover .brand_hover{ display: block; } .dropdown-menu{ background: #fff; width: 100%; top: 70px; border-top: 1px solid #E3E3E3; border-bottom: 1px solid #E3E3E3; text-align: center; margin: 0; padding: 0; } .dropdown-menu>li>a{ padding:10px 20px; } .dropdown-menu>li a{ color: #9B9B9B; line-height: 36px; } .dropdown-menu>li>a:hover, .dropdown-menu>li.active>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li.active>a:focus{ background-color: #fff; color: #333; } .dropdown-menu>li{ display: inline-block; } .dropdown-menu ul{ display: none; position: absolute; top: 100%; left:0; width: 100%; text-align: center; margin: 0; margin-top: 1px; padding: 0; background-color: #fff; } .dropdown-menu ul>li{ list-style: none; background: #fff; display: inline-block; } .dropdown-menu>li.active>a, .dropdown-menu>li.active>a:hover{ background-color: #fff; color: #333; } .dropdown-menu ul>li a{ display: block; background-color: transparent; color: #9B9B9B; line-height: 36px; padding: .7rem 2rem; clear: both; position: relative; min-width: 200px; text-align: center; font-weight: 400; white-space: nowrap; } .dropdown-menu ul>li a:after{ content: " "; position: absolute; height: 60%; top:15%; border-right: 1px solid #E3E3E3; right: 0; } .dropdown-menu ul>li:last-child a:after{ display: none; } .dropdown-menu ul>li img{ text-align: center; height: 200px; } .dropdown-menu ul>li a:hover{ color: #333; text-decoration: none; } .dropdown-menu>li.active ul{ display: block; } .navbar-brand{ padding: 10px 0; height: auto; } .navbar-brand img{ height: 35px; margin-top: 5px; } .navbar-nav>li>a{ padding: 0 25px; line-height: 70px; } .navbar-nav>.lng>a{ padding: 0 10px } /*.navbar-collapse{ position: relative; }*/ .navbar-collapse .lng{ position: absolute; right: 10px; top: 5px; color: #fff; font-size: 12px; } .navbar-collapse .lng a{ color: #fff; } .index_nav{ text-align: center; margin-top: -.8rem; } .index_nav p{ color: #8C8C8C; margin-bottom: .8rem; } .index_nav img{ width: .6rem; margin-bottom: .4rem; } .index_nav h4{ margin-top: 0; margin-bottom: .6rem; } .index_nav a{ line-height: .7rem; padding: 0 1rem 0 .5rem; display: inline-block; border-radius: 6px; border: 1px solid #333333; margin-bottom: 1.2rem; background-image: url('../images/jian.png'); background-position: 1.8rem center; background-size: .5rem auto; background-repeat: no-repeat; } .index_nav a:hover{ background-color: #333; color: #fff; background-image: url('../images/jian_hover.png'); } /*footer*/ .footer_lit{ margin: 0; padding: 0; } .footer_lit li{ list-style: none; display: block; line-height: 30px; } .footer_lit li a{ color: #747474 } .navbar-collapse{ padding-left: 0; padding-right: 0; } .foooter_nav{ background: #f5f5f5; border-top:1px solid #e4e4e4; padding: 1rem; } .footer{ background: #333; padding-top: .2rem; font-size: 14px; padding-bottom: .2rem; color: #fff; text-align: center; } .footer a{ color: #fff } .navbar-nav .share_icon a, .sidenav-menu .share_icon a{ display: inline-block; position: relative; padding: 0 5px; margin-top: -3px; } .sidenav-menu .share_icon{ text-align: center; } .sidenav-menu .share_icon a{ margin-top: .2rem; } .back_tel{ line-height: 24px; display: inline-block; color: #000; } /*index*/ .i_product{ background: #fff; padding-top: 1.2rem; padding-bottom: 2rem; } .index_product2:hover{ color: #333 } .index_product:hover img, .index_product2:hover img{ transition: all 0.6s; transform: scale(1.05); } .middle_title h4{ font-size: .5rem; text-align: center; font-family: "Source Han Sans CN Regular"; font-weight:normal; } .index_product{ width: 50%; overflow: hidden; float: left; } .index_product2{ float: right; width: 50%; overflow: hidden; position: relative; } .index_product{ position: relative; } .l_product .l_title{ position: absolute; top: .5rem; left: 5%; z-index: 99; font-size: .4rem } .p_title{ font-weight: bold; font-size: .38rem; position: absolute; left: 20px; top: 20px; } .index_news{ border-top: 1px solid #e4e4e4; padding-top: 1.2rem; padding-bottom: 1.2rem; background-color: #fafafa; } .ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ellipsis2{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .index_zhan h3{ font-size: .35rem; font-family: "Source Han Sans CN Regular"; font-weight:normal; } .index_zhan{ margin-bottom: .5rem; display: block; } .zhan_content{ font-size: .26rem } /*product*/ .product_list{ padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem; } .product_price{ margin-top: .2rem; } .p_list{ background: #fff; text-align: center; margin-top: 1rem; padding: 1rem 0; display: block; } .p_list .p_price{ color: #d20000; margin-bottom: .3rem } .p_list .btn{ background: #373737; color: #999; border-radius: 0 } /*服务*/ .sub_title{ padding-top: .3rem; padding-bottom: .1rem; position: fixed; top: 75px; z-index: 999; left: 50%; transform: translate(-50%,0); } .sub_link{ display: inline-block; color: #555; padding: .2rem .2rem 0 .2rem; } .sub_link.active{ color: #da0000; } .se_content{ padding: 1rem } .use_title{ background: #fff; padding: .2rem 0; } .u_list{ margin-bottom: .5rem; } /*公司*/ .link_list{ float: left; width: 25%; padding: .2rem; } .company .bd_top{ padding-top: 1.5rem; padding-bottom: 1.5rem; } .company_info p{ margin-bottom: .3rem; color: #666 } .honer_box{ text-align: center; padding: .5rem; padding-left: 0; display: block; width: 20%; float: left; } .honer_box .honer_des, .honer_box p{ text-align: left; } .honer_box .honer_des{ font-size: .34rem; } .honer_box p{ font-size: .30rem; } .middle_title p{ font-size: .36rem } .link_list .zhan_content{ margin-top: .2rem } /*news*/ .news_tips{ margin-top: .5rem; border-bottom: 1px solid #e9e9e9; padding-bottom: .5rem; } .news_tips span{ margin-right: .2rem; } .n_detail_box{ margin-bottom: .4rem; display: block; } .n_guanzhu{ background-color: #e60012; color: #fff; text-align: center; padding: .3rem; margin-bottom: 1rem } .n_guanzhu img{ margin-bottom: .2rem } /*join*/ .join_head{ background: #FAFAFA; margin-top: 1rem; padding: .2rem 0; font-weight: 600; } .join_table{ margin:0; padding: 0; } .join_table li{ list-style: none; float: left; display: block; color: #1F1D1E; width: 21%; padding: .2rem 0; text-align: center; } .join_table li:first-child{ text-align: left; width: 16% } .join_list{ border-bottom: 1px solid #F2F2F2; } .join_list .join_table li{ color: #666666; } .join_detail{ display: none; border:none; color: #666; padding: .2rem 0; } .show_detail{ color: #258DFF } .show_detail.active{ color: #999 } .layui-layer-page{ max-width: 1024px; } /*.join_title h4:after{ content: " "; width: 1rem; height: 2px; background-color: #e30035; position: absolute; bottom: -.2rem; left: 50%; margin-left: -.5rem; }*/ .wechat_link{ position: relative; } .share_icon .wechat_qr{ display: none; position: absolute; top: 100%; left: 50%; width: 150px; padding: 10px; background-color: #000; transform: translate(-50%,0); } .wechat_link:hover .wechat_qr{ display: block; } .f_share_icon .wechat_qr{ top: -150px; background-color: #e4e4e4; } .p_desc{ font-size: .25rem; } /*new*/ .server_text{ color: #666; line-height: 1.9; margin-top: 1.3rem; padding-left: 15px; } .server_text li{ list-style: none; position: relative; margin-top: .2rem; } .server_text li:before{ content: " "; position: absolute; border-radius: 100%; width: 3px; height: 3px; background-color: #666; top: 50%; margin-top: -1.5px; left: -10px; } .server_text a{ color: #258DFF } .server_link img{ height: 4rem; margin-top: 1rem; margin-bottom: .3rem; } .join_table>thead>tr>th, .join_table>tbody>tr>td{ border:0; } .join_cover{ background-color: #fafafa; left: 0; position: absolute; width: 100%; top:1rem; height: 39.2px; } .con_title{ font-weight: 500; color: #1F1D1E; text-align: center; padding: .5rem 0; font-family: PingFangSC-Medium; } .honer_box p{ margin-bottom: 4px !important; color: #999 !important; } .honer_box img{ margin-bottom: .7rem } .index_zhan{ margin-bottom: 0; display: block; position: relative; } .index_zhan p{ padding: .4rem 0; margin-bottom:0; color: #1F1D1E; font-size: .34rem; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; } .index_zhan small{ font-family: PingFang SC; font-weight: normal; } .index_zhan:after{ content: " "; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: -webkit-linear-gradient(to right, rgba(200,200,200,0) 0%, rgba(212,212,212,1) 50%, rgba(151,151,151,0) 100%); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(to right, rgba(200,200,200,0) 0%, rgba(212,212,212,1) 50%, rgba(151,151,151,0) 100%); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(to right, rgba(200,200,200,0) 0%, rgba(212,212,212,1) 50%, rgba(151,151,151,0) 100%); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, rgba(200,200,200,0) 0%, rgba(212,212,212,1) 50%, rgba(151,151,151,0) 100%); /* 标准的语法(必须放在最后) */ } .index_zhan small{ color: #999; } .about_box{ background-color: #1B1C1E; position: relative; } .about_box_txt h4{ font-size: 18px; margin-bottom: 5px; } .about_box_txt{ padding:0; margin: 0; color: #fff; list-style: none; margin-bottom: 1.42rem } .about_box_txt li{ margin-top: 1.42rem } .about_box_txt img{ float: left; width: 40px; margin-right: 10px; } .about_box_txt p{ color: #8C8C8C } .about_box .about_img{ position: absolute; right: 20px; top: 20px; bottom: 20px; width: 12.1rem } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{ content: ""; } .swiper-button-next, .swiper-button-prev{ width: 54px; height: 54px; background-size: 13px 22px; background-position: center center; background-color: rgba(255,255,255,.05); border-radius: 100%; opacity: 0; margin-top: -27px; } .swiper-button-next:hover, .swiper-button-prev:hover{ opacity: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next{ left: 30% } .swiper-button-next, .swiper-container-rtl .swiper-button-prev{ right: 30%; } .prev_hover, .next_hover{ position: absolute; top: 0; bottom: 0; width: 20%; z-index: 99 } .prev_hover:hover .swiper-button-prev,.next_hover:hover .swiper-button-next{ opacity: 1; } .prev_hover{ left: 0; } .next_hover{ right: 0; } .pagination{ margin-top: .5rem; } .pagination a{ background: #FFFFFF; border: 1px solid #DBDBDB; color: #8C8C8C; padding: 0 10px; line-height: 30px; height: 30px; min-width: 30px; display: inline-block; font-size: 12px; margin-right: 5px; } .pagination span{ font-size: 12px; padding: 5px 10px; margin-right: 5px; } @media (max-width: 1400px){ .about_box_txt{ margin-bottom: 1.2rem } .about_box_txt li{ margin-top: 1.2rem } .about_box .about_img{ width: 10.2rem } } @media (max-width: 1200px){ .about_box_txt{ margin-bottom: .8rem } .about_box_txt li{ margin-top: .8rem } .about_box .about_img{ width: 7.8rem } } @media (max-width: 1080px){ .about_box_txt{ margin-bottom: .6rem } .about_box_txt li{ margin-top: .6rem } .about_box .about_img{ width: 6.5rem } } @media (max-width: 1000px){ .about_box_txt{ margin-bottom: .6rem } .about_box_txt li{ margin-top: .6rem } .about_box .about_img{ position: static; width: auto; margin: 20px; max-width: 100%; } .about_box_txt h4{ font-size: 15px } .about_box_txt p{ font-size: 12px } } /*手机*/ @media (max-width: 750px){ .honer_box{ width: 50%; } .header, .sub_title{ width: 100%; } .swiper-button-next, .swiper-button-prev{ width: 18px; height: 25px; background-size: 18px 25px; } .swiper-button-next:after, .swiper-button-prev:after{ font-size: 20px; } .sub_link{ padding-top: .3rem; } .company .bd_top{ padding-top: .5rem; padding-bottom: .5rem; } .container{ padding-left: .3rem; padding-right: .3rem; } .se_content{ padding: .2rem } .i_product{ padding-left: 15px; padding-right: 15px; padding-top: 0; } .index_product, .index_product2{ width: 100%; } .swiper-button-next, .swiper-button-prev{ width: } .navbar-toggle{ margin-top: 10px; } .navbar-nav{ float: none !important; margin: 0; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{ background: transparent; color: #fff } .navbar-brand img{ height: 25px; margin-top: 0; } .navbar-toggle{ padding: 5px 6px; } .product_list{ padding-left: .2rem; padding-right:.2rem; } .link_list{ float: left; width: 33.33%; padding: .2rem; } }