| @charset "utf-8"; |
| |
| /* CSS Document */ |
| |
| * { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| transition: all 0.2s; |
| } |
| |
| body { |
| padding-top: 80px; |
| font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif; |
| font-size: 12px; |
| color: #646464; |
| background-color: #f2f2f5; |
| } |
| |
| blockquote, |
| q { |
| quotes: none; |
| } |
| |
| blockquote:before, |
| blockquote:after, |
| q:before, |
| q:after { |
| content: ''; |
| content: none; |
| } |
| |
| .tc { |
| text-align: center; |
| } |
| |
| .tl { |
| text-align: left; |
| } |
| |
| .tr { |
| text-align: right; |
| } |
| |
| .fl { |
| float: left; |
| } |
| |
| .fr { |
| float: right; |
| } |
| |
| .dis { |
| display: block; |
| } |
| |
| .undis { |
| display: none; |
| } |
| |
| table { |
| border-collapse: collapse; |
| border-spacing: 0; |
| } |
| |
| a:link, |
| a:visited { |
| text-decoration: none; |
| } |
| |
| a:hover { |
| text-decoration: none; |
| } |
| |
| input[type="text"]:focus { |
| outline: none; |
| } |
| |
| input { |
| outline: none; |
| } |
| |
| select:focus { |
| outline: none; |
| } |
| |
| |
| /*头部*/ |
| |
| .header { |
| background-color: #252525; |
| padding: 16px 0 |
| } |
| |
| .header a.navbar-brand .logo { |
| background-color: #252525; |
| margin-right: 75px; |
| background: url("https://shardingsphere.apache.org/elasticjob/images/logo.png") no-repeat center center; |
| display: block; |
| width: 160px; |
| height: 40px; |
| } |
| |
| .header ul.nav>li { |
| margin: 0 20px; |
| } |
| |
| .header ul.nav>li.english { |
| margin: 0; |
| } |
| |
| @media screen and (max-width: 992px) { |
| .header ul.nav>li { |
| margin: 0; |
| } |
| } |
| |
| .header ul.nav>li a { |
| font-size: 18px; |
| } |
| |
| .header ul.nav>li>a { |
| color: #fff |
| } |
| |
| .header ul.nav>li>a:hover { |
| color: #ccc |
| } |
| |
| .header ul.nav>li dropdown-menu.ul>li>a { |
| color: #000; |
| font-size: inherit; |
| } |
| |
| .header ul.nav>li dropdown-menu.ul>li:hover { |
| background-color: #eee; |
| } |
| |
| .header .github { |
| height: 100px; |
| line-height: 80px; |
| width: 280px; |
| cursor: pointer; |
| } |
| |
| |
| /*banner*/ |
| |
| .banner { |
| min-height: 705px; |
| } |
| |
| .banner .produce { |
| margin: 0 60px; |
| padding-top: 166px; |
| padding-bottom: 66px; |
| } |
| |
| .banner .produce .first, |
| .banner .produce .second { |
| font-size: 60px; |
| font-family: "Microsoft Yahei"; |
| color: white; |
| font-weight: bold; |
| } |
| |
| .banner .produce .second { |
| font-size: 24px; |
| margin: 40px 0 40px 0; |
| line-height: 40px; |
| } |
| |
| .banner .more_btn { |
| color: white; |
| font-size: 24px; |
| border: 1px solid white; |
| padding: 10px 24px; |
| } |
| |
| .banner .more_btn:hover { |
| background-color: white; |
| color: #1a9bfa; |
| } |
| |
| @media screen and (max-width: 480px) { |
| .banner .produce { |
| margin: 0 auto; |
| padding-top: 10px; |
| } |
| } |
| |
| |
| /*功能列表*/ |
| |
| .function_list .title_name { |
| text-align: center; |
| font-size: 36px; |
| color: #ffffff; |
| position: relative; |
| padding-top: 22px; |
| } |
| |
| .function_list .title_name .slide { |
| width: 40px; |
| height: 2px; |
| margin: 0 auto; |
| background-color: #01adff; |
| display: block; |
| position: relative; |
| top: 18px; |
| } |
| |
| .mod-inner { |
| max-width: 1200px; |
| min-width: 320px; |
| margin: 0 auto |
| } |
| |
| .mod-wrap { |
| padding: 40px 0; |
| min-width: 320px; |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| min-height: 583px; |
| } |
| |
| .mod-wrap.bg-color-1 { |
| /* background-color: #f2f2f5 */ |
| } |
| |
| .mod-wrap .mod-title { |
| color: #333 |
| } |
| |
| .mod-wrap .mod-title .title { |
| font-size: 30px; |
| font-weight: 400; |
| margin-bottom: 10px |
| } |
| |
| .mod-wrap .mod-title .des-text { |
| font-size: 18px; |
| line-height: 1.5em |
| } |
| |
| .mod-wrap .mod-title .qc-btn { |
| width: 180px; |
| height: 45px; |
| line-height: 45px; |
| font-size: 18px; |
| margin-top: 35px |
| } |
| |
| .mod-wrap .mod-title .qc-btn:active, |
| .mod-wrap .mod-title .qc-btn:focus { |
| border-color: #2277da; |
| color: #fff |
| } |
| |
| .mod-wrap .mod-content { |
| margin-top: 59px; |
| text-align: center |
| } |
| |
| .mod-wrap .vertical-text .title { |
| font-size: 24px; |
| margin-bottom: 30px; |
| display: inline-block; |
| vertical-align: middle |
| } |
| |
| .mod-wrap .vertical-text .title .icon { |
| display: inline-block; |
| vertical-align: middle |
| } |
| |
| .mod-wrap .vertical-text .des-text { |
| font-size: 14px; |
| line-height: 30px; |
| color: #fff; |
| color: rgba(255, 255, 255, .8) |
| } |
| |
| .mod-wrap .vertical-text .des-text .qc-btn { |
| margin-top: 30px |
| } |
| |
| .qc-grids { |
| font-size: 0 |
| } |
| |
| .qc-grids [class*=qc-unit] { |
| display: inline-block; |
| zoom: 1; |
| letter-spacing: normal; |
| word-spacing: normal; |
| vertical-align: top; |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box |
| } |
| |
| .ct-slot { |
| margin-left: 10px; |
| margin-right: 10px |
| } |
| |
| .qc-grids.with-slot [class*=qc-unit] { |
| padding-left: 10px; |
| padding-right: 10px |
| } |
| |
| .qc-unit-4-24 { |
| width: 15% |
| } |
| |
| .mod-wrap-product-new { |
| background-position: top center; |
| background-repeat: no-repeat |
| } |
| |
| .mod-wrap-product-new .product-block { |
| min-width: 170px; |
| background-color: #101214; |
| border-top: 4px solid #d9d9d9; |
| border-right: 1px solid #d9d9d9; |
| padding-bottom: 40px; |
| position: relative; |
| height: 210px; |
| transition: all .15s cubic-bezier(.4, 0, .2, 1), z-index 0s .12s; |
| min-height: 0; |
| overflow: hidden |
| } |
| |
| .mod-wrap-product-new .qc-unit-active { |
| min-width: 284px |
| } |
| |
| .mod-wrap-product-new .product-block.last { |
| border-right: none |
| } |
| |
| .mod-wrap-product-new .product-block.hidden-ct { |
| display: none |
| } |
| |
| .mod-wrap-product-new .product-block .pt-overview { |
| display: block; |
| transition: all .12s cubic-bezier(.4, 0, .2, 1) .18s; |
| opacity: 1; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| text-align: center; |
| z-index: 5 |
| } |
| |
| .mod-wrap-product-new .pt-overview-name { |
| padding-top: 30px; |
| padding-bottom: 30px; |
| position: relative; |
| text-align: center |
| } |
| |
| .mod-wrap-product-new .pt-overview-name:after { |
| content: ""; |
| width: 40px; |
| height: 1px; |
| position: absolute; |
| bottom: 0; |
| left: 50%; |
| margin-left: -20px; |
| background-color: #d9d9d9 |
| } |
| |
| .mod-wrap-product-new .pt-overview-name .name-title { |
| font-size: 18px; |
| color: #f0f0f0; |
| font-weight: 400; |
| position: relative |
| } |
| |
| .mod-wrap-product-new .pt-detail-name .pt-name-img, |
| .mod-wrap-product-new .pt-overview-name .pt-name-img { |
| display: block; |
| width: 66px; |
| height: 64px; |
| margin: 0 auto 15px |
| } |
| |
| .mod-wrap-product-new .pt-overview-name .pt-name-img.compute { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/dateshow.png") no-repeat; |
| } |
| |
| .mod-wrap-product-new .pt-overview-name .pt-name-img.cdn { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/thing.png") no-repeat |
| } |
| |
| .mod-wrap-product-new .pt-overview-name .pt-name-img.database { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/main_key.png") no-repeat; |
| } |
| |
| .mod-wrap-product-new .pt-overview-name .pt-name-img.domain { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/jianrong.png") no-repeat; |
| } |
| |
| .mod-wrap-product-new .pt-overview-name .pt-name-img.safe { |
| background-image: url(sprite/index-201703161500-svg.png); |
| background-image: -webkit-image-set(url(sprite/index-201703161500-svg.png)1x, url(sprite/index-201703161500.svg) 2x); |
| background-position: 0.72% 99.03999999999999%; |
| background-size: 531.25% 425%; |
| background-repeat: no-repeat |
| } |
| |
| .mod-wrap-product-new .pt-overview-name .pt-name-img.network { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/rwseprate.png") no-repeat; |
| } |
| |
| .mod-wrap-product-new .pt-overview-name .pt-name-img.monitor { |
| background-image: url(sprite/index-201703161500-svg.png); |
| background-image: -webkit-image-set(url(sprite/index-201703161500-svg.png)1x, url(sprite/index-201703161500.svg) 2x); |
| background-position: 99.28% 0.96%; |
| background-size: 531.25% 425%; |
| background-repeat: no-repeat |
| } |
| |
| .mod-wrap-product-new .pt-overview-name .pt-name-img.mobile { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/lot_set.png") no-repeat; |
| } |
| |
| .mod-wrap-product-new .pt-overview-name .pt-name-img.video { |
| background-image: url(sprite/index-201703161500-svg.png); |
| background-image: -webkit-image-set(url(sprite/index-201703161500-svg.png)1x, url(sprite/index-201703161500.svg) 2x); |
| background-position: 25.36% 0.96%; |
| background-size: 531.25% 425%; |
| background-repeat: no-repeat |
| } |
| |
| .mod-wrap-product-new .product-block .pt-detail { |
| visibility: visible; |
| transition: all .12s cubic-bezier(.4, 0, .2, 1) 0s; |
| opacity: 0; |
| text-align: left; |
| z-index: 10; |
| position: relative |
| } |
| |
| .mod-wrap-product-new .qc-unit-active .pt-overview { |
| display: none |
| } |
| |
| .mod-wrap-product-new .product-block.qc-unit-active .pt-overview { |
| transition: all .12s cubic-bezier(.4, 0, .2, 1) 0s; |
| display: block; |
| opacity: 0 |
| } |
| |
| .product-block.qc-unit-active { |
| border-top: 4px solid #01adff; |
| margin-top: -30px; |
| border-left: 1px solid #01adff; |
| border-right: 1px solid #01adff; |
| border-bottom: 1px solid #01adff; |
| padding-bottom: 20px; |
| -webkit-box-shadow: 0 3px 20px rgba(0, 0, 0, .1); |
| box-shadow: 0 3px 20px rgba(0, 0, 0, .1); |
| -webkit-transform: translate3d(0, -2px, 0); |
| transform: translate3d(0, -2px, 0) |
| } |
| |
| .qc-grids.with-slot .product-block.qc-unit-active { |
| padding-left: 0; |
| padding-right: 0; |
| min-height: 0; |
| height: 360px |
| } |
| |
| .mod-wrap-product-new .product-block.qc-unit-active .pt-detail { |
| visibility: visible; |
| transition: all .12s cubic-bezier(.4, 0, .2, 1) .18s; |
| opacity: 1 |
| } |
| |
| .mod-wrap-product-new .pt-detail-name { |
| padding: 20px 0; |
| margin-right: 15px; |
| margin-left: 15px; |
| border-bottom: 1px solid #d9d9d9; |
| position: relative |
| } |
| |
| .mod-wrap-product-new .pt-detail-name .name-title { |
| margin-bottom: 0; |
| color: #01adff; |
| font-size: 18px; |
| font-weight: 400; |
| display: inline-block; |
| vertical-align: middle |
| } |
| |
| .mod-wrap-product-new .pt-detail-name .name-title .icon-arrow { |
| border: 2px solid #b0b0b0; |
| width: 10px; |
| height: 10px; |
| margin: auto; |
| position: absolute; |
| top: 28px; |
| -webkit-transform: rotate(-45deg); |
| transform: rotate(-45deg); |
| right: 20px; |
| display: none; |
| border-top: none; |
| border-right: none |
| } |
| |
| .mod-wrap-product-new .pt-detail-name .pt-name-img { |
| margin-bottom: 0; |
| margin-right: 10px; |
| display: inline-block; |
| vertical-align: middle |
| } |
| |
| .mod-wrap-product-new .pt-detail-name .pt-name-img.compute { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/dateshows.png") no-repeat; |
| } |
| |
| .mod-wrap-product-new .pt-detail-name .pt-name-img.cdn { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/things.png") no-repeat; |
| } |
| |
| .mod-wrap-product-new .pt-detail-name .pt-name-img.database { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/main_keys.png") no-repeat; |
| } |
| |
| .mod-wrap-product-new .pt-detail-name .pt-name-img.network { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/rwseprates.png") no-repeat; |
| } |
| |
| .mod-wrap-product-new .pt-detail-name .pt-name-img.domain { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/jianrongs.png") no-repeat; |
| } |
| |
| .mod-wrap-product-new .pt-detail-name .pt-name-img.mobile { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/lot_sets.png") no-repeat; |
| } |
| |
| .pt-detail-sub-menu { |
| font-size: 16px; |
| padding: 15px; |
| color: #cccccc; |
| } |
| |
| .pt-detail-sub-menu div.row { |
| margin: 0; |
| } |
| |
| .pt-detail-sub-menu div.row p { |
| line-height: 24px; |
| margin: 0 0 6px; |
| } |
| |
| .pt-detail-sub-menu div.row .circle { |
| display: inline-block; |
| width: 5px; |
| height: 5px; |
| background-color: #01adff; |
| border-radius: 50%; |
| margin: 10px 10px 0 0; |
| } |
| |
| @media screen and (max-width: 1200px) { |
| .mod-wrap-product-new .product-block { |
| width: 22%; |
| } |
| |
| .mod-wrap-product-new .qc-unit-active { |
| width: 22%; |
| } |
| } |
| |
| @media screen and (max-width: 992px) { |
| .mod-wrap-product-new .product-block { |
| width: 32%; |
| } |
| |
| .mod-wrap-product-new .qc-unit-active { |
| width: 36%; |
| min-width: inherit; |
| } |
| } |
| |
| @media screen and (max-width: 768px) { |
| .mod-wrap-product-new .product-block { |
| width: 50%; |
| } |
| |
| .mod-wrap-product-new .qc-unit-active { |
| width: 50%; |
| min-width: inherit; |
| } |
| } |
| |
| @media screen and (max-width: 480px) { |
| .mod-wrap-product-new .product-block { |
| width: 100%; |
| } |
| |
| .mod-wrap-product-new .qc-unit-active { |
| width: 100%; |
| min-width: inherit; |
| } |
| } |
| |
| |
| /*交流与参与*/ |
| |
| .communion { |
| padding: 40px 0 65px; |
| background-color: #f2f2f5; |
| } |
| |
| .attend_communion { |
| margin: 60px auto 0; |
| } |
| |
| .attend_communion ul { |
| max-width: 1308px; |
| list-style-type: none; |
| margin: 0; |
| padding: 0; |
| } |
| |
| .attend_communion ul li .title_icon { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/question.png") no-repeat; |
| width: 77px; |
| height: 77px; |
| margin: 0 auto; |
| } |
| |
| .attend_communion ul li .qq { |
| text-align: center; |
| font-size: 24px; |
| color: #252525; |
| margin: 15px 0; |
| letter-spacing: 6px; |
| } |
| |
| .attend_communion ul li .qq_name { |
| text-align: center; |
| font-size: 24px; |
| color: #252525; |
| margin-bottom: 55px; |
| } |
| |
| .attend_communion ul li .qq_produce { |
| font-size: 16px; |
| color: #707070; |
| line-height: 30px; |
| } |
| |
| .attend_communion ul li .title_icon.source { |
| background-image: url("https://shardingsphere.apache.org/elasticjob/images/book.png") |
| } |
| |
| .attend_communion ul li .title_icon.bug { |
| background-image: url("https://shardingsphere.apache.org/elasticjob/images/bug.png") |
| } |
| |
| .attend_communion ul .click_upload { |
| background-color: #01adff; |
| display: block; |
| color: white; |
| font-size: 16px; |
| max-width: 135px; |
| text-align: center; |
| margin: 24px auto 64px; |
| border-radius: 3px; |
| } |
| |
| .attend_communion ul .click_upload:hover { |
| background-color: #004BB3; |
| } |
| |
| .attend_communion .leave_address { |
| font-size: 16px; |
| color: #707070; |
| margin-top: 30px; |
| } |
| |
| .attend_communion .leave_address a { |
| color: #01adff; |
| } |
| |
| |
| /*footer*/ |
| |
| .footer { |
| background-color: #252525; |
| color: white; |
| font-size: 18px; |
| padding: 70px 0; |
| } |
| |
| @media screen and (max-width: 768px) { |
| .footer { |
| padding: 40px 0; |
| } |
| } |
| |
| .foot { |
| max-width: 1200px; |
| margin: 0 auto; |
| overflow: hidden; |
| } |
| |
| .foot .logo { |
| float: left; |
| } |
| |
| .foot .logo .icon { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/ico.png") no-repeat; |
| width: 97px; |
| height: 81px; |
| margin-bottom: 35px; |
| } |
| |
| .foot .tag_icon { |
| float: right; |
| margin-top: 70px; |
| } |
| |
| .foot .tag_icon .label { |
| background: url("https://shardingsphere.apache.org/elasticjob/images/weibo.png") no-repeat; |
| width: 40px; |
| height: 40px; |
| float: left; |
| margin-left: 36px; |
| } |
| |
| |
| /* back-to-top */ |
| |
| .back-to-top { |
| display: none; |
| position: fixed; |
| right: 10px; |
| bottom: 10px; |
| z-index: 9999; |
| opacity: 0; |
| } |
| |
| @media screen and (max-width: 768px) { |
| .back-to-top { |
| display: block; |
| } |
| } |
| |
| #back-to-top.affix-top { |
| opacity: 0; |
| } |
| |
| #back-to-top.affix { |
| opacity: 0.9; |
| } |
| |
| .back-to-top a { |
| -moz-border-radius: 3px; |
| -webkit-border-radius: 3px; |
| border-radius: 3px; |
| display: block; |
| width: 40px; |
| height: 40px; |
| font-size: 17px; |
| color: #fff; |
| line-height: 40px; |
| text-align: center; |
| background-color: rgba(0, 0, 0, 0.5); |
| } |
| |
| .back-to-top a:hover, |
| .back-to-top a:focus { |
| background-color: rgba(0, 0, 0, 0.8); |
| color: #fff; |
| } |