/* * 娓呴櫎鍐呭杈硅窛 - clearance of inner and outer margins * * 璁剧疆榛樿瀛椾綋 - setting the default font * */ 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, p, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-family: 'PingFang', 'Arial'; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } /* 閲嶇疆鍒楄〃鍏冪礌 - reset the list element */ ol, ul { list-style: none; } /* 閲嶇疆鏂囨湰鏍煎紡鍏冪礌 - reset the text format element */ a, a:hover { text-decoration: none; } /* 閲嶇疆琛ㄥ崟鍏冪礌 - reset the form element */ button { cursor: pointer; } input { font-size: 18px; outline: none; } /* 閲嶇疆琛ㄦ牸鍏冪礌 - reset the table element */ table { border-collapse: collapse; border-spacing: 0; } /* * 鍥剧墖鑷€傚簲 - image responsize * 1. 娓呯┖娴忚鍣ㄥ鍥剧墖鐨勮缃 * 2.
鍥剧墖
鐨勬儏鍐典笅锛屽浘鐗囦細鎾戦珮 div锛岃繖涔堣缃彲浠ユ竻闄よ褰卞搷 */ img { border: 0; display: inline-block; width: 100%; max-width: 100%; height: auto; vertical-align: middle; } /* * 榛樿box-sizing鏄痗ontent-box锛岃灞炴€у鑷磒adding浼氭拺澶iv锛屼娇鐢╞order-box鍙互瑙e喅璇ラ棶棰 * set border-box for box-sizing when you use div, it solve the problem when you add padding and don't want to make the div width bigger */ div, input { box-sizing: border-box; } /* 娓呴櫎娴姩 - clear float */ .lz-clear:after, .clear:after { content: '\20'; display: block; height: 0; clear: both; } .lz-clear, .clear { zoom: 1; } /* 璁剧疆input鐨刾laceholder - set input placeholder */ input::-webkit-input-placeholder { color: #919191; font-size: .32rem } /* Webkit browsers */ input::-moz-placeholder { color: #919191; font-size: .32rem } /* Mozilla Firefox */ input::-ms-input-placeholder { color: #919191; font-size: .32rem } /* Internet Explorer */ /* 璁剧疆宓屽寮曠敤锛坋mbedded quotation锛夌殑寮曞彿绫诲瀷 */ blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* 澶撮儴 */ .header{ width: 100%; height: 80px; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; z-index: 999; } .header .logo{ margin: 24px 0; width: 190px; height: 33px; float: left; margin-left: 100px; } .header .nav{ float: right; margin-right: 100px; display: flex; align-items: center; } .header .nav ul{ float: left; margin-right: 50px; } .header .nav ul li{ float: left; margin: 0 25px; position: relative; transition: all .3s; z-index: 1; } .header .nav ul li::before{ position: absolute; transition: all .3s; content: ""; display: block; background: #c30d23; z-index: -1; height: 2px; width: 100%; transform: scaleX(0); bottom: 0; right: 0; transform-origin: 0% 50%; } .header .nav ul li:hover a{ color: #c30d23; } .header .nav ul li:hover::before{ transform: scaleX(1); } .header .nav ul li a{ color: #fff; line-height: 80px; display: inline-block; /* text-transform: uppercase; */ white-space: nowrap; } .header .nav .cur{ position: relative; } .header .nav .cur a{ color: #c30d23; font-weight: bold; } .header .nav .cur::before{ transform: scaleX(1); } .header .search{ float: left; width: 80px; position: relative; text-align: center; } .header .search::after{ content: ""; width: 1px; height: 20px; background: #ffffff; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; } .header .search a{ line-height: 80px; } .header .search-icon{ width: 20px; height: 20px; margin-bottom: 4px; } .header .language{ position: relative; float: left; height: 80px; cursor: pointer; } .header .language-box{ width: 100px; height: 80px; line-height: 80px; text-align: center; } .header .language p{ font-size: 16px; color: #fff; display: inline-block; } .header .language-icon{ width: 20px; height: 20px; display: inline-block; margin-bottom: 4px; } .header .language-content{ text-align: center; opacity: 0; z-index: -99; position: absolute; background: rgba(0, 0, 0, 0.8); min-width: 100px; max-width: 160px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); padding: 12px 16px; } .header .language:hover .language-content{ display: block; transition: all 0.3s; opacity: 1; z-index: 999; } .header .language-content a{ height: 60px; } /* 搴曢儴 */ .footer-bg{ background: #212121; } .footer{ padding: 60px 40px; margin: 0 260px; border-bottom: 1px solid #424242; } .foot-nav{ float: left; width: 70%; } .foot-nav ul li{ float: left; margin-right: 88px; font-size: 14px; line-height: 32px; } .foot-nav ul li p{ color: #fff; text-transform: uppercase; } .foot-nav ul li a{ display: block; color: #b0b0b0; text-transform: capitalize; } .foot-nav ul li a:hover{ color: #fff; } .foot-contact{ width: 30%; float: left; } .foot-contact .pic{ width: 120px; height: 120px; float: left; margin-right: 30px; } .foot-contact .text{ float: left; text-align: left; } .foot-contact .text .tips{ font-size: 14px; color: #b0b0b0; line-height: 20px; } .foot-contact .text p:nth-child(2){ padding-bottom: 10px; } .foot-contact .text .item{ text-align: left; font-size: 14px; width: 220px; color: #ffffff; margin-top: 13px; } .foot-contact .text .item img{ width: 20px; height: 20px; float: left; margin-right: 20px; } .copyright{ margin: 0 260px; padding: 40px 0 30px; } .copyright .item{ font-size:14px; color: #b0b0b0; } .right_nav_new{position: fixed;width: 50px; right: 0;top: 50%;margin-top: -123px;z-index: 100;} .fixed_right_box{position: relative;} .right_nav_box .zx{display: inline-block; background: url(../images/right_zx.png) no-repeat center center;width: 30px;height: 30px;vertical-align: middle;transition: 0.8s all;} .right_nav_box .phone{display: inline-block;background: url(../images/right_phone.png) no-repeat center center;width: 30px;height: 30px;vertical-align: middle;transition: 0.8s all;} .right_nav_box .qq{display: inline-block;background: url(../images/right_qq.png) no-repeat center center;width: 30px;height: 30px;vertical-align: middle;transition: 0.8s all;} .right_nav_box .weixin{display: inline-block;background: url(../images/right_weixin.png) no-repeat center center;width: 30px;height: 30px;vertical-align: middle;transition: 0.8s all;} .right_nav_box .scor_top{display: inline-block;background: url(../images/right_top.png) no-repeat center center;width: 30px;height: 30px;vertical-align: middle;transition: 0.8s all;} .right_nav_box .wp{display: inline-block; background: url(../images/right_whatsapp.png) no-repeat center center;width: 30px;height: 30px;vertical-align: middle;transition: 0.8s all;background-size: 100%;} .right_nav_box .sk{display: inline-block; background: url(../images/right_skype.png) no-repeat center center;width: 30px;height: 30px;vertical-align: middle;transition: 0.8s all;background-size: 100%;} .right_nav li span{margin-left: 12px;} .right_nav_box{position: relative;} .right_nav_box li{position: absolute;transition: 0.8s background-color; background-color: #c30d23;height: 46px;padding: 0 12px;white-space: nowrap; /*border-top-left-radius: 20px;border-bottom-left-radius: 20px;*/cursor: pointer;} .right_nav_box li.li1{top: 0;} .right_nav_box li.li2{top: 50px;} .right_nav_box li.li3{top: 100px;} .right_nav_box li.li4{top: 150px;} .right_nav_box li.li5{top: 200px;} .right_nav_box li.li6{top: 250px;} .right_nav_box li.li1 a{ margin-top:8px;display: block;} .right_nav_box li.li2 a{padding-top: 8px;display: block;} .right_nav_box li.li3 a{padding-top:8px;display: block;} .right_nav_box li.li4 a{padding-top:8px;display: block;} .right_nav_box li.li5 a{padding-top:8px;display: block;} .right_nav_box li.li6 a{padding-top:8px;display: block;} .right_nav_box li:hover{background-color: @mcolor;} .right_nav_box li:hover a{color: #fff!important;} .right_nav_box li a{color: #fff;font-size: 16px;} .right_nav_box .ewm_pic{position: absolute;right: 70px;bottom: 0;visibility: hidden;opacity: 0;transition: 0.5s all;background-color: #fff;padding: 10px;width: 100px;height: 100px;} .right_nav_box .ewm_pic img{display: block;width: 100%;} .right_nav_box .ewm_pic.act{visibility:visible;opacity:1;} /* 娴忚鍣ㄨ繃鏃 */ .gsPro-bg{display: block;width: 100%;height: 100%;background: #000;opacity: 0.5;position: fixed;top: 0;left: 0;z-index: 200; filter:alpha(opacity=50);} .gsPro{display: block;width: 560px;height: 200px;border-radius: 12px;background: #fff;position: fixed;top: 50%;left: 50%;margin-left: -250px; margin-top: -140px;z-index: 201;font-size: 16px;line-height: 28px;padding: 34px 30px;} .gsPro h3{font-weight: normal;color: #333;margin-bottom: 28px;} .gsPro strong{font-weight: bold!important;font-size: 20px;} .gsPro>div{text-align: center;font-size: 0;} .gsPro a{display: inline-block;vertical-align: top;width: 100px;height: 42px;border: 1px solid #999;font-size: 14px;line-height: 40px; text-decoration: none;margin: 0 5px;color: #333;border-radius: 4px;} .gsPro a:hover{border-color: red;color: red;}