| @import url('./normalize.css'); |
| *{ |
| touch-action:pan-y; |
| } |
| |
| body{ |
| font-family: PingFang SC-Regular, PingFang SC; |
| font-weight: 400; |
| color: #000000; |
| font-size: 14px; |
| } |
| .wrap{ |
| width:1440px; |
| margin:0 auto; |
| box-sizing: border-box; |
| } |
| |
| header{ |
| padding-top:28px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| header .orgin-halo{ |
| position: absolute; |
| width:430px; |
| height:430px; |
| top:-149px; |
| right:123px; |
| background: rgba(246, 101, 28, 0.5); |
| filter: blur(150px); |
| animation: run 5s infinite; |
| } |
| |
| header .blue-halo{ |
| position: absolute; |
| width: 430px; |
| height: 430px; |
| left: 166px; |
| top: 599px; |
| background: rgba(92, 106, 230, 0.5); |
| filter: blur(150px); |
| animation: run 5s infinite; |
| } |
| |
| header .ico-1{ |
| position: absolute; |
| width: 319px; |
| height: 376px; |
| left: -130px; |
| top: 176px; |
| background:url('../images/icon-1.png') no-repeat; |
| background-position: left top; |
| background-size: 100%; |
| } |
| |
| header .ico-2{ |
| position: absolute; |
| width: 160.2px; |
| height: 150px; |
| right: 47.8px; |
| top: 133px; |
| background:url('../images/icon-2.png') no-repeat; |
| background-position: left top; |
| background-size: 100%; |
| } |
| |
| header .ico-3{ |
| position: absolute; |
| width: 120px; |
| height: 146px; |
| right:450px; |
| /* top: 598px; */ |
| bottom:56px; |
| background:url('../images/icon-3.png') no-repeat; |
| background-position: left top; |
| background-size: 100%; |
| } |
| |
| header .ico-4{ |
| position: absolute; |
| width: 67px; |
| height: 110px; |
| left: 206px; |
| /* top: 608px; */ |
| bottom:56px; |
| background:url('../images/icon-4.png') no-repeat; |
| background-position: left top; |
| background-size: 100%; |
| } |
| |
| nav{ |
| height:50px; |
| position: relative; |
| } |
| nav .wrap{ |
| height: 100%; |
| box-sizing: border-box; |
| padding:0 88px; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| nav .logo{ |
| /* width: 190px; */ |
| height: 50px; |
| } |
| nav .links{ |
| display: flex; |
| font-size: 16px; |
| color:#080B22; |
| align-items: center; |
| } |
| nav .links .menu{ |
| display: flex; |
| align-items: center; |
| } |
| nav .links a{ |
| color:#080B22; |
| cursor: pointer; |
| text-decoration: none; |
| } |
| nav .links a:hover,nav .links a.active{ |
| color:#F6651C; |
| } |
| nav .links .menu a{ |
| margin-right: 40px; |
| } |
| nav .links .github{ |
| margin-left: 40px; |
| } |
| nav .iconMenu{ |
| display: none; |
| width: 40px; |
| height: 40px; |
| background: url('../images/menu.svg') no-repeat; |
| } |
| |
| nav .menu .i-drop-btn{ |
| margin-right: 40px; |
| position: relative; |
| height: 40px; |
| line-height: 40px; |
| cursor: pointer; |
| } |
| |
| nav .menu .i-drop-btn:hover .i-drop-pop{ |
| display: block; |
| } |
| |
| nav .menu .i-drop-btn .arrow{ |
| display: inline-block; |
| background: url('../images/down.svg'); |
| width: 16px; |
| height: 16px; |
| margin-left: 2px; |
| vertical-align: -2px; |
| opacity: 0.72; |
| } |
| |
| nav .menu .i-drop-btn .i-drop-pop{ |
| z-index: 1; |
| position: absolute; |
| min-width: 150px; |
| background-color: white; |
| box-shadow: 0px 2px 12px rgb(0 0 0 / 8%); |
| border-radius: 8px; |
| text-align: left; |
| display: none; |
| padding: 8px 0; |
| left: -10px; |
| } |
| |
| nav .menu .i-drop-btn .i-drop-pop a{ |
| display: block; |
| height: 44px; |
| line-height: 44px; |
| width: 100%; |
| padding: 0 12px; |
| /* font-weight: 500; */ |
| font-size: 16px; |
| border-bottom: 1px solid #f3f4f6; |
| box-sizing: border-box; |
| } |
| |
| nav .menu .i-drop-btn .i-drop-pop a:hover{ |
| background-color: #f3f4f6; |
| } |
| |
| nav .menu .i-drop-btn .i-drop-pop a:last-child{ |
| border-bottom: none; |
| } |
| |
| |
| .overview{ |
| padding:202px 0 281px; |
| text-align: center; |
| font-family: 'Styrene A Web'; |
| |
| margin:0 auto; |
| position: relative; |
| } |
| |
| .overview .wrap{ |
| padding:0 140px; |
| } |
| |
| .overview h2{ |
| font-style: normal; |
| font-weight: 700; |
| font-size: 45px; |
| line-height: 54px; |
| margin:0 0 16px; |
| } |
| |
| .overview .sub-tit{ |
| font-weight: 700; |
| font-size: 21px; |
| line-height: 25px; |
| color: #F6651C; |
| margin-bottom: 24px; |
| } |
| |
| .overview .con p{ |
| font-size: 18px; |
| font-family: 'PingFang SC'; |
| line-height: 25px; |
| color: #080B22; |
| } |
| |
| .features{ |
| background-color: #1D243D; |
| padding: 80px 0; |
| } |
| |
| .features h3{ |
| font-family: 'Styrene A Web'; |
| font-style: normal; |
| font-weight: 700; |
| font-size: 40px; |
| line-height: 56px; |
| /* identical to box height, or 140% */ |
| |
| text-align: center; |
| |
| color: #FFFFFF; |
| margin:0 0 40px; |
| |
| } |
| |
| .features .con{ |
| /* display: flex; |
| flex-direction: row; */ |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| grid-gap: 16px; |
| } |
| |
| .features .con .item{ |
| flex:1; |
| padding: 24px; |
| } |
| |
| .features .con .item:hover{ |
| background: #293252; |
| border-radius: 20px; |
| } |
| |
| .features .con .item img{ |
| height: 60px; |
| } |
| |
| .features .con .item p{ |
| font-size: 16px; |
| line-height: 24px; |
| /* or 150% */ |
| margin:0; |
| |
| color: #CCCCCC; |
| } |
| |
| .features .con .item p.tit{ |
| margin: 8px 0 8px; |
| font-size: 18px; |
| color: #fff; |
| font-weight: 600; |
| } |
| |
| |
| .core{ |
| padding:80px 0; |
| } |
| |
| .core h3{ |
| font-family: 'Styrene A Web'; |
| font-style: normal; |
| font-weight: 700; |
| font-size: 40px; |
| line-height: 56px; |
| text-align: center; |
| margin:0 0 40px; |
| } |
| |
| .core .con{ |
| display: grid; |
| grid-template-columns: repeat(3, 280px); |
| grid-gap:12px; |
| justify-content:center; |
| } |
| |
| .core .con img{ |
| height: 120px; |
| display: block; |
| } |
| |
| .community{ |
| background: #1D243D; |
| } |
| |
| .community, .supporters{ |
| padding:80px 0 30px; |
| } |
| .community h3{ |
| font-size: 40px; |
| font-weight: bold; |
| text-align: center; |
| margin:0 0 40px; |
| font-family: Styrene A Web,sans-serif ; |
| color: #fff; |
| } |
| .community .content{ |
| width: 715px; |
| padding:40px; |
| margin: 0 auto; |
| background: #293252; |
| border-radius: 10px; |
| color:#fff; |
| } |
| .community .content a{ |
| color:#fff; |
| text-decoration: none; |
| } |
| .community .content a:hover{ |
| text-decoration: underline; |
| } |
| .community .content p span{ |
| float:left; |
| width: 195px; |
| margin-right: 40px; |
| font-weight: bold; |
| color:#fff; |
| } |
| |
| footer{ |
| padding:50px 0 32px; |
| background: #1D243D; |
| } |
| footer .wrap{ |
| display: flex; |
| justify-content: space-between; |
| flex-direction: row-reverse; |
| align-items: center; |
| padding:0 90px; |
| } |
| footer .links{ |
| padding-top: 93.5px; |
| } |
| footer .links a{ |
| color: #9C9DA7; |
| text-decoration: none; |
| margin-left: 40px; |
| font-size: 18px; |
| display: inline-block; |
| width: 112px; |
| margin-bottom: 23px; |
| } |
| footer .links a:last-child{ |
| margin-right: 0; |
| } |
| footer .links a img{ |
| vertical-align: middle; |
| height: 36px; |
| margin-top:-2px; |
| } |
| footer .copyright{ |
| width: 465px; |
| color: #9C9DA7; |
| margin-top: 24px; |
| font-weight: 400; |
| font-size: 13px; |
| line-height: 20px; |
| } |
| |
| footer .copyright .logos { |
| margin-bottom: 40px; |
| } |
| |
| footer .copyright .logos img{ |
| height: 48px; |
| margin-right: 24px; |
| } |
| |
| .mobileMenu{ |
| position: fixed; |
| z-index: 88888; |
| left: 0; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| background-color: white; |
| overflow: auto; |
| display: none; |
| } |
| .mobileMenu header{ |
| padding:20px; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| .mobileMenu header img{ |
| height: 38px; |
| } |
| .mobileMenu header .close{ |
| width: 40px; |
| height: 40px; |
| background: url('../images/x.svg') no-repeat; |
| cursor: pointer; |
| } |
| .mobileMenu .mobile-menu-list{ |
| padding:24px; |
| } |
| .mobileMenu .mobile-menu-list a{ |
| display: block; |
| height: 50px; |
| line-height: 50px; |
| color:#000; |
| font-size: 16px; |
| text-decoration: none; |
| } |
| |
| .mobileMenu .lang-select{ |
| padding:0 24px; |
| display: flex; |
| justify-content: space-between; |
| height: 50px; |
| font-size: 16px; |
| align-items: center; |
| } |
| .mobileMenu .lang-select .arrow-icon{ |
| background: url('../images/arrow.svg') no-repeat center center; |
| height: 40px; |
| width: 40px; |
| transition: all .3s ease; |
| } |
| .mobileMenu .lang-select.active .arrow-icon{ |
| transform: rotate(90deg); |
| } |
| .mobileMenu .lang-list{ |
| padding:0 48px; |
| height: 0; |
| overflow: hidden; |
| transition: all .3s ease; |
| } |
| .mobileMenu .lang-list.show{ |
| height: auto; |
| } |
| .mobileMenu .lang-list a{ |
| display: block; |
| height: 50px; |
| line-height: 50px; |
| color: #000; |
| text-decoration: none; |
| } |
| .mobileMenu .github{ |
| display: block; |
| padding:24px; |
| margin-top: 10px; |
| } |
| .mobileMenu .github img{ |
| height: 30px; |
| } |
| |
| @media screen and (min-width:1200px) and (max-width:1500px){ |
| .wrap{ |
| width: 100%; |
| } |
| .overview .wrap{width:1000px;padding:0 20px} |
| footer .copyright{} |
| } |
| |
| |
| @media screen and (max-width: 1200px) { |
| .wrap{ |
| width: 100%; |
| } |
| .overview .wrap{width:1000px;padding:0 20px;} |
| footer .copyright{} |
| } |
| @media screen and (max-width: 900px){ |
| header{ |
| padding-top:0; |
| } |
| header .orgin-halo{ |
| width: 176px; |
| height: 176px; |
| right: 10px; |
| top: -58px; |
| filter: blur(61.5px); |
| animation: run2 10s infinite; |
| } |
| header .blue-halo{ |
| width: 176px; |
| height: 176px; |
| left: 1px; |
| top: 430px; |
| filter: blur(61.5px); |
| animation: run2 10s infinite; |
| } |
| |
| header .ico-1{ |
| width: 134px; |
| height: 125px; |
| left: -86px; |
| top: 77px; |
| } |
| |
| header .ico-2{ |
| width: 50px; |
| height: 45px; |
| top: 78px; |
| right:22px; |
| } |
| |
| header .ico-3{ |
| width: 38.52px; |
| height: 46.86px; |
| right:16px; |
| bottom:20px; |
| top:auto; |
| } |
| |
| header .ico-4{ |
| width: 22.6px; |
| height: 37.1px; |
| left:13px; |
| bottom:27px; |
| top:auto; |
| } |
| |
| header nav{height: 64px;} |
| nav .wrap{ |
| padding: 0 20px; |
| } |
| nav .logo{ |
| height:24px; |
| } |
| nav .links{display: none;} |
| nav .iconMenu{display: block;} |
| |
| .overview{ |
| padding:56px 0 80px; |
| } |
| |
| .overview .wrap{ |
| width: 100%; |
| padding:0 20px; |
| } |
| |
| .overview h2{ |
| font-size: 24px; |
| line-height: 29px; |
| padding: 0 50px; |
| text-align: center; |
| margin:0 auto 8px; |
| } |
| |
| .overview .sub-tit{font-size: 14px;margin-bottom: 16px;} |
| |
| .overview .con p{font-size: 14px;margin:4px 0;} |
| |
| .features{ |
| padding:40px 0; |
| } |
| .features h3{font-size: 24px;} |
| |
| .features .con{ |
| grid-template-columns: repeat(1,1fr); |
| } |
| |
| .features .con .item{ |
| margin:0 20px 16px; |
| background: #293252; |
| border-radius: 20px; |
| } |
| |
| .core{ |
| padding: 40px 0; |
| } |
| |
| .core h3{ |
| font-size: 24px; |
| line-height: 29px; |
| padding:0 30px; |
| } |
| |
| .core .con{ |
| grid-template-columns: repeat(2, 161px); |
| } |
| |
| .core .con img{height: 69px;} |
| |
| .community{ |
| padding-top: 40px; |
| } |
| |
| .community .content{ |
| width: 300px; |
| padding:16px; |
| } |
| |
| .community .content p span{ |
| |
| font-weight: bold; |
| font-size: 14px; |
| float: none; |
| display: block; |
| margin-bottom: 5px; |
| } |
| |
| .community .content p{ |
| word-wrap: break-word; |
| word-break: normal; |
| } |
| |
| footer{padding-top:0;} |
| |
| footer .wrap{ |
| padding: 0 24px; |
| flex-direction: column; |
| justify-content: left; |
| align-items:flex-start; |
| } |
| |
| footer .copyright img{ |
| height: 38px; |
| margin-top: 31px; |
| } |
| |
| footer .copyright{ |
| width: 100%; |
| margin-top: 0; |
| } |
| |
| footer .copyright .logos{ |
| margin-bottom: 30px; |
| } |
| |
| footer .links{ |
| padding-top: 32px; |
| } |
| |
| footer .links a{font-size: 14px; width: 84px; margin-right: 26px;margin-left:0;} |
| |
| footer .links a img{ |
| height: 25px; |
| } |
| |
| .mobileMenu header img{ |
| height: 24px; |
| } |
| } |
| |
| @keyframes run { |
| 0% {transform: translate(0, 0);} |
| 50% {transform: translate(200px, 100px);} |
| 100% {transform: translate(0, 0);} |
| } |
| |
| |
| @keyframes run2 { |
| 0% {transform: translate(0, 0);} |
| 50% {transform: translate(100px, 50px);} |
| 100% {transform: translate(0, 0);} |
| } |