rearrange animation
This commit is contained in:
parent
ac1c61fa03
commit
bcc9d8bd48
771
css/sprint_4.css
771
css/sprint_4.css
@ -12731,171 +12731,6 @@ main nav {
|
|||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
padding-top: 50vh;
|
padding-top: 50vh;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1023px) {
|
|
||||||
#main_title_container h2 {
|
|
||||||
margin-top: 5vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main_title {
|
|
||||||
top: 15rem;
|
|
||||||
height: 25vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cover .button {
|
|
||||||
top: 7vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_all h2,
|
|
||||||
#welcome h2 {
|
|
||||||
font-size: 6em;
|
|
||||||
line-height: 1em;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#content_all .columns {
|
|
||||||
top: -145vh;
|
|
||||||
width: 55vw;
|
|
||||||
}
|
|
||||||
.columns {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
.column {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#open {
|
|
||||||
top: 80vh;
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
flipping part
|
|
||||||
*/
|
|
||||||
#flipping_zone {
|
|
||||||
margin-top: -120vh;
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
.flip-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flip-container + .flip-container {
|
|
||||||
margin-top: -5vh;
|
|
||||||
}
|
|
||||||
.flip-container .container-text {
|
|
||||||
z-index: 1;
|
|
||||||
left: 33vw;
|
|
||||||
}
|
|
||||||
.flip-container .text-title {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flip-container .phone-container {
|
|
||||||
left: 42vw;
|
|
||||||
top: 5vh;
|
|
||||||
}
|
|
||||||
.flip-container.flip-from-left .container-text {
|
|
||||||
left: 33vw;
|
|
||||||
top: 5vh;
|
|
||||||
}
|
|
||||||
.flip-container.flip-from-left .phone-container {
|
|
||||||
left: 25vw;
|
|
||||||
top: 10vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content-4 {
|
|
||||||
margin-top: 25vh;
|
|
||||||
}
|
|
||||||
#content-5 {
|
|
||||||
margin-top: 15vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#popover {
|
|
||||||
margin-top: 100vh;
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
exemples sliders
|
|
||||||
*/
|
|
||||||
.slider-screen .text-title {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
.slider-screen .text,
|
|
||||||
.slider-screen .phone-container {
|
|
||||||
position: relative;
|
|
||||||
width: 412px;
|
|
||||||
left: 25vw;
|
|
||||||
top: 5vh;
|
|
||||||
}
|
|
||||||
.bullets {
|
|
||||||
top: 28em;
|
|
||||||
}
|
|
||||||
.arrow-left,
|
|
||||||
.arrow-right {
|
|
||||||
top: 60vh;
|
|
||||||
}
|
|
||||||
.slider-screen {
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
#popover, #portfolio {
|
|
||||||
min-height: 200vh;
|
|
||||||
}
|
|
||||||
#popover .phone-container, #portfolio .phone-container{
|
|
||||||
width: 50vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 35em) {
|
|
||||||
#main_title {
|
|
||||||
margin-top: 5vh;
|
|
||||||
}
|
|
||||||
#main_title_container h2 {
|
|
||||||
margin-top: 15vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_all h2,
|
|
||||||
#welcome h2 {
|
|
||||||
font-size: 4rem !important;
|
|
||||||
}
|
|
||||||
#content_all .text {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
.container-text-md {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
#content_all .columns {
|
|
||||||
width: 100%;
|
|
||||||
margin: 1rem;
|
|
||||||
}
|
|
||||||
.flip-container .container-text {
|
|
||||||
width: 100%;
|
|
||||||
left: 5vw;
|
|
||||||
}
|
|
||||||
.flip-container .phone-container {
|
|
||||||
position: static;
|
|
||||||
margin: 4rem auto;
|
|
||||||
}
|
|
||||||
.flip-container.flip-from-left .container-text {
|
|
||||||
left: 5vw;
|
|
||||||
}
|
|
||||||
.flip-container .phone-container {
|
|
||||||
margin-top: 7rem;
|
|
||||||
}
|
|
||||||
.flip-container .text-description {
|
|
||||||
max-width: 90vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content-4 {
|
|
||||||
margin-top: 50vh;
|
|
||||||
}
|
|
||||||
#content-5 {
|
|
||||||
margin-top: 45vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-screen .text,
|
|
||||||
.slider-screen .phone-container {
|
|
||||||
left: 5vw;
|
|
||||||
max-width: 90vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
body {
|
body {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding-bottom: 50vh;
|
padding-bottom: 50vh;
|
||||||
@ -13106,92 +12941,7 @@ main .credits {
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: -97em;
|
top: -97em;
|
||||||
}
|
}
|
||||||
@media all and (max-width: 1600px) {
|
|
||||||
section#carry {
|
|
||||||
min-height: 120rem;
|
|
||||||
}
|
|
||||||
section#carry .description {
|
|
||||||
margin-top: 3vh;
|
|
||||||
font-size: 8rem;
|
|
||||||
}
|
|
||||||
section#carry .gradient-bg {
|
|
||||||
top: -40rem;
|
|
||||||
}
|
|
||||||
section#carry .gradient-bg-yellow {
|
|
||||||
top: 10rem;
|
|
||||||
}
|
|
||||||
section#carry .computer-block {
|
|
||||||
width: 70%;
|
|
||||||
height: 1080px;
|
|
||||||
left: 0;
|
|
||||||
top: -110em;
|
|
||||||
background-size: contain;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
section#carry .bubbles {
|
|
||||||
position: relative;
|
|
||||||
left: -5vw;
|
|
||||||
}
|
|
||||||
section#carry .bubbles p :nth-of-type(1) {
|
|
||||||
top: -75vh;
|
|
||||||
}
|
|
||||||
section#carry .bubbles p :nth-of-type(2) {
|
|
||||||
left: 70%;
|
|
||||||
}
|
|
||||||
section#carry .bubbles p :nth-of-type(3) {
|
|
||||||
left: 50%;
|
|
||||||
}
|
|
||||||
section#carry .bubbles p :nth-of-type(4) {
|
|
||||||
left: 10%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media all and (max-width: 1100px) {
|
|
||||||
section#carry {
|
|
||||||
padding-left: 10vw;
|
|
||||||
padding-right: 10vw;
|
|
||||||
min-height: 115rem;
|
|
||||||
}
|
|
||||||
section#carry .title {
|
|
||||||
font-size: 4rem;
|
|
||||||
}
|
|
||||||
section#carry .description {
|
|
||||||
margin-top: 3vh;
|
|
||||||
font-size: 10rem;
|
|
||||||
}
|
|
||||||
section#carry .computer-block {
|
|
||||||
background-size: contain;
|
|
||||||
position: relative;
|
|
||||||
height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: -15rem;
|
|
||||||
}
|
|
||||||
section#carry .gradient-bg {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
section#carry .gradient-bg-yellow {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
section#carry .bubbles {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
section#carry .bubbles p {
|
|
||||||
margin-top: 2rem;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
section#carry .bubbles p :nth-of-type(1) {
|
|
||||||
left: 10%;
|
|
||||||
}
|
|
||||||
section#carry .bubbles p :nth-of-type(2) {
|
|
||||||
left: 70%;
|
|
||||||
}
|
|
||||||
section#carry .bubbles p :nth-of-type(3) {
|
|
||||||
left: 4vw;
|
|
||||||
margin-left: -60%;
|
|
||||||
}
|
|
||||||
section#carry .bubbles p :nth-of-type(4) {
|
|
||||||
left: -10%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#kyc {
|
#kyc {
|
||||||
font-family: "GT Walsheim Pro";
|
font-family: "GT Walsheim Pro";
|
||||||
background: white;
|
background: white;
|
||||||
@ -13350,24 +13100,8 @@ main .credits {
|
|||||||
left: 1124px;
|
left: 1124px;
|
||||||
top: 10vhpx;
|
top: 10vhpx;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1300px) {
|
|
||||||
#kyc .small-bubble:nth-of-type(1) {
|
|
||||||
margin-top: 14rem;
|
|
||||||
}
|
|
||||||
#kyc .bubbles .bubble {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
#kyc .bubbles .bubble:nth-of-type(1) {
|
|
||||||
margin-left: 12rem;
|
|
||||||
}
|
|
||||||
#kyc .bubbles .bubble:nth-of-type(2) {
|
|
||||||
margin-left: 5rem;
|
|
||||||
}
|
|
||||||
#kyc .bubbles .bubble:nth-of-type(3) {
|
|
||||||
margin-left: 34%;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#china {
|
#china {
|
||||||
background-color: #141373;
|
background-color: #141373;
|
||||||
height: 1060px;
|
height: 1060px;
|
||||||
@ -13610,36 +13344,7 @@ main .credits {
|
|||||||
#we_develop .rotated {
|
#we_develop .rotated {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
@media all and (max-width: 1500px) {
|
|
||||||
#we_develop .circle.circle-right {
|
|
||||||
right: 10vw;
|
|
||||||
}
|
|
||||||
#we_develop .circle.circle-left {
|
|
||||||
right: 90vw;
|
|
||||||
}
|
|
||||||
#we_develop .quick {
|
|
||||||
left: 3rem;
|
|
||||||
top: 77rem;
|
|
||||||
}
|
|
||||||
#we_develop .long_term {
|
|
||||||
margin-right: 5rem;
|
|
||||||
}
|
|
||||||
#we_develop .data {
|
|
||||||
text-align: left;
|
|
||||||
padding-left: 6rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
#we_develop .ar {
|
|
||||||
text-align: right;
|
|
||||||
padding-right: 6rem;
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media all and (max-width: 1100px) {
|
|
||||||
#we_develop .ar {
|
|
||||||
margin-top: -3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#full_creative {
|
#full_creative {
|
||||||
background: white;
|
background: white;
|
||||||
min-height: 120vh;
|
min-height: 120vh;
|
||||||
@ -13680,26 +13385,7 @@ main .credits {
|
|||||||
#full_creative img {
|
#full_creative img {
|
||||||
max-width: 80vw;
|
max-width: 80vw;
|
||||||
}
|
}
|
||||||
@media all and (max-width: 1500px) {
|
|
||||||
#full_creative {
|
|
||||||
padding-bottom: 20rem;
|
|
||||||
}
|
|
||||||
#full_creative .title {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
#full_creative .column {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
#full_creative .column p {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
#full_creative .column, #full_creative .columns {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#full_creative img {
|
|
||||||
margin-bottom: 15rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#our_team {
|
#our_team {
|
||||||
background: white;
|
background: white;
|
||||||
padding-top: 5rem;
|
padding-top: 5rem;
|
||||||
@ -13739,26 +13425,7 @@ main .credits {
|
|||||||
padding: 0 2em;
|
padding: 0 2em;
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1500px) {
|
|
||||||
#our_team {
|
|
||||||
margin-top: 30rem;
|
|
||||||
padding-bottom: 20rem;
|
|
||||||
}
|
|
||||||
#our_team img {
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
#our_team .columns, #our_team .colmumn {
|
|
||||||
display: block;
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
#our_team .name {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
#our_team .sub-category {
|
|
||||||
margin-bottom: 10rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#china_achievements {
|
#china_achievements {
|
||||||
margin-top: 30rem;
|
margin-top: 30rem;
|
||||||
background: white;
|
background: white;
|
||||||
@ -13790,6 +13457,392 @@ main .credits {
|
|||||||
#china_achievements .offset-left-columns {
|
#china_achievements .offset-left-columns {
|
||||||
margin-left: -10rem;
|
margin-left: -10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#baozun_group {
|
||||||
|
margin-top: 150px;
|
||||||
|
background: url("/img/baozun.jpg") no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
border-radius: 80px;
|
||||||
|
}
|
||||||
|
#baozun_group .title {
|
||||||
|
color: #FFFDFC;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 100px;
|
||||||
|
line-height: 90px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
padding-top: 464px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.counter-block .big-number {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 140px;
|
||||||
|
line-height: 90%;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
color: #020225;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter-block .text-description {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 150%;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #020225;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter-block img {
|
||||||
|
margin-left: 80px;
|
||||||
|
border-radius: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media all and (max-width: 1023px) {
|
||||||
|
#main_title_container h2 {
|
||||||
|
margin-top: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main_title {
|
||||||
|
top: 15rem;
|
||||||
|
height: 25vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cover .button {
|
||||||
|
top: 7vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_all h2,
|
||||||
|
#welcome h2 {
|
||||||
|
font-size: 6em;
|
||||||
|
line-height: 1em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#content_all .columns {
|
||||||
|
top: -145vh;
|
||||||
|
width: 55vw;
|
||||||
|
}
|
||||||
|
.columns {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
.column {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#open {
|
||||||
|
top: 80vh;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
flipping part
|
||||||
|
*/
|
||||||
|
#flipping_zone {
|
||||||
|
margin-top: -120vh;
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
.flip-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-container + .flip-container {
|
||||||
|
margin-top: 20vh;
|
||||||
|
}
|
||||||
|
.flip-container .container-text {
|
||||||
|
z-index: 1;
|
||||||
|
left: 33vw;
|
||||||
|
}
|
||||||
|
.flip-container .text-title {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-container .phone-container {
|
||||||
|
left: 42vw;
|
||||||
|
top: 5vh;
|
||||||
|
}
|
||||||
|
.flip-container.flip-from-left .container-text {
|
||||||
|
left: 33vw;
|
||||||
|
top: 5vh;
|
||||||
|
}
|
||||||
|
.flip-container.flip-from-left .phone-container {
|
||||||
|
left: 25vw;
|
||||||
|
top: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content-4 {
|
||||||
|
margin-top: 25vh;
|
||||||
|
}
|
||||||
|
#content-5 {
|
||||||
|
margin-top: 15vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#popover {
|
||||||
|
margin-top: 100vh;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
exemples sliders
|
||||||
|
*/
|
||||||
|
.slider-screen .text-title {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
.slider-screen .text,
|
||||||
|
.slider-screen .phone-container {
|
||||||
|
position: relative;
|
||||||
|
width: 412px;
|
||||||
|
left: 25vw;
|
||||||
|
top: 5vh;
|
||||||
|
}
|
||||||
|
.bullets {
|
||||||
|
top: 28em;
|
||||||
|
}
|
||||||
|
.arrow-left,
|
||||||
|
.arrow-right {
|
||||||
|
top: 60vh;
|
||||||
|
}
|
||||||
|
.slider-screen {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
#popover, #portfolio {
|
||||||
|
min-height: 200vh;
|
||||||
|
}
|
||||||
|
#popover .phone-container, #portfolio .phone-container{
|
||||||
|
width: 50vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
@media all and (max-width: 35em) {
|
||||||
|
#main_title {
|
||||||
|
margin-top: 5vh;
|
||||||
|
}
|
||||||
|
#main_title_container h2 {
|
||||||
|
margin-top: 15vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_all h2,
|
||||||
|
#welcome h2 {
|
||||||
|
font-size: 4rem !important;
|
||||||
|
}
|
||||||
|
#content_all .text {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
.container-text-md {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
#content_all .columns {
|
||||||
|
width: 100%;
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
.flip-container .container-text {
|
||||||
|
width: 100%;
|
||||||
|
left: 6vw;
|
||||||
|
}
|
||||||
|
.flip-container .phone-container {
|
||||||
|
position: static;
|
||||||
|
margin: 4rem auto;
|
||||||
|
}
|
||||||
|
.flip-container.flip-from-left .container-text {
|
||||||
|
left: 5vw;
|
||||||
|
}
|
||||||
|
.flip-container .phone-container {
|
||||||
|
margin-top: 7rem;
|
||||||
|
}
|
||||||
|
.flip-container .text-description {
|
||||||
|
max-width: 90vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content-4 {
|
||||||
|
margin-top: 50vh;
|
||||||
|
}
|
||||||
|
#content-5 {
|
||||||
|
margin-top: 45vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-screen .text,
|
||||||
|
.slider-screen .phone-container {
|
||||||
|
left: 5vw;
|
||||||
|
max-width: 90vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 1600px) {
|
||||||
|
section#carry {
|
||||||
|
min-height: 120rem;
|
||||||
|
}
|
||||||
|
section#carry .description {
|
||||||
|
margin-top: 3vh;
|
||||||
|
font-size: 8rem;
|
||||||
|
}
|
||||||
|
section#carry .gradient-bg {
|
||||||
|
top: -40rem;
|
||||||
|
}
|
||||||
|
section#carry .gradient-bg-yellow {
|
||||||
|
top: 10rem;
|
||||||
|
}
|
||||||
|
section#carry .computer-block {
|
||||||
|
width: 70%;
|
||||||
|
height: 1080px;
|
||||||
|
left: 0;
|
||||||
|
top: -110em;
|
||||||
|
background-size: contain;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
section#carry .bubbles {
|
||||||
|
position: relative;
|
||||||
|
left: -5vw;
|
||||||
|
}
|
||||||
|
section#carry .bubbles p :nth-of-type(1) {
|
||||||
|
top: -75vh;
|
||||||
|
}
|
||||||
|
section#carry .bubbles p :nth-of-type(2) {
|
||||||
|
left: 70%;
|
||||||
|
}
|
||||||
|
section#carry .bubbles p :nth-of-type(3) {
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
section#carry .bubbles p :nth-of-type(4) {
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media all and (max-width: 1100px) {
|
||||||
|
section#carry {
|
||||||
|
padding-left: 10vw;
|
||||||
|
padding-right: 10vw;
|
||||||
|
min-height: 115rem;
|
||||||
|
}
|
||||||
|
section#carry .title {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
section#carry .description {
|
||||||
|
margin-top: 3vh;
|
||||||
|
font-size: 10rem;
|
||||||
|
}
|
||||||
|
section#carry .computer-block {
|
||||||
|
background-size: contain;
|
||||||
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: -15rem;
|
||||||
|
}
|
||||||
|
section#carry .gradient-bg {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
section#carry .gradient-bg-yellow {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
section#carry .bubbles {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
section#carry .bubbles p {
|
||||||
|
margin-top: 2rem;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
section#carry .bubbles p :nth-of-type(1) {
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
section#carry .bubbles p :nth-of-type(2) {
|
||||||
|
left: 70%;
|
||||||
|
}
|
||||||
|
section#carry .bubbles p :nth-of-type(3) {
|
||||||
|
left: 4vw;
|
||||||
|
margin-left: -60%;
|
||||||
|
}
|
||||||
|
section#carry .bubbles p :nth-of-type(4) {
|
||||||
|
left: -10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 1300px) {
|
||||||
|
#kyc .small-bubble:nth-of-type(1) {
|
||||||
|
margin-top: 14rem;
|
||||||
|
}
|
||||||
|
#kyc .bubbles .bubble {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
#kyc .bubbles .bubble:nth-of-type(1) {
|
||||||
|
margin-left: 12rem;
|
||||||
|
}
|
||||||
|
#kyc .bubbles .bubble:nth-of-type(2) {
|
||||||
|
margin-left: 5rem;
|
||||||
|
}
|
||||||
|
#kyc .bubbles .bubble:nth-of-type(3) {
|
||||||
|
margin-left: 34%;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 1500px) {
|
||||||
|
#we_develop .circle.circle-right {
|
||||||
|
right: 10vw;
|
||||||
|
}
|
||||||
|
#we_develop .circle.circle-left {
|
||||||
|
right: 90vw;
|
||||||
|
}
|
||||||
|
#we_develop .quick {
|
||||||
|
left: 3rem;
|
||||||
|
top: 77rem;
|
||||||
|
}
|
||||||
|
#we_develop .long_term {
|
||||||
|
margin-right: 5rem;
|
||||||
|
}
|
||||||
|
#we_develop .data {
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 6rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
#we_develop .ar {
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 6rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media all and (max-width: 1100px) {
|
||||||
|
#we_develop .ar {
|
||||||
|
margin-top: -3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 1500px) {
|
||||||
|
#full_creative {
|
||||||
|
padding-bottom: 20rem;
|
||||||
|
}
|
||||||
|
#full_creative .title {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
#full_creative .column {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
#full_creative .column p {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
#full_creative .column, #full_creative .columns {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#full_creative img {
|
||||||
|
margin-bottom: 15rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1500px) {
|
||||||
|
#our_team {
|
||||||
|
margin-top: 30rem;
|
||||||
|
padding-bottom: 20rem;
|
||||||
|
}
|
||||||
|
#our_team img {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
#our_team .columns, #our_team .colmumn {
|
||||||
|
display: block;
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
#our_team .name {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
#our_team .sub-category {
|
||||||
|
margin-bottom: 10rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@media screen and (max-width: 1500px) {
|
@media screen and (max-width: 1500px) {
|
||||||
#china_achievements {
|
#china_achievements {
|
||||||
margin-top: 895vw;
|
margin-top: 895vw;
|
||||||
@ -13819,22 +13872,7 @@ main .credits {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#baozun_group {
|
|
||||||
margin-top: 150px;
|
|
||||||
background: url("/img/baozun.jpg") no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
border-radius: 80px;
|
|
||||||
}
|
|
||||||
#baozun_group .title {
|
|
||||||
color: #FFFDFC;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 100px;
|
|
||||||
line-height: 90px;
|
|
||||||
text-align: center;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
padding-top: 464px;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1500px) {
|
@media screen and (max-width: 1500px) {
|
||||||
#baozun_group {
|
#baozun_group {
|
||||||
margin-top: 605vw;
|
margin-top: 605vw;
|
||||||
@ -13845,26 +13883,3 @@ main .credits {
|
|||||||
margin-top: 650vw;
|
margin-top: 650vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.counter-block .big-number {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 140px;
|
|
||||||
line-height: 90%;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
color: #020225;
|
|
||||||
}
|
|
||||||
|
|
||||||
.counter-block .text-description {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 150%;
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: #020225;
|
|
||||||
}
|
|
||||||
|
|
||||||
.counter-block img {
|
|
||||||
margin-left: 80px;
|
|
||||||
border-radius: 80px;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -10,20 +10,21 @@ let enable_animations = false
|
|||||||
enable_animations = true
|
enable_animations = true
|
||||||
|
|
||||||
const rotateYCard = '200deg'
|
const rotateYCard = '200deg'
|
||||||
const offsetCard = '-=100'
|
const offsetCard = '10'
|
||||||
|
|
||||||
function animateCard (id, side) {
|
function animateCard (id, side) {
|
||||||
|
|
||||||
|
console.log('animateCard', id, side, offsetCard)
|
||||||
const fromObject = {
|
const fromObject = {
|
||||||
rotateY: rotateYCard,
|
rotateY: rotateYCard,
|
||||||
side: offsetCard
|
// side: offsetCard
|
||||||
}
|
}
|
||||||
|
|
||||||
let toObject = {
|
let toObject = {
|
||||||
rotateY: 0,
|
rotateY: 0,
|
||||||
duration: 0.2,
|
duration: 0.2,
|
||||||
ease: 'easeInOut',
|
ease: 'easeInOut',
|
||||||
side: 0,
|
// side: 1,
|
||||||
scrollTrigger: {
|
scrollTrigger: {
|
||||||
trigger: '#content-' + id + ' .flip-handle',
|
trigger: '#content-' + id + ' .flip-handle',
|
||||||
start: 'top 80%',
|
start: 'top 80%',
|
||||||
@ -31,7 +32,8 @@ function animateCard (id, side) {
|
|||||||
markers: development_debug,
|
markers: development_debug,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// toObject[side] = offsetCard;
|
fromObject[side] = 0;
|
||||||
|
toObject[side] = offsetCard;
|
||||||
|
|
||||||
gsap.fromTo('#content-' + id, fromObject,
|
gsap.fromTo('#content-' + id, fromObject,
|
||||||
toObject)
|
toObject)
|
||||||
@ -79,7 +81,7 @@ if (enable_animations) {
|
|||||||
trigger: '#unlock_white',
|
trigger: '#unlock_white',
|
||||||
delay: 1,
|
delay: 1,
|
||||||
scrub:2,
|
scrub:2,
|
||||||
start: '+=50% 80%'
|
start: '+50% 80%'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -94,16 +96,16 @@ if (enable_animations) {
|
|||||||
},
|
},
|
||||||
keyframes: [
|
keyframes: [
|
||||||
{
|
{
|
||||||
top: '-=50',
|
top: '-50',
|
||||||
width: '100vw',
|
width: '100vw',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
top: '-=50',
|
top: '-50',
|
||||||
width: "-=5vw",
|
width: "-5vw",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
top: '-=100',
|
top: '-100',
|
||||||
width: '-=40vw',
|
width: '-40vw',
|
||||||
}]
|
}]
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -115,7 +117,7 @@ if (enable_animations) {
|
|||||||
{
|
{
|
||||||
top: 500,
|
top: 500,
|
||||||
duration: 1,
|
duration: 1,
|
||||||
opacity: 0.5,
|
opacity: 0,
|
||||||
scrollTrigger: {
|
scrollTrigger: {
|
||||||
trigger: '#cover',
|
trigger: '#cover',
|
||||||
scrub: 1,
|
scrub: 1,
|
||||||
@ -126,7 +128,7 @@ if (enable_animations) {
|
|||||||
gsap.to('#phone-watches-1',
|
gsap.to('#phone-watches-1',
|
||||||
{
|
{
|
||||||
left: 500,
|
left: 500,
|
||||||
top: (531 - 400),
|
top: -200,
|
||||||
scale: 0.8,
|
scale: 0.8,
|
||||||
duration: 1.5,
|
duration: 1.5,
|
||||||
ease: 'sine',
|
ease: 'sine',
|
||||||
@ -179,24 +181,10 @@ if (enable_animations) {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
gsap.to('#phone-watches-4',
|
|
||||||
{
|
|
||||||
left: '50vw',
|
|
||||||
top: -10,
|
|
||||||
scale: 0.5,
|
|
||||||
duration: 3,
|
|
||||||
ease: 'sine',
|
|
||||||
scrollTrigger: {
|
|
||||||
trigger: '#welcome',
|
|
||||||
scrub: 2,
|
|
||||||
markers: development_debug,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
gsap.fromTo('#content_first',
|
gsap.fromTo('#content_first',
|
||||||
{
|
{
|
||||||
scale: 0.5,
|
scale: 0.5,
|
||||||
opacity: 0.5,
|
opacity: 0.15,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
@ -213,7 +201,7 @@ if (enable_animations) {
|
|||||||
{
|
{
|
||||||
scale: 0.8,
|
scale: 0.8,
|
||||||
left: -50,
|
left: -50,
|
||||||
opacity: 0.5,
|
opacity: 0.15,
|
||||||
top: -20,
|
top: -20,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -234,7 +222,7 @@ if (enable_animations) {
|
|||||||
gsap.fromTo('#content_all_img',
|
gsap.fromTo('#content_all_img',
|
||||||
{
|
{
|
||||||
scale: 1,
|
scale: 1,
|
||||||
left: "-=100"
|
left: "-100"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
scale: 1.1,
|
scale: 1.1,
|
||||||
@ -252,7 +240,7 @@ if (enable_animations) {
|
|||||||
{
|
{
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
scale: 1,
|
scale: 1,
|
||||||
bottom: '-=100vh',
|
bottom: '-100vh',
|
||||||
height: '10rem',
|
height: '10rem',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user