.u-section-1 { background-image: url("../images/web-15.png"); background-repeat: no-repeat; background-position: 50% 50%; min-height: 100vh; } .u-section-1 .u-image-1 { width: 284px; height: 284px; margin: 51px calc(((100% - 1140px) / 2) + 20px) 0 auto; } .u-section-1 .u-image-2 { width: 74px; height: 74px; margin: -23px calc(((100% - 1140px) / 2) + 125px) 0 auto; } .u-section-1 .u-image-3 { width: 143px; height: 143px; margin: -225px auto 0 calc(((100% - 1140px) / 2) + 177px); } .u-section-1 .u-btn-1 { background-image: none; border-style: solid; margin: -101px calc(((100% - 1140px) / 2) + 330px) 0 auto; padding: 0; } .u-section-1 .u-image-4 { width: 74px; height: 74px; margin: 56px auto 0 calc(((100% - 1140px) / 2) + 37px); } .u-section-1 .u-image-5 { width: 381px; height: 134px; margin: 5px auto 0; } .u-section-1 .u-image-6 { width: 143px; height: 143px; margin: -151px auto 0 calc(((100% - 1140px) / 2) + 241px); } .u-section-1 .u-image-7 { width: 251px; height: 251px; margin: 72px calc(((100% - 1140px) / 2) + 203px) 0 auto; } .u-section-1 .u-image-8 { width: 251px; height: 250px; margin: -234px calc(((100% - 1140px) / 2)) 0 auto; } .u-section-1 .u-image-9 { width: 249px; height: 249px; margin: -410px calc(((100% - 1140px) / 2) + 95px) 0 auto; } .u-section-1 .u-text-1 { font-weight: 800; font-size: 2.25rem; margin: -170px auto 0; } .u-section-1 .u-image-10 { width: 143px; height: 143px; margin: 35px auto 0 calc(((100% - 1140px) / 2) + 73px); } .u-section-1 .u-image-11 { width: 284px; height: 284px; margin: -150px auto 50px calc(((100% - 1140px) / 2) + 171px); } @media (max-width: 1199px) { .u-section-1 { background-size: cover; } .u-section-1 .u-image-1 { --animation-custom_in-translate_x: 0px; --animation-custom_in-translate_y: 0px; --animation-custom_in-opacity: 1; --animation-custom_in-rotate: 360deg; --animation-custom_in-scale: 1; width: 134px; height: 134px; margin-top: 56px; margin-right: calc(((100% - 940px) / 2) + -11px); } .u-section-1 .u-image-2 { margin-top: 619px; margin-right: calc(((100% - 940px) / 2) + -28px); } .u-section-1 .u-image-3 { margin-top: -854px; margin-left: calc(((100% - 940px) / 2) + 14px); } .u-section-1 .u-btn-1 { margin-top: -243px; margin-right: calc(((100% - 940px) / 2) + 130px); } .u-section-1 .u-image-4 { margin-top: 207px; margin-left: calc(((100% - 940px) / 2) + -17px); } .u-section-1 .u-image-5 { width: 305px; height: 107px; margin-top: -218px; margin-left: calc(((100% - 940px) / 2) + 379px); } .u-section-1 .u-image-6 { margin-top: 0; margin-left: calc(((100% - 940px) / 2) + -99px); } .u-section-1 .u-image-7 { width: 127px; height: 127px; margin-top: -29px; margin-right: calc(((100% - 940px) / 2) + 203px); margin-left: calc(((100% - 940px) / 2) + -17px); } .u-section-1 .u-image-8 { width: 143px; height: 143px; margin-top: 414px; margin-right: calc(((100% - 940px) / 2) + -32px); } .u-section-1 .u-image-9 { width: 139px; height: 139px; margin-top: 16px; margin-right: calc(((100% - 940px) / 2) + -28px); } .u-section-1 .u-text-1 { margin-top: -662px; margin-left: calc(((100% - 940px) / 2) + 316px); } .u-section-1 .u-image-10 { margin-top: 494px; margin-left: calc(((100% - 940px) / 2) + 22px); } .u-section-1 .u-image-11 { --animation-custom_in-translate_x: 0px; --animation-custom_in-translate_y: 0px; --animation-custom_in-opacity: 0; --animation-custom_in-rotate: 0deg; --animation-custom_in-scale: 0.3; animation-duration: 120000ms; margin-top: 108px; margin-bottom: 60px; margin-left: calc(((100% - 940px) / 2) + -114px); } } @media (max-width: 1200px) { .u-section-1 .u-image-1 { margin-top: 52px; margin-right: calc(((100% - 720px) / 2) + 54px); } .u-section-1 .u-image-2 { margin-top: 482px; margin-right: auto; margin-left: calc(((100% - 720px) / 2) + 138px); } .u-section-1 .u-image-3 { margin-top: -690px; margin-left: calc(((100% - 720px) / 2) + 57px); } .u-section-1 .u-btn-1 { margin-top: -266px; margin-right: calc(((100% - 720px) / 2)); } .u-section-1 .u-image-4 { margin-top: 370px; margin-left: calc(((100% - 720px) / 2)); } .u-section-1 .u-image-5 { margin-top: -129px; margin-left: auto; } .u-section-1 .u-image-6 { margin-left: calc(((100% - 720px) / 2) + 172px); } .u-section-1 .u-image-7 { margin-top: 231px; margin-right: calc(((100% - 720px) / 2) + 269px); margin-left: auto; } .u-section-1 .u-image-8 { margin-top: -233px; margin-right: auto; margin-left: calc(((100% - 720px) / 2) + 52px); } .u-section-1 .u-image-9 { margin-top: -167px; margin-right: calc(((100% - 720px) / 2) + 27px); } .u-section-1 .u-text-1 { width: auto; margin-top: -209px; margin-left: auto; margin-bottom: 60px; } .u-section-1 .u-image-10 { margin-top: 122px; margin-bottom: 60px; margin-left: calc(((100% - 720px) / 2) + 242px); } .u-section-1 .u-image-11 { margin-left: calc(((100% - 720px) / 2) + -114px); } } @media (max-width: 720px) { .u-section-1 .u-image-1 { margin-right: calc(((100% - 540px) / 2) + 54px); } .u-section-1 .u-image-2 { margin-top: 273px; margin-right: calc(((100% - 540px) / 2) + -12px); margin-left: auto; } .u-section-1 .u-image-3 { margin-top: -173px; margin-left: calc(((100% - 540px) / 2)); } .u-section-1 .u-btn-1 { margin-top: -442px; margin-right: calc(((100% - 540px) / 2)); } .u-section-1 .u-image-4 { margin-top: 236px; margin-left: calc(((100% - 540px) / 2) + -17px); } .u-section-1 .u-image-6 { margin-left: calc(((100% - 540px) / 2) + -99px); } .u-section-1 .u-image-7 { width: 50px; height: 50px; margin-top: -161px; margin-right: auto; margin-left: calc(((100% - 540px) / 2) + 22px); } .u-section-1 .u-image-8 { width: 104px; height: 104px; margin-top: 281px; margin-left: calc(((100% - 540px) / 2) + 3px); } .u-section-1 .u-image-9 { width: 62px; height: 62px; margin-top: -85px; margin-right: calc(((100% - 540px) / 2) + 103px); } .u-section-1 .u-text-1 { font-size: 1rem; margin-top: -236px; margin-bottom: 0; } .u-section-1 .u-image-10 { margin-top: 497px; margin-left: calc(((100% - 540px) / 2) + 22px); } .u-section-1 .u-image-11 { margin-left: calc(((100% - 540px) / 2) + -114px); } } @media (max-width: 575px) { .u-section-1 .u-image-1 { margin-right: calc(((100% - 340px) / 2) + 54px); } .u-section-1 .u-image-2 { margin-top: 454px; margin-right: auto; margin-left: calc(((100% - 340px) / 2) + 18px); } .u-section-1 .u-image-3 { margin-top: -251px; margin-left: calc(((100% - 340px) / 2) + -38px); } .u-section-1 .u-btn-1 { margin-top: -571px; margin-right: calc(((100% - 340px) / 2)); } .u-section-1 .u-image-4 { margin-top: 146px; margin-left: calc(((100% - 340px) / 2) + -17px); } .u-section-1 .u-image-5 { margin-top: 9px; } .u-section-1 .u-image-6 { margin-left: calc(((100% - 340px) / 2) + -99px); } .u-section-1 .u-image-7 { margin-top: 203px; margin-right: calc(((100% - 340px) / 2) + -28px); margin-left: auto; } .u-section-1 .u-image-8 { margin-top: 308px; margin-right: calc(((100% - 340px) / 2) + -32px); margin-left: calc(((100% - 340px) / 2) + 52px); } .u-section-1 .u-image-9 { margin-top: -1091px; margin-right: auto; margin-left: calc(((100% - 340px) / 2) + -17px); } .u-section-1 .u-text-1 { margin-top: 373px; margin-bottom: 60px; } .u-section-1 .u-image-10 { margin-top: 472px; margin-left: calc(((100% - 340px) / 2) + 22px); } .u-section-1 .u-image-11 { margin-left: calc(((100% - 340px) / 2) + -114px); } }