| @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; |
| } |
| |
| 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:206px 0 266px; |
| text-align: center; |
| font-family: 'Styrene A Web'; |
| |
| margin:0 auto; |
| position: relative; |
| background:url('../images/banner_bg.png') center bottom no-repeat; |
| background-size: auto 240px; |
| } |
| |
| .overview .wrap{ |
| padding:0 240px; |
| position: relative; |
| } |
| |
| .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; |
| } |
| |
| .overview .con .more{ |
| width: 160px; |
| height: 48px; |
| display: inline-block; |
| background: #FE8244; |
| border-radius: 8px; |
| line-height: 48px; |
| text-decoration: none; |
| color: #fff; |
| margin-top: 37px; |
| } |
| |
| .overview .orange-ico{ |
| position: absolute; |
| width:223px; |
| height: 124px; |
| background:url('../images/orange_ico.png') no-repeat center center; |
| background-size: contain; |
| bottom:-146px; |
| left:350px; |
| animation: run 12s ease infinite; |
| } |
| |
| .overview .orange-s-ico{ |
| position: absolute; |
| width:223.87px; |
| height: 115.11px; |
| background:url('../images/orange-s-ico.png') no-repeat center center; |
| background-size: contain; |
| bottom: -183px; |
| left: 364px; |
| animation: run3 12s ease infinite; |
| } |
| |
| .overview .blue-ico{ |
| position: absolute; |
| width:187px; |
| height: 116px; |
| background:url('../images/blue_ico.png') no-repeat center center; |
| background-size: contain; |
| right:150.5px; |
| bottom:-210px; |
| animation: run2 12s ease infinite 2s; |
| } |
| |
| .overview .blue-s-ico{ |
| position: absolute; |
| width: 187.15px; |
| height: 115.85px; |
| background: url('../images/blue-s-ico.png') no-repeat center center; |
| background-size: contain; |
| right: 179.5px; |
| bottom: -253px; |
| animation: run3 12s ease infinite 2s; |
| } |
| |
| .separate-projects{ |
| padding:120px 0; |
| background-color: #1D243D; |
| } |
| |
| .separate-projects h2{ |
| font-weight: 700; |
| font-size: 40px; |
| line-height: 48px; |
| font-family: 'Styrene A Web'; |
| |
| text-align: center; |
| |
| color: #FFFFFF; |
| margin:0 0 130px; |
| } |
| |
| .separate-projects .content{ |
| padding: 0 88px; |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| grid-gap: 50px; |
| justify-content: center; |
| } |
| |
| |
| |
| .separate-projects .content .item{ |
| text-align: center; |
| padding:98px 48px 57px; |
| background-color: #293252; |
| border-radius: 20px; |
| position: relative; |
| } |
| |
| .separate-projects .content p{ |
| font-weight: 400; |
| font-size: 16px; |
| line-height: 22px; |
| |
| color: #CCCCCC; |
| } |
| |
| .separate-projects .content p.tit{ |
| font-weight: 600; |
| font-size: 18px; |
| line-height: 25px; |
| |
| color: #FFFFFF; |
| margin-bottom: 16px; |
| } |
| |
| .separate-projects .content img{ |
| position:absolute; |
| width:140px; |
| height: 140px; |
| top:-50px; |
| left:50%; |
| transform: translateX(-50%); |
| } |
| |
| .separate-projects .content .bg{ |
| position: absolute; |
| left:0; |
| top:0; |
| width: 100%; |
| height: 100%; |
| overflow: hidden; |
| } |
| .separate-projects .content .bg::after{ |
| content: ''; |
| position: absolute; |
| width: 150px; |
| height: 150px; |
| left: 225px; |
| top: -75px; |
| |
| background: rgba(246, 101, 28, 0.7); |
| filter: blur(125px); |
| } |
| |
| .separate-projects .content .item:first-child .bg::after{ |
| background: #6D7CFF; |
| } |
| |
| .features{ |
| background-color: #fff; |
| padding: 80px 0; |
| } |
| |
| .features h2{ |
| 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: #080B22; |
| margin:0 0 40px; |
| |
| } |
| |
| .features .content{ |
| padding: 0 88px 20px; |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| grid-gap: 50px; |
| justify-content: center; |
| } |
| |
| .features .content .item{ |
| text-align: left; |
| padding:0 40px 42px; |
| } |
| |
| .features .content img{ |
| width: 80px; |
| height: 80px; |
| } |
| |
| .features .content ul{ |
| padding-left: 20px; |
| color: #FE8244; |
| } |
| |
| .features .content p,.features .content li{ |
| margin-top:16px; |
| font-weight: 400; |
| font-size: 16px; |
| line-height: 140%; |
| |
| text-align: left; |
| } |
| |
| .features .content li span{ |
| color: #000; |
| } |
| |
| |
| .features .content p.tit{ |
| font-weight: 700; |
| font-size: 18px; |
| line-height: 22px; |
| /* identical to box height */ |
| |
| text-align: left; |
| |
| color: #1D243D; |
| } |
| |
| |
| 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 a{ |
| color:#000; |
| text-decoration: none; |
| } |
| .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} |
| .overview .wrap .orange-s-ico{ |
| left: 144px; |
| } |
| .overview .wrap .orange-ico{left:130px} |
| .overview .wrap .blue-s-ico{right:-40.5px;} |
| .overview .wrap .blue-ico{right:-69.5px;} |
| |
| footer .copyright{} |
| } |
| |
| |
| @media screen and (max-width: 1200px) { |
| .wrap{ |
| width: 100%; |
| } |
| .overview .wrap{width:1000px;padding:0 20px;} |
| .overview .wrap .orange-s-ico{ |
| left: 144px; |
| } |
| .overview .wrap .orange-ico{left:130px} |
| .overview .wrap .blue-s-ico{right:-40.5px;} |
| .overview .wrap .blue-ico{right:-69.5px;} |
| |
| .features .content{ |
| grid-template-columns: repeat(2, 1fr); |
| } |
| footer .copyright{} |
| } |
| @media screen and (max-width: 970px){ |
| header{ |
| padding-top:0; |
| } |
| |
| header nav{height: 64px;} |
| nav .wrap{ |
| padding: 0 20px; |
| } |
| nav .logo{ |
| height:24px; |
| } |
| nav .links{display: none;} |
| nav .iconMenu{display: block;} |
| |
| .overview{ |
| padding:47px 0 132px; |
| text-align: left; |
| background-size: auto 86px; |
| } |
| |
| .overview .wrap{ |
| width: 100%; |
| padding:0 20px; |
| } |
| |
| .overview .wrap .orange-s-ico{ |
| width: 78.15px; |
| /* left: 69px; */ |
| margin-left:-126px; |
| left:50%; |
| bottom: -139px; |
| } |
| |
| .overview .wrap .orange-ico{ |
| width:78.15px; |
| bottom: -123px;/* -143px */ |
| /* left: 53px; */ |
| margin-left:-127px;/* -126 */ |
| left:50%; |
| animation: run4 12s ease infinite; |
| } |
| |
| .overview .wrap .blue-s-ico{ |
| width: 60.51px; |
| bottom: -163px; |
| right:50%; |
| margin-right: -188px; |
| } |
| .overview .wrap .blue-ico{ |
| width: 60.51px; |
| bottom: -143px;/*-161*/ |
| right: 50%; |
| margin-right: -183px;/*-188px*/ |
| animation: run5 12s ease infinite 2s; |
| } |
| |
| .overview h2{ |
| font-size: 32px; |
| line-height: 38px; |
| padding:0; |
| text-align: left; |
| margin:0 auto 8px; |
| } |
| |
| .overview .sub-tit{ |
| font-size: 20px; |
| line-height: 24px; |
| margin-bottom: 24px; |
| } |
| |
| .overview .con p{font-size: 16px;margin:4px 0;} |
| |
| .overview .con .more{ |
| display: block; |
| text-align: center; |
| margin:0 auto; |
| margin-top:40px |
| } |
| |
| .separate-projects{ |
| padding: 40px 0; |
| } |
| |
| .separate-projects h2{ |
| font-size: 22px; |
| margin-bottom: 90px; |
| } |
| .separate-projects .content{ |
| grid-template-columns: 1fr; |
| grid-gap:90px; |
| padding:0 20px; |
| } |
| |
| .separate-projects .item{ |
| padding: 76px 20px 40px; |
| } |
| |
| .separate-projects .content .bg::after{ |
| width: 120px; |
| height: 120px; |
| left: 108px; |
| top: -60px; |
| } |
| |
| .features{ |
| padding:40px 0; |
| } |
| |
| .features h2{ |
| font-size: 22px; |
| } |
| |
| .features .content{ |
| grid-template-columns: 1fr; |
| padding:0 20px; |
| grid-gap:16px; |
| } |
| |
| .features .content .item{ |
| padding: 20px 20px 30px; |
| background: #F1F3FF; |
| border-radius: 20px; |
| text-align: center; |
| } |
| |
| .features .content .item li{ |
| text-align: center; |
| list-style: none; |
| } |
| |
| .features .content p.tit{ |
| text-align: center; |
| } |
| |
| .features .content .item ul |
| |
| 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(16px, 37px);} |
| 100% {transform: translate(0, 0);} |
| } |
| |
| |
| @keyframes run2 { |
| 0% {transform: translate(0, 0);} |
| 50% {transform: translate(-31.5px, 38px);} |
| 100% {transform: translate(0, 0);} |
| } |
| |
| |
| @keyframes run3 { |
| 0% {opacity: 0.1;} |
| 50% {opacity: 1;} |
| 100% {opacity: 0.1;} |
| } |
| |
| @keyframes run4 { |
| 0% {transform: translate(0, 0);} |
| 50% {transform: translate(1px, 20px);} |
| 100% {transform: translate(0, 0);} |
| } |
| |
| @keyframes run5 { |
| 0% {transform: translate(0, 0);} |
| 50% {transform: translate(5px, 18px);} |
| 100% {transform: translate(0, 0);} |
| } |