| body, |
| html, |
| p, |
| div, |
| a { |
| 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. */ |
| } |
| |
| html { |
| font-size: 50px; |
| } |
| |
| .display-flex { |
| display: flex; |
| align-self: center; |
| } |
| |
| .space-between { |
| justify-content: space-between; |
| } |
| |
| a { |
| text-decoration: none; |
| color: #cdcdcd; |
| } |
| |
| header { |
| background: url(http://shardingsphere.jd.com/images/bg.png) center top no-repeat; |
| background-color: #060708; |
| width: 100%; |
| } |
| |
| .bg-left { |
| background: url(http://shardingsphere.jd.com/images/background_center.png) 1.16rem 2.9rem no-repeat; |
| background-size: 1.22rem 1.22rem; |
| } |
| |
| .bg-right { |
| background: url(http://shardingsphere.jd.com/images/background_corner.png) 5.96rem 4.8rem no-repeat; |
| background-size: 0.74rem 0.74rem; |
| } |
| |
| nav { |
| margin: 0 auto; |
| padding: 0.4rem 0.4rem; |
| } |
| |
| .nav-img { |
| height: 1.2rem; |
| } |
| |
| .nav-btn { |
| position: relative; |
| width: 0.48rem; |
| height: 0.08rem; |
| background-color: #ffffff; |
| border-left: 0.28rem solid rgba(0, 0, 0, 0.9); |
| border-right: 0.28rem solid rgba(0, 0, 0, 0.9); |
| border-top: 0.42rem solid rgba(0, 0, 0, 0.9); |
| border-bottom: 0.42rem solid rgba(0, 0, 0, 0.9); |
| } |
| |
| .nav-btn::before { |
| content: ''; |
| position: absolute; |
| top: -0.14rem; |
| width: 0.48rem; |
| height: 0.08rem; |
| background-color: #ffffff; |
| } |
| |
| .nav-btn::after { |
| content: ''; |
| position: absolute; |
| bottom: -0.14rem; |
| width: 0.48rem; |
| height: 0.08rem; |
| background-color: #ffffff; |
| } |
| |
| .nav-menu { |
| text-align: center; |
| color: #cdcdcd; |
| margin-bottom: 1rem; |
| height: 0; |
| overflow: hidden; |
| transition: height 1s; |
| } |
| |
| .nav-item { |
| margin-bottom: 0.52rem; |
| font-size: 0; |
| } |
| |
| .nav-item.space { |
| margin-bottom: 1.5rem; |
| } |
| |
| .nav-item a, |
| .nav-item .i-drop-btn { |
| line-height: 0.44rem; |
| font-size: 0.44rem; |
| } |
| |
| .i-drop-pop { |
| padding-bottom: 0.26rem; |
| } |
| |
| .i-drop-list { |
| display: block; |
| font-size: 0.3rem; |
| color: #979696; |
| margin-bottom: 0.52rem; |
| } |
| |
| .nav-item:hover, |
| .nav-item a:hover, |
| .i-drop-list:hover { |
| color: #ee9a32; |
| } |
| |
| .sub-img { |
| display: block; |
| margin: 0 auto 0.4rem; |
| width: 1.42rem; |
| } |
| |
| .sub-title { |
| position: relative; |
| margin: 0 0.5rem; |
| padding-top: 1.36rem; |
| text-align: center; |
| color: #f09b1f; |
| } |
| |
| .sub-title span { |
| display: inline-block; |
| margin: 0 auto; |
| font-size: 0.6rem; |
| line-height: 0.77rem; |
| font-weight: bold; |
| background: linear-gradient(to right, #7e297c, #f79a22, #d03135); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .sub-title span.small { |
| font-size: 0.3rem; |
| } |
| |
| .sub-corner { |
| position: absolute; |
| top: 0; |
| left: 50%; |
| margin-left: -1.05rem; |
| width: 2.1rem; |
| height: 0.7rem; |
| font-size: 0.36rem; |
| text-align: center; |
| line-height: 0.7rem; |
| color: #cdcdcd; |
| background-color: #2f3338; |
| border-radius: 4px; |
| } |
| |
| .sub-corner::before { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 0; |
| left: 0.89rem; |
| bottom: -0.16rem; |
| border-left: solid 0.14rem transparent; |
| border-top: solid 0.16rem #2f3338; |
| border-right: solid 0.14rem transparent; |
| } |
| |
| .sub-hr { |
| display: block; |
| margin: 0.65rem auto 0.9rem; |
| width: 1.83rem; |
| height: 0.05rem; |
| border: none; |
| background-color: #f09b1f; |
| } |
| |
| .sub-content { |
| padding-bottom: 0.5rem; |
| margin: 0 0.4rem; |
| } |
| |
| .sub-text { |
| font-size: 0.36rem; |
| color: #cdcdcd; |
| line-height: 0.54rem; |
| margin: 0 auto 0.8rem; |
| } |
| |
| .sub-btn_box { |
| margin: 0 auto 1.2rem; |
| } |
| |
| .sub-button { |
| display: block; |
| width: 6.24rem; |
| height: 0.92rem; |
| margin: 0 auto 0.3rem; |
| color: #060708; |
| line-height: 0.92rem; |
| border-radius: 0.1rem; |
| font-size: 0.36rem; |
| text-align: center; |
| background-color: #f09b1f; |
| } |
| |
| .sub-button:hover { |
| color: #ac650d; |
| border: 1px solid #ac650d; |
| } |
| |
| .sub-point { |
| padding-bottom: 1.78rem; |
| text-align: center; |
| } |
| |
| .sub-point-list { |
| padding-top: 1.6rem; |
| text-align: center; |
| font-size: 0; |
| } |
| |
| .sub-point-list img { |
| width: 2.9rem; |
| padding-bottom: 0.6rem; |
| } |
| |
| .sub-point-list p { |
| font-size: 0.48rem; |
| color: #ffffff; |
| } |
| |
| .sub-btn-hr, |
| .con-footer-hr { |
| display: block; |
| width: 100%; |
| 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-footer { |
| background-color: #222222; |
| } |
| |
| .con-tran { |
| /* background-color: #060708; */ |
| background-color: #1d2229; |
| } |
| |
| .con-item { |
| text-align: center; |
| } |
| |
| .l-msg { |
| text-align: center; |
| padding: 1.8rem 0 1.76rem; |
| font-size: 0; |
| } |
| |
| .l-m-tit { |
| font-size: 0.6rem; |
| color: #f09b1f; |
| } |
| |
| .l-m-tit-hr { |
| border: none; |
| width: 1.83rem; |
| height: 0.05rem; |
| background-color: #f09b1f; |
| margin: 0.8rem auto 0.9rem; |
| } |
| |
| .l-m-info { |
| font-size: 0.36rem; |
| color: #cdcdcd; |
| margin-bottom: 1.6rem; |
| } |
| |
| .l-m-info p { |
| line-height: 0.66rem; |
| } |
| |
| .point-img-shard { |
| width: 4.86rem; |
| } |
| |
| .point-img-tran { |
| width: 4.56rem; |
| } |
| |
| .point-img-orch { |
| width: 4.96rem; |
| } |
| |
| .footer-img { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin: 0.34rem 0 0.34rem; |
| } |
| |
| .footer-logo { |
| width: 4.42rem; |
| } |
| |
| .footer-apache { |
| width: 1.1rem; |
| } |
| |
| .footer-icon { |
| margin: 0 auto; |
| font-size: 0; |
| padding-bottom: 0.4rem; |
| } |
| |
| .footer-icon a { |
| display: inline-block; |
| padding: 0 0.3rem; |
| } |
| |
| .footer-icon>a>img { |
| width: 0.6rem; |
| } |
| |
| .footer-disc { |
| font-size: 0.28rem; |
| line-height: 0.5rem; |
| padding: 0.3rem; |
| color: #cdcdcd; |
| text-align: left; |
| } |
| |
| .footer-link { |
| font-size: 0.28rem; |
| } |
| |
| .footer-link p { |
| margin: 0; |
| font-size: 0.28rem; |
| line-height: 0.6rem; |
| color: #cdcdcd; |
| } |
| |
| .footer { |
| text-align: center; |
| background-color: #060708; |
| } |
| |
| .footer p { |
| font-size: 0.28rem; |
| color: #cdcdcd; |
| line-height: 0.5rem; |
| padding: 0.2rem; |
| margin: 0; |
| } |