You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1710 lines
33 KiB
1710 lines
33 KiB
.index_page {
|
|
--index_content_width: 1284px;
|
|
--index_purple: #6f47f5;
|
|
--index_black: #000;
|
|
--index_text: #333;
|
|
--index_muted: #666;
|
|
--index_border: #d9d9db;
|
|
--index_soft_border: #e5e6eb;
|
|
|
|
position: relative;
|
|
min-height: 100vh;
|
|
overflow-x: clip;
|
|
background: #fff;
|
|
color: var(--index_text);
|
|
font-family: "PingFang SC", "Source Han Sans CN", "Microsoft YaHei", sans-serif;
|
|
}
|
|
|
|
.index_header {
|
|
position: sticky;
|
|
z-index: 20;
|
|
top: 10px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 64px;
|
|
margin-top: 48px;
|
|
margin-bottom: -112px;
|
|
pointer-events: none;
|
|
|
|
.index_header_inner {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 150px 1fr 150px;
|
|
align-items: start;
|
|
width: calc(100% - 88px);
|
|
height: 64px;
|
|
margin: 0 auto;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.index_header_brand {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
width: 150px;
|
|
height: 64px;
|
|
padding: 7px 12px 7px 11px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.index_header_brand_logo {
|
|
display: block;
|
|
width: 127px;
|
|
height: 50px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.index_header_nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-self: center;
|
|
box-sizing: border-box;
|
|
width: 357px;
|
|
height: 64px;
|
|
padding: 10px;
|
|
gap: 20px;
|
|
border-radius: 100px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.index_header_nav_btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
width: 99px;
|
|
height: 44px;
|
|
padding: 15px 33px;
|
|
border: 0;
|
|
border-radius: 100px;
|
|
background: transparent;
|
|
color: var(--index_text);
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.index_header_nav_btn:hover,
|
|
.index_header_nav_btn:focus-visible,
|
|
.index_header_nav_btn_active {
|
|
background: #fbf0ff;
|
|
color: var(--index_purple);
|
|
outline: none;
|
|
}
|
|
|
|
.index_header_login {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-self: end;
|
|
box-sizing: border-box;
|
|
width: 99px;
|
|
height: 44px;
|
|
margin-top: 10px;
|
|
padding: 12px 21px;
|
|
border: 0;
|
|
border-radius: 100px;
|
|
background: #333;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.index_header_login:hover,
|
|
.index_header_login:focus-visible {
|
|
background: #000;
|
|
outline: none;
|
|
}
|
|
|
|
.index_header_login_text {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.index_header_login_icon {
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: 2px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.index_header_dropdown {
|
|
position: absolute;
|
|
top: 64px;
|
|
left: 50%;
|
|
width: 208px;
|
|
transform: translateX(-25%);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 180ms ease;
|
|
}
|
|
|
|
.index_header_dropdown_features {
|
|
margin-left: -129px;
|
|
}
|
|
|
|
.index_header_dropdown_products {
|
|
margin-left: -10px;
|
|
}
|
|
|
|
.index_header_dropdown_support {
|
|
margin-left: 109px;
|
|
}
|
|
|
|
.index_header_dropdown_open {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.index_header_dropdown_inner {
|
|
box-sizing: border-box;
|
|
width: 208px;
|
|
padding: 10px;
|
|
border-radius: 26px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(16px);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.index_header_menu_list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.index_header_menu_item {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.index_header_menu_btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 44px;
|
|
padding: 5px 20px;
|
|
border: 0;
|
|
border-radius: 100px;
|
|
background: transparent;
|
|
color: var(--index_text);
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 29px;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.index_header_menu_btn:hover,
|
|
.index_header_menu_btn:focus-visible {
|
|
background: #fbf0ff;
|
|
color: var(--index_purple);
|
|
font-weight: 500;
|
|
outline: none;
|
|
}
|
|
|
|
.index_header_support_panel {
|
|
position: relative;
|
|
}
|
|
|
|
.index_header_support_qr_card {
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(100% + 12px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
width: 130px;
|
|
height: 130px;
|
|
padding: 7px;
|
|
border-radius: 17px;
|
|
background: #fff;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.index_header_support_qr_img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.index_header_support_qr_placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12px;
|
|
background: #f4f4f6;
|
|
color: #999;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.index_hero {
|
|
position: relative;
|
|
min-height: 956px;
|
|
overflow: hidden;
|
|
background: #f7f7f9;
|
|
|
|
.index_hero_media {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.index_hero_img {
|
|
position: absolute;
|
|
top: -14px;
|
|
left: 10.63%;
|
|
width: 94.17%;
|
|
height: 105.5%;
|
|
object-fit: cover;
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.index_hero_fade {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg, #f7f7f9 35.096%, rgba(247, 247, 249, 0) 100%);
|
|
}
|
|
|
|
.index_hero_container {
|
|
box-sizing: border-box;
|
|
width: min(100% - 40px, var(--index_content_width));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.index_hero_content {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
min-height: 956px;
|
|
padding-top: 1px;
|
|
gap: 30px;
|
|
}
|
|
|
|
.index_hero_copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.index_hero_title {
|
|
margin: 0;
|
|
color: #000;
|
|
font-size: 64px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_hero_subtitle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #000;
|
|
font-size: 48px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_hero_subtitle_line,
|
|
.index_hero_desc {
|
|
margin: 0;
|
|
}
|
|
|
|
.index_hero_desc {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 827px;
|
|
max-width: 100%;
|
|
color: var(--index_muted);
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_hero_actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.index_hero_btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
min-height: 99px;
|
|
border-radius: 100px;
|
|
font-size: 35px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.index_hero_btn_primary {
|
|
width: 234px;
|
|
padding: 30px 46px;
|
|
border: 0;
|
|
background: var(--index_purple);
|
|
color: #fff;
|
|
}
|
|
|
|
.index_hero_btn_secondary {
|
|
width: 277px;
|
|
gap: 10px;
|
|
padding: 30px 46px;
|
|
border: 1px solid var(--index_border);
|
|
background: #fff;
|
|
color: var(--index_text);
|
|
}
|
|
|
|
.index_hero_btn_icon {
|
|
display: block;
|
|
width: 35px;
|
|
height: 27px;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
.index_products {
|
|
padding: 144px 0;
|
|
background: #fff;
|
|
|
|
.index_products_container {
|
|
box-sizing: border-box;
|
|
width: min(100% - 40px, var(--index_content_width));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.index_products_heading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.index_products_heading_eyebrow,
|
|
.index_products_heading_title {
|
|
margin: 0;
|
|
}
|
|
|
|
.index_products_heading_eyebrow {
|
|
width: 816px;
|
|
max-width: 100%;
|
|
color: var(--index_purple);
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_products_heading_title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
color: #000;
|
|
font-size: 48px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_products_heading_title_line {
|
|
display: block;
|
|
}
|
|
|
|
.index_products_grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 20px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.index_products_card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-height: 353px;
|
|
padding: 30px;
|
|
gap: 30px;
|
|
border: 1px solid var(--index_border);
|
|
border-radius: 26px;
|
|
background: #fff;
|
|
box-shadow: -15px 50px 40px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.index_products_card_icon_wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 20px;
|
|
background: var(--index_products_card_icon_bg);
|
|
}
|
|
|
|
.index_products_card_icon {
|
|
display: block;
|
|
width: 40px;
|
|
height: 40px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.index_products_card_copy {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
width: 100%;
|
|
min-height: 141px;
|
|
}
|
|
|
|
.index_products_card_eyebrow,
|
|
.index_products_card_title,
|
|
.index_products_card_desc {
|
|
margin: 0;
|
|
}
|
|
|
|
.index_products_card_eyebrow {
|
|
color: var(--index_products_card_accent);
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_products_card_title {
|
|
color: #000;
|
|
font-size: 25px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_products_card_desc {
|
|
color: var(--index_muted);
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 25px;
|
|
}
|
|
|
|
.index_products_card_action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #000;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.index_products_card_action_text {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.index_products_card_action_icon {
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
.index_popiart {
|
|
padding: 224px 0;
|
|
background: linear-gradient(180deg, #fbf0ff 0%, #fff 24.038%, #fff 75.962%, #fbf0ff 100%);
|
|
|
|
.index_popiart_container {
|
|
box-sizing: border-box;
|
|
width: min(100% - 40px, var(--index_content_width));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.index_popiart_top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 30px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.index_popiart_heading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.index_popiart_heading_eyebrow,
|
|
.index_popiart_heading_title,
|
|
.index_popiart_heading_desc_line {
|
|
margin: 0;
|
|
}
|
|
|
|
.index_popiart_heading_eyebrow {
|
|
width: 816px;
|
|
max-width: 100%;
|
|
color: var(--index_purple);
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_popiart_heading_title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
color: #000;
|
|
font-size: 48px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_popiart_heading_title_line {
|
|
display: block;
|
|
}
|
|
|
|
.index_popiart_heading_desc {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 841px;
|
|
max-width: 100%;
|
|
color: var(--index_muted);
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_popiart_chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.index_popiart_chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
min-height: 41px;
|
|
padding: 10px 20px;
|
|
border: 1px solid var(--index_purple);
|
|
border-radius: 100px;
|
|
background: #fff;
|
|
color: var(--index_purple);
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.index_popiart_workspace_img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
border-radius: 26px;
|
|
box-shadow: 0 2px 50px 0 rgba(111, 71, 245, 0.15);
|
|
}
|
|
|
|
.index_popiart_assets {
|
|
margin-top: 198px;
|
|
}
|
|
|
|
.index_popiart_assets_heading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
word-break: break-word;
|
|
text-align: center;
|
|
}
|
|
|
|
.index_popiart_assets_heading_eyebrow,
|
|
.index_popiart_assets_heading_title,
|
|
.index_popiart_assets_heading_desc_line {
|
|
margin: 0;
|
|
}
|
|
|
|
.index_popiart_assets_heading_eyebrow {
|
|
width: 816px;
|
|
max-width: 100%;
|
|
color: var(--index_purple);
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.index_popiart_assets_heading_title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
color: #000;
|
|
font-size: 48px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_popiart_assets_heading_title_line {
|
|
display: block;
|
|
}
|
|
|
|
.index_popiart_assets_heading_desc {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 816px;
|
|
max-width: 100%;
|
|
color: var(--index_muted);
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_popiart_assets_visual {
|
|
position: relative;
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.index_popiart_assets_img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
.index_product_detail {
|
|
padding: 224px 0;
|
|
background: linear-gradient(180deg, #fff 0%, #fbf0ff 50%, #fff 100%);
|
|
|
|
.index_product_detail_container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 198px;
|
|
box-sizing: border-box;
|
|
width: min(100% - 40px, var(--index_content_width));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.index_product_detail_tv {
|
|
display: grid;
|
|
grid-template-columns: 452px minmax(0, 792px);
|
|
align-items: center;
|
|
gap: 40px;
|
|
min-height: 493px;
|
|
}
|
|
|
|
.index_product_detail_mcn {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 792px) 452px;
|
|
align-items: center;
|
|
gap: 40px;
|
|
min-height: 493px;
|
|
}
|
|
|
|
.index_product_detail_tv_copy,
|
|
.index_product_detail_mcn_copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
}
|
|
|
|
.index_product_detail_tv_heading,
|
|
.index_product_detail_mcn_heading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.index_product_detail_tv_heading_eyebrow,
|
|
.index_product_detail_tv_heading_title,
|
|
.index_product_detail_tv_heading_desc_line,
|
|
.index_product_detail_mcn_heading_eyebrow,
|
|
.index_product_detail_mcn_heading_title,
|
|
.index_product_detail_mcn_heading_desc_line {
|
|
margin: 0;
|
|
}
|
|
|
|
.index_product_detail_tv_heading_eyebrow,
|
|
.index_product_detail_mcn_heading_eyebrow {
|
|
width: 452px;
|
|
max-width: 100%;
|
|
color: var(--index_purple);
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_product_detail_tv_heading_title,
|
|
.index_product_detail_mcn_heading_title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
color: #000;
|
|
font-size: 48px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_product_detail_tv_heading_title_line,
|
|
.index_product_detail_mcn_heading_title_line {
|
|
display: block;
|
|
}
|
|
|
|
.index_product_detail_tv_heading_desc,
|
|
.index_product_detail_mcn_heading_desc {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 452px;
|
|
max-width: 100%;
|
|
color: var(--index_muted);
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_product_detail_tv_bullets,
|
|
.index_product_detail_mcn_bullets {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.index_product_detail_tv_bullet,
|
|
.index_product_detail_mcn_bullet {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 22px;
|
|
color: #000;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_product_detail_tv_check,
|
|
.index_product_detail_mcn_check {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
box-sizing: border-box;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--index_purple);
|
|
border-radius: 24px;
|
|
background: #fff;
|
|
}
|
|
|
|
.index_product_detail_tv_check img,
|
|
.index_product_detail_mcn_check img {
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.index_product_detail_tv_img {
|
|
display: block;
|
|
width: 792px;
|
|
height: 493px;
|
|
object-fit: cover;
|
|
border-radius: 26px;
|
|
box-shadow: 0 2px 50px 0 rgba(111, 71, 245, 0.15);
|
|
}
|
|
|
|
.index_product_detail_mcn_img {
|
|
display: block;
|
|
width: 792px;
|
|
height: 439px;
|
|
border-radius: 26px;
|
|
box-shadow: 0 2px 50px 0 rgba(111, 71, 245, 0.15);
|
|
}
|
|
}
|
|
|
|
.index_workflow {
|
|
padding: 144px 0;
|
|
background: linear-gradient(180deg, #7b61d4 0%, #553da3 37.019%, #412f80 83.173%);
|
|
|
|
.index_workflow_container {
|
|
box-sizing: border-box;
|
|
width: min(100% - 40px, var(--index_content_width));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.index_workflow_heading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
word-break: break-word;
|
|
text-align: center;
|
|
}
|
|
|
|
.index_workflow_heading_eyebrow,
|
|
.index_workflow_heading_title {
|
|
margin: 0;
|
|
}
|
|
|
|
.index_workflow_heading_eyebrow {
|
|
width: 816px;
|
|
max-width: 100%;
|
|
color: #f2def9;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.index_workflow_heading_title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
color: #fff;
|
|
font-size: 48px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_workflow_heading_title_line {
|
|
display: block;
|
|
}
|
|
|
|
.index_workflow_steps {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 10px;
|
|
margin-top: 40px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.index_workflow_track {
|
|
position: absolute;
|
|
top: 53px;
|
|
left: 146px;
|
|
right: 67px;
|
|
height: 4px;
|
|
border-radius: 100px;
|
|
background: linear-gradient(90deg, #7753f6 0%, #1acfd1 25%, #6ec691 50.96%, #fe914e 73.56%, #fa5ca7 100%);
|
|
}
|
|
|
|
.index_workflow_step {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
min-height: 267px;
|
|
padding: 30px;
|
|
gap: 40px;
|
|
border-radius: 26px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
box-shadow: -15px 50px 80px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.index_workflow_step_num {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 100px;
|
|
background: #fff;
|
|
color: #000;
|
|
font-size: 25px;
|
|
font-weight: 500;
|
|
line-height: 25px;
|
|
}
|
|
|
|
.index_workflow_step_copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
width: 184px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.index_workflow_step_title,
|
|
.index_workflow_step_desc {
|
|
margin: 0;
|
|
}
|
|
|
|
.index_workflow_step_title {
|
|
color: #fff;
|
|
font-size: 25px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_workflow_step_desc {
|
|
color: #cdcdcd;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 25px;
|
|
}
|
|
}
|
|
|
|
.index_cloud {
|
|
padding: 144px 0;
|
|
background: #fff;
|
|
|
|
.index_cloud_container {
|
|
box-sizing: border-box;
|
|
width: min(100% - 40px, 1212px);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.index_cloud_intro {
|
|
display: grid;
|
|
grid-template-columns: 524px minmax(0, 648px);
|
|
align-items: start;
|
|
gap: 40px;
|
|
}
|
|
|
|
.index_cloud_heading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.index_cloud_heading_eyebrow,
|
|
.index_cloud_heading_title,
|
|
.index_cloud_heading_desc_line {
|
|
margin: 0;
|
|
}
|
|
|
|
.index_cloud_heading_eyebrow {
|
|
width: 524px;
|
|
max-width: 100%;
|
|
color: var(--index_purple);
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_cloud_heading_title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
color: #000;
|
|
font-size: 48px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_cloud_heading_title_line {
|
|
display: block;
|
|
}
|
|
|
|
.index_cloud_heading_desc {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 524px;
|
|
max-width: 100%;
|
|
color: var(--index_muted);
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_cloud_cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.index_cloud_card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
box-sizing: border-box;
|
|
min-height: 237px;
|
|
padding: 30px 30px 60px;
|
|
border: 1px solid var(--index_soft_border);
|
|
border-radius: 26px;
|
|
background: #f8f8fa;
|
|
}
|
|
|
|
.index_cloud_card_icon {
|
|
display: block;
|
|
width: 35px;
|
|
height: 35px;
|
|
flex: 0 0 auto;
|
|
margin: 0 0 20px;
|
|
border-radius: 100px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.index_cloud_card_copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
width: 259px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.index_cloud_card_title,
|
|
.index_cloud_card_desc {
|
|
margin: 0;
|
|
color: var(--index_text);
|
|
}
|
|
|
|
.index_cloud_card_title {
|
|
font-size: 25px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_cloud_card_desc {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 25px;
|
|
}
|
|
}
|
|
|
|
.index_vision {
|
|
padding: 224px 0;
|
|
background: #fff;
|
|
|
|
.index_vision_container {
|
|
box-sizing: border-box;
|
|
width: min(100% - 40px, 1212px);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.index_vision_heading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
word-break: break-word;
|
|
text-align: center;
|
|
}
|
|
|
|
.index_vision_heading_eyebrow,
|
|
.index_vision_heading_title {
|
|
margin: 0;
|
|
}
|
|
|
|
.index_vision_heading_eyebrow {
|
|
width: 160px;
|
|
max-width: 100%;
|
|
color: var(--index_purple);
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.index_vision_heading_title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
color: #000;
|
|
font-size: 48px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
.index_vision_heading_title_line {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.index_footer {
|
|
padding: 100px 0 23px;
|
|
min-height: 430px;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(90deg, #333 0%, #6f47f5 100%);
|
|
|
|
.index_footer_container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 81px;
|
|
box-sizing: border-box;
|
|
width: min(100% - 40px, var(--index_content_width));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.index_footer_top {
|
|
display: grid;
|
|
grid-template-columns: 201px 740px 130px;
|
|
align-items: start;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 200px;
|
|
}
|
|
|
|
.index_footer_brand {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
padding-top: 1px;
|
|
}
|
|
|
|
.index_footer_logo {
|
|
display: block;
|
|
width: 127px;
|
|
height: 50px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.index_footer_nav {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, max-content);
|
|
justify-content: space-between;
|
|
gap: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.index_footer_group {
|
|
position: relative;
|
|
min-width: 72px;
|
|
}
|
|
|
|
.index_footer_group_support {
|
|
min-width: 82px;
|
|
}
|
|
|
|
.index_footer_group_title {
|
|
margin: 0 0 20px;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.index_footer_list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.index_footer_item {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.index_footer_link {
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #cecece;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
line-height: 1.35;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.index_footer_link:hover,
|
|
.index_footer_link:focus-visible {
|
|
color: #fff;
|
|
font-weight: 500;
|
|
outline: none;
|
|
}
|
|
|
|
.index_footer_support_qr_card {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 50%;
|
|
left: calc(100% + 12px);
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
width: 117px;
|
|
height: 117px;
|
|
padding: 7px;
|
|
border-radius: 24px;
|
|
background: #fff;
|
|
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.index_footer_support_qr_img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.index_footer_support_qr_placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 18px;
|
|
background: #f4f4f6;
|
|
color: #999;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
text-align: center;
|
|
}
|
|
|
|
.index_footer_qr_group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
justify-self: end;
|
|
}
|
|
|
|
.index_footer_qr {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
width: 130px;
|
|
height: 130px;
|
|
padding: 7px;
|
|
border-radius: 24px;
|
|
background: #fff;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.index_footer_qr_text {
|
|
margin: 0;
|
|
color: #fff;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
line-height: 1.35;
|
|
text-align: center;
|
|
}
|
|
|
|
.index_footer_legal {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 40px;
|
|
min-height: 26px;
|
|
margin: 0;
|
|
color: #cecece;
|
|
font-size: 13.252px;
|
|
font-weight: 400;
|
|
line-height: 1.425;
|
|
text-align: center;
|
|
}
|
|
|
|
.index_footer_legal_item {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1320px) {
|
|
.index_header {
|
|
margin-top: 24px;
|
|
margin-bottom: -88px;
|
|
|
|
.index_header_inner {
|
|
width: calc(100% - 40px);
|
|
}
|
|
}
|
|
|
|
.index_products {
|
|
.index_products_grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
.index_workflow {
|
|
.index_workflow_steps {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.index_workflow_track {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.index_product_detail {
|
|
|
|
.index_product_detail_tv,
|
|
.index_product_detail_mcn {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.index_product_detail_mcn_img {
|
|
order: 1;
|
|
}
|
|
|
|
.index_product_detail_mcn_copy {
|
|
order: 2;
|
|
}
|
|
|
|
.index_product_detail_tv_heading_eyebrow,
|
|
.index_product_detail_tv_heading_desc,
|
|
.index_product_detail_mcn_heading_eyebrow,
|
|
.index_product_detail_mcn_heading_desc {
|
|
width: 816px;
|
|
}
|
|
}
|
|
|
|
.index_cloud {
|
|
.index_cloud_intro {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.index_header {
|
|
height: 120px;
|
|
margin-bottom: -144px;
|
|
|
|
.index_header_inner {
|
|
grid-template-columns: auto auto;
|
|
height: auto;
|
|
row-gap: 14px;
|
|
}
|
|
|
|
.index_header_brand {
|
|
width: 116px;
|
|
height: 50px;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.index_header_brand_logo {
|
|
width: 100px;
|
|
height: 38px;
|
|
}
|
|
|
|
.index_header_nav {
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
width: min(100%, 357px);
|
|
height: 56px;
|
|
order: 3;
|
|
}
|
|
|
|
.index_header_nav_btn {
|
|
width: auto;
|
|
min-width: 80px;
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
.index_header_login {
|
|
width: 90px;
|
|
height: 40px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.index_header_dropdown {
|
|
top: 128px;
|
|
width: 208px;
|
|
}
|
|
|
|
.index_header_dropdown_features,
|
|
.index_header_dropdown_products,
|
|
.index_header_dropdown_support {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.index_header_support_qr_card {
|
|
position: relative;
|
|
top: auto;
|
|
left: auto;
|
|
width: 130px;
|
|
height: 130px;
|
|
margin: 12px auto 0;
|
|
}
|
|
}
|
|
|
|
.index_hero {
|
|
min-height: 760px;
|
|
|
|
.index_hero_content {
|
|
min-height: 760px;
|
|
padding-top: 110px;
|
|
}
|
|
|
|
.index_hero_title {
|
|
font-size: 48px;
|
|
}
|
|
|
|
.index_hero_subtitle {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.index_hero_desc {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.index_hero_actions {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.index_hero_btn {
|
|
min-height: 64px;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.index_hero_btn_primary,
|
|
.index_hero_btn_secondary {
|
|
width: auto;
|
|
min-width: 180px;
|
|
padding: 18px 28px;
|
|
}
|
|
}
|
|
|
|
.index_products,
|
|
.index_popiart,
|
|
.index_product_detail,
|
|
.index_workflow,
|
|
.index_cloud,
|
|
.index_vision {
|
|
padding-top: 96px;
|
|
padding-bottom: 96px;
|
|
}
|
|
|
|
.index_popiart {
|
|
.index_popiart_assets {
|
|
margin-top: 120px;
|
|
}
|
|
|
|
.index_popiart_assets_visual {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.index_products_heading_title,
|
|
.index_popiart_heading_title,
|
|
.index_popiart_assets_heading_title,
|
|
.index_product_detail_tv_heading_title,
|
|
.index_product_detail_mcn_heading_title,
|
|
.index_workflow_heading_title,
|
|
.index_cloud_heading_title,
|
|
.index_vision_heading_title {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.index_products_heading_eyebrow,
|
|
.index_products_heading_desc,
|
|
.index_popiart_heading_eyebrow,
|
|
.index_popiart_heading_desc,
|
|
.index_popiart_assets_heading_eyebrow,
|
|
.index_popiart_assets_heading_desc,
|
|
.index_product_detail_tv_heading_eyebrow,
|
|
.index_product_detail_tv_heading_desc,
|
|
.index_product_detail_mcn_heading_eyebrow,
|
|
.index_product_detail_mcn_heading_desc,
|
|
.index_workflow_heading_eyebrow,
|
|
.index_cloud_heading_eyebrow,
|
|
.index_cloud_heading_desc,
|
|
.index_vision_heading_eyebrow {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.index_workflow {
|
|
.index_workflow_steps {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.index_workflow_step {
|
|
min-height: auto;
|
|
}
|
|
}
|
|
|
|
.index_cloud {
|
|
.index_cloud_cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.index_footer {
|
|
min-height: auto;
|
|
|
|
.index_footer_container {
|
|
gap: 36px;
|
|
text-align: center;
|
|
}
|
|
|
|
.index_footer_top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: auto;
|
|
gap: 36px;
|
|
}
|
|
|
|
.index_footer_brand {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.index_footer_nav {
|
|
width: 100%;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 24px;
|
|
justify-content: stretch;
|
|
}
|
|
|
|
.index_footer_group {
|
|
min-width: 0;
|
|
}
|
|
|
|
.index_footer_link {
|
|
text-align: center;
|
|
}
|
|
|
|
.index_footer_support_qr_card {
|
|
position: static;
|
|
width: 110px;
|
|
height: 110px;
|
|
margin: 12px auto 0;
|
|
padding: 6px;
|
|
transform: none;
|
|
}
|
|
|
|
.index_footer_qr_group {
|
|
justify-self: auto;
|
|
}
|
|
|
|
.index_footer_qr {
|
|
width: 110px;
|
|
height: 110px;
|
|
padding: 6px;
|
|
}
|
|
|
|
.index_footer_list,
|
|
.index_footer_item {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.index_footer_legal {
|
|
margin-top: 0;
|
|
gap: 10px 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
|
|
.index_hero_container,
|
|
.index_products_container,
|
|
.index_popiart_container,
|
|
.index_product_detail_container,
|
|
.index_workflow_container,
|
|
.index_cloud_container,
|
|
.index_vision_container,
|
|
.index_footer_container {
|
|
width: calc(100% - 32px);
|
|
}
|
|
|
|
.index_products_heading_title,
|
|
.index_popiart_heading_title,
|
|
.index_popiart_assets_heading_title,
|
|
.index_product_detail_tv_heading_title,
|
|
.index_product_detail_mcn_heading_title,
|
|
.index_workflow_heading_title,
|
|
.index_cloud_heading_title,
|
|
.index_vision_heading_title {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.index_products_heading_eyebrow,
|
|
.index_popiart_heading_eyebrow,
|
|
.index_popiart_heading_desc,
|
|
.index_popiart_assets_heading_eyebrow,
|
|
.index_popiart_assets_heading_desc,
|
|
.index_product_detail_tv_heading_eyebrow,
|
|
.index_product_detail_tv_heading_desc,
|
|
.index_product_detail_mcn_heading_eyebrow,
|
|
.index_product_detail_mcn_heading_desc,
|
|
.index_workflow_heading_eyebrow,
|
|
.index_cloud_heading_eyebrow,
|
|
.index_cloud_heading_desc,
|
|
.index_vision_heading_eyebrow {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.index_hero {
|
|
.index_hero_title {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.index_hero_subtitle {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.index_hero_desc {
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
|
|
.index_products {
|
|
.index_products_grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.index_product_detail {
|
|
|
|
.index_product_detail_tv_img,
|
|
.index_product_detail_mcn_img {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 792 / 493;
|
|
}
|
|
|
|
.index_product_detail_mcn_img {
|
|
aspect-ratio: 792 / 439;
|
|
}
|
|
}
|
|
}
|