刘宇飞
6e0a1fbcbb
Includes scratch-gui, scratch-vm, scratch-blocks, scratch-render, scratch-l10n, and deployment config. Co-authored-by: Cursor <cursoragent@cursor.com>
2702 lines
69 KiB
CSS
2702 lines
69 KiB
CSS
body {
|
|
background-image: url("../images/backgroundimage-01-01.png");
|
|
background-repeat: repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.u-section-1 {
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
transition: max-height 1.5s ease-out;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 收缩状态 */
|
|
.section-collapsed {
|
|
max-height: 0px !important;
|
|
}
|
|
|
|
/* 展开状态 */
|
|
.section-expanded {
|
|
max-height: 495px !important;
|
|
/* 根据实际内容高度调整 */
|
|
}
|
|
|
|
.u-section-1 .u-sheet-1 {
|
|
min-height: 504px;
|
|
}
|
|
|
|
.u-section-1 .u-gallery-1 {
|
|
height: 504px;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.u-section-1 .u-carousel-indicators-1 {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.u-section-1 .u-carousel-item-1 {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.u-section-1 .u-over-slide-1 {
|
|
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
|
|
padding: 30px;
|
|
}
|
|
|
|
.u-section-1 .u-carousel-item-2 {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.u-section-1 .u-over-slide-2 {
|
|
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
|
|
padding: 30px;
|
|
}
|
|
|
|
.u-section-1 .u-carousel-control-1 {
|
|
position: absolute;
|
|
left: 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.u-section-1 .u-carousel-control-2 {
|
|
position: absolute;
|
|
right: 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.u-section-2 .u-image-1 {
|
|
min-height: 492px;
|
|
background-image: url("../images/web-56.png");
|
|
background-position: 50% 50%;
|
|
}
|
|
|
|
.u-section-2 .u-list-1 {
|
|
width: 1104px;
|
|
margin: 60px auto;
|
|
}
|
|
|
|
.u-section-2 .u-repeater-1 {
|
|
min-height: 337px;
|
|
grid-template-columns: repeat(4, calc(25% - 27px));
|
|
grid-auto-columns: calc(25% - 27px);
|
|
padding-top: 35px;
|
|
padding-bottom: 35px;
|
|
padding-left: 25px;
|
|
padding-right: 25px;
|
|
grid-gap: 36px;
|
|
}
|
|
|
|
.u-section-2 .u-list-item-1 {
|
|
background-repeat: no-repeat;
|
|
--radius: 30px;
|
|
background-image: linear-gradient(to bottom, #31cdee, #0962a4);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
background-position: 50% 50%;
|
|
--animation-custom_in-translate_x: -200px;
|
|
--animation-custom_in-translate_y: 0px;
|
|
--animation-custom_in-opacity: 0;
|
|
--animation-custom_in-rotate: 0deg;
|
|
--animation-custom_in-scale: 1;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout-1 {
|
|
padding: 10px;
|
|
}
|
|
|
|
.u-section-2 .u-image-2 {
|
|
width: 153px;
|
|
height: 64px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: 9px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-3 {
|
|
width: 131px;
|
|
height: 96px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: 32px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-4 {
|
|
width: 36px;
|
|
height: 38px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -100px 171px 0 22px;
|
|
}
|
|
|
|
.u-section-2 .u-image-5 {
|
|
width: 20px;
|
|
height: 19px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: 22px 179px 0 30px;
|
|
}
|
|
|
|
.u-section-2 .u-image-6 {
|
|
width: 35px;
|
|
height: 40px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -19px 18px 0 176px;
|
|
}
|
|
|
|
.u-section-2 .u-image-7 {
|
|
width: 68px;
|
|
height: 41px;
|
|
object-position: 50% 50%;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -142px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-8 {
|
|
width: 39px;
|
|
height: 41px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -4px 18px 0 172px;
|
|
}
|
|
|
|
.u-section-2 .u-image-9 {
|
|
width: 153px;
|
|
height: 107px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -43px 36px 0 auto;
|
|
}
|
|
|
|
.u-section-2 .u-image-10 {
|
|
width: 114px;
|
|
height: 71px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -66px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-11 {
|
|
width: 41px;
|
|
height: 60px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -106px 89px 0 auto;
|
|
}
|
|
|
|
.u-section-2 .u-btn-1 {
|
|
background-image: linear-gradient(#ff6474, #e01c4c);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
--radius: 50px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
margin: 70px auto 0;
|
|
padding: 10px 28px 11px 27px;
|
|
}
|
|
|
|
.u-section-2 .u-btn-2 {
|
|
background-image: linear-gradient(#ff6474, #e01c4c);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
--radius: 50px;
|
|
font-size: 0.66rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
margin: 8px auto 0;
|
|
padding: 10px 25px 11px 23px;
|
|
}
|
|
|
|
.u-section-2 .u-btn-cpp {
|
|
background-image: linear-gradient(#ff6474, #e01c4c);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
--radius: 50px;
|
|
font-size: 0.66rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
margin: 8px auto 0;
|
|
padding: 10px 25px 11px 23px;
|
|
}
|
|
|
|
/* 编程闯关按钮的特殊样式覆盖 */
|
|
.u-section-2 .programming-btn-top.u-btn-1,
|
|
.u-section-2 .programming-btn-bottom.u-btn-2,
|
|
.u-section-2 .programming-btn-bottom.u-btn-cpp {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.u-section-2 .u-list-item-2 {
|
|
background-repeat: no-repeat;
|
|
--radius: 30px;
|
|
background-image: linear-gradient(to bottom, #fcc75a, #ee6622);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
background-position: 50% 50%;
|
|
--animation-custom_in-translate_x: -200px;
|
|
--animation-custom_in-translate_y: 0px;
|
|
--animation-custom_in-opacity: 0;
|
|
--animation-custom_in-rotate: 0deg;
|
|
--animation-custom_in-scale: 1;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout-2 {
|
|
padding: 10px;
|
|
}
|
|
|
|
.u-section-2 .u-image-12 {
|
|
width: 153px;
|
|
height: 64px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: 9px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-13 {
|
|
width: 131px;
|
|
height: 96px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: 32px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-14 {
|
|
width: 36px;
|
|
height: 38px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -100px 171px 0 22px;
|
|
}
|
|
|
|
.u-section-2 .u-image-15 {
|
|
width: 20px;
|
|
height: 19px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: 22px 179px 0 30px;
|
|
}
|
|
|
|
.u-section-2 .u-image-16 {
|
|
width: 35px;
|
|
height: 40px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -19px 18px 0 176px;
|
|
}
|
|
|
|
.u-section-2 .u-image-17 {
|
|
width: 68px;
|
|
height: 41px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -142px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-18 {
|
|
width: 39px;
|
|
height: 41px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -4px 18px 0 172px;
|
|
}
|
|
|
|
.u-section-2 .u-image-19 {
|
|
width: 153px;
|
|
height: 107px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -43px 36px 0 auto;
|
|
}
|
|
|
|
.u-section-2 .u-image-20 {
|
|
width: 114px;
|
|
height: 71px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -66px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-21 {
|
|
width: 41px;
|
|
height: 60px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -106px 89px 0 auto;
|
|
}
|
|
|
|
.u-section-2 .u-btn-3 {
|
|
background-image: linear-gradient(#31cdee, #0962a4);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
--radius: 50px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
margin: 70px auto 0;
|
|
padding: 10px 28px 11px 27px;
|
|
}
|
|
|
|
.u-section-2 .u-btn-4 {
|
|
background-image: linear-gradient(#31cdee, #0962a4);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
--radius: 50px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
margin: 8px auto 0;
|
|
padding: 10px 25px 11px 23px;
|
|
}
|
|
|
|
.u-section-2 .u-list-item-3 {
|
|
background-repeat: no-repeat;
|
|
--radius: 30px;
|
|
background-image: linear-gradient(to bottom, #316a95, #112e4d);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
background-position: 50% 50%;
|
|
--animation-custom_in-translate_x: -200px;
|
|
--animation-custom_in-translate_y: 0px;
|
|
--animation-custom_in-opacity: 0;
|
|
--animation-custom_in-rotate: 0deg;
|
|
--animation-custom_in-scale: 1;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout-3 {
|
|
padding: 10px;
|
|
}
|
|
|
|
.u-section-2 .u-image-22 {
|
|
width: 153px;
|
|
height: 64px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: 9px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-23 {
|
|
width: 131px;
|
|
height: 96px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: 32px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-24 {
|
|
width: 36px;
|
|
height: 38px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -100px 171px 0 22px;
|
|
}
|
|
|
|
.u-section-2 .u-image-25 {
|
|
width: 20px;
|
|
height: 19px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: 22px 179px 0 30px;
|
|
}
|
|
|
|
.u-section-2 .u-image-26 {
|
|
width: 35px;
|
|
height: 40px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -19px 18px 0 176px;
|
|
}
|
|
|
|
.u-section-2 .u-image-27 {
|
|
width: 68px;
|
|
height: 41px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -142px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-28 {
|
|
width: 39px;
|
|
height: 41px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -4px 18px 0 172px;
|
|
}
|
|
|
|
.u-section-2 .u-image-29 {
|
|
width: 153px;
|
|
height: 107px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -43px 36px 0 auto;
|
|
}
|
|
|
|
.u-section-2 .u-image-30 {
|
|
width: 114px;
|
|
height: 71px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -66px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-31 {
|
|
width: 41px;
|
|
height: 60px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -106px 89px 0 auto;
|
|
}
|
|
|
|
.u-section-2 .u-btn-5 {
|
|
--radius: 50px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
background-image: linear-gradient(#00ff00, #009245);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
margin: 70px auto 0;
|
|
padding: 10px 28px 11px 27px;
|
|
}
|
|
|
|
.u-section-2 .u-btn-6 {
|
|
background-image: linear-gradient(#00ff00, #009245);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
--radius: 50px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
margin: 8px auto 0;
|
|
padding: 10px 25px 11px 23px;
|
|
}
|
|
|
|
.u-section-2 .u-list-item-4 {
|
|
background-repeat: no-repeat;
|
|
--radius: 30px;
|
|
background-image: linear-gradient(to bottom, #ff6474, #e01c4c);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
background-position: 50% 50%;
|
|
--animation-custom_in-translate_x: -200px;
|
|
--animation-custom_in-translate_y: 0px;
|
|
--animation-custom_in-opacity: 0;
|
|
--animation-custom_in-rotate: 0deg;
|
|
--animation-custom_in-scale: 1;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout-4 {
|
|
padding: 10px;
|
|
}
|
|
|
|
.u-section-2 .u-image-32 {
|
|
width: 153px;
|
|
height: 64px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: 9px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-33 {
|
|
width: 131px;
|
|
height: 96px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: 32px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-34 {
|
|
width: 36px;
|
|
height: 38px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -100px 171px 0 22px;
|
|
}
|
|
|
|
.u-section-2 .u-image-35 {
|
|
width: 20px;
|
|
height: 19px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: 22px 179px 0 30px;
|
|
}
|
|
|
|
.u-section-2 .u-image-36 {
|
|
width: 35px;
|
|
height: 40px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -19px 18px 0 176px;
|
|
}
|
|
|
|
.u-section-2 .u-image-37 {
|
|
width: 68px;
|
|
height: 41px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -142px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-38 {
|
|
width: 39px;
|
|
height: 41px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -4px 18px 0 172px;
|
|
}
|
|
|
|
.u-section-2 .u-image-39 {
|
|
width: 153px;
|
|
height: 107px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -43px 36px 0 auto;
|
|
}
|
|
|
|
.u-section-2 .u-image-40 {
|
|
width: 114px;
|
|
height: 71px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -66px auto 0;
|
|
}
|
|
|
|
.u-section-2 .u-image-41 {
|
|
width: 41px;
|
|
height: 60px;
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
margin: -106px 89px 0 auto;
|
|
}
|
|
|
|
.u-section-2 .u-btn-7 {
|
|
background-image: linear-gradient(#fcc75a, #ee6622);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
--radius: 50px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
margin: 70px auto 0;
|
|
padding: 10px 28px 11px 27px;
|
|
}
|
|
|
|
.u-section-2 .u-btn-8 {
|
|
background-image: linear-gradient(#fcc75a, #ee6622);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
--radius: 50px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
margin: 8px auto 0;
|
|
padding: 10px 25px 11px 23px;
|
|
}
|
|
|
|
.u-section-2 .u-gallery-nav-1 {
|
|
position: absolute;
|
|
left: 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
--radius: 42px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.u-section-2 .u-gallery-nav-2 {
|
|
position: absolute;
|
|
right: 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
--radius: 42px;
|
|
padding: 5px;
|
|
}
|
|
|
|
@media (max-width: 1199px) {
|
|
.u-section-2 .u-image-1 {
|
|
transition-duration: 0.5s;
|
|
min-height: 406px;
|
|
}
|
|
|
|
.u-section-2 .u-list-1 {
|
|
width: 940px;
|
|
}
|
|
|
|
.u-section-2 .u-repeater-1 {
|
|
grid-template-columns: repeat(4, calc(25% - 12px));
|
|
grid-auto-columns: calc(25% - 12px);
|
|
grid-gap: 16px;
|
|
}
|
|
|
|
.u-section-2 .u-list-item-1 {
|
|
background-size: cover;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout-1 {
|
|
padding-left: 9px;
|
|
padding-right: 9px;
|
|
}
|
|
|
|
.u-section-2 .u-image-3 {
|
|
margin-top: 31px;
|
|
}
|
|
|
|
.u-section-2 .u-image-4 {
|
|
margin-top: -102px;
|
|
margin-right: auto;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.u-section-2 .u-image-5 {
|
|
margin-right: auto;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.u-section-2 .u-image-6 {
|
|
margin-right: auto;
|
|
margin-left: 162px;
|
|
}
|
|
|
|
.u-section-2 .u-image-7 {
|
|
margin-top: -139px;
|
|
}
|
|
|
|
.u-section-2 .u-image-8 {
|
|
margin-top: -7px;
|
|
margin-right: auto;
|
|
margin-left: 158px;
|
|
}
|
|
|
|
.u-section-2 .u-image-9 {
|
|
margin-top: -41px;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.u-section-2 .u-image-10 {
|
|
margin-top: -67px;
|
|
}
|
|
|
|
.u-section-2 .u-image-11 {
|
|
margin-top: -105px;
|
|
margin-right: 78px;
|
|
}
|
|
|
|
.u-section-2 .u-btn-1 {
|
|
margin-top: 69px;
|
|
}
|
|
|
|
.u-section-2 .u-list-item-2 {
|
|
background-size: cover;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout-2 {
|
|
padding-left: 9px;
|
|
padding-right: 9px;
|
|
}
|
|
|
|
.u-section-2 .u-image-13 {
|
|
margin-top: 31px;
|
|
}
|
|
|
|
.u-section-2 .u-image-14 {
|
|
margin-top: -102px;
|
|
margin-right: auto;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.u-section-2 .u-image-15 {
|
|
margin-right: auto;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.u-section-2 .u-image-16 {
|
|
margin-right: auto;
|
|
margin-left: 162px;
|
|
}
|
|
|
|
.u-section-2 .u-image-17 {
|
|
margin-top: -139px;
|
|
}
|
|
|
|
.u-section-2 .u-image-18 {
|
|
margin-top: -7px;
|
|
margin-right: auto;
|
|
margin-left: 158px;
|
|
}
|
|
|
|
.u-section-2 .u-image-19 {
|
|
margin-top: -41px;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.u-section-2 .u-image-20 {
|
|
margin-top: -67px;
|
|
}
|
|
|
|
.u-section-2 .u-image-21 {
|
|
margin-top: -105px;
|
|
margin-right: 78px;
|
|
}
|
|
|
|
.u-section-2 .u-btn-3 {
|
|
margin-top: 69px;
|
|
}
|
|
|
|
.u-section-2 .u-list-item-3 {
|
|
background-size: cover;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout-3 {
|
|
padding-left: 9px;
|
|
padding-right: 9px;
|
|
}
|
|
|
|
.u-section-2 .u-image-23 {
|
|
margin-top: 31px;
|
|
}
|
|
|
|
.u-section-2 .u-image-24 {
|
|
margin-top: -102px;
|
|
margin-right: auto;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.u-section-2 .u-image-25 {
|
|
margin-right: auto;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.u-section-2 .u-image-26 {
|
|
margin-right: auto;
|
|
margin-left: 162px;
|
|
}
|
|
|
|
.u-section-2 .u-image-27 {
|
|
margin-top: -139px;
|
|
}
|
|
|
|
.u-section-2 .u-image-28 {
|
|
margin-top: -7px;
|
|
margin-right: auto;
|
|
margin-left: 158px;
|
|
}
|
|
|
|
.u-section-2 .u-image-29 {
|
|
margin-top: -41px;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.u-section-2 .u-image-30 {
|
|
margin-top: -67px;
|
|
}
|
|
|
|
.u-section-2 .u-image-31 {
|
|
margin-top: -105px;
|
|
margin-right: 78px;
|
|
}
|
|
|
|
.u-section-2 .u-btn-5 {
|
|
margin-top: 69px;
|
|
}
|
|
|
|
.u-section-2 .u-list-item-4 {
|
|
background-size: cover;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout-4 {
|
|
padding-left: 9px;
|
|
padding-right: 9px;
|
|
}
|
|
|
|
.u-section-2 .u-image-33 {
|
|
margin-top: 31px;
|
|
}
|
|
|
|
.u-section-2 .u-image-34 {
|
|
margin-top: -102px;
|
|
margin-right: auto;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.u-section-2 .u-image-35 {
|
|
margin-right: auto;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.u-section-2 .u-image-36 {
|
|
margin-right: auto;
|
|
margin-left: 162px;
|
|
}
|
|
|
|
.u-section-2 .u-image-37 {
|
|
margin-top: -139px;
|
|
}
|
|
|
|
.u-section-2 .u-image-38 {
|
|
margin-top: -7px;
|
|
margin-right: auto;
|
|
margin-left: 158px;
|
|
}
|
|
|
|
.u-section-2 .u-image-39 {
|
|
margin-top: -41px;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.u-section-2 .u-image-40 {
|
|
margin-top: -67px;
|
|
}
|
|
|
|
.u-section-2 .u-image-41 {
|
|
margin-top: -105px;
|
|
margin-right: 78px;
|
|
}
|
|
|
|
.u-section-2 .u-btn-7 {
|
|
margin-top: 69px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.u-section-2 .u-image-1 {
|
|
min-height: 311px;
|
|
}
|
|
|
|
.u-section-2 .u-list-1 {
|
|
width: 720px;
|
|
}
|
|
|
|
.u-section-2 .u-repeater-1 {
|
|
grid-template-columns: repeat(2, calc(50% - 8px));
|
|
grid-auto-columns: calc(50% - 8px);
|
|
}
|
|
|
|
.u-section-2 .u-image-4 {
|
|
margin-top: -96px;
|
|
margin-left: 67px;
|
|
}
|
|
|
|
.u-section-2 .u-image-5 {
|
|
margin-left: 75px;
|
|
}
|
|
|
|
.u-section-2 .u-image-6 {
|
|
margin-left: 220px;
|
|
}
|
|
|
|
.u-section-2 .u-image-7 {
|
|
margin-top: -146px;
|
|
}
|
|
|
|
.u-section-2 .u-image-8 {
|
|
margin-top: 0;
|
|
margin-left: 217px;
|
|
}
|
|
|
|
.u-section-2 .u-image-9 {
|
|
margin-top: -53px;
|
|
}
|
|
|
|
.u-section-2 .u-image-10 {
|
|
margin-top: -60px;
|
|
}
|
|
|
|
.u-section-2 .u-image-11 {
|
|
margin-top: -106px;
|
|
margin-right: 138px;
|
|
}
|
|
|
|
.u-section-2 .u-btn-1 {
|
|
margin-top: 70px;
|
|
}
|
|
|
|
.u-section-2 .u-image-14 {
|
|
margin-top: -96px;
|
|
margin-left: 67px;
|
|
}
|
|
|
|
.u-section-2 .u-image-15 {
|
|
margin-left: 75px;
|
|
}
|
|
|
|
.u-section-2 .u-image-16 {
|
|
margin-left: 220px;
|
|
}
|
|
|
|
.u-section-2 .u-image-17 {
|
|
margin-top: -146px;
|
|
}
|
|
|
|
.u-section-2 .u-image-18 {
|
|
margin-top: 0;
|
|
margin-left: 217px;
|
|
}
|
|
|
|
.u-section-2 .u-image-19 {
|
|
margin-top: -53px;
|
|
}
|
|
|
|
.u-section-2 .u-image-20 {
|
|
margin-top: -60px;
|
|
}
|
|
|
|
.u-section-2 .u-image-21 {
|
|
margin-top: -106px;
|
|
margin-right: 138px;
|
|
}
|
|
|
|
.u-section-2 .u-btn-3 {
|
|
margin-top: 70px;
|
|
}
|
|
|
|
.u-section-2 .u-image-24 {
|
|
margin-top: -96px;
|
|
margin-left: 67px;
|
|
}
|
|
|
|
.u-section-2 .u-image-25 {
|
|
margin-left: 75px;
|
|
}
|
|
|
|
.u-section-2 .u-image-26 {
|
|
margin-left: 220px;
|
|
}
|
|
|
|
.u-section-2 .u-image-27 {
|
|
margin-top: -146px;
|
|
}
|
|
|
|
.u-section-2 .u-image-28 {
|
|
margin-top: 0;
|
|
margin-left: 217px;
|
|
}
|
|
|
|
.u-section-2 .u-image-29 {
|
|
margin-top: -53px;
|
|
}
|
|
|
|
.u-section-2 .u-image-30 {
|
|
margin-top: -60px;
|
|
}
|
|
|
|
.u-section-2 .u-image-31 {
|
|
margin-top: -106px;
|
|
margin-right: 138px;
|
|
}
|
|
|
|
.u-section-2 .u-btn-5 {
|
|
margin-top: 70px;
|
|
}
|
|
|
|
.u-section-2 .u-image-34 {
|
|
margin-top: -96px;
|
|
margin-left: 67px;
|
|
}
|
|
|
|
.u-section-2 .u-image-35 {
|
|
margin-left: 75px;
|
|
}
|
|
|
|
.u-section-2 .u-image-36 {
|
|
margin-left: 220px;
|
|
}
|
|
|
|
.u-section-2 .u-image-37 {
|
|
margin-top: -146px;
|
|
}
|
|
|
|
.u-section-2 .u-image-38 {
|
|
margin-top: 0;
|
|
margin-left: 217px;
|
|
}
|
|
|
|
.u-section-2 .u-image-39 {
|
|
margin-top: -53px;
|
|
}
|
|
|
|
.u-section-2 .u-image-40 {
|
|
margin-top: -60px;
|
|
}
|
|
|
|
.u-section-2 .u-image-41 {
|
|
margin-top: -106px;
|
|
margin-right: 138px;
|
|
}
|
|
|
|
.u-section-2 .u-btn-7 {
|
|
margin-top: 70px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.u-section-2 .u-image-1 {
|
|
min-height: 233px;
|
|
}
|
|
|
|
.u-section-2 .u-list-1 {
|
|
width: 540px;
|
|
}
|
|
|
|
.u-section-2 .u-repeater-1 {
|
|
grid-template-columns: 100%;
|
|
grid-auto-columns: calc(100% - 0px);
|
|
}
|
|
|
|
.u-section-2 .u-image-4 {
|
|
margin-left: 166px;
|
|
}
|
|
|
|
.u-section-2 .u-image-5 {
|
|
margin-left: 174px;
|
|
}
|
|
|
|
.u-section-2 .u-image-6 {
|
|
margin-left: 319px;
|
|
}
|
|
|
|
.u-section-2 .u-image-8 {
|
|
margin-left: 316px;
|
|
}
|
|
|
|
.u-section-2 .u-image-11 {
|
|
margin-top: -105px;
|
|
}
|
|
|
|
.u-section-2 .u-image-21 {
|
|
margin-top: -105px;
|
|
}
|
|
|
|
.u-section-2 .u-image-31 {
|
|
margin-top: -105px;
|
|
}
|
|
|
|
.u-section-2 .u-image-37 {
|
|
margin-top: -131px;
|
|
}
|
|
|
|
.u-section-2 .u-image-38 {
|
|
margin-top: -48px;
|
|
}
|
|
|
|
.u-section-2 .u-image-39 {
|
|
margin-top: -83px;
|
|
}
|
|
|
|
.u-section-2 .u-image-40 {
|
|
margin-top: -27px;
|
|
}
|
|
|
|
.u-section-2 .u-image-41 {
|
|
margin-top: -103px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
.u-section-2 .u-image-1 {
|
|
min-height: 147px;
|
|
}
|
|
|
|
.u-section-2 .u-list-1 {
|
|
width: 340px;
|
|
}
|
|
|
|
.u-section-2 .u-repeater-1 {
|
|
grid-auto-columns: 100%;
|
|
}
|
|
|
|
.u-section-2 .u-image-4 {
|
|
margin-left: 66px;
|
|
}
|
|
|
|
.u-section-2 .u-image-5 {
|
|
margin-left: 74px;
|
|
}
|
|
|
|
.u-section-2 .u-image-6 {
|
|
margin-left: 219px;
|
|
}
|
|
|
|
.u-section-2 .u-image-8 {
|
|
margin-left: 216px;
|
|
}
|
|
}
|
|
|
|
.u-section-2 .u-image-17,
|
|
.u-section-2 .u-image-17:before,
|
|
.u-section-2 .u-image-17>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-17 {
|
|
transform: translateX(0px) translateY(20px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-17 {
|
|
transform: translateX(0px) translateY(20px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-7,
|
|
.u-section-2 .u-image-7:before,
|
|
.u-section-2 .u-image-7>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-7 {
|
|
transform: translateX(0px) translateY(20px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-7 {
|
|
transform: translateX(0px) translateY(20px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-27,
|
|
.u-section-2 .u-image-27:before,
|
|
.u-section-2 .u-image-27>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-27 {
|
|
transform: translateX(0px) translateY(20px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-27 {
|
|
transform: translateX(0px) translateY(20px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-37,
|
|
.u-section-2 .u-image-37:before,
|
|
.u-section-2 .u-image-37>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-37 {
|
|
transform: translateX(0px) translateY(20px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-37 {
|
|
transform: translateX(0px) translateY(20px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-3,
|
|
.u-section-2 .u-image-3:before,
|
|
.u-section-2 .u-image-3>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-3 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-3 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-13,
|
|
.u-section-2 .u-image-13:before,
|
|
.u-section-2 .u-image-13>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-13 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-13 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-23,
|
|
.u-section-2 .u-image-23:before,
|
|
.u-section-2 .u-image-23>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-23 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-23 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-33,
|
|
.u-section-2 .u-image-33:before,
|
|
.u-section-2 .u-image-33>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-33 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-33 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-4,
|
|
.u-section-2 .u-image-4:before,
|
|
.u-section-2 .u-image-4>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-4 {
|
|
transform: translateX(10px) translateY(10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-4 {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-4 {
|
|
transform: translateX(10px) translateY(10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-4 {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-14,
|
|
.u-section-2 .u-image-14:before,
|
|
.u-section-2 .u-image-14>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-14 {
|
|
transform: translateX(10px) translateY(10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-14 {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-14 {
|
|
transform: translateX(10px) translateY(10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-14 {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-24,
|
|
.u-section-2 .u-image-24:before,
|
|
.u-section-2 .u-image-24>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-24 {
|
|
transform: translateX(10px) translateY(10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-24 {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-24 {
|
|
transform: translateX(10px) translateY(10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-24 {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-34,
|
|
.u-section-2 .u-image-34:before,
|
|
.u-section-2 .u-image-34>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-34 {
|
|
transform: translateX(10px) translateY(10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-34 {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-34 {
|
|
transform: translateX(10px) translateY(10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-34 {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-5,
|
|
.u-section-2 .u-image-5:before,
|
|
.u-section-2 .u-image-5>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-5 {
|
|
transform: translateX(10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-5 {
|
|
transform: translateX(10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-15,
|
|
.u-section-2 .u-image-15:before,
|
|
.u-section-2 .u-image-15>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-15 {
|
|
transform: translateX(10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-15 {
|
|
transform: translateX(10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-25,
|
|
.u-section-2 .u-image-25:before,
|
|
.u-section-2 .u-image-25>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-25 {
|
|
transform: translateX(10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-25 {
|
|
transform: translateX(10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-35,
|
|
.u-section-2 .u-image-35:before,
|
|
.u-section-2 .u-image-35>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-35 {
|
|
transform: translateX(10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-35 {
|
|
transform: translateX(10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-8,
|
|
.u-section-2 .u-image-8:before,
|
|
.u-section-2 .u-image-8>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-8 {
|
|
transform: translateX(-15px) translateY(15px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-8 {
|
|
transform: translateX(-15px) translateY(15px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-18,
|
|
.u-section-2 .u-image-18:before,
|
|
.u-section-2 .u-image-18>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-18 {
|
|
transform: translateX(-15px) translateY(15px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-18 {
|
|
transform: translateX(-15px) translateY(15px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-28,
|
|
.u-section-2 .u-image-28:before,
|
|
.u-section-2 .u-image-28>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-28 {
|
|
transform: translateX(-15px) translateY(15px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-28 {
|
|
transform: translateX(-15px) translateY(15px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-38,
|
|
.u-section-2 .u-image-38:before,
|
|
.u-section-2 .u-image-38>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-38 {
|
|
transform: translateX(-15px) translateY(15px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-38 {
|
|
transform: translateX(-15px) translateY(15px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-6,
|
|
.u-section-2 .u-image-6:before,
|
|
.u-section-2 .u-image-6>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-6 {
|
|
transform: translateX(-10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-6 {
|
|
transform: translateX(-10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-16,
|
|
.u-section-2 .u-image-16:before,
|
|
.u-section-2 .u-image-16>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-16 {
|
|
transform: translateX(-10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-16 {
|
|
transform: translateX(-10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-26,
|
|
.u-section-2 .u-image-26:before,
|
|
.u-section-2 .u-image-26>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-26 {
|
|
transform: translateX(-10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-26 {
|
|
transform: translateX(-10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-36,
|
|
.u-section-2 .u-image-36:before,
|
|
.u-section-2 .u-image-36>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-36 {
|
|
transform: translateX(-10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-36 {
|
|
transform: translateX(-10px) translateY(-10px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-2,
|
|
.u-section-2 .u-image-2:before,
|
|
.u-section-2 .u-image-2>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-2 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-2 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-12,
|
|
.u-section-2 .u-image-12:before,
|
|
.u-section-2 .u-image-12>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-12 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-12 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-22,
|
|
.u-section-2 .u-image-22:before,
|
|
.u-section-2 .u-image-22>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-22 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-22 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-32,
|
|
.u-section-2 .u-image-32:before,
|
|
.u-section-2 .u-image-32>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-32 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-32 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-29,
|
|
.u-section-2 .u-image-29:before,
|
|
.u-section-2 .u-image-29>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-29 {
|
|
transform: scale(1.6) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-29 {
|
|
transform: scale(1.6) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-9,
|
|
.u-section-2 .u-image-9:before,
|
|
.u-section-2 .u-image-9>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-9 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-9 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-19,
|
|
.u-section-2 .u-image-19:before,
|
|
.u-section-2 .u-image-19>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-19 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-19 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-39,
|
|
.u-section-2 .u-image-39:before,
|
|
.u-section-2 .u-image-39>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-39 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-39 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-40,
|
|
.u-section-2 .u-image-40:before,
|
|
.u-section-2 .u-image-40>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-40 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-40 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-10,
|
|
.u-section-2 .u-image-10:before,
|
|
.u-section-2 .u-image-10>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-10 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-10 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-20,
|
|
.u-section-2 .u-image-20:before,
|
|
.u-section-2 .u-image-20>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-20 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-20 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-30,
|
|
.u-section-2 .u-image-30:before,
|
|
.u-section-2 .u-image-30>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-30 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-30 {
|
|
transform: scale(1.1) translateX(0px) translateY(0px) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-41,
|
|
.u-section-2 .u-image-41:before,
|
|
.u-section-2 .u-image-41>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-41 {
|
|
transform: translateX(0px) translateY(-25px) scale(1.3) rotate(0deg) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-41 {
|
|
transform: translateX(0px) translateY(-25px) scale(1.3) rotate(0deg) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-11,
|
|
.u-section-2 .u-image-11:before,
|
|
.u-section-2 .u-image-11>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-11 {
|
|
transform: translateX(0px) translateY(-25px) rotate(0deg) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-11 {
|
|
transform: translateX(0px) translateY(-25px) rotate(0deg) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-21,
|
|
.u-section-2 .u-image-21:before,
|
|
.u-section-2 .u-image-21>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-21 {
|
|
transform: translateX(0px) translateY(-25px) rotate(0deg) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-21 {
|
|
transform: translateX(0px) translateY(-25px) rotate(0deg) !important;
|
|
}
|
|
|
|
.u-section-2 .u-image-31,
|
|
.u-section-2 .u-image-31:before,
|
|
.u-section-2 .u-image-31>.u-container-layout:before {
|
|
transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
|
|
}
|
|
|
|
.u-section-2 .u-container-layout:hover .u-image-31 {
|
|
transform: translateX(0px) translateY(-25px) rotate(0deg) !important;
|
|
}
|
|
|
|
.u-container-layout.hover>.u-section-2 .u-image-31 {
|
|
transform: translateX(0px) translateY(-25px) rotate(0deg) !important;
|
|
}
|
|
|
|
.u-section-3 .u-sheet-1 {
|
|
min-height: 481px;
|
|
}
|
|
|
|
.u-section-3 .u-group-1 {
|
|
height: auto;
|
|
min-height: 100vh;
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.u-section-3 .u-container-layout-1 {
|
|
padding: 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-1 {
|
|
width: 273px;
|
|
height: 56px;
|
|
margin: 30px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-list-1 {
|
|
width: 948px;
|
|
margin: 30px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-repeater-1 {
|
|
grid-auto-columns: calc(25% - 24px);
|
|
grid-template-columns: repeat(4, calc(25% - 24px));
|
|
min-height: 290px;
|
|
grid-gap: 32px;
|
|
padding-top: 35px;
|
|
padding-bottom: 35px;
|
|
padding-left: 25px;
|
|
padding-right: 25px;
|
|
}
|
|
|
|
.u-section-3 .u-list-item-1 {
|
|
--radius: 30px;
|
|
border-style: dashed;
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.u-section-3 .u-container-layout-2 {
|
|
padding: 9px 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-2 {
|
|
width: 177px;
|
|
height: 38px;
|
|
margin: 36px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-3 {
|
|
width: 177px;
|
|
height: 75px;
|
|
--radius: 50px;
|
|
margin: -49px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-4 {
|
|
width: 186px;
|
|
height: 50px;
|
|
--radius: 40px;
|
|
margin: -64px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-btn-1 {
|
|
background-image: linear-gradient(#31cdee, #0962a4);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
font-size: 0.875rem;
|
|
letter-spacing: 1px;
|
|
text-transform: none;
|
|
--radius: 50px;
|
|
font-weight: 700;
|
|
/* background-image: none; */
|
|
margin: 112px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-list-item-2 {
|
|
--radius: 30px;
|
|
border-style: dashed;
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.u-section-3 .u-container-layout-3 {
|
|
padding: 9px 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-5 {
|
|
width: 177px;
|
|
height: 38px;
|
|
margin: 36px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-6 {
|
|
width: 177px;
|
|
height: 75px;
|
|
--radius: 50px;
|
|
margin: -49px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-7 {
|
|
width: 186px;
|
|
height: 50px;
|
|
--radius: 40px;
|
|
object-position: 50% 26.47%;
|
|
margin: -64px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-btn-2 {
|
|
font-size: 0.875rem;
|
|
letter-spacing: 1px;
|
|
text-transform: none;
|
|
--radius: 50px;
|
|
font-weight: 700;
|
|
/* background-image: none; */
|
|
background-image: linear-gradient(#31cdee, #0962a4);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
margin: 112px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-list-item-3 {
|
|
--radius: 30px;
|
|
border-style: dashed;
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.u-section-3 .u-container-layout-4 {
|
|
padding: 9px 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-8 {
|
|
width: 177px;
|
|
height: 38px;
|
|
margin: 36px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-9 {
|
|
width: 177px;
|
|
height: 75px;
|
|
--radius: 50px;
|
|
margin: -49px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-10 {
|
|
width: 186px;
|
|
height: 50px;
|
|
--radius: 40px;
|
|
margin: -64px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-btn-3 {
|
|
font-size: 0.875rem;
|
|
letter-spacing: 1px;
|
|
text-transform: none;
|
|
--radius: 50px;
|
|
font-weight: 700;
|
|
/* background-image: none; */
|
|
background-image: linear-gradient(#31cdee, #0962a4);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
margin: 112px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-list-item-4 {
|
|
--radius: 30px;
|
|
border-style: dashed;
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.u-section-3 .u-container-layout-5 {
|
|
padding: 9px 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-11 {
|
|
width: 177px;
|
|
height: 38px;
|
|
margin: 36px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-12 {
|
|
width: 177px;
|
|
height: 75px;
|
|
--radius: 50px;
|
|
margin: -49px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-13 {
|
|
width: 186px;
|
|
height: 50px;
|
|
--radius: 40px;
|
|
margin: -64px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-btn-4 {
|
|
font-size: 0.875rem;
|
|
letter-spacing: 1px;
|
|
text-transform: none;
|
|
--radius: 50px;
|
|
font-weight: 700;
|
|
/* background-image: none; */
|
|
background-image: linear-gradient(#31cdee, #0962a4);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
margin: 112px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-list-item-5 {
|
|
--radius: 30px;
|
|
border-style: dashed;
|
|
}
|
|
|
|
.u-section-3 .u-container-layout-6 {
|
|
padding: 9px 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-14 {
|
|
width: 177px;
|
|
height: 38px;
|
|
margin: 36px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-15 {
|
|
width: 177px;
|
|
height: 75px;
|
|
--radius: 50px;
|
|
margin: -49px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-16 {
|
|
width: 186px;
|
|
height: 50px;
|
|
--radius: 40px;
|
|
margin: -64px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-btn-5 {
|
|
font-size: 0.875rem;
|
|
letter-spacing: 1px;
|
|
text-transform: none;
|
|
--radius: 50px;
|
|
font-weight: 700;
|
|
/* background-image: none; */
|
|
background-image: linear-gradient(#31cdee, #0962a4);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
margin: 112px auto 0;
|
|
}
|
|
|
|
.u-section-3 .u-gallery-nav-1 {
|
|
position: absolute;
|
|
left: 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.u-section-3 .u-gallery-nav-2 {
|
|
position: absolute;
|
|
right: 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
@media (max-width: 1199px) {
|
|
.u-section-3 .u-group-1 {
|
|
height: auto;
|
|
}
|
|
|
|
.u-section-3 .u-image-1 {
|
|
transition-duration: 0.5s;
|
|
transform: translateX(0px) translateY(100px) scale(1) rotate(0deg);
|
|
margin-top: 36px;
|
|
}
|
|
|
|
.u-section-3 .u-list-1 {
|
|
margin-top: 0;
|
|
margin-right: initial;
|
|
margin-left: initial;
|
|
width: auto;
|
|
}
|
|
|
|
.u-section-3 .u-repeater-1 {
|
|
min-height: 308px;
|
|
}
|
|
|
|
.u-section-3 .u-btn-1 {
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
}
|
|
|
|
.u-section-3 .u-btn-2 {
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
}
|
|
|
|
.u-section-3 .u-btn-3 {
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
}
|
|
|
|
.u-section-3 .u-btn-4 {
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
}
|
|
|
|
.u-section-3 .u-btn-5 {
|
|
transition-duration: 0.5s;
|
|
transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.u-section-3 .u-sheet-1 {
|
|
min-height: 432px;
|
|
}
|
|
|
|
.u-section-3 .u-group-1 {
|
|
min-height: 432px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-1 {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.u-section-3 .u-list-1 {
|
|
margin-top: 67px;
|
|
width: auto;
|
|
margin-right: initial;
|
|
margin-left: initial;
|
|
}
|
|
|
|
.u-section-3 .u-repeater-1 {
|
|
grid-auto-columns: calc(50% - 50px);
|
|
grid-template-columns: repeat(2, calc(50% - 50px));
|
|
min-height: 291px;
|
|
grid-gap: 100px;
|
|
}
|
|
|
|
.u-section-3 .u-container-layout-2 {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-2 {
|
|
margin-top: 27px;
|
|
}
|
|
|
|
.u-section-3 .u-image-3 {
|
|
margin-top: -50px;
|
|
}
|
|
|
|
.u-section-3 .u-btn-1 {
|
|
margin-top: 118px;
|
|
}
|
|
|
|
.u-section-3 .u-container-layout-3 {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-5 {
|
|
margin-top: 27px;
|
|
}
|
|
|
|
.u-section-3 .u-image-6 {
|
|
margin-top: -50px;
|
|
}
|
|
|
|
.u-section-3 .u-btn-2 {
|
|
margin-top: 118px;
|
|
}
|
|
|
|
.u-section-3 .u-container-layout-4 {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-8 {
|
|
margin-top: 27px;
|
|
}
|
|
|
|
.u-section-3 .u-image-9 {
|
|
margin-top: -50px;
|
|
}
|
|
|
|
.u-section-3 .u-btn-3 {
|
|
margin-top: 118px;
|
|
}
|
|
|
|
.u-section-3 .u-container-layout-5 {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-11 {
|
|
margin-top: 27px;
|
|
}
|
|
|
|
.u-section-3 .u-image-12 {
|
|
margin-top: -50px;
|
|
}
|
|
|
|
.u-section-3 .u-btn-4 {
|
|
margin-top: 118px;
|
|
}
|
|
|
|
.u-section-3 .u-container-layout-6 {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.u-section-3 .u-image-14 {
|
|
margin-top: 27px;
|
|
}
|
|
|
|
.u-section-3 .u-image-15 {
|
|
margin-top: -50px;
|
|
}
|
|
|
|
.u-section-3 .u-btn-5 {
|
|
margin-top: 118px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.u-section-3 .u-repeater-1 {
|
|
grid-auto-columns: calc(100% - 0px);
|
|
grid-template-columns: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
.u-section-3 .u-image-1 {
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.u-section-3 .u-list-1 {
|
|
margin-top: 75px;
|
|
width: auto;
|
|
margin-right: initial;
|
|
margin-left: initial;
|
|
}
|
|
|
|
.u-section-3 .u-repeater-1 {
|
|
grid-auto-columns: 100%;
|
|
}
|
|
|
|
.u-section-3 .u-image-3 {
|
|
width: 260px;
|
|
height: 110px;
|
|
}
|
|
|
|
.u-section-3 .u-btn-1 {
|
|
margin-top: 81px;
|
|
margin-left: 108px;
|
|
}
|
|
|
|
.u-section-3 .u-image-6 {
|
|
width: 260px;
|
|
height: 110px;
|
|
}
|
|
|
|
.u-section-3 .u-btn-2 {
|
|
margin-top: 81px;
|
|
margin-left: 108px;
|
|
}
|
|
|
|
.u-section-3 .u-image-9 {
|
|
width: 260px;
|
|
height: 110px;
|
|
}
|
|
|
|
.u-section-3 .u-btn-3 {
|
|
margin-top: 81px;
|
|
margin-left: 108px;
|
|
}
|
|
|
|
.u-section-3 .u-image-12 {
|
|
width: 260px;
|
|
height: 110px;
|
|
}
|
|
|
|
.u-section-3 .u-image-13 {
|
|
margin-top: -110px;
|
|
}
|
|
|
|
.u-section-3 .u-btn-4 {
|
|
margin-top: 141px;
|
|
margin-left: 108px;
|
|
}
|
|
|
|
.u-section-3 .u-image-15 {
|
|
width: 260px;
|
|
height: 110px;
|
|
}
|
|
|
|
.u-section-3 .u-btn-5 {
|
|
margin-top: 81px;
|
|
margin-left: 108px;
|
|
}
|
|
}
|
|
|
|
/* item的悬停效果 */
|
|
.u-section-2 .u-list-item {
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.u-section-2 .u-list-item:hover {
|
|
transform: scale(1.05);
|
|
/* z-index: 1; 确保放大时不被其他元素遮挡 */
|
|
}
|
|
|
|
/* 按钮的基础样式 */
|
|
.u-section-2 .u-btn {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* 按钮的悬停效果 */
|
|
.u-section-2 .u-btn:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* 按钮的点击效果 */
|
|
.u-section-2 .u-btn:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
/* 确保过渡效果平滑 */
|
|
.u-section-3 .u-list-item,
|
|
.u-section-3 .u-btn {
|
|
will-change: transform;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
/* item的悬停效果 */
|
|
.u-section-3 .u-list-item {
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.u-section-3 .u-list-item:hover {
|
|
transform: scale(1.05);
|
|
/* z-index: 1; 确保放大时不被其他元素遮挡 */
|
|
}
|
|
|
|
/* 按钮的基础样式 */
|
|
.u-section-3 .u-btn {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* 按钮的点击效果 */
|
|
.u-section-3 .u-btn:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
/* 确保过渡效果平滑 */
|
|
.u-section-3 .u-list-item,
|
|
.u-section-3 .u-btn {
|
|
will-change: transform;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
/* 按钮的悬停效果 */
|
|
.u-btn-1.u-dialog-link:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* 按钮的点击效果 */
|
|
.u-btn-1.u-dialog-link:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
/* input的基础样式 */
|
|
.u-input-1 {
|
|
transition: all 0.3s ease;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* input的悬停和选中效果 */
|
|
.u-input-1:hover,
|
|
.u-input-1:focus {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* 提交按钮的基础样式 */
|
|
.u-btn-submit {
|
|
transition: all 0.3s ease;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* 提交按钮的悬停效果 */
|
|
.u-btn-submit:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* 提交按钮的点击效果 */
|
|
.u-btn-submit:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
/* 试用按钮的基础样式 */
|
|
.u-btn-2 {
|
|
transition: all 0.3s ease;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* 试用按钮的悬停效果 */
|
|
.u-btn-2:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* 试用按钮的点击效果 */
|
|
.u-btn-2:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
/* 确保过渡效果平滑 */
|
|
.u-input-1,
|
|
.u-btn-submit,
|
|
.u-btn-2 {
|
|
will-change: transform;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
/* 关闭按钮的基础样式 */
|
|
.u-dialog-close-button {
|
|
transition: all 0.3s ease;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* 关闭按钮的悬停效果 */
|
|
.u-dialog-close-button:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* 关闭按钮的点击效果 */
|
|
.u-dialog-close-button:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
/* 确保关闭按钮的图标也跟随变化 */
|
|
.u-dialog-close-button img {
|
|
transition: all 0.3s ease;
|
|
will-change: transform;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
/* 编程闯关按钮布局样式 */
|
|
.programming-buttons-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin: 70px auto 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.programming-btn-top {
|
|
width: 140px;
|
|
margin: 0 auto;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
padding: 10px 15px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-self: center;
|
|
}
|
|
|
|
.programming-buttons-row {
|
|
display: flex;
|
|
gap: 5px;
|
|
width: 140px;
|
|
justify-content: space-between;
|
|
align-self: center;
|
|
}
|
|
|
|
.programming-btn-bottom {
|
|
width: 67px;
|
|
margin: 0;
|
|
font-size: 0.55rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
padding: 10px 2px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 确保按钮在不同屏幕尺寸下的响应式布局 */
|
|
@media (max-width: 1199px) {
|
|
.programming-btn-top {
|
|
width: 130px;
|
|
font-size: 0.65rem;
|
|
padding: 10px 12px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.programming-buttons-row {
|
|
width: 130px;
|
|
gap: 4px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.programming-btn-bottom {
|
|
width: 63px;
|
|
font-size: 0.5rem;
|
|
padding: 10px 2px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.programming-btn-top {
|
|
width: 150px;
|
|
font-size: 0.7rem;
|
|
padding: 10px 16px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.programming-buttons-row {
|
|
width: 150px;
|
|
gap: 5px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.programming-btn-bottom {
|
|
width: 72px;
|
|
font-size: 0.55rem;
|
|
padding: 10px 3px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.programming-btn-top {
|
|
width: 180px;
|
|
font-size: 0.75rem;
|
|
padding: 10px 20px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.programming-buttons-row {
|
|
width: 180px;
|
|
gap: 5px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.programming-btn-bottom {
|
|
width: 87px;
|
|
font-size: 0.6rem;
|
|
padding: 10px 6px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
.programming-btn-top {
|
|
width: 160px;
|
|
font-size: 0.7rem;
|
|
padding: 10px 18px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.programming-buttons-row {
|
|
width: 160px;
|
|
gap: 5px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.programming-btn-bottom {
|
|
width: 77px;
|
|
font-size: 0.55rem;
|
|
padding: 10px 4px;
|
|
}
|
|
}
|
|
|
|
/* Toast 容器 */
|
|
#toast-container {
|
|
position: fixed;
|
|
top: 10%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 100002;
|
|
/* 确保在最上层 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
pointer-events: none;
|
|
/* 允许点击穿透 */
|
|
}
|
|
|
|
/* 单个 Toast */
|
|
.toast {
|
|
min-width: 250px;
|
|
max-width: 350px;
|
|
padding: 15px 20px;
|
|
border-radius: 50px;
|
|
color: #fff;
|
|
font-family: Arial, sans-serif;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
opacity: 0.9;
|
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* 居中文本 */
|
|
text-align: center;
|
|
/* 居中文本 */
|
|
pointer-events: auto;
|
|
/* 允许 Toast 接收事件 */
|
|
}
|
|
|
|
/* 成功 Toast */
|
|
.toast.success {
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
background-image: linear-gradient(#00ff00, #009245);
|
|
}
|
|
|
|
/* 错误 Toast */
|
|
.toast.error {
|
|
background-image: linear-gradient(#ff6474, #e01c4c);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* 信息 Toast */
|
|
.toast.info {
|
|
background-image: linear-gradient(#31cdee, #0962a4);
|
|
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* 淡出效果 */
|
|
.toast.fade-out {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
|
}
|
|
|
|
/* 引导提示蒙层样式 */
|
|
.guide-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
z-index: 9999;
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
.guide-overlay.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.guide-content {
|
|
position: relative;
|
|
background-color: white;
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
max-width: 400px;
|
|
text-align: center;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
animation: slideUp 0.3s ease-out;
|
|
}
|
|
|
|
.guide-content-positioned {
|
|
position: absolute !important;
|
|
margin: 0;
|
|
max-width: 350px;
|
|
min-height: 180px;
|
|
/* 确保最小高度，便于计算 */
|
|
}
|
|
|
|
.guide-content.hidden {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(20px);
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
|
|
.guide-title {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.guide-text {
|
|
font-size: 16px;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.guide-arrow {
|
|
position: absolute;
|
|
font-size: 48px;
|
|
color: #ff6b35;
|
|
animation: bounce 1s infinite;
|
|
}
|
|
|
|
.guide-arrow.arrow-down {
|
|
bottom: -60px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.guide-close-btn {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 25px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.guide-close-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.guide-highlight {
|
|
position: absolute;
|
|
border: 4px solid #ff6b35;
|
|
border-radius: 12px;
|
|
box-shadow: 0 0 30px rgba(255, 107, 53, 0.8), inset 0 0 15px rgba(255, 107, 53, 0.3);
|
|
animation: pulse 2s infinite;
|
|
pointer-events: none;
|
|
z-index: 10000;
|
|
background: rgba(255, 107, 53, 0.1);
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
|
|
0%,
|
|
20%,
|
|
50%,
|
|
80%,
|
|
100% {
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
40% {
|
|
transform: translateX(-50%) translateY(-10px);
|
|
}
|
|
|
|
60% {
|
|
transform: translateX(-50%) translateY(-5px);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
box-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 30px rgba(255, 107, 53, 0.9);
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
|
|
}
|
|
} |