| body, |
| html { |
| min-width: 1200px; |
| margin: 0; |
| padding: 0; |
| } |
| body { |
| -moz-osx-font-smoothing: grayscale; |
| -webkit-font-smoothing: antialiased; |
| text-rendering: optimizeLegibility; |
| font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; |
| background-color: #1d2229; /* add background color to avoid white background while slidering up and down. */ |
| } |
| .clearfix:after { |
| visibility: hidden; |
| display: block; |
| font-size: 0; |
| content: ' '; |
| clear: both; |
| height: 0; |
| } |
| .float-left { |
| float: left; |
| } |
| .float-right { |
| float: right; |
| } |
| .flex { |
| display: flex; |
| justify-content: space-between; |
| align-self: center; |
| } |
| a { |
| text-decoration: none; |
| color: #cdcdcd; |
| } |
| .body-github { |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| .header { |
| background: url(https://shardingsphere.apache.org/images/bg.png) center top |
| no-repeat; |
| background-color: #060708; |
| width: 100%; |
| } |
| .sub-header { |
| width: 1200px; |
| margin: 0 auto; |
| background: url(https://shardingsphere.apache.org/images/background_center.png) |
| 480px 480px no-repeat; |
| } |
| .nav { |
| margin: 0 auto; |
| padding-top: 20px; |
| color: #e6e6e6; |
| } |
| .nav-logo { |
| font-size: 0; |
| } |
| .nav-img { |
| height: 80px; |
| } |
| .nav-img.first { |
| margin-right: 15px; |
| } |
| .nav-menu { |
| padding: 10px 0; |
| } |
| .nav-item { |
| float: left; |
| margin-right: 30px; |
| line-height: 50px; |
| font-size: 18px; |
| } |
| .nav-item-zh { |
| float: left; |
| margin-right: 50px; |
| line-height: 50px; |
| font-size: 18px; |
| } |
| .nav-item.space { |
| border-left: 1px solid #cdcdcd; |
| padding-left: 50px; |
| } |
| .i-drop-btn { |
| position: relative; |
| cursor: pointer; |
| } |
| .i-drop-btn:hover { |
| color: #ee9a32; |
| } |
| .nav-item > a:hover { |
| color: #ee9a32; |
| } |
| .i-drop-btn .i-drop-pop { |
| z-index: 1; |
| position: absolute; |
| width: 120px; |
| background-color: #253033; |
| box-shadow: 0 0 6px 2px #000000; |
| border-radius: 4px; |
| font-size: 18px; |
| text-align: left; |
| display: none; |
| } |
| .i-drop-btn:hover .i-drop-pop { |
| display: block; |
| } |
| .i-drop-pop::before { |
| content: ''; |
| position: absolute; |
| display: block; |
| top: -16px; |
| left: 6px; |
| border-width: 8px 8px 8px 8px; |
| border-style: solid; |
| border-color: transparent transparent #253033 transparent; |
| } |
| .i-drop-list { |
| display: block; |
| line-height: 30px; |
| font-size: 14px; |
| color: #f7f7f7; |
| padding: 4px 10px; |
| } |
| .i-drop-list:hover { |
| background-color: #f28d25; |
| } |
| .content { |
| margin: 0 auto; |
| background: url(https://shardingsphere.apache.org/images/background_corner.png) |
| 990px 580px no-repeat; |
| } |
| .sub-title { |
| position: relative; |
| padding-top: 120px; |
| padding-bottom: 20px; |
| text-align: center; |
| font-size: 0; |
| color: #ee9a32; |
| font-weight: bold; |
| } |
| .sub-title-box { |
| display: inline-block; |
| background-image: url(https://shardingsphere.apache.org/images/background_logo.png); |
| background-repeat: no-repeat; |
| padding: 20px 70px; |
| position: relative; |
| background-position: 10px 26px; |
| } |
| .sub-title-ie { |
| display: inline-block; |
| background-image: -webkit-linear-gradient(left, #7e297c, #f79a22, #d03135); |
| background-image: -o-linear-gradient(right, #7e297c, #f79a22, #d03135); |
| background-image: -moz-linear-gradient(right, #7e297c, #f79a22, #d03135); |
| background-image: linear-gradient(to right, #7e297c, #f79a22, #d03135); |
| background-image: none\0; |
| -webkit-background-clip: text; |
| background-clip: text; |
| -webkit-text-fill-color: transparent; |
| font-family: 'PingFang SC', 'Microsoft Yahei'; |
| font-size: 42px; |
| } |
| .sub-title-extra { |
| line-height: 30px; |
| font-size: 18px; |
| } |
| /* .sub-title-svg { |
| fill: url(#SVGID_1_); |
| font-size: 42px; |
| font-weight: bolder; |
| } */ |
| .sub-corner { |
| position: absolute; |
| top: -20px; |
| right: -10px; |
| width: 114px; |
| height: 35px; |
| font-size: 18px; |
| font-weight: lighter; |
| text-align: center; |
| line-height: 33px; |
| color: #cdcdcd; |
| background-color: #2f3338; |
| border-radius: 4px; |
| } |
| .sub-corner::before { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 0; |
| left: 16px; |
| bottom: -9px; |
| border-left: solid 7px transparent; |
| border-top: solid 9px #2f3338; |
| border-right: solid 7px transparent; |
| } |
| .sub-hr { |
| display: block; |
| margin: 0 auto 54px; |
| width: 84px; |
| height: 2px; |
| border: none; |
| background-color: #ee9a32; |
| } |
| .sub-text { |
| font-size: 18px; |
| color: #f8f8f8; |
| line-height: 30px; |
| padding-bottom: 30px; |
| margin: 0 15px; |
| } |
| .sub-btn_box { |
| text-align: center; |
| } |
| .sub-button { |
| display: inline-block; |
| width: 250px; |
| height: 50px; |
| margin: 38px auto 126px; |
| color: #f2b232; |
| line-height: 50px; |
| border-radius: 3px; |
| font-size: 18px; |
| text-align: center; |
| border: 1px solid #ee9a32; |
| background-color: #0c0e11; |
| } |
| .sub-button.download { |
| background-color: #ee9a32; |
| color: #ffffff; |
| } |
| .sub-button:hover { |
| color: #ac650d; |
| border: 1px solid #ac650d; |
| } |
| .sub-point { |
| padding-top: 56px; |
| padding-bottom: 64px; |
| text-align: center; |
| } |
| .sub-point-list { |
| display: inline-block; |
| padding-top: 40px; |
| padding-bottom: 50px; |
| width: 32%; |
| text-align: center; |
| } |
| |
| .sub-point-list p { |
| margin-top: 46px; |
| font-size: 20px; |
| color: #ffffff; |
| } |
| .sub-btn-hr, |
| .con-footer-hr { |
| display: block; |
| width: 100%; |
| max-width: 1200px; |
| margin: 0 auto; |
| height: 1px; |
| /* comment this line to delete the grey line under the swiper. */ |
| /* background-color: rgba(83, 83, 84, 0.5); */ |
| border: none; |
| } |
| .con-shard, |
| .con-orch { |
| background-color: #1d2229; |
| } |
| .con-bottom { |
| background-color: #171c22; |
| } |
| .con-tran { |
| /* background-color: #060708; */ |
| background-color: #1d2229; |
| } |
| .con-item { |
| max-width: 1200px; |
| margin: 0 auto; |
| text-align: center; |
| } |
| .l-msg { |
| text-align: left; |
| width: 48%; |
| min-width: 320px; |
| padding: 90px 0; |
| display: inline-block; |
| box-sizing: border-box; |
| vertical-align: middle; |
| } |
| .point-img { |
| vertical-align: middle; |
| padding: 55px 0; |
| } |
| .l-m-tit { |
| font-size: 32px; |
| color: #ee9a32; |
| margin-bottom: 32px; |
| } |
| .l-m-tit-hr { |
| border: none; |
| width: 80px; |
| height: 1px; |
| background-color: #ee9a32; |
| margin: 0 auto 44px 0; |
| } |
| .l-m-info { |
| font-size: 18px; |
| color: #fcfcfc; |
| } |
| .l-m-info p { |
| line-height: 36px; |
| margin: 0; |
| } |
| .con-footer { |
| box-sizing: border-box; |
| min-height: 160px; |
| padding: 20px; |
| } |
| .footer { |
| text-align: center; |
| font-size: 18px; |
| color: #cdcdcd; |
| line-height: 126px; |
| background-color: #060708; |
| padding: 10px 0; |
| } |
| .footer p { |
| padding: 0 50px; |
| box-sizing: border-box; |
| font-size: 12px; |
| margin: 0 auto; |
| line-height: 30px; |
| max-width: 1200px; |
| } |
| .footer-logo { |
| padding: 30px 20px 10px; |
| } |
| .footer-icon { |
| padding: 10px 0; |
| text-align: center; |
| } |
| .footer-icon a { |
| display: inline-block; |
| margin: 0 16px; |
| width: 26px; |
| height: 26px; |
| } |
| .footer-icon > a > img { |
| width: 100%; |
| border: 0; |
| } |
| .footer-link { |
| font-size: 14px; |
| width: 200px; |
| } |
| .footer-link p { |
| line-height: 30px; |
| margin: 0; |
| } |
| .footer-disc { |
| width: 500px; |
| color: #cdcdcd; |
| text-align: left; |
| line-height: 24px; |
| font-size: 12px; |
| margin-right: 50px; |
| } |
| |
| @media screen and (max-width: 600px) { |
| .l-image { |
| display: none; |
| } |
| } |