/* ================================================================ *\ #Reset \* ================================================================ */ * { padding: 0; margin: 0; outline: 0; } /* ================================================================ *\ #Base \* ================================================================ */ article, aside, figcaption, figure, footer, header, main, nav, section { display: block; } html, body { height: 100%; } html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { background: #15141a; font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 18px; line-height: 1.45; color: #999; -webkit-font-smoothing:antialiased; } a { text-decoration: none; } a:hover { text-decoration: underline; } img { border: 0; vertical-align: middle; } strong { font-weight: bold; } h1, h2, h3, h4 { color: #1a1a1a; font-weight: 600; } h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 24px; } h5 { margin: 7px 0 13px; } button, input, select, textarea { font-family: 'Source Sans Pro', Arial, sans-serif; font-size: inherit; color: inherit; -webkit-font-smoothing:antialiased; -webkit-appearance: none; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } button { overflow: visible; } textarea { overflow: auto; resize: none; } table { border-collapse: collapse; border-spacing: 0; } th, td { padding: 0; } /* ================================================================ *\ #Helpers \* ================================================================ */ .alignleft { float: left; } .alignright { float: right; } .hidden { display: none; visibility: hidden; } .clearfix:before, .clearfix:after { display: table; content: ' '; } .clearfix:after { clear: both; } /* ================================================================ *\ #Icons \* ================================================================ */ .ico { display: inline-block; vertical-align: middle; background-image: url(../images/sprite.png); } .ico-bolt { width: 16px; height: 16px; background-position: -125px 0px; } .ico-cup { width: 16px; height: 16px; background-position: -146px 0px; } .ico-device { width: 32px; height: 32px; background-position: -167px 0px; } .ico-gauge { width: 16px; height: 16px; background-position: -204px 0px; } .ico-gear { width: 32px; height: 32px; background-position: -225px 0px; } .ico-envelope { width: 32px; height: 32px; background-position: -262px 0px; } .ico-marker { width: 32px; height: 32px; background-position: -299px 0px; } .ico-monitor { width: 32px; height: 32px; background-position: -336px 0px; } .ico-mouse { width: 16px; height: 16px; background-position: -373px 0px; } .ico-thumb { width: 33px; height: 32px; background-position: -394px 0px; } .icon-bar { background: #fff; } /* ================================================================ *\ #Buttons \* ================================================================ */ .btn { padding: 14px 26px; border-radius: 3px; font-size: 14px; font-weight: bold; text-transform: uppercase; } .btn { -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .btn-default { color: #008ed6; border: 1px solid #e0e0e0; } .btn-default:hover { color: #fff; background: #008ed6; border: 1px solid #008ed6; } .btn-primary { background: #008ed6; border: 1px solid #008ed6; } .btn-primary:hover { background: #006fa8; border-color: #006fa8; } .btn-dark { padding: 14px 30px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; } .btn-dark:hover { background: #fff; color: #008ed6; } /* ================================================================ *\ #Containers \* ================================================================ */ .wrapper { background: #fff; } .qrcode-gongzhonghao { margin-left:12px; padding-top:270px; } .qrcode-wxmini { margin-left:10px; padding-top:40px; } .logo-title { color: #333333; padding-left:80px; font-size: 16px; } .eb-icon{color:#008ed6;} .eb-icon-o{ font-size:30px; } .img-charger { padding-top:6px; padding-left:150px; } .img-exchange { padding-top:40px; padding-left:12px; } .td-v-center /*设置表格文字左右和上下居中对齐*/ { vertical-align:middle!important; } .table-eb th { border: 0 !important; color: #333333; } .end-td { border-bottom: 1px solid #ddd !important; } .txt-left {text-align: left; } .txt-expand-right {margin-right:-100px;} /* ================================================================ *\ #Forms \* ================================================================ */ .form-control { height: 50px; padding: 14px 17px; text-transform: uppercase; background: #fff; border: 1px solid #d0d0d1; } .form-control:focus { box-shadow: none; border-color: #008ed6; } /* ================================================================ *\ #Header font-size: 0; line-height: 0; text-indent: -4000px; \* ================================================================ */ .header-null { min-height: 640px; background: #15141a url(../images/cover-bg.jpg) no-repeat 0 0; background-size: cover; } .navbar { margin-bottom: 26px; } .navbar > .container .navbar-brand { height: 63px; padding: 0; background: url(../images/logo.png) no-repeat 0 0; margin: 12px 0 0; width: 200px; } .nav { font-size: 16px; font-weight: 600; margin: 27px 0 0 0; } .nav > li > a { color: #333333; padding: 10px 11px; } .nav > li > a:hover, .nav > li > a:focus { background: transparent; } .nav > li > a:after { content: ''; display: block; width: 42px; height: 2px; margin: 8px auto 0; background: transparent; border-width: 0 20px; border-style: solid; border-color: transparent; } .nav > li > a:after { -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .nav > .active > a:after, .nav > li > a:hover:after, .nav > li > a:focus:after { border-color: #008ed6; } .navbar-toggle { border: 1px solid rgba(255, 255, 255, 0.2); } .navbar-toggle:active { background: rgba(255, 255, 255, 0.2); } .jumbotron { background: transparent; padding: 0; margin: 0; min-height: 535px; } .jumbotron-content { padding-top: 48px; } .jumbotron-image { display: table-cell; height: 535px; text-align: right; width: 100%; vertical-align: bottom; } .jumbotron-image img { max-width: 100%; } .jumbotron h5 { color: #008ed6; font-size: 14px; font-weight: bold; text-transform: uppercase; } .jumbotron h1 { margin: 15px 0 19px; color: #fff; font-size: 48px; } .jumbotron p { font-size: 18px; margin-right: 20px; } .jumbotron-actions { margin-top: 60px; font-size: 0; } .jumbotron-actions .btn + .btn { margin-left: 20px; } .jumbotron-form-contacts { margin: 17px 0; padding: 27px 40px; background: #fff; } .jumbotron-form-contacts .form-head { margin-bottom: 31px; } .jumbotron-form-contacts .form-head p { font-size: 14px; } .jumbotron-form-contacts .form-head h3 { margin: 0; } .jumbotron-form-contacts .form-group { margin: 20px 0 0; } .jumbotron-form-contacts .form-body { margin-bottom: 15px; } .subscribe { margin: 53px 0 20px; } .form-control-subscribe { display: inline-block; vertical-align: middle; margin: 10px 6px; max-width: 230px; background: transparent; border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.2); text-transform: none; } .form-control-subscribe:focus { border-color: #fff; color: #fff; } /* ================================================================ *\ #Section \* ================================================================ */ .section { padding: 10px 0 10px; } .section-title { margin: 9px 0 0; } .section-image img { max-width: 100%; } .section-head { margin-bottom: 25px; } .section-head h5 { color: #008ed6; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; } .section-head h2:after { content: ''; display: block; width: 42px; height: 2px; margin: 36px 0 0; background: transparent; border-width: 0 20px; border-style: solid; border-color: #008ed6; } /* ================================================================ *\ #Features \* ================================================================ */ .section-features { text-align: center; border-bottom: 1px solid #ededed; } .section-features .section-head h2:after { margin-left: auto; margin-right: auto; } .features { padding: 0px 0 30px; } .feature-image { position: relative; width: 88px; height: 88px; margin: 0 auto; border-radius: 50%; border: 1px solid #e0e0e0; } .feature-image .ico { position: absolute; left: 50%; top: 50%; } .feature-image .ico { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .feature-image .eb-icon { position: absolute; left: 50%; top: 50%; } .feature-image .eb-icon { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .feature-title { margin: 31px 0 12px; } .feature-entry { padding: 0 15px; } /* ================================================================ *\ #About \* ================================================================ */ .section-about { padding: 56px 0 45px; } .section-about .section-content { padding-top: 54px; } .section-about .section-title:after { margin: 27px 0 0; } .section-about-alt { padding: 52px 0 45px; background: #f2f2f2; } .section-about-alt .section-content { padding-top: 71px; } .section-about-alt .section-title { margin: 10px 0; } .list-features { padding: 13px 0; list-style: none outside none; color: #1b1b1b; } .list-features li { padding: 5px 0 6px; } .list-features .ico { margin-right: 5px; } .list-features-w { padding: 13px 0; list-style: none outside none; color: #CCCCCC; text-align: left; } .list-features-w li { padding: 5px 0 6px; } .list-features-w .ico { margin-right: 5px; } /* ================================================================ *\ #Testimonials \* ================================================================ */ .section-testimonials { background: #15141a url(../images/testimonials-bg.jpg) no-repeat 0 0; background-size: cover; text-align: center; height: 640px; } .section-testimonials .section-title { color: #fff; } .section-testimonials .section-title:after { margin: 30px auto 0; } .slider-testimoinals { padding: 60px 0; } .slider-testimoinals .slides { list-style: none outside none; white-space: nowrap; overflow: hidden; text-align: left; } .slider-testimoinals .slide { display: inline-block; vertical-align: top; width: 100%; white-space: normal; } .slider-testimoinals .bx-controls { text-align: center; margin-top: 136px; } .slider-testimoinals .bx-pager { display: inline-block; overflow: hidden; } .slider-testimoinals .bx-pager-item { float: left; margin: 0 8px; } .slider-testimoinals .bx-pager-link { display: block; width: 14px; height: 14px; border-radius: 50%; border: 3px solid transparent; font-size: 0; line-height: 0; text-indent: -4000px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); } .slider-testimoinals .bx-pager-link { -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .slider-testimoinals .bx-pager-link.active, .slider-testimoinals .bx-pager-link:hover { background: #fff; border-color: #fff; } .testimonial-entry { font-size: 24px; font-style: italic; color: #fff; line-height: 1.35; margin-bottom: 23px; } .testimoinal-author { font-size: 0; text-align: left; } .testimoinal-author-avatar { display: inline-block; vertical-align: middle; width: 59px; height: 59px; border-radius: 50%; overflow: hidden; } .testimoinal-author-avatar img { max-width: 100%; max-height: 100%; } .testimonial-author-name { display: inline-block; vertical-align: middle; margin-left: 20px; font-size: 16px; color: #fff; } .testimonial-author-name span { display: block; font-size: 14px; font-weight: bold; text-transform: uppercase; margin-top: 5px; } .section-exchange { background: #15141a url(../images/exchange-bg.jpg) no-repeat 0 0; background-size: cover; text-align: center; height-: 640px; } .section-exchange .section-title { color: #fff; } .section-exchange .section-title:after { margin: 30px auto 0; } .section-charger { background: #15141a url(../images/charger-bg.jpg) no-repeat 0 0; background-size: cover; text-align: center; height-: 640px; } .section-charger .section-title---- { color: #fff; } .section-charger .section-title:after { margin: 30px auto 0; } .section-charger .section-body { color: #333; } .section-cloud { background: #15141a url(../images/qix-cloud.jpg) no-repeat 0 0; background-size: cover; text-align: center; height: 640px; } .section-cloud .section-title { color: #fff; } .section-cloud .section-title:after { margin: 30px auto 0; } /* ================================================================ *\ #Callout \* ================================================================ */ .callout { padding: 43px 0 58px; background: #15141a; overflow: hidden; } .callout-title { float: left; color: #fff; font-weight: 300; } .callout-title strong { font-weight: 600; } .callout-actions { float: right; margin-top: 17px; font-size: 0; } .callout-actions .btn + .btn { margin-left: 20px; } .callout-w { padding: 43px 0 58px; background: #FFF; overflow: hidden; } .callout-title-w { float: left; color: #000; font-weight: 300; } /* ================================================================ *\ #Pricing \* ================================================================ */ .section-pricing { text-align: center; padding: 51px 0 30px; } .section-pricing .section-title:after { margin: 30px auto 0; } .plans { padding: 45px 0 30px; } .plan { border-radius: 2px; border: 1px solid #e0e0e0; } .plan-head { border-bottom: 1px solid #e0e0e0; } .plan-title { margin: 0; padding: 24px 0 19px; font-weight: bold; text-transform: uppercase; border-bottom: 1px solid #e0e0e0; } .plan-highlight .plan-title { color: #008ed6; border-color: #008ed6; } .plan-price { padding: 32px 0 35px; } .plan-highlight .plan-price { background: #008ed6; color: #fff; } .plan-price small { line-height: 1; display: block; font-size: 18px; margin-top: 5px; } .plan-highlight .plan-price small { color: #fff; } .plan-price span { color: #1a1a1a; font-size: 60px; font-weight: 600; line-height: 1; } .plan-highlight .plan-price span { color: #fff; } .plan-price em { vertical-align: super; font-size: 28px; font-style: normal; } .plan-body { padding: 45px 20px 29px; } .plan-entry { height: 104px; margin-bottom: 41px; } .plan-actions .btn { padding: 14px 40px; } /* ================================================================ *\ #Contacts \* ================================================================ */ .section-contacts { padding: 50px 0 0; background: #ededed; text-align: center; } .section-contacts .section-title:after { margin: 30px auto; } .contacts { padding: 30px 0 59px; } .contacts .ico { margin-bottom: 26px; } .contacts a { color: #999; } .contacts a:hover { color: #008ed6; text-decoration: none; } .form-contacts-outer { position: relative; z-index: 50; height: 296px; } .form-contacts { position: absolute; left: 0; top: 0; width: 100%; padding: 60px 72px 40px; background: #15141a; } .form-contacts .form-group { margin-bottom: 20px; } .form-contacts .form-control { background: transparent; border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.2); } .form-contacts textarea.form-control { height: 190px; } .form-contacts .form-control:focus { border-color: #fff; color: #fff; } .form-contacts .has-error .form-controls > * { border-color: #f00; } .form-contacts .form-actions { text-align: right; } .map { height: 370px; } /* ================================================================ *\ #Fotoer \* ================================================================ */ .footer { background: #15141a; color: #444348; text-align: center; padding: 45px 0; } .copyright { font-size: 14px; font-weight: 600; text-transform: uppercase; } .copyright a { color: #444348; text-decoration: none; -webkit-transition: color 0.2s; -o-transition: color 0.2s; transition: color 0.2s; } .copyright a:hover { color: #fff; } .footer-socials { margin-bottom: 16px; } .footer-socials ul { display: inline-block; list-style: none outside none; font-size: 0; } .footer-socials li { display: inline-block; vertical-align: middle; margin: 0 17px; } .footer-socials a { display: block; background-image: url(../images/sprite.png); font-size: 0; line-height: 0; text-indent: -4000px;} .footer-socials .link-behance { width: 19px; height: 13px; background-position: -456px 0px; } .footer-socials .link-behance:hover { background-position: -432px 0px; } .footer-socials .link-dribble { width: 18px; height: 18px; background-position: -503px 0px; } .footer-socials .link-dribble:hover { background-position: -480px 0px; } .footer-socials .link-facebook { width: 10px; height: 18px; background-position: -541px 0px; } .footer-socials .link-facebook:hover { background-position: -526px 0px; } .footer-socials .link-linkedin { width: 18px; height: 18px; background-position: -579px 0px; } .footer-socials .link-linkedin:hover { background-position: -556px 0px; } .footer-socials .link-twitter { width: 18px; height: 14px; background-position: -625px 0px; } .footer-socials .link-twitter:hover { background-position: -602px 0px; } /* ================================================================ *\ #Responsive \* ================================================================ */ @media only screen and (max-width: 1199px) { /* ================================================================ *\ #Callout \* ================================================================ */ .callout-title, .callout-actions { float: none; text-align: center; } .callout-actions { margin-top: 20px; } .callout-actions .btn, .callout-actions .btn + .btn { margin: 10px; } } @media only screen and (max-width: 991px) { /* ================================================================ *\ #Base \* ================================================================ */ h1 { font-size: 36px; } h2 { font-size: 24px; } h3 { font-size: 18px; } /* ================================================================ *\ #Header \* ================================================================ */ .jumbotron h1 { font-size: 36px; } .jumbotron-image { display: block; height: auto; padding-top: 50px; text-align: center; } .jumbotron-image img { height: auto; } /* ================================================================ *\ #Section \* ================================================================ */ .section-image { text-align: center; } /* ================================================================ *\ #Features \* ================================================================ */ .feature { padding-bottom: 40px; } /* ================================================================ *\ #Testimonials \* ================================================================ */ .section-testimonials { height: auto; } .slider-testimoinals { padding: 30px 0; } .slider-testimoinals .bx-controls { margin-top: 30px; } .testimonial { padding: 20px 40px; } /* ================================================================ *\ #Plans \* ================================================================ */ .plan { margin-bottom: 30px; } } @media only screen and (max-width: 767px) { /* ================================================================ *\ #Header \* ================================================================ */ .nav { margin-top: 0; text-align: center; } .nav > li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .nav > li > a { padding: 11px 0 5px; } .nav > li > a:after { margin-top: 6px; } .navbar > .container .navbar-brand { margin: 17px 0 0 15px; } .jumbotron-actions { margin-top: 20px; float: none; text-align: center; } .jumbotron-actions .btn, .jumbotron-actions .btn + .btn { margin: 10px; } .jumbotron-form-contacts .form-actions { text-align: center; } /* ================================================================ *\ #Testimonials \* ================================================================ */ .testimonial { padding: 40px 20px 0; } .testimonial-entry { text-align: center; } .testimoinal-author-avatar { display: block; margin: 0 auto 20px; } .testimonial-author-name { display: block; text-align: center; } /* ================================================================ *\ #Contacts \* ================================================================ */ .contacts .ico { margin-bottom: 10px; } .contacts p { margin-bottom: 35px; } .form-contacts-outer { height: 500px; } .form-contacts { padding: 30px; } .form-contacts .form-actions { text-align: center; } }