button { border:none ; outline:none } :root { --sk-body-link-color: rgb(0, 102, 204); --sk-link-disabled-opacity: 0.42 } a { color: var(--sk-body-link-color, rgb(0, 102, 204)); letter-spacing: inherit } a:disabled { text-decoration: none } a:hover { text-decoration: underline } a.disabled, a:disabled { opacity: var(--sk-link-disabled-opacity, 0.42) } :root { --sk-focus-color: #0071e3; --sk-focus-color-alt: rgb(0, 0, 0); --sk-focus-offset: 1px; --sk-focus-offset-container: 3px } .justify-content-start { justify-content: flex-start } .justify-content-end { justify-content: flex-end } .justify-content-center { justify-content: center } .justify-content-spacebetween { justify-content: space-between } .justify-content-spacearound { justify-content: space-around } .justify-content-spaceevenly { justify-content: space-evenly } .align-items-start { align-items: flex-start } .align-items-center { align-items: center } .align-items-end { align-items: flex-end } .align-self-start { align-self: flex-start } .align-self-center { align-self: center } .align-self-end { align-self: flex-end } .large-justify-content-start { justify-content: flex-start } .large-justify-content-end { justify-content: flex-end } .large-justify-content-center { justify-content: center } .large-justify-content-spacebetween { justify-content: space-between } .large-justify-content-spacearound { justify-content: space-around } .large-justify-content-spaceevenly { justify-content: space-evenly } .large-align-items-start { align-items: flex-start } .large-align-items-center { align-items: center } .large-align-items-end { align-items: flex-end } .large-align-self-start { align-self: flex-start } .large-align-self-center { align-self: center } .large-align-self-end { align-self: flex-end } @media(min-width:1441px) { .xlarge-justify-content-start { justify-content: flex-start } .xlarge-justify-content-end { justify-content: flex-end } .xlarge-justify-content-center { justify-content: center } .xlarge-justify-content-spacebetween { justify-content: space-between } .xlarge-justify-content-spacearound { justify-content: space-around } .xlarge-justify-content-spaceevenly { justify-content: space-evenly } .xlarge-align-items-start { align-items: flex-start } .xlarge-align-items-center { align-items: center } .xlarge-align-items-end { align-items: flex-end } .xlarge-align-self-start { align-self: flex-start } .xlarge-align-self-center { align-self: center } .xlarge-align-self-end { align-self: flex-end } } @media(max-width:1068px) { .medium-justify-content-start { justify-content: flex-start } .medium-justify-content-end { justify-content: flex-end } .medium-justify-content-center { justify-content: center } .medium-justify-content-spacebetween { justify-content: space-between } .medium-justify-content-spacearound { justify-content: space-around } .medium-justify-content-spaceevenly { justify-content: space-evenly } .medium-align-items-start { align-items: flex-start } .medium-align-items-center { align-items: center } .medium-align-items-end { align-items: flex-end } .medium-align-self-start { align-self: flex-start } .medium-align-self-center { align-self: center } .medium-align-self-end { align-self: flex-end } } @media(max-width:734px) { .small-justify-content-start { justify-content: flex-start } .small-justify-content-end { justify-content: flex-end } .small-justify-content-center { justify-content: center } .small-justify-content-spacebetween { justify-content: space-between } .small-justify-content-spacearound { justify-content: space-around } .small-justify-content-spaceevenly { justify-content: space-evenly } .small-align-items-start { align-items: flex-start } .small-align-items-center { align-items: center } .small-align-items-end { align-items: flex-end } .small-align-self-start { align-self: flex-start } .small-align-self-center { align-self: center } .small-align-self-end { align-self: flex-end } } @media(max-width:480px) { .xsmall-justify-content-start { justify-content: flex-start } .xsmall-justify-content-end { justify-content: flex-end } .xsmall-justify-content-center { justify-content: center } .xsmall-justify-content-spacebetween { justify-content: space-between } .xsmall-justify-content-spacearound { justify-content: space-around } .xsmall-justify-content-spaceevenly { justify-content: space-evenly } .xsmall-align-items-start { align-items: flex-start } .xsmall-align-items-center { align-items: center } .xsmall-align-items-end { align-items: flex-end } .xsmall-align-self-start { align-self: flex-start } .xsmall-align-self-center { align-self: center } .xsmall-align-self-end { align-self: flex-end } } .selfclear::after, .selfclear::before { content: " "; display: table } .selfclear::after { clear: both } .visuallyhidden { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0 0 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0 } @media(inverted-colors) { .no-inversion { filter: invert(1) } } .nowrap { display: inline-block; text-decoration: inherit; white-space: nowrap } .clear { clear: both } .cursor-grab { cursor: move; cursor: grab } .cursor-grabbing { cursor: move; cursor: grabbing } :root { --sk-footnote-font-size: 0.6em; --sk-footnote-offset-top: -0.5em } sub, sup { position: relative; font-size: var(--sk-footnote-font-size, 0.6em); vertical-align: initial } sup { top: var(--sk-footnote-offset-top, -0.5em) } sub { bottom: -0.25em } .row-reverse { flex-direction: row-reverse } .column { box-sizing: border-box; margin: 0; padding: 0; min-width: 0 } .large-offset-0 { margin-inline-start: 0 } .large-order-0 { order: 0 } .large-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333% } .large-offset-1 { margin-inline-start: 8.3333333333% } .large-order-1 { order: 1 } .large-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667% } .large-offset-2 { margin-inline-start: 16.6666666667% } .large-order-2 { order: 2 } .large-3 { flex-basis: 25%; max-width: 25% } .large-offset-3 { margin-inline-start: 25% } .large-order-3 { order: 3 } .large-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333% } .large-offset-4 { margin-inline-start: 33.3333333333% } .large-order-4 { order: 4 } .large-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667% } .large-offset-5 { margin-inline-start: 41.6666666667% } .large-order-5 { order: 5 } .large-6 { flex-basis: 50%; max-width: 50% } .large-offset-6 { margin-inline-start: 50% } .large-order-6 { order: 6 } .large-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333% } .large-offset-7 { margin-inline-start: 58.3333333333% } .large-order-7 { order: 7 } .large-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667% } .large-offset-8 { margin-inline-start: 66.6666666667% } .large-order-8 { order: 8 } .large-9 { flex-basis: 75%; max-width: 75% } .large-offset-9 { margin-inline-start: 75% } .large-order-9 { order: 9 } .large-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333% } .large-offset-10 { margin-inline-start: 83.3333333333% } .large-order-10 { order: 10 } .large-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667% } .large-offset-11 { margin-inline-start: 91.6666666667% } .large-order-11 { order: 11 } .large-12 { flex-basis: 100%; max-width: 100% } .large-offset-12 { margin-inline-start: 100% } .large-order-12 { order: 12 } .large-centered { margin-inline-start: auto; margin-inline-end: auto } .large-uncentered { margin-inline-start: 0; margin-inline-end: 0 } .large-last { margin-inline-start: auto } .large-notlast { margin-inline-start: 0 } .large-grow { flex: auto; max-width: none } .large-ungrow { flex: initial; max-width: none } @media(min-width:1441px) { .xlarge-offset-0 { margin-inline-start: 0 } .xlarge-order-0 { order: 0 } .xlarge-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333% } .xlarge-offset-1 { margin-inline-start: 8.3333333333% } .xlarge-order-1 { order: 1 } .xlarge-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667% } .xlarge-offset-2 { margin-inline-start: 16.6666666667% } .xlarge-order-2 { order: 2 } .xlarge-3 { flex-basis: 25%; max-width: 25% } .xlarge-offset-3 { margin-inline-start: 25% } .xlarge-order-3 { order: 3 } .xlarge-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333% } .xlarge-offset-4 { margin-inline-start: 33.3333333333% } .xlarge-order-4 { order: 4 } .xlarge-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667% } .xlarge-offset-5 { margin-inline-start: 41.6666666667% } .xlarge-order-5 { order: 5 } .xlarge-6 { flex-basis: 50%; max-width: 50% } .xlarge-offset-6 { margin-inline-start: 50% } .xlarge-order-6 { order: 6 } .xlarge-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333% } .xlarge-offset-7 { margin-inline-start: 58.3333333333% } .xlarge-order-7 { order: 7 } .xlarge-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667% } .xlarge-offset-8 { margin-inline-start: 66.6666666667% } .xlarge-order-8 { order: 8 } .xlarge-9 { flex-basis: 75%; max-width: 75% } .xlarge-offset-9 { margin-inline-start: 75% } .xlarge-order-9 { order: 9 } .xlarge-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333% } .xlarge-offset-10 { margin-inline-start: 83.3333333333% } .xlarge-order-10 { order: 10 } .xlarge-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667% } .xlarge-offset-11 { margin-inline-start: 91.6666666667% } .xlarge-order-11 { order: 11 } .xlarge-12 { flex-basis: 100%; max-width: 100% } .xlarge-offset-12 { margin-inline-start: 100% } .xlarge-order-12 { order: 12 } .xlarge-centered { margin-inline-start: auto; margin-inline-end: auto } .xlarge-uncentered { margin-inline-start: 0; margin-inline-end: 0 } .xlarge-last { margin-inline-start: auto } .xlarge-notlast { margin-inline-start: 0 } .xlarge-grow { flex: auto; max-width: none } .xlarge-ungrow { flex: initial; max-width: none } } @media(max-width:1068px) { .medium-offset-0 { margin-inline-start: 0 } .medium-order-0 { order: 0 } .medium-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333% } .medium-offset-1 { margin-inline-start: 8.3333333333% } .medium-order-1 { order: 1 } .medium-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667% } .medium-offset-2 { margin-inline-start: 16.6666666667% } .medium-order-2 { order: 2 } .medium-3 { flex-basis: 25%; max-width: 25% } .medium-offset-3 { margin-inline-start: 25% } .medium-order-3 { order: 3 } .medium-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333% } .medium-offset-4 { margin-inline-start: 33.3333333333% } .medium-order-4 { order: 4 } .medium-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667% } .medium-offset-5 { margin-inline-start: 41.6666666667% } .medium-order-5 { order: 5 } .medium-6 { flex-basis: 50%; max-width: 50% } .medium-offset-6 { margin-inline-start: 50% } .medium-order-6 { order: 6 } .medium-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333% } .medium-offset-7 { margin-inline-start: 58.3333333333% } .medium-order-7 { order: 7 } .medium-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667% } .medium-offset-8 { margin-inline-start: 66.6666666667% } .medium-order-8 { order: 8 } .medium-9 { flex-basis: 75%; max-width: 75% } .medium-offset-9 { margin-inline-start: 75% } .medium-order-9 { order: 9 } .medium-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333% } .medium-offset-10 { margin-inline-start: 83.3333333333% } .medium-order-10 { order: 10 } .medium-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667% } .medium-offset-11 { margin-inline-start: 91.6666666667% } .medium-order-11 { order: 11 } .medium-12 { flex-basis: 100%; max-width: 100% } .medium-offset-12 { margin-inline-start: 100% } .medium-order-12 { order: 12 } .medium-centered { margin-inline-start: auto; margin-inline-end: auto } .medium-uncentered { margin-inline-start: 0; margin-inline-end: 0 } .medium-last { margin-inline-start: auto } .medium-notlast { margin-inline-start: 0 } .medium-grow { flex: auto; max-width: none } .medium-ungrow { flex: initial; max-width: none } } @media(max-width:734px) { .small-offset-0 { margin-inline-start: 0 } .small-order-0 { order: 0 } .small-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333% } .small-offset-1 { margin-inline-start: 8.3333333333% } .small-order-1 { order: 1 } .small-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667% } .small-offset-2 { margin-inline-start: 16.6666666667% } .small-order-2 { order: 2 } .small-3 { flex-basis: 25%; max-width: 25% } .small-offset-3 { margin-inline-start: 25% } .small-order-3 { order: 3 } .small-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333% } .small-offset-4 { margin-inline-start: 33.3333333333% } .small-order-4 { order: 4 } .small-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667% } .small-offset-5 { margin-inline-start: 41.6666666667% } .small-order-5 { order: 5 } .small-6 { flex-basis: 50%; max-width: 50% } .small-offset-6 { margin-inline-start: 50% } .small-order-6 { order: 6 } .small-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333% } .small-offset-7 { margin-inline-start: 58.3333333333% } .small-order-7 { order: 7 } .small-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667% } .small-offset-8 { margin-inline-start: 66.6666666667% } .small-order-8 { order: 8 } .small-9 { flex-basis: 75%; max-width: 75% } .small-offset-9 { margin-inline-start: 75% } .small-order-9 { order: 9 } .small-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333% } .small-offset-10 { margin-inline-start: 83.3333333333% } .small-order-10 { order: 10 } .small-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667% } .small-offset-11 { margin-inline-start: 91.6666666667% } .small-order-11 { order: 11 } .small-12 { flex-basis: 100%; max-width: 100% } .small-offset-12 { margin-inline-start: 100% } .small-order-12 { order: 12 } .small-centered { margin-inline-start: auto; margin-inline-end: auto } .small-uncentered { margin-inline-start: 0; margin-inline-end: 0 } .small-last { margin-inline-start: auto } .small-notlast { margin-inline-start: 0 } .small-grow { flex: auto; max-width: none } .small-ungrow { flex: initial; max-width: none } } @media(max-width:480px) { .xsmall-offset-0 { margin-inline-start: 0 } .xsmall-order-0 { order: 0 } .xsmall-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333% } .xsmall-offset-1 { margin-inline-start: 8.3333333333% } .xsmall-order-1 { order: 1 } .xsmall-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667% } .xsmall-offset-2 { margin-inline-start: 16.6666666667% } .xsmall-order-2 { order: 2 } .xsmall-3 { flex-basis: 25%; max-width: 25% } .xsmall-offset-3 { margin-inline-start: 25% } .xsmall-order-3 { order: 3 } .xsmall-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333% } .xsmall-offset-4 { margin-inline-start: 33.3333333333% } .xsmall-order-4 { order: 4 } .xsmall-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667% } .xsmall-offset-5 { margin-inline-start: 41.6666666667% } .xsmall-order-5 { order: 5 } .xsmall-6 { flex-basis: 50%; max-width: 50% } .xsmall-offset-6 { margin-inline-start: 50% } .xsmall-order-6 { order: 6 } .xsmall-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333% } .xsmall-offset-7 { margin-inline-start: 58.3333333333% } .xsmall-order-7 { order: 7 } .xsmall-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667% } .xsmall-offset-8 { margin-inline-start: 66.6666666667% } .xsmall-order-8 { order: 8 } .xsmall-9 { flex-basis: 75%; max-width: 75% } .xsmall-offset-9 { margin-inline-start: 75% } .xsmall-order-9 { order: 9 } .xsmall-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333% } .xsmall-offset-10 { margin-inline-start: 83.3333333333% } .xsmall-order-10 { order: 10 } .xsmall-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667% } .xsmall-offset-11 { margin-inline-start: 91.6666666667% } .xsmall-order-11 { order: 11 } .xsmall-12 { flex-basis: 100%; max-width: 100% } .xsmall-offset-12 { margin-inline-start: 100% } .xsmall-order-12 { order: 12 } .xsmall-centered { margin-inline-start: auto; margin-inline-end: auto } .xsmall-uncentered { margin-inline-start: 0; margin-inline-end: 0 } .xsmall-last { margin-inline-start: auto } .xsmall-notlast { margin-inline-start: 0 } .xsmall-grow { flex: auto; max-width: none } .xsmall-ungrow { flex: initial; max-width: none } } .row-reverse .column { box-sizing: border-box; margin: 0; padding: 0; min-width: 0 } .row-reverse .large-offset-0 { margin-inline-end: 0 } .row-reverse .large-offset-1 { margin-inline-end: 8.3333333333% } .row-reverse .large-offset-2 { margin-inline-end: 16.6666666667% } .row-reverse .large-offset-3 { margin-inline-end: 25% } .row-reverse .large-offset-4 { margin-inline-end: 33.3333333333% } .row-reverse .large-offset-5 { margin-inline-end: 41.6666666667% } .row-reverse .large-offset-6 { margin-inline-end: 50% } .row-reverse .large-offset-7 { margin-inline-end: 58.3333333333% } .row-reverse .large-offset-8 { margin-inline-end: 66.6666666667% } .row-reverse .large-offset-9 { margin-inline-end: 75% } .row-reverse .large-offset-10 { margin-inline-end: 83.3333333333% } .row-reverse .large-offset-11 { margin-inline-end: 91.6666666667% } .row-reverse .large-offset-12 { margin-inline-end: 100% } .row-reverse .large-last { margin-inline-end: auto } .row-reverse .large-notlast { margin-inline-end: 0 } @media(min-width:1441px) { .row-reverse .xlarge-offset-0 { margin-inline-end: 0 } .row-reverse .xlarge-offset-1 { margin-inline-end: 8.3333333333% } .row-reverse .xlarge-offset-2 { margin-inline-end: 16.6666666667% } .row-reverse .xlarge-offset-3 { margin-inline-end: 25% } .row-reverse .xlarge-offset-4 { margin-inline-end: 33.3333333333% } .row-reverse .xlarge-offset-5 { margin-inline-end: 41.6666666667% } .row-reverse .xlarge-offset-6 { margin-inline-end: 50% } .row-reverse .xlarge-offset-7 { margin-inline-end: 58.3333333333% } .row-reverse .xlarge-offset-8 { margin-inline-end: 66.6666666667% } .row-reverse .xlarge-offset-9 { margin-inline-end: 75% } .row-reverse .xlarge-offset-10 { margin-inline-end: 83.3333333333% } .row-reverse .xlarge-offset-11 { margin-inline-end: 91.6666666667% } .row-reverse .xlarge-offset-12 { margin-inline-end: 100% } .row-reverse .xlarge-last { margin-inline-end: auto } .row-reverse .xlarge-notlast { margin-inline-end: 0 } } @media(max-width:1068px) { .row-reverse .medium-offset-0 { margin-inline-end: 0 } .row-reverse .medium-offset-1 { margin-inline-end: 8.3333333333% } .row-reverse .medium-offset-2 { margin-inline-end: 16.6666666667% } .row-reverse .medium-offset-3 { margin-inline-end: 25% } .row-reverse .medium-offset-4 { margin-inline-end: 33.3333333333% } .row-reverse .medium-offset-5 { margin-inline-end: 41.6666666667% } .row-reverse .medium-offset-6 { margin-inline-end: 50% } .row-reverse .medium-offset-7 { margin-inline-end: 58.3333333333% } .row-reverse .medium-offset-8 { margin-inline-end: 66.6666666667% } .row-reverse .medium-offset-9 { margin-inline-end: 75% } .row-reverse .medium-offset-10 { margin-inline-end: 83.3333333333% } .row-reverse .medium-offset-11 { margin-inline-end: 91.6666666667% } .row-reverse .medium-offset-12 { margin-inline-end: 100% } .row-reverse .medium-last { margin-inline-end: auto } .row-reverse .medium-notlast { margin-inline-end: 0 } } @media(max-width:734px) { .row-reverse .small-offset-0 { margin-inline-end: 0 } .row-reverse .small-offset-1 { margin-inline-end: 8.3333333333% } .row-reverse .small-offset-2 { margin-inline-end: 16.6666666667% } .row-reverse .small-offset-3 { margin-inline-end: 25% } .row-reverse .small-offset-4 { margin-inline-end: 33.3333333333% } .row-reverse .small-offset-5 { margin-inline-end: 41.6666666667% } .row-reverse .small-offset-6 { margin-inline-end: 50% } .row-reverse .small-offset-7 { margin-inline-end: 58.3333333333% } .row-reverse .small-offset-8 { margin-inline-end: 66.6666666667% } .row-reverse .small-offset-9 { margin-inline-end: 75% } .row-reverse .small-offset-10 { margin-inline-end: 83.3333333333% } .row-reverse .small-offset-11 { margin-inline-end: 91.6666666667% } .row-reverse .small-offset-12 { margin-inline-end: 100% } .row-reverse .small-last { margin-inline-end: auto } .row-reverse .small-notlast { margin-inline-end: 0 } } @media(max-width:480px) { .row-reverse .xsmall-offset-0 { margin-inline-end: 0 } .row-reverse .xsmall-offset-1 { margin-inline-end: 8.3333333333% } .row-reverse .xsmall-offset-2 { margin-inline-end: 16.6666666667% } .row-reverse .xsmall-offset-3 { margin-inline-end: 25% } .row-reverse .xsmall-offset-4 { margin-inline-end: 33.3333333333% } .row-reverse .xsmall-offset-5 { margin-inline-end: 41.6666666667% } .row-reverse .xsmall-offset-6 { margin-inline-end: 50% } .row-reverse .xsmall-offset-7 { margin-inline-end: 58.3333333333% } .row-reverse .xsmall-offset-8 { margin-inline-end: 66.6666666667% } .row-reverse .xsmall-offset-9 { margin-inline-end: 75% } .row-reverse .xsmall-offset-10 { margin-inline-end: 83.3333333333% } .row-reverse .xsmall-offset-11 { margin-inline-end: 91.6666666667% } .row-reverse .xsmall-offset-12 { margin-inline-end: 100% } .row-reverse .xsmall-last { margin-inline-end: auto } .row-reverse .xsmall-notlast { margin-inline-end: 0 } } .grid { --sk-cssgrid-columns: 12; --sk-cssgrid-column-gutter-inner-large: var(--sk-cssgrid-column-gutter-inner, 24px); --sk-cssgrid-column-gutter-inner-xlarge: var(--sk-cssgrid-column-gutter-inner, var(--sk-cssgrid-column-gutter-inner-large)); --sk-cssgrid-column-gutter-inner-medium: var(--sk-cssgrid-column-gutter-inner, var(--sk-cssgrid-column-gutter-inner-large)); --sk-cssgrid-column-gutter-inner-small: var(--sk-cssgrid-column-gutter-inner, var(--sk-cssgrid-column-gutter-inner-large)); --sk-cssgrid-column-gutter-inner-xsmall: var(--sk-cssgrid-column-gutter-inner, var(--sk-cssgrid-column-gutter-inner-large)); grid-column-gap: var(--sk-cssgrid-column-gutter-inner-large); --sk-cssgrid-row-gutter-inner-large: var(--sk-cssgrid-row-gutter-inner, 24px); --sk-cssgrid-row-gutter-inner-xlarge: var(--sk-cssgrid-row-gutter-inner, var(--sk-cssgrid-row-gutter-inner-large)); --sk-cssgrid-row-gutter-inner-medium: var(--sk-cssgrid-row-gutter-inner, var(--sk-cssgrid-row-gutter-inner-large)); --sk-cssgrid-row-gutter-inner-small: var(--sk-cssgrid-row-gutter-inner, var(--sk-cssgrid-row-gutter-inner-large)); --sk-cssgrid-row-gutter-inner-xsmall: var(--sk-cssgrid-row-gutter-inner, var(--sk-cssgrid-row-gutter-inner-large)); grid-row-gap: var(--sk-cssgrid-row-gutter-inner-large); --sk-cssgrid-column-gutter-outer-large: var(--sk-cssgrid-column-gutter-outer, 24px); --sk-cssgrid-column-gutter-outer-xlarge: var(--sk-cssgrid-column-gutter-outer, var(--sk-cssgrid-column-gutter-outer-large)); --sk-cssgrid-column-gutter-outer-medium: var(--sk-cssgrid-column-gutter-outer, var(--sk-cssgrid-column-gutter-outer-large)); --sk-cssgrid-column-gutter-outer-small: var(--sk-cssgrid-column-gutter-outer, var(--sk-cssgrid-column-gutter-outer-large)); --sk-cssgrid-column-gutter-outer-xsmall: var(--sk-cssgrid-column-gutter-outer, var(--sk-cssgrid-column-gutter-outer-large)); --sk-cssgrid-row-gutter-outer-large: var(--sk-cssgrid-row-gutter-outer, 0); --sk-cssgrid-row-gutter-outer-xlarge: var(--sk-cssgrid-row-gutter-outer, var(--sk-cssgrid-row-gutter-outer-large)); --sk-cssgrid-row-gutter-outer-medium: var(--sk-cssgrid-row-gutter-outer, var(--sk-cssgrid-row-gutter-outer-large)); --sk-cssgrid-row-gutter-outer-small: var(--sk-cssgrid-row-gutter-outer, var(--sk-cssgrid-row-gutter-outer-large)); --sk-cssgrid-row-gutter-outer-xsmall: var(--sk-cssgrid-row-gutter-outer, var(--sk-cssgrid-row-gutter-outer-large)); padding: var(--sk-cssgrid-row-gutter-outer-large) var(--sk-cssgrid-column-gutter-outer-large); margin-inline-start: auto; margin-inline-end: auto; display: grid; grid-template-columns: repeat(var(--sk-cssgrid-columns), minmax(0, 1fr)) } @media(min-width:1441px) { .grid { grid-column-gap: var(--sk-cssgrid-column-gutter-inner-xlarge) } } @media(max-width:1068px) { .grid { grid-column-gap: var(--sk-cssgrid-column-gutter-inner-medium) } } @media(max-width:734px) { .grid { grid-column-gap: var(--sk-cssgrid-column-gutter-inner-small) } } @media(max-width:480px) { .grid { grid-column-gap: var(--sk-cssgrid-column-gutter-inner-xsmall) } } @media(min-width:1441px) { .grid { grid-row-gap: var(--sk-cssgrid-row-gutter-inner-xlarge) } } @media(max-width:1068px) { .grid { grid-row-gap: var(--sk-cssgrid-row-gutter-inner-medium) } } @media(max-width:734px) { .grid { grid-row-gap: var(--sk-cssgrid-row-gutter-inner-small) } } @media(max-width:480px) { .grid { grid-row-gap: var(--sk-cssgrid-row-gutter-inner-xsmall) } } @media(min-width:1441px) { .grid { padding-left: var(--sk-cssgrid-column-gutter-outer-xlarge) } } @media(max-width:1068px) { .grid { padding-left: var(--sk-cssgrid-column-gutter-outer-medium) } } @media(max-width:734px) { .grid { padding-left: var(--sk-cssgrid-column-gutter-outer-small) } } @media(max-width:480px) { .grid { padding-left: var(--sk-cssgrid-column-gutter-outer-xsmall) } } @media(min-width:1441px) { .grid { padding-right: var(--sk-cssgrid-column-gutter-outer-xlarge) } } @media(max-width:1068px) { .grid { padding-right: var(--sk-cssgrid-column-gutter-outer-medium) } } @media(max-width:734px) { .grid { padding-right: var(--sk-cssgrid-column-gutter-outer-small) } } @media(max-width:480px) { .grid { padding-right: var(--sk-cssgrid-column-gutter-outer-xsmall) } } @media(min-width:1441px) { .grid { padding-top: var(--sk-cssgrid-row-gutter-outer-xlarge) } } @media(max-width:1068px) { .grid { padding-top: var(--sk-cssgrid-row-gutter-outer-medium) } } @media(max-width:734px) { .grid { padding-top: var(--sk-cssgrid-row-gutter-outer-small) } } @media(max-width:480px) { .grid { padding-top: var(--sk-cssgrid-row-gutter-outer-xsmall) } } @media(min-width:1441px) { .grid { padding-bottom: var(--sk-cssgrid-row-gutter-outer-xlarge) } } @media(max-width:1068px) { .grid { padding-bottom: var(--sk-cssgrid-row-gutter-outer-medium) } } @media(max-width:734px) { .grid { padding-bottom: var(--sk-cssgrid-row-gutter-outer-small) } } @media(max-width:480px) { .grid { padding-bottom: var(--sk-cssgrid-row-gutter-outer-xsmall) } } .grid .grid { height: 100%; padding-left: 0; padding-right: 0 } .grid-item { position: relative; box-sizing: border-box } .large-span-0 { grid-column: span 0 } .large-span-1 { grid-column: span 1 } .large-span-2 { grid-column: span 2 } .large-span-3 { grid-column: span 3 } .large-span-4 { grid-column: span 4 } .large-span-5 { grid-column: span 5 } .large-span-6 { grid-column: span 6 } .large-span-7 { grid-column: span 7 } .large-span-8 { grid-column: span 8 } .large-span-9 { grid-column: span 9 } .large-span-10 { grid-column: span 10 } .large-span-11 { grid-column: span 11 } .large-span-12 { grid-column: span 12 } @media(min-width:1441px) { .xlarge-span-0 { grid-column: span 0 } .xlarge-span-1 { grid-column: span 1 } .xlarge-span-2 { grid-column: span 2 } .xlarge-span-3 { grid-column: span 3 } .xlarge-span-4 { grid-column: span 4 } .xlarge-span-5 { grid-column: span 5 } .xlarge-span-6 { grid-column: span 6 } .xlarge-span-7 { grid-column: span 7 } .xlarge-span-8 { grid-column: span 8 } .xlarge-span-9 { grid-column: span 9 } .xlarge-span-10 { grid-column: span 10 } .xlarge-span-11 { grid-column: span 11 } .xlarge-span-12 { grid-column: span 12 } } @media(max-width:1068px) { .medium-span-0 { grid-column: span 0 } .medium-span-1 { grid-column: span 1 } .medium-span-2 { grid-column: span 2 } .medium-span-3 { grid-column: span 3 } .medium-span-4 { grid-column: span 4 } .medium-span-5 { grid-column: span 5 } .medium-span-6 { grid-column: span 6 } .medium-span-7 { grid-column: span 7 } .medium-span-8 { grid-column: span 8 } .medium-span-9 { grid-column: span 9 } .medium-span-10 { grid-column: span 10 } .medium-span-11 { grid-column: span 11 } .medium-span-12 { grid-column: span 12 } } @media(max-width:734px) { .small-span-0 { grid-column: span 0 } .small-span-1 { grid-column: span 1 } .small-span-2 { grid-column: span 2 } .small-span-3 { grid-column: span 3 } .small-span-4 { grid-column: span 4 } .small-span-5 { grid-column: span 5 } .small-span-6 { grid-column: span 6 } .small-span-7 { grid-column: span 7 } .small-span-8 { grid-column: span 8 } .small-span-9 { grid-column: span 9 } .small-span-10 { grid-column: span 10 } .small-span-11 { grid-column: span 11 } .small-span-12 { grid-column: span 12 } } @media(max-width:480px) { .xsmall-span-0 { grid-column: span 0 } .xsmall-span-1 { grid-column: span 1 } .xsmall-span-2 { grid-column: span 2 } .xsmall-span-3 { grid-column: span 3 } .xsmall-span-4 { grid-column: span 4 } .xsmall-span-5 { grid-column: span 5 } .xsmall-span-6 { grid-column: span 6 } .xsmall-span-7 { grid-column: span 7 } .xsmall-span-8 { grid-column: span 8 } .xsmall-span-9 { grid-column: span 9 } .xsmall-span-10 { grid-column: span 10 } .xsmall-span-11 { grid-column: span 11 } .xsmall-span-12 { grid-column: span 12 } } a.icon { text-decoration: none } a.icon:hover { text-decoration: underline } html:not([dir=rtl]):lang(ja) .more::before { position: relative; top: -0.1em } html:not([dir=rtl]):lang(ko) .more::before { position: relative; top: -0.08em } html:not([dir=rtl]):lang(ja) .more::after { position: relative; top: -0.1em } html:not([dir=rtl]):lang(ko) .more::after { position: relative; top: -0.08em } .more-block { margin-top: .5em } a.more { text-decoration: none } a.more:hover { text-decoration: underline } body { min-width: 320px } .large-hide { display: none } .large-show { display: block } .large-show-inline { display: inline } .large-show-inlineblock { display: inline-block } @media(min-width:1441px) { .xlarge-hide { display: none } .xlarge-show { display: block } .xlarge-show-inline { display: inline } .xlarge-show-inlineblock { display: inline-block } } @media(max-width:1068px) { .medium-hide { display: none } .medium-show { display: block } .medium-show-inline { display: inline } .medium-show-inlineblock { display: inline-block } } @media(max-width:734px) { .small-hide { display: none } .small-show { display: block } .small-show-inline { display: inline } .small-show-inlineblock { display: inline-block } } @media(max-width:480px) { .xsmall-hide { display: none } .xsmall-show { display: block } .xsmall-show-inline { display: inline } .xsmall-show-inlineblock { display: inline-block } } :root { --sk-glyph: rgb(0, 0, 0); --sk-glyph-gray: rgb(29, 29, 31); --sk-glyph-gray-alpha: rgba(0, 0, 0, 0.88); --sk-glyph-gray-secondary: rgb(110, 110, 115); --sk-glyph-gray-secondary-alpha: rgba(0, 0, 0, 0.56); --sk-glyph-gray-secondary-alt: rgb(66, 66, 69); --sk-glyph-gray-secondary-alt-alpha: rgba(0, 0, 0, 0.72); --sk-glyph-gray-tertiary: rgb(134, 134, 139); --sk-glyph-gray-tertiary-alpha: rgba(0, 0, 0, 0.48); --sk-glyph-blue: rgb(0, 102, 204); --sk-glyph-orange: rgb(182, 68, 0); --sk-glyph-green: rgb(0, 128, 9); --sk-glyph-red: rgb(227, 0, 0); --sk-fill: rgb(255, 255, 255); --sk-fill-secondary: rgb(250, 250, 252); --sk-fill-tertiary: rgb(245, 245, 247); --sk-fill-gray: rgb(29, 29, 31); --sk-fill-gray-alpha: rgba(0, 0, 0, 0.88); --sk-fill-gray-secondary: rgb(134, 134, 139); --sk-fill-gray-secondary-alpha: rgba(0, 0, 0, 0.48); --sk-fill-gray-tertiary: rgb(210, 210, 215); --sk-fill-gray-tertiary-alpha: rgba(0, 0, 0, 0.16); --sk-fill-gray-quaternary: rgb(232, 232, 237); --sk-fill-gray-quaternary-alpha: rgba(0, 0, 0, 0.08); --sk-fill-blue: rgb(0, 113, 227); --sk-fill-orange: rgb(245, 99, 0); --sk-fill-orange-secondary: rgb(255, 249, 244); --sk-fill-green: rgb(3, 161, 14); --sk-fill-green-secondary: rgb(245, 255, 246); --sk-fill-red: rgb(227, 0, 0); --sk-fill-red-secondary: rgb(255, 242, 244); --sk-fill-yellow: rgb(255, 224, 69); --sk-fill-yellow-secondary: rgb(255, 254, 242); --sk-productred: rgb(175, 30, 45); --sk-enviro-green: rgb(0, 217, 89); --sk-enviro-neutral: rgb(232, 232, 237) } .badge-tiny.badge-inline { --sk-badge-margin: 8px; --sk-badge-display: inline-block } .badge-no-scrim { --sk-badge-border-radius: 0; --sk-badge-horizontal-padding: 0; --sk-badge-vertical-padding: 0; --sk-badge-background: transparent } :root { --sk-links-inline-margin: 0.8em; --sk-links-stacked-margin: 0.4em } .link { color: var(--sk-body-link-color, rgb(0, 102, 204)); letter-spacing: inherit } .link:disabled { text-decoration: none } .link:hover { text-decoration: underline } .link.disabled, .link:disabled { opacity: var(--sk-link-disabled-opacity, 0.42) } .links-inline { margin-left: 0; margin-right: 0; list-style: none } .links-inline li { display: inline-block; margin-inline: var(--sk-links-inline-margin, 0.8em) } .links-inline li:first-child { margin-inline-start: 0 } .links-inline li:last-child { margin-inline-end: 0 } .links-stacked { margin-left: 0; margin-right: 0; list-style: none } .links-stacked li { margin: 0; display: block } .links-stacked li+li { margin-top: var(--sk-links-stacked-margin, 0.4em) } .link-inline, .link-inline:link { text-decoration: underline } .link-standalone:link:link { text-decoration: none } .link-standalone:link:link:hover { text-decoration: underline } .button { --sk-button-color: rgb(255, 255, 255); --sk-button-color-hover: var(--sk-button-color); --sk-button-color-active: var(--sk-button-color-hover); --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.42); --sk-button-border-color: transparent; --sk-button-border-radius: 980px; --sk-button-margin-horizontal: 14px; --sk-button-margin-vertical: 14px; --sk-button-min-width-basis: 60px; --sk-button-padding-horizontal: 16px; --sk-button-padding-vertical: 9px; --sk-button-border-width: 1px; --sk-button-box-sizing: content-box; --sk-button-width: auto; --sk-button-display: inline-block; font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; background: var(--sk-button-background); color: var(--sk-button-color); padding-block: calc(var(--sk-button-padding-vertical) - var(--sk-button-border-width)); padding-inline: calc(var(--sk-button-padding-horizontal) - var(--sk-button-border-width)); border-radius: var(--sk-button-border-radius); border: var(--sk-button-border-width) solid var(--sk-button-border-color); width: var(--sk-button-width); min-width: calc(var(--sk-button-min-width-basis) - var(--sk-button-padding-horizontal)*2); cursor: pointer; display: var(--sk-button-display); box-sizing: var(--sk-button-box-sizing); text-align: center; text-decoration: none; white-space: nowrap; --sk-button-background: rgb(0, 113, 227); --sk-button-background-hover: #0076DF; --sk-button-background-active: #006EDB } .button:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .button:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .button:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .button:lang(ko), .button:lang(zh) { letter-spacing: 0em } .button:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .button:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .button:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .button:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .button:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .button:hover { background: var(--sk-button-background-hover, var(--sk-button-background)); color: var(--sk-button-color-hover, var(--sk-button-color)); text-decoration: none; border-color: rgba(0, 0, 0, 0) } .button:focus-visible { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: var(--sk-focus-offset-container, 3px) } .button:active { background: var(--sk-button-background-active, var(--sk-button-background)); color: var(--sk-button-color-active, var(--sk-button-color)); outline: none } .button.disabled, .button:disabled { pointer-events: none; opacity: var(--sk-button-disabled-opacity) } .button-block { --sk-button-box-sizing: border-box; --sk-button-width: 100%; --sk-button-display: block; --sk-button-border-radius: 8px; --sk-button-margin-horizontal: 9px; --sk-button-margin-vertical: 9px } .button-neutral { --sk-button-background: rgb(29, 29, 31); --sk-button-background-hover: #272729; --sk-button-background-active: #18181A; --sk-button-color: rgb(255, 255, 255) } .button-secondary { --sk-button-background: transparent; --sk-button-background-hover: #0076DF; --sk-button-background-active: #006EDB; --sk-button-color: rgb(0, 102, 204); --sk-button-color-hover: rgb(255, 255, 255); --sk-button-border-color: rgb(0, 102, 204) } .button-secondary-neutral { --sk-button-background: transparent; --sk-button-background-hover: #272729; --sk-button-background-active: #18181A; --sk-button-color: rgb(29, 29, 31); --sk-button-color-hover: rgb(255, 255, 255); --sk-button-border-color: rgb(29, 29, 31) } .button-super { --sk-button-padding-horizontal: 31px; --sk-button-padding-vertical: 18px; --sk-button-min-width-basis: 90px; --sk-button-margin-horizontal: 22px; --sk-button-margin-vertical: 22px; font-size: 17px; line-height: 1.1764805882; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .button-super:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .button-super:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .button-super:lang(ko) { letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .button-super:lang(zh) { letter-spacing: 0em } .button-super:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .button-super:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .button-super:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .button-super:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .button-super:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .button-super.button-block { --sk-button-border-radius: 12px; --sk-button-margin-horizontal: 14px; --sk-button-margin-vertical: 14px } .button-elevated { --sk-button-padding-horizontal: 22px; --sk-button-padding-vertical: 12px; --sk-button-min-width-basis: 70px; --sk-button-margin-horizontal: 18px; --sk-button-margin-vertical: 18px; font-size: 17px; line-height: 1.1764805882; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .button-elevated:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .button-elevated:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .button-elevated:lang(ko) { letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .button-elevated:lang(zh) { letter-spacing: 0em } .button-elevated:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .button-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .button-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .button-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .button-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .button-elevated.button-block { --sk-button-border-radius: 10px; --sk-button-margin-horizontal: 11px; --sk-button-margin-vertical: 11px } .button-reduced { --sk-button-padding-horizontal: 11px; --sk-button-padding-vertical: 4px; --sk-button-min-width-basis: 45px; --sk-button-margin-horizontal: 10px; --sk-button-margin-vertical: 10px; font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .button-reduced:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .button-reduced:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .button-reduced:lang(ko) { letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .button-reduced:lang(zh) { letter-spacing: 0em } .button-reduced:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .button-reduced:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .button-reduced:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .button-reduced:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .button-reduced:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .button-reduced.button-block { --sk-button-border-radius: 5px; --sk-button-margin-horizontal: 6px; --sk-button-margin-vertical: 6px } .button-margin { margin-inline-end: var(--sk-button-margin-horizontal); margin-bottom: var(--sk-button-margin-vertical) } :root { --sk-footnote-reduced-font-size: 0.45em; --sk-footnote-reduced-offset-top: -0.86em } .footnote a { vertical-align: inherit; color: inherit } .footnote-reduced { font-size: .45em } sup.footnote-reduced { top: -0.86em } sub.footnote-reduced { bottom: -0.36em } .footnote-supglyph { position: relative; vertical-align: initial; text-underline-offset: -0.28em } .footnote-supglyph.footnote-reduced { font-size: .9em; top: -0.09em } .footnote-diamond { position: relative; vertical-align: initial; text-underline-offset: -0.28em; font-feature-settings: "numr"; font-size: 1em } sup.footnote-diamond { top: auto } sub.footnote-diamond { bottom: -0.5em } .footnote-diamond.footnote-reduced { font-size: .9em; top: -0.09em } sub.footnote-diamond.footnote-reduced { top: auto; bottom: -0.52em } .footnote-number { position: relative; vertical-align: initial; text-underline-offset: -0.28em; font-feature-settings: "numr"; font-size: 1em } sup.footnote-number { top: auto } sub.footnote-number { bottom: -0.5em } .footnote-number.footnote-reduced { font-size: .9em; top: -0.09em } sub.footnote-number.footnote-reduced { top: auto; bottom: -0.52em } .footnote-comma { font-size: .55em; line-height: 0; vertical-align: super; margin-inline-end: .12em; margin-inline-start: .03em } .footnote-comma.footnote-reduced { font-size: .65em } .paddlenav { --sk-paddlenav-diameter: 36px; --sk-paddlenav-arrow-color: rgba(0, 0, 0, 0.56); --sk-paddlenav-arrow-color-hover: rgba(0, 0, 0, 0.64); --sk-paddlenav-arrow-color-active: rgba(0, 0, 0, 0.64); --sk-paddlenav-background: transparent; --sk-paddlenav-background-hover: transparent; --sk-paddlenav-background-active: transparent } .paddlenav, .paddlenav ul { margin: 0; list-style: none; display: flex; justify-content: center } .paddlenav .paddlenav-arrow { background: var(--sk-paddlenav-background); color: var(--sk-paddlenav-arrow-color); display: block; width: var(--sk-paddlenav-diameter); height: var(--sk-paddlenav-diameter); border-radius: var(--sk-paddlenav-diameter); font-style: normal; overflow: hidden; position: absolute; text-align: center; line-height: 1; transition: background 100ms linear, color 100ms linear, opacity 100ms linear } .paddlenav .paddlenav-arrow-next, .paddlenav .paddlenav-arrow-previous { margin-top: calc(var(--sk-paddlenav-diameter)*-0.5); top: 50% } .paddlenav .paddlenav-arrow-down, .paddlenav .paddlenav-arrow-up { margin-left: calc(var(--sk-paddlenav-diameter)*-0.5); left: 50% } .paddlenav .paddlenav-arrow svg path { fill: var(--sk-paddlenav-arrow-color); transition: fill 100ms linear } .paddlenav .paddlenav-arrow:hover { background: var(--sk-paddlenav-background-hover); color: var(--sk-paddlenav-arrow-color-hover); text-decoration: none } .paddlenav .paddlenav-arrow:hover svg path { fill: var(--sk-paddlenav-arrow-color-hover) } .paddlenav .paddlenav-arrow:active { background: var(--sk-paddlenav-background-active); color: var(--sk-paddlenav-arrow-color-active) } .paddlenav .paddlenav-arrow:active svg path { fill: var(--sk-paddlenav-arrow-color-active) } .paddlenav .paddlenav-arrow:focus-visible { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: var(--sk-focus-offset-container, 3px) } .paddlenav .paddlenav-arrow.disabled, .paddlenav .paddlenav-arrow:disabled { pointer-events: none; opacity: var(--sk-link-disabled-opacity, 0.42) } .paddlenav .paddlenav-arrow-previous { inset-inline-start: 18px } .paddlenav .paddlenav-arrow-next { inset-inline-end: 18px } .paddlenav .paddlenav-arrow-up { top: 18px } .paddlenav .paddlenav-arrow-down { bottom: 18px } .paddlenav-elevated { --sk-paddlenav-diameter: 56px } .paddlenav-super { --sk-paddlenav-diameter: 90px } .paddlenav-alpha { --sk-paddlenav-background: rgba(210, 210, 215, 0.64); --sk-paddlenav-background-hover: rgba(223, 223, 227, 0.6976); --sk-paddlenav-background-active: rgba(193, 193, 198, 0.6544) } .paddlenav-solid { --sk-paddlenav-background: rgb(232, 232, 237); --sk-paddlenav-background-hover: #ececf0; --sk-paddlenav-background-active: #dfdfe4 } .paddlenav-justified.paddlenav-outside .paddlenav-arrow-previous { inset-inline-start: 18px; inset-inline-start: calc(var(--sk-paddlenav-diameter)*-1 + -18px) } .paddlenav-justified.paddlenav-outside .paddlenav-arrow-next { inset-inline-end: 18px; inset-inline-end: calc(var(--sk-paddlenav-diameter)*-1 + -18px) } .paddlenav-side-aligned .paddlenav-arrow-next, .paddlenav-side-aligned .paddlenav-arrow-previous { top: 100%; margin-top: calc(var(--sk-paddlenav-diameter)*-1 + -18px) } .paddlenav-side-aligned .paddlenav-arrow-previous { inset-inline-start: auto; inset-inline-end: calc(var(--sk-paddlenav-diameter) + 36px) } .paddlenav-side-aligned .paddlenav-arrow-next { inset-inline-end: 18px } .paddlenav-side-aligned.paddlenav-outside .paddlenav-arrow-next, .paddlenav-side-aligned.paddlenav-outside .paddlenav-arrow-previous { top: 100%; margin-top: 18px } .paddlenav-side-aligned.paddlenav-outside .paddlenav-arrow-previous { inset-inline-start: auto; inset-inline-end: calc(var(--sk-paddlenav-diameter) + 36px); inset-inline-end: calc(var(--sk-paddlenav-diameter) + 18px) } .paddlenav-side-aligned.paddlenav-outside .paddlenav-arrow-next { inset-inline-end: 18px; inset-inline-end: 0 } .paddlenav-centered .paddlenav-arrow-next, .paddlenav-centered .paddlenav-arrow-previous { top: 100%; margin-top: calc(var(--sk-paddlenav-diameter)*-1 + -18px) } .paddlenav-centered .paddlenav-arrow { inset-inline-end: auto; inset-inline-start: auto } .paddlenav-centered .paddlenav-arrow-previous { margin-inline-start: calc(var(--sk-paddlenav-diameter)*-1 + -9px) } .paddlenav-centered .paddlenav-arrow-next { margin-inline-start: 9px } .paddlenav-centered.paddlenav-outside .paddlenav-arrow-next, .paddlenav-centered.paddlenav-outside .paddlenav-arrow-previous { top: 100%; margin-top: 18px } .paddlenav-centered.paddlenav-outside .paddlenav-arrow { inset-inline-end: auto; inset-inline-start: auto } .paddlenav-centered.paddlenav-outside .paddlenav-arrow-previous { margin-inline-start: calc(var(--sk-paddlenav-diameter)*-1 + -9px) } .paddlenav-centered.paddlenav-outside .paddlenav-arrow-next { margin-inline-start: 9px } .with-paddlenav { position: relative } html.no-touch .with-paddlenav-onhover .paddlenav-arrow { opacity: 0; transition: background 100ms linear, color 100ms linear, opacity 100ms linear } html.no-touch .with-paddlenav-onhover .paddlenav-arrow:focus-visible, html.no-touch .with-paddlenav-onhover:hover .paddlenav-arrow { opacity: 1 } html.no-touch .with-paddlenav-onhover .paddlenav-arrow.disabled, html.no-touch .with-paddlenav-onhover .paddlenav-arrow:disabled { opacity: 0 } .with-paddlenav-visuallyhidden .paddlenav-arrow { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0 0 99.9% 99.9%) } .with-paddlenav-visuallyhidden .paddlenav-arrow:focus-visible, .with-paddlenav-visuallyhidden .paddlenav-arrow:hover { clip: auto; clip-path: none } .stat { --sk-stat-value-color: rgb(29, 29, 31); --sk-stat-caption-color: rgb(29, 29, 31); --sk-stat-currency-offset: -0.375em; --sk-stat-caption-lines-top: 1; --sk-stat-caption-lines-bottom: 1; --sk-stat-margin-top: calc(1em*var(--sk-stat-caption-lines-top)); --sk-stat-margin-bottom: calc(1em*var(--sk-stat-caption-lines-bottom)); margin-inline-end: 2em; color: var(--sk-stat-value-color); box-sizing: border-box; display: inline-block; font-size: 20px; min-width: 5em } .stat, .stat .stat-content { position: relative; z-index: 1 } .stat .stat-content { margin-top: var(--sk-stat-margin-top); margin-bottom: var(--sk-stat-margin-bottom); padding-top: 4px; padding-bottom: 2px } .stat .stat-value { display: block; inset-inline-start: -2px; white-space: nowrap; position: relative; z-index: 1 } .stat .stat-caption { color: var(--sk-stat-caption-color); box-sizing: border-box; display: block; position: absolute; inset-inline-start: 0; top: 100%; width: 100%; z-index: 1 } .stat .stat-caption:first-child { top: auto; bottom: 100% } .stat .stat-glyph-cap-height { font-feature-settings: "case" } .stat .stat-unit-currency { position: relative; z-index: 1; top: var(--sk-stat-currency-offset) } .stat .stat-value { font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: -0.003em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-value:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-value:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-value:lang(ko) { letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-value:lang(zh) { letter-spacing: 0em } .stat .stat-value:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-value:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-value:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-value:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-value:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-caption { font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-caption:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-caption:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-caption:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-caption:lang(th), .stat .stat-caption:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .stat .stat-caption:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-caption:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-caption:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-caption:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-caption:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-unit-currency { font-size: 32px; line-height: 1; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-unit-currency:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-unit-currency:lang(ja) { font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-unit-currency:lang(ko) { font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-unit-currency:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-unit-currency:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-unit-currency:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-unit-currency:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat .stat-unit-currency:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-center { text-align: center } .stat-right { margin-inline-end: 2em; text-align: end } @media(max-width:1068px) { .stat-right { margin-inline-end: 1em } } .stat-right .stat-caption { margin-inline-start: -0.3em } .stat-super { --sk-stat-currency-offset: -0.32em } .stat-super .stat-value { font-size: 80px; line-height: 1; font-weight: 600; letter-spacing: -0.015em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-value:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-value:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-value:lang(ko) { letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-value:lang(zh) { letter-spacing: 0em } .stat-super .stat-value:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-value:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-value:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-value:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-value:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-caption { font-size: 17px; line-height: 1.2353641176; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-caption:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-caption:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-caption:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-caption:lang(ko), .stat-super .stat-caption:lang(th), .stat-super .stat-caption:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .stat-super .stat-caption:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-caption:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-caption:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-caption:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-caption:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-unit-currency { font-size: 56px; line-height: 1; font-weight: 600; letter-spacing: -0.005em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-unit-currency:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-unit-currency:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-unit-currency:lang(ko) { letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-unit-currency:lang(zh) { letter-spacing: 0em } .stat-super .stat-unit-currency:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-unit-currency:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-unit-currency:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-unit-currency:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-super .stat-unit-currency:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated { --sk-stat-currency-offset: -0.43em } .stat-elevated .stat-value { font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -0.009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-value:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-value:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-value:lang(ko) { letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-value:lang(zh) { letter-spacing: 0em } .stat-elevated .stat-value:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-value:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-value:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-value:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-value:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-caption { font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-caption:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-caption:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-caption:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-caption:lang(th), .stat-elevated .stat-caption:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .stat-elevated .stat-caption:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-caption:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-caption:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-caption:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-caption:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-unit-currency { font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: 0em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-unit-currency:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-unit-currency:lang(ja) { font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-unit-currency:lang(ko) { font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-unit-currency:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-unit-currency:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-unit-currency:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-unit-currency:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-elevated .stat-unit-currency:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced { --sk-stat-currency-offset: -0.325em } .stat-reduced .stat-value { font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: 0em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-value:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-value:lang(ja) { font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-value:lang(ko) { font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-value:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-value:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-value:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-value:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-value:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-caption { font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-caption:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-caption:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-caption:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-caption:lang(th), .stat-reduced .stat-caption:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .stat-reduced .stat-caption:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-caption:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-caption:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-caption:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-caption:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-unit-currency { font-size: 28px; line-height: 1; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-unit-currency:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-unit-currency:lang(ja) { font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-unit-currency:lang(ko) { font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-unit-currency:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-unit-currency:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-unit-currency:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-unit-currency:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-reduced .stat-unit-currency:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny { --sk-stat-currency-offset: -0.34em; min-width: 2em } .stat-tiny .stat-value { font-size: 28px; line-height: 1; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-value:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-value:lang(ja) { font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-value:lang(ko) { font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-value:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-value:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-value:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-value:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-value:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-unit-currency { font-size: 19px; line-height: 1; font-weight: 600; letter-spacing: .012em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-unit-currency:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-unit-currency:lang(ja) { font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-unit-currency:lang(ko) { font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-unit-currency:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-unit-currency:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-unit-currency:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-unit-currency:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .stat-tiny .stat-unit-currency:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .tile { margin-inline-start: auto; margin-inline-end: auto; --sk-tile-box-shadow: initial; --sk-tile-background: rgb(255, 255, 255); --sk-tile-button-background: rgba(210, 210, 215, 0.64); --sk-tile-button-background-hover: rgba(223, 223, 227, 0.6976); --sk-tile-button-background-active: rgba(193, 193, 198, 0.6544); --sk-tile-button-icon-color: rgba(0, 0, 0, 0.56); --sk-tile-button-icon-color-hover: rgba(0, 0, 0, 0.64); box-sizing: border-box; height: 100%; position: relative; overflow: hidden; background: var(--sk-tile-background); box-shadow: var(--sk-tile-box-shadow) } .tile-content { --sk-tile-padding-large: var(--sk-tile-padding, 60px 8.3333333333%); --sk-tile-padding-xlarge: var(--sk-tile-padding, var(--sk-tile-padding-large)); --sk-tile-padding-medium: var(--sk-tile-padding, var(--sk-tile-padding-large)); --sk-tile-padding-small: var(--sk-tile-padding, var(--sk-tile-padding-large)); --sk-tile-padding-xsmall: var(--sk-tile-padding, var(--sk-tile-padding-large)); padding: var(--sk-tile-padding-large) } @media(min-width:1441px) { .tile-content { padding: var(--sk-tile-padding-xlarge) } } @media(max-width:1068px) { .tile-content { padding: var(--sk-tile-padding-medium) } } @media(max-width:734px) { .tile-content { padding: var(--sk-tile-padding-small) } } @media(max-width:480px) { .tile-content { padding: var(--sk-tile-padding-xsmall) } } .tile-button-wrapper { width: 44px; height: 44px; bottom: 16px; cursor: pointer; display: flex; justify-content: center; align-items: center; position: absolute } @media(max-width:1068px) { .tile-button-wrapper { bottom: 13px } } html:not([dir=rtl]) .tile-button-wrapper { right: 16px } @media(max-width:1068px) { html:not([dir=rtl]) .tile-button-wrapper { right: 13px } } .tile-button-wrapper:focus-visible { outline: none } .tile-button-wrapper:focus-visible .tile-button { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: var(--sk-focus-offset-container, 3px) } .tile-button { width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; transition: background-color 100ms linear; background: var(--sk-tile-button-background); color: var(--sk-tile-button-icon-color) } .tile-button:hover { background: var(--sk-tile-button-background-hover); color: var(--sk-tile-button-icon-color-hover) } .tile-button:active { background: var(--sk-tile-button-background-active) } .tile-button-solid { --sk-tile-button-icon-color: rgba(0, 0, 0, 0.56); --sk-tile-button-icon-color-hover: rgba(0, 0, 0, 0.64); --sk-tile-button-background: rgb(232, 232, 237); --sk-tile-button-background-hover: #ececf0; --sk-tile-button-background-active: #dfdfe4 } .tile-button-high-contrast { --sk-tile-button-icon-color: rgb(255, 255, 255); --sk-tile-button-icon-color-hover: rgb(255, 255, 255); --sk-tile-button-background: rgb(29, 29, 31); --sk-tile-button-background-hover: #272729; --sk-tile-button-background-active: #18181A } .tile-rounded { --sk-tile-border-radius-large: var(--sk-tile-border-radius, 18px); --sk-tile-border-radius-xlarge: var(--sk-tile-border-radius, var(--sk-tile-border-radius-large)); --sk-tile-border-radius-medium: var(--sk-tile-border-radius, var(--sk-tile-border-radius-large)); --sk-tile-border-radius-small: var(--sk-tile-border-radius, var(--sk-tile-border-radius-large)); --sk-tile-border-radius-xsmall: var(--sk-tile-border-radius, var(--sk-tile-border-radius-large)); border-radius: var(--sk-tile-border-radius-large) } @media(min-width:1441px) { .tile-rounded { border-radius: var(--sk-tile-border-radius-xlarge) } } @media(max-width:1068px) { .tile-rounded { border-radius: var(--sk-tile-border-radius-medium) } } @media(max-width:734px) { .tile-rounded { border-radius: var(--sk-tile-border-radius-small) } } @media(max-width:480px) { .tile-rounded { border-radius: var(--sk-tile-border-radius-xsmall) } } .tile-shadow { --sk-tile-box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.08) } .theme-dark { --sk-glyph: rgb(255, 255, 255); --sk-glyph-gray: rgb(245, 245, 247); --sk-glyph-gray-alpha: rgba(255, 255, 255, 0.92); --sk-glyph-gray-secondary: rgb(134, 134, 139); --sk-glyph-gray-secondary-alpha: rgba(255, 255, 255, 0.56); --sk-glyph-gray-secondary-alt: rgb(210, 210, 215); --sk-glyph-gray-secondary-alt-alpha: rgba(255, 255, 255, 0.8); --sk-glyph-gray-tertiary: rgb(110, 110, 115); --sk-glyph-gray-tertiary-alpha: rgba(255, 255, 255, 0.4); --sk-glyph-blue: rgb(41, 151, 255); --sk-glyph-orange: rgb(255, 121, 27); --sk-glyph-green: rgb(3, 161, 14); --sk-glyph-red: rgb(255, 48, 55); --sk-fill: rgb(0, 0, 0); --sk-fill-secondary: rgb(22, 22, 23); --sk-fill-tertiary: rgb(29, 29, 31); --sk-fill-gray: rgb(245, 245, 247); --sk-fill-gray-alpha: rgba(255, 255, 255, 0.92); --sk-fill-gray-secondary: rgb(110, 110, 115); --sk-fill-gray-secondary-alpha: rgba(255, 255, 255, 0.4); --sk-fill-gray-tertiary: rgb(66, 66, 69); --sk-fill-gray-tertiary-alpha: rgba(255, 255, 255, 0.24); --sk-fill-gray-quaternary: rgb(51, 51, 54); --sk-fill-gray-quaternary-alpha: rgba(255, 255, 255, 0.2); --sk-fill-orange-secondary: rgb(41, 13, 0); --sk-fill-green-secondary: rgb(0, 43, 3); --sk-fill-red: rgb(255, 48, 55); --sk-fill-red-secondary: rgb(51, 0, 0); --sk-fill-yellow: rgb(173, 130, 0); --sk-fill-yellow-secondary: rgb(43, 32, 0); --sk-enviro-neutral: rgb(0, 0, 0); --sk-body-background-color: rgb(0, 0, 0); --sk-body-text-color: rgb(245, 245, 247); --sk-headline-text-color: rgb(245, 245, 247); --sk-body-link-color: rgb(41, 151, 255); --sk-link-disabled-opacity: 0.36; --sk-focus-color-alt: rgb(255, 255, 255) } .theme-dark .badge { --sk-badge-background: rgba(245, 99, 0, 0.2); --sk-badge-text-color: rgb(255, 121, 27) } .theme-dark .badge-no-scrim { --sk-badge-background: transparent; --sk-badge-text-color: rgb(255, 121, 27) } .theme-dark .badge-solid-scrim { --sk-badge-background: rgb(71, 30, 0); --sk-badge-text-color: rgb(255, 121, 27) } .theme-dark .badge-neutral { --sk-badge-background: rgba(245, 245, 247, 0.14); --sk-badge-text-color: rgb(210, 210, 215) } .theme-dark .badge-neutral.badge-no-scrim { --sk-badge-background: transparent; --sk-badge-text-color: rgb(210, 210, 215) } .theme-dark .badge-neutral.badge-solid-scrim { --sk-badge-background: rgb(51, 51, 54); --sk-badge-text-color: rgb(210, 210, 215) } .theme-dark a.block { --sk-blocklink-color: rgb(41, 151, 255) } .theme-dark .button { --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.36); --sk-button-background: rgb(0, 113, 227); --sk-button-background-hover: #0076DF; --sk-button-background-active: #006EDB } .theme-dark .button-neutral { --sk-button-background: rgb(245, 245, 247); --sk-button-background-hover: rgb(255, 255, 255); --sk-button-background-active: #EDEDF2; --sk-button-color: rgb(0, 0, 0) } .theme-dark .button-secondary { --sk-button-background: transparent; --sk-button-background-hover: #0076DF; --sk-button-background-active: #006EDB; --sk-button-color: rgb(41, 151, 255); --sk-button-color-hover: rgb(255, 255, 255); --sk-button-border-color: rgb(41, 151, 255) } .theme-dark .button-secondary-neutral { --sk-button-background: transparent; --sk-button-background-hover: rgb(255, 255, 255); --sk-button-background-active: #EDEDF2; --sk-button-color: rgb(245, 245, 247); --sk-button-color-hover: rgb(0, 0, 0); --sk-button-border-color: rgb(245, 245, 247) } .theme-dark .colorindicator { --sk-colorindicator-background-color: rgb(29, 29, 31); --sk-colorindicator-swatch-border-color: conic-gradient(from 90deg, rgba(255, 255, 255, 0.08) 0deg, rgba(255, 255, 255, 0.48) 64.8deg, rgba(255, 255, 255, 0.48) 115.2deg, rgba(255, 255, 255, 0.08) 180deg, rgba(255, 255, 255, 0) 208.8deg, rgba(255, 255, 255, 0) 331.2deg, rgba(255, 255, 255, 0.08) 360deg); --sk-colorindicator-label-color: rgb(134, 134, 139) } .theme-dark .dotnav { --sk-dotnav-background: rgba(255, 255, 255, 0.36); --sk-dotnav-background-hover: rgba(255, 255, 255, 0.48); --sk-dotnav-background-current: rgba(255, 255, 255, 0.8) } .theme-dark .iconcontrol { --sk-iconcontrol-scrim-color: rgb(51, 51, 54); --sk-iconcontrol-content-color: rgba(255, 255, 255, 0.8); --sk-iconcontrol-scrim-color-hover: #37373a; --sk-iconcontrol-content-color-hover: rgb(255, 255, 255); --sk-iconcontrol-scrim-color-active: #2f2f32; --sk-iconcontrol-content-color-active: rgb(255, 255, 255); --sk-iconcontrol-border-color: transparent; --sk-iconcontrol-disabled-opacity: var(--sk-link-disabled-opacity, 0.36) } .theme-dark .iconcontrol-primary { --sk-iconcontrol-scrim-color: rgb(245, 245, 247); --sk-iconcontrol-content-color: rgb(0, 0, 0); --sk-iconcontrol-scrim-color-hover: rgb(255, 255, 255); --sk-iconcontrol-content-color-hover: rgb(0, 0, 0); --sk-iconcontrol-scrim-color-active: #EDEDF2; --sk-iconcontrol-content-color-active: rgb(0, 0, 0); --sk-iconcontrol-border-color: transparent; --sk-iconcontrol-disabled-opacity: var(--sk-link-disabled-opacity, 0.36) } .theme-dark .iconcontrol-secondary { --sk-iconcontrol-scrim-color: transparent; --sk-iconcontrol-content-color: rgb(245, 245, 247); --sk-iconcontrol-scrim-color-hover: rgb(255, 255, 255); --sk-iconcontrol-content-color-hover: rgb(0, 0, 0); --sk-iconcontrol-scrim-color-active: #EDEDF2; --sk-iconcontrol-content-color-active: rgb(0, 0, 0); --sk-iconcontrol-border-color: rgb(245, 245, 247); --sk-iconcontrol-disabled-opacity: var(--sk-link-disabled-opacity, 0.36) } .theme-dark .iconcontrol-tertiary { --sk-iconcontrol-scrim-color: rgb(51, 51, 54); --sk-iconcontrol-content-color: rgba(255, 255, 255, 0.8); --sk-iconcontrol-scrim-color-hover: #37373a; --sk-iconcontrol-content-color-hover: rgb(255, 255, 255); --sk-iconcontrol-scrim-color-active: #2f2f32; --sk-iconcontrol-content-color-active: rgb(255, 255, 255); --sk-iconcontrol-border-color: transparent; --sk-iconcontrol-disabled-opacity: var(--sk-link-disabled-opacity, 0.36) } .theme-dark .list, .theme-dark .list-title { --sk-list-copy-color: rgb(245, 245, 247); --sk-list-title-color: rgb(245, 245, 247) } .theme-dark .paddlenav, .theme-dark .paddlenav-solid { --sk-paddlenav-arrow-color: rgba(255, 255, 255, 0.8); --sk-paddlenav-arrow-color-hover: rgb(255, 255, 255); --sk-paddlenav-arrow-color-active: rgb(255, 255, 255) } .theme-dark .paddlenav-solid { --sk-paddlenav-background: rgb(51, 51, 54); --sk-paddlenav-background-hover: #37373a; --sk-paddlenav-background-active: #2f2f32 } .theme-dark .paddlenav-alpha { --sk-paddlenav-arrow-color: rgba(255, 255, 255, 0.8); --sk-paddlenav-arrow-color-hover: rgb(255, 255, 255); --sk-paddlenav-arrow-color-active: rgb(255, 255, 255); --sk-paddlenav-background: rgba(66, 66, 69, 0.72); --sk-paddlenav-background-hover: rgba(73, 73, 76, 0.7256); --sk-paddlenav-background-active: rgba(57, 57, 60, 0.7424) } .theme-dark .pin { --sk-pin-color: rgb(110, 110, 115); --sk-pin-caption-color: rgb(134, 134, 139) } .theme-dark .quote { --sk-quote-copy-color: colors.color(quote.$quote-copy-color, $swatch-book); --sk-quote-credit-color: colors.color(quote.$quote-credit-color, $swatch-book) } .theme-dark .sosumi { --sk-sosumi-text-color: rgba(255, 255, 255, 0.56); --sk-sosumi-link-color: rgba(255, 255, 255, 0.8) } .theme-dark .stat { --sk-stat-value-color: rgb(245, 245, 247); --sk-stat-caption-color: rgb(245, 245, 247) } .theme-dark .thumbnav { --sk-thumbnav-image-border-color: rgb(110, 110, 115); --sk-thumbnav-image-border-color-hover: rgb(110, 110, 115); --sk-thumbnav-image-border-color-current: rgb(0, 113, 227); --sk-thumbnav-image-background: rgb(29, 29, 31); --sk-thumbnav-copy-color: rgb(134, 134, 139); --sk-thumbnav-copy-color-hover: rgb(245, 245, 247) } .theme-dark .thumbnav-neutral { --sk-thumbnav-image-border-color: rgb(110, 110, 115); --sk-thumbnav-image-border-color-hover: rgb(110, 110, 115); --sk-thumbnav-image-border-color-current: rgb(245, 245, 247); --sk-thumbnav-image-background: rgb(29, 29, 31); --sk-thumbnav-copy-color: rgb(134, 134, 139); --sk-thumbnav-copy-color-hover: rgb(245, 245, 247) } .theme-dark .tile { --sk-tile-background: rgb(0, 0, 0); --sk-tile-button-icon-color: rgba(255, 255, 255, 0.8); --sk-tile-button-background: rgba(66, 66, 69, 0.72); --sk-tile-button-icon-color-hover: rgb(255, 255, 255); --sk-tile-button-background-hover: rgba(73, 73, 76, 0.7256); --sk-tile-button-background-active: rgba(57, 57, 60, 0.7424) } br.large { display: block } @media(max-width:1068px) { br.large { display: none } } @media(max-width:734px) { br.large { display: none } } br.medium { display: none } @media(max-width:1068px) { br.medium { display: block } } @media(max-width:734px) { br.medium { display: none } } br.small { display: none } @media(max-width:1068px) { br.small { display: none } } @media(max-width:734px) { br.small { display: block } } html.hide-acmi [data-toggle=acmi] { display: none } html.hide-acmi #ac-globalfooter .ac-gf-sosumi [data-toggle-footnote=acmi] { visibility: hidden; height: 0; padding: 0; margin: 0 } html.hide-acmi #ac-globalfooter .ac-gf-sosumi li [data-toggle-footnote=acmi], html.hide-acmi .acmi-ribbon { display: none } html.hide-acmi .acmi-ribbon .ribbon-drop-wrapper { animation-play-state: paused } body { position: relative } #ac-globalfooter .ac-gf-sosumi li .bold { color: var(--footer-link-color) } #ac-globalfooter .ac-gf-sosumi li p:nth-child(n+2) { padding-top: .8em } html.ac-gn-segmentbar-visible .slide-gallery .item-container .gallery-item[data-toggle=carriers], html.ac-gn-segmentbar-visible [data-toggle=carriers] { display: none } html.ac-gn-segmentbar-visible #ac-globalfooter [data-toggle-footnote=carriers] { visibility: hidden; height: 0; padding: 0; margin: 0; overflow: hidden } html.hide-acmi .ac-gf-buystrip-info-financing { display: none } .typography-headline-elevated { font-size: 64px; line-height: 1.0625; font-weight: 600; letter-spacing: -0.009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(ja) { line-height: 1.109375; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(ko) { line-height: 1.171875; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(zh) { line-height: 1.09375; letter-spacing: 0em } .typography-headline-elevated:lang(th) { line-height: 1.34375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-headline-elevated { font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(ja) { line-height: 1.1459933333; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(ko) { line-height: 1.1875; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(zh) { letter-spacing: 0em } .typography-headline-elevated:lang(th) { line-height: 1.3334933333; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-headline-elevated { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(ja) { line-height: 1.175; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(ko) { line-height: 1.2; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(th) { line-height: 1.35; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-headline { font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(ja) { line-height: 1.1459933333; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(ko) { line-height: 1.1875; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(zh) { letter-spacing: 0em } .typography-headline:lang(th) { line-height: 1.3334933333; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-headline { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(ja) { line-height: 1.175; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(ko) { line-height: 1.2; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(th) { line-height: 1.35; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-headline { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(ja) { line-height: 1.21875; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(ko) { line-height: 1.21875; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(zh) { line-height: 1.21875 } .typography-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-eyebrow-super { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(ja) { line-height: 1.21875; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(ko) { line-height: 1.21875; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh) { line-height: 1.21875 } .typography-eyebrow-super:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-eyebrow-super { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh) { line-height: 1.25 } .typography-eyebrow-super:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-eyebrow-super { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh) { line-height: 1.2916666667 } .typography-eyebrow-super:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-eyebrow-super:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-manifesto { font-size: 32px; line-height: 1.25; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(ja) { line-height: 1.28125; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(ko) { line-height: 1.375; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(zh) { line-height: 1.3125 } .typography-manifesto:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-manifesto { font-size: 28px; line-height: 1.2858342857; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(ko) { line-height: 1.3928571429; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-manifesto { font-size: 24px; line-height: 1.3334133333; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(ko) { line-height: 1.4584133333; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(ja) { font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-manifesto:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-label { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(zh) { line-height: 1.2916666667 } .typography-label:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-label { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(zh) { line-height: 1.3334033333 } .typography-label:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-tout { font-size: 19px; line-height: 1.2105263158; font-weight: 600; letter-spacing: .012em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout:lang(ja) { line-height: 1.2631578947; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout:lang(ko) { line-height: 1.3157894737; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout:lang(th) { line-height: 1.3684410526; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout:lang(zh) { line-height: 1.3684410526 } .typography-tout:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body { font-size: 17px; line-height: 1.4705882353; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body:lang(zh) { letter-spacing: 0em } .typography-body:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced { font-size: 14px; line-height: 1.4285914286; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced:lang(ja) { line-height: 1.4; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced:lang(ko) { line-height: 1.5714285714; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced:lang(zh) { line-height: 1.5; letter-spacing: 0em } .typography-body-reduced:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced-tight { font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced-tight:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced-tight:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced-tight:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced-tight:lang(th), .typography-body-reduced-tight:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-body-reduced-tight:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced-tight:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced-tight:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced-tight:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-body-reduced-tight:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption:lang(zh) { letter-spacing: 0em } .typography-caption:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-name { font-size: 19px; line-height: 1.2105263158; font-weight: 600; letter-spacing: .012em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-name:lang(ja) { line-height: 1.2631578947; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-name:lang(ko) { line-height: 1.3157894737; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-name:lang(th) { line-height: 1.3684410526; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-name:lang(zh) { line-height: 1.3684410526 } .typography-localnav-product-name:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-name:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-name:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-name:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-name:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(ja) { line-height: 1.175; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(ko) { line-height: 1.2; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(th) { line-height: 1.35; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-localnav-product-expanded { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(ja) { line-height: 1.21875; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(ko) { line-height: 1.21875; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(zh) { line-height: 1.21875 } .typography-localnav-product-expanded:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-localnav-product-expanded { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(zh) { line-height: 1.2916666667 } .typography-localnav-product-expanded:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-product-expanded:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-localnav-cta-expanded { font-size: 17px; line-height: 1.2353641176; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(ko), .typography-localnav-cta-expanded:lang(th), .typography-localnav-cta-expanded:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-localnav-cta-expanded:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-localnav-cta-expanded { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(zh) { letter-spacing: 0em } .typography-localnav-cta-expanded:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-cta-expanded:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-localnav-links { font-size: 19px; line-height: 1.2105263158; font-weight: 500; letter-spacing: .012em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-links:lang(ja) { line-height: 1.2631578947; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-links:lang(ko) { line-height: 1.3157894737; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-links:lang(th) { line-height: 1.3684410526; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-links:lang(zh) { line-height: 1.3684410526 } .typography-localnav-links:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-links:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-links:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-links:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-links:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-tabs { font-size: 17px; line-height: 1.4705882353; font-weight: 500; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-tabs:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-tabs:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-tabs:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-tabs:lang(zh) { letter-spacing: 0em } .typography-localnav-tabs:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-tabs:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-tabs:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-tabs:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-localnav-tabs:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(ko) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-all-access-pass-text-icon-control:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-all-access-pass-text-icon-control { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-all-access-pass-text-icon-control:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-text-icon-control:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-all-access-pass-pv-item-label { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(ko) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-all-access-pass-pv-item-label:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-all-access-pass-pv-item-label { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-all-access-pass-pv-item-label:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-all-access-pass-pv-item-title { font-size: 17px; line-height: 1.4705882353; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(zh) { letter-spacing: 0em } .typography-all-access-pass-pv-item-title:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-all-access-pass-pv-item-title { font-size: 14px; line-height: 1.4285914286; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(ja) { line-height: 1.4; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(ko) { line-height: 1.5714285714; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(zh) { line-height: 1.5; letter-spacing: 0em } .typography-all-access-pass-pv-item-title:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-title:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-all-access-pass-pv-item-body { font-size: 17px; line-height: 1.4705882353; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(zh) { letter-spacing: 0em } .typography-all-access-pass-pv-item-body:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-all-access-pass-pv-item-body { font-size: 14px; line-height: 1.4285914286; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(ja) { line-height: 1.4; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(ko) { line-height: 1.5714285714; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(zh) { line-height: 1.5; letter-spacing: 0em } .typography-all-access-pass-pv-item-body:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-all-access-pass-pv-item-body:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-banner-card-headline { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(ja) { line-height: 1.21875; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(ko) { line-height: 1.21875; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh) { line-height: 1.21875 } .typography-banner-card-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-banner-card-headline { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh) { line-height: 1.2916666667 } .typography-banner-card-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-banner-card-headline { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh) { line-height: 1.3334033333 } .typography-banner-card-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-banner-card-copy { font-size: 17px; line-height: 1.2353641176; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(ko), .typography-banner-card-copy:lang(th), .typography-banner-card-copy:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-banner-card-copy:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-banner-card-copy { font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(th), .typography-banner-card-copy:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-banner-card-copy:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-banner-card-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-caption-tile-topic { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(ko), .typography-caption-tile-topic:lang(th), .typography-caption-tile-topic:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-caption-tile-topic:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-caption-tile-topic { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(th), .typography-caption-tile-topic:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-caption-tile-topic:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-topic:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-caption-tile { line-height: 1.2353641176 } .typography-caption-tile:lang(ko), .typography-caption-tile:lang(zh) { line-height: 1.3529611765 } .typography-caption-tile-footnote { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-footnote:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-footnote:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-footnote:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-footnote:lang(zh) { letter-spacing: 0em } .typography-caption-tile-footnote:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-footnote:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-footnote:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-footnote:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-footnote:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(ko), .typography-caption-tile-link:lang(th), .typography-caption-tile-link:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-caption-tile-link:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-caption-tile-link { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(th), .typography-caption-tile-link:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-caption-tile-link:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-link:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-caption-tile-elevated { font-size: 21px; line-height: 1.381002381; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(ja) { line-height: 1.3334033333; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(ko) { line-height: 1.5238095238; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-caption-tile-elevated { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(ko), .typography-caption-tile-elevated:lang(th), .typography-caption-tile-elevated:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-caption-tile-elevated:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-caption-tile-elevated-footnote { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-footnote:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-footnote:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-footnote:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-footnote:lang(zh) { letter-spacing: 0em } .typography-caption-tile-elevated-footnote:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-footnote:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-footnote:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-footnote:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-footnote:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(zh) { line-height: 1.3334033333 } .typography-caption-tile-elevated-link:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-caption-tile-elevated-link { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(ko) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-caption-tile-elevated-link:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile-elevated-link:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-feature-card-label { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(ko), .typography-feature-card-label:lang(th), .typography-feature-card-label:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-feature-card-label:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-feature-card-label { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(th), .typography-feature-card-label:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-feature-card-label:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-feature-card-headline { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh) { line-height: 1.25 } .typography-feature-card-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-feature-card-headline { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh) { line-height: 1.2916666667 } .typography-feature-card-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-feature-card-headline { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh) { line-height: 1.3334033333 } .typography-feature-card-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-feature-card-body { font-size: 17px; line-height: 1.2353641176; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(ko), .typography-feature-card-body:lang(th), .typography-feature-card-body:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-feature-card-body:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-feature-card-body { font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(th), .typography-feature-card-body:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-feature-card-body:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-body:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-feature-card-caption { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-caption:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-caption:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-caption:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-caption:lang(zh) { letter-spacing: 0em } .typography-feature-card-caption:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-caption:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-caption:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-caption:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-feature-card-caption:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh) { line-height: 1.25 } .typography-media-card-gallery-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-media-card-gallery-headline { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh) { line-height: 1.2916666667 } .typography-media-card-gallery-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-media-card-gallery-headline { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(ko) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-media-card-gallery-headline:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-media-card-gallery-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-modal-header-topic-label { font-size: 19px; line-height: 1.4211026316; font-weight: 600; letter-spacing: .012em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(ja) { line-height: 1.3684410526; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(ko) { line-height: 1.5263157895; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(th) { line-height: 1.3684410526; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-modal-header-topic-label { font-size: 17px; line-height: 1.4705882353; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(zh) { letter-spacing: 0em } .typography-modal-header-topic-label:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-topic-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-modal-header-headline { font-size: 56px; line-height: 1.0714285714; font-weight: 600; letter-spacing: -0.005em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(ja) { line-height: 1.125; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(ko) { line-height: 1.1786514286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh) { letter-spacing: 0em } .typography-modal-header-headline:lang(th) { line-height: 1.3392857143; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-modal-header-headline { font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(ja) { line-height: 1.1459933333; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(ko) { line-height: 1.1875; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh) { letter-spacing: 0em } .typography-modal-header-headline:lang(th) { line-height: 1.3334933333; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-modal-header-headline { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(ja) { line-height: 1.175; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(ko) { line-height: 1.2; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(th) { line-height: 1.35; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:480px) { .typography-modal-header-headline { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(ja) { line-height: 1.21875; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(ko) { line-height: 1.21875; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh) { line-height: 1.21875 } .typography-modal-header-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-modal-header-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-icon-card-headline { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh) { line-height: 1.25 } .typography-icon-card-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-icon-card-headline { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh) { line-height: 1.2916666667 } .typography-icon-card-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-icon-card-headline { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh) { line-height: 1.3334033333 } .typography-icon-card-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-icon-card-body-copy { font-size: 17px; line-height: 1.2353641176; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(ko), .typography-icon-card-body-copy:lang(th), .typography-icon-card-body-copy:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-icon-card-body-copy:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-icon-card-body-copy { font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(th), .typography-icon-card-body-copy:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-icon-card-body-copy:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-icon-card-body-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-utility-modal-block-inline-headline { font-size: 19px; line-height: 1.4211026316; font-weight: 600; letter-spacing: .012em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(ja) { line-height: 1.3684410526; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(ko) { line-height: 1.5263157895; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(th) { line-height: 1.3684410526; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-utility-modal-block-inline-headline { font-size: 17px; line-height: 1.4705882353; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(zh) { letter-spacing: 0em } .typography-utility-modal-block-inline-headline:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-inline-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-utility-modal-block-body { font-size: 19px; line-height: 1.4211026316; font-weight: 400; letter-spacing: .012em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(ja) { line-height: 1.3684410526; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(ko) { line-height: 1.5263157895; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(th) { line-height: 1.3684410526; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-utility-modal-block-body { font-size: 17px; line-height: 1.4705882353; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(zh) { letter-spacing: 0em } .typography-utility-modal-block-body:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-body:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-utility-modal-block-caption { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-caption:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-caption:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-caption:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-caption:lang(zh) { letter-spacing: 0em } .typography-utility-modal-block-caption:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-caption:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-caption:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-caption:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-caption:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-label { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-label:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-label:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-label:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-label:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-utility-modal-block-table-label:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(zh) { line-height: 1.3334033333 } .typography-utility-modal-block-table-copy:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-utility-modal-block-table-copy { font-size: 19px; line-height: 1.2105263158; font-weight: 600; letter-spacing: .012em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(ja) { line-height: 1.2631578947; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(ko) { line-height: 1.3157894737; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(th) { line-height: 1.3684410526; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(zh) { line-height: 1.3684410526 } .typography-utility-modal-block-table-copy:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-utility-modal-block-table-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-index-headline { font-size: 56px; line-height: 1.0714285714; font-weight: 600; letter-spacing: -0.005em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(ja) { line-height: 1.125; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(ko) { line-height: 1.1786514286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh) { letter-spacing: 0em } .typography-index-headline:lang(th) { line-height: 1.3392857143; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-index-headline { font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(ja) { line-height: 1.1459933333; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(ko) { line-height: 1.1875; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh) { letter-spacing: 0em } .typography-index-headline:lang(th) { line-height: 1.3334933333; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-index-headline { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh) { line-height: 1.25 } .typography-index-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-index-list-title { font-size: 17px; line-height: 1.2353641176; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(ko), .typography-index-list-title:lang(th), .typography-index-list-title:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-index-list-title:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-index-list-title { font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(th), .typography-index-list-title:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-index-list-title:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-list-title:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-index-item-base { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(ko), .typography-index-item-base:lang(th), .typography-index-item-base:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-index-item-base:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-index-item-base { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(th), .typography-index-item-base:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-index-item-base:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-base:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-index-item-elevated { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh) { line-height: 1.25 } .typography-index-item-elevated:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-index-item-elevated { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh) { line-height: 1.2916666667 } .typography-index-item-elevated:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-index-item-elevated { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh) { line-height: 1.3334033333 } .typography-index-item-elevated:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-index-item-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-ps-headline-elevated { font-size: 80px; line-height: 1.05; font-weight: 600; letter-spacing: -0.015em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(ja) { line-height: 1.0875; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(ko) { line-height: 1.15; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(zh) { line-height: 1.0875; letter-spacing: 0em } .typography-ps-headline-elevated:lang(th) { line-height: 1.35; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-ps-headline-elevated { font-size: 56px; line-height: 1.0714285714; font-weight: 600; letter-spacing: -0.005em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(ja) { line-height: 1.125; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(ko) { line-height: 1.1786514286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(zh) { letter-spacing: 0em } .typography-ps-headline-elevated:lang(th) { line-height: 1.3392857143; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-ps-headline-elevated { font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: 0em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(ja) { font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(ko) { font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-ps-headline { font-size: 56px; line-height: 1.0714285714; font-weight: 600; letter-spacing: -0.005em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(ja) { line-height: 1.125; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(ko) { line-height: 1.1786514286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh) { letter-spacing: 0em } .typography-ps-headline:lang(th) { line-height: 1.3392857143; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-ps-headline { font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(ja) { line-height: 1.1459933333; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(ko) { line-height: 1.1875; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh) { letter-spacing: 0em } .typography-ps-headline:lang(th) { line-height: 1.3334933333; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-ps-headline { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(ja) { line-height: 1.21875; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(ko) { line-height: 1.21875; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh) { line-height: 1.21875 } .typography-ps-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-ps-subheadline { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(ja) { line-height: 1.21875; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(ko) { line-height: 1.21875; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh) { line-height: 1.21875 } .typography-ps-subheadline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-ps-subheadline { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh) { line-height: 1.25 } .typography-ps-subheadline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-ps-subheadline { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh) { line-height: 1.2916666667 } .typography-ps-subheadline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-subheadline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-ps-headline-eyebrow { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh) { line-height: 1.25 } .typography-ps-headline-eyebrow:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-ps-headline-eyebrow { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh) { line-height: 1.2916666667 } .typography-ps-headline-eyebrow:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-ps-headline-eyebrow { font-size: 19px; line-height: 1.2105263158; font-weight: 600; letter-spacing: .012em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(ja) { line-height: 1.2631578947; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(ko) { line-height: 1.3157894737; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(th) { line-height: 1.3684410526; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh) { line-height: 1.3684410526 } .typography-ps-headline-eyebrow:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-headline-eyebrow:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-ps-body { font-size: 21px; line-height: 1.381002381; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(ja) { line-height: 1.3334033333; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(ko) { line-height: 1.5238095238; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-ps-body { font-size: 19px; line-height: 1.4211026316; font-weight: 600; letter-spacing: .012em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(ja) { line-height: 1.3684410526; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(ko) { line-height: 1.5263157895; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(th) { line-height: 1.3684410526; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-ps-body { font-size: 17px; line-height: 1.4705882353; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(zh) { letter-spacing: 0em } .typography-ps-body:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-ps-body-reduced-tight { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body-reduced-tight:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body-reduced-tight:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body-reduced-tight:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body-reduced-tight:lang(th), .typography-ps-body-reduced-tight:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-ps-body-reduced-tight:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body-reduced-tight:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body-reduced-tight:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body-reduced-tight:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-body-reduced-tight:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card { font-size: 17px; line-height: 1.4705882353; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(zh) { letter-spacing: 0em } .typography-ps-card:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-ps-card { font-size: 14px; line-height: 1.4285914286; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(ja) { line-height: 1.4; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(ko) { line-height: 1.5714285714; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(zh) { line-height: 1.5; letter-spacing: 0em } .typography-ps-card:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-card:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-ps-stat { font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: 0em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(ja) { font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(ko) { font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-ps-stat { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(zh) { line-height: 1.25 } .typography-ps-stat:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-stat:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-ps-select-label { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(ko), .typography-ps-select-label:lang(th), .typography-ps-select-label:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-ps-select-label:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-ps-select-label { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(th), .typography-ps-select-label:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-ps-select-label:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-select-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-ps-upgrade-eyebrow { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(zh) { line-height: 1.3334033333 } .typography-ps-upgrade-eyebrow:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-ps-upgrade-eyebrow { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(ko), .typography-ps-upgrade-eyebrow:lang(th), .typography-ps-upgrade-eyebrow:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-ps-upgrade-eyebrow:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-eyebrow:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-ps-upgrade-tile-copy { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(zh) { line-height: 1.3334033333 } .typography-ps-upgrade-tile-copy:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-ps-upgrade-tile-copy { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(th), .typography-ps-upgrade-tile-copy:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-ps-upgrade-tile-copy:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-ps-upgrade-tile-gradient { font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(ja) { line-height: 1.1459933333; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(ko) { line-height: 1.1875; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh) { letter-spacing: 0em } .typography-ps-upgrade-tile-gradient:lang(th) { line-height: 1.3334933333; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-ps-upgrade-tile-gradient { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(ja) { line-height: 1.21875; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(ko) { line-height: 1.21875; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh) { line-height: 1.21875 } .typography-ps-upgrade-tile-gradient:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-ps-upgrade-tile-gradient { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh) { line-height: 1.25 } .typography-ps-upgrade-tile-gradient:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-tile-gradient:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-ps-upgrade-headline { font-size: 56px; line-height: 1.0714285714; font-weight: 600; letter-spacing: -0.005em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(ja) { line-height: 1.125; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(ko) { line-height: 1.1786514286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh) { letter-spacing: 0em } .typography-ps-upgrade-headline:lang(th) { line-height: 1.3392857143; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-ps-upgrade-headline { font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(ja) { line-height: 1.1459933333; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(ko) { line-height: 1.1875; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh) { letter-spacing: 0em } .typography-ps-upgrade-headline:lang(th) { line-height: 1.3334933333; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-ps-upgrade-headline { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh) { line-height: 1.25 } .typography-ps-upgrade-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-ps-upgrade-trade-eyebrow { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(zh) { line-height: 1.3334033333 } .typography-ps-upgrade-trade-eyebrow:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-ps-upgrade-trade-eyebrow { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(ko) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-ps-upgrade-trade-eyebrow:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-ps-upgrade-trade-eyebrow:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-welcome-pricing { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(ko), .typography-welcome-pricing:lang(th), .typography-welcome-pricing:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-welcome-pricing:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-welcome-pricing { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(th), .typography-welcome-pricing:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-welcome-pricing:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-pricing:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-welcome-eyebrow { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(zh) { line-height: 1.25 } .typography-welcome-eyebrow:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-welcome-eyebrow { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(zh) { line-height: 1.3334033333 } .typography-welcome-eyebrow:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-welcome-eyebrow { font-size: 19px; line-height: 1.4211026316; font-weight: 600; letter-spacing: .012em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(ja) { line-height: 1.3684410526; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(ko) { line-height: 1.5263157895; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(th) { line-height: 1.3684410526; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-eyebrow:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-welcome-headline { font-size: 64px; line-height: 1.0625; font-weight: 600; letter-spacing: -0.009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } @media(min-width:1441px) { .typography-welcome-headline { font-size: 80px; line-height: 1; font-weight: 600; letter-spacing: -0.005em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(ko) { letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh) { letter-spacing: 0em } .typography-welcome-headline:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-welcome-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(ja) { line-height: 1.109375; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(ko) { line-height: 1.171875; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh) { line-height: 1.09375; letter-spacing: 0em } .typography-welcome-headline:lang(th) { line-height: 1.34375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-welcome-headline { font-size: 56px; line-height: 1; font-weight: 600; letter-spacing: -0.005em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(ko) { letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh) { letter-spacing: 0em } .typography-welcome-headline:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-welcome-headline { font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: 0em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(ja) { font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(ko) { font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-welcome-milestone { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(ko), .typography-welcome-milestone:lang(th), .typography-welcome-milestone:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-welcome-milestone:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-welcome-milestone { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(th), .typography-welcome-milestone:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-welcome-milestone:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-welcome-milestone:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-product-tile-headline { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh) { line-height: 1.25 } .typography-product-tile-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-product-tile-headline { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh) { line-height: 1.2916666667 } .typography-product-tile-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-product-tile-headline { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh) { line-height: 1.3334033333 } .typography-product-tile-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-product-tile-subheading { font-size: 17px; line-height: 1.4705882353; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(zh) { letter-spacing: 0em } .typography-product-tile-subheading:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-product-tile-subheading { font-size: 14px; line-height: 1.4285914286; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(ja) { line-height: 1.4; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(ko) { line-height: 1.5714285714; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(zh) { line-height: 1.5; letter-spacing: 0em } .typography-product-tile-subheading:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-subheading:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-product-tile-positioning { font-size: 17px; line-height: 1.4705882353; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(zh) { letter-spacing: 0em } .typography-product-tile-positioning:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-product-tile-positioning { font-size: 14px; line-height: 1.4285914286; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(ja) { line-height: 1.4; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(ko) { line-height: 1.5714285714; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(zh) { line-height: 1.5; letter-spacing: 0em } .typography-product-tile-positioning:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-positioning:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-product-tile-ctas { font-size: 17px; line-height: 1.1764805882; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(ko) { letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(zh) { letter-spacing: 0em } .typography-product-tile-ctas:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-product-tile-ctas { font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(th), .typography-product-tile-ctas:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-product-tile-ctas:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-ctas:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-product-tile-caption { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-caption:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-caption:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-caption:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-caption:lang(zh) { letter-spacing: 0em } .typography-product-tile-caption:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-caption:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-caption:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-caption:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-product-tile-caption:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline { font-size: 56px; line-height: 1.0714285714; font-weight: 600; letter-spacing: -0.005em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(ja) { line-height: 1.125; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(ko) { line-height: 1.1786514286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh) { letter-spacing: 0em } .typography-section-header-headline:lang(th) { line-height: 1.3392857143; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-section-header-headline { font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(ja) { line-height: 1.1459933333; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(ko) { line-height: 1.1875; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh) { letter-spacing: 0em } .typography-section-header-headline:lang(th) { line-height: 1.3334933333; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-section-header-headline { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh) { line-height: 1.25 } .typography-section-header-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-section-header-link { font-size: 17px; line-height: 1.4705882353; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(zh) { letter-spacing: 0em } .typography-section-header-link:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-section-header-link { font-size: 14px; line-height: 1.4285914286; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(ja) { line-height: 1.4; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(ko) { line-height: 1.5714285714; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(zh) { line-height: 1.5; letter-spacing: 0em } .typography-section-header-link:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-section-header-link:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-tout-copy { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-copy:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-copy:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-copy:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-copy:lang(zh) { letter-spacing: 0em } .typography-tout-copy:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh) { line-height: 1.25 } .typography-tout-subheading:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-tout-subheading { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh) { line-height: 1.2916666667 } .typography-tout-subheading:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-tout-subheading { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh) { line-height: 1.3334033333 } .typography-tout-subheading:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-subheading:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-tout-null { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(zh) { line-height: 1.3334033333 } .typography-tout-null:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-tout-null { font-size: 17px; line-height: 1.4705882353; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(zh) { letter-spacing: 0em } .typography-tout-null:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-null:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-tout-stat { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat:lang(zh) { letter-spacing: 0em } .typography-tout-stat:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh) { line-height: 1.25 } .typography-tout-stat-value:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-tout-stat-value { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh) { line-height: 1.2916666667 } .typography-tout-stat-value:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-tout-stat-value { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh) { line-height: 1.3334033333 } .typography-tout-stat-value:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-tout-stat-value:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-marquee-headline-elevated { font-size: 80px; line-height: 1.05; font-weight: 600; letter-spacing: -0.015em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(ja) { line-height: 1.0875; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(ko) { line-height: 1.15; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(zh) { line-height: 1.0875; letter-spacing: 0em } .typography-marquee-headline-elevated:lang(th) { line-height: 1.35; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-marquee-headline-elevated { font-size: 64px; line-height: 1.0625; font-weight: 600; letter-spacing: -0.009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(ja) { line-height: 1.109375; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(ko) { line-height: 1.171875; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(zh) { line-height: 1.09375; letter-spacing: 0em } .typography-marquee-headline-elevated:lang(th) { line-height: 1.34375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-marquee-headline-elevated { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(ja) { line-height: 1.175; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(ko) { line-height: 1.2; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(th) { line-height: 1.35; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-marquee-headline-base { font-size: 64px; line-height: 1.0625; font-weight: 600; letter-spacing: -0.009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(ja) { line-height: 1.109375; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(ko) { line-height: 1.171875; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh) { line-height: 1.09375; letter-spacing: 0em } .typography-marquee-headline-base:lang(th) { line-height: 1.34375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-marquee-headline-base { font-size: 56px; line-height: 1.0714285714; font-weight: 600; letter-spacing: -0.005em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(ja) { line-height: 1.125; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(ko) { line-height: 1.1786514286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh) { letter-spacing: 0em } .typography-marquee-headline-base:lang(th) { line-height: 1.3392857143; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-marquee-headline-base { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(ja) { line-height: 1.21875; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(ko) { line-height: 1.21875; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh) { line-height: 1.21875 } .typography-marquee-headline-base:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-base:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-marquee-headline-reduced { font-size: 56px; line-height: 1.0714285714; font-weight: 600; letter-spacing: -0.005em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(ja) { line-height: 1.125; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(ko) { line-height: 1.1786514286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh) { letter-spacing: 0em } .typography-marquee-headline-reduced:lang(th) { line-height: 1.3392857143; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-marquee-headline-reduced { font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(ja) { line-height: 1.1459933333; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(ko) { line-height: 1.1875; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh) { letter-spacing: 0em } .typography-marquee-headline-reduced:lang(th) { line-height: 1.3334933333; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-marquee-headline-reduced { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh) { line-height: 1.25 } .typography-marquee-headline-reduced:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-headline-reduced:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-marquee-eyebrow-elevated { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(ja) { line-height: 1.21875; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(ko) { line-height: 1.21875; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh) { line-height: 1.21875 } .typography-marquee-eyebrow-elevated:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-marquee-eyebrow-elevated { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh) { line-height: 1.25 } .typography-marquee-eyebrow-elevated:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-marquee-eyebrow-elevated { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh) { line-height: 1.2916666667 } .typography-marquee-eyebrow-elevated:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-marquee-eyebrow-base { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh) { line-height: 1.25 } .typography-marquee-eyebrow-base:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-marquee-eyebrow-base { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh) { line-height: 1.2916666667 } .typography-marquee-eyebrow-base:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-marquee-eyebrow-base { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh) { line-height: 1.3334033333 } .typography-marquee-eyebrow-base:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-eyebrow-base:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-marquee-tagline-elevated { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(ja) { line-height: 1.21875; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(ko) { line-height: 1.21875; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh) { line-height: 1.21875 } .typography-marquee-tagline-elevated:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-marquee-tagline-elevated { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh) { line-height: 1.25 } .typography-marquee-tagline-elevated:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-marquee-tagline-elevated { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh) { line-height: 1.2916666667 } .typography-marquee-tagline-elevated:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-marquee-tagline-base { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh) { line-height: 1.25 } .typography-marquee-tagline-base:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .typography-marquee-tagline-base { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh) { line-height: 1.2916666667 } .typography-marquee-tagline-base:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .typography-marquee-tagline-base { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh) { line-height: 1.3334033333 } .typography-marquee-tagline-base:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-tagline-base:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-marquee-badge { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(ko), .typography-marquee-badge:lang(th), .typography-marquee-badge:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-marquee-badge:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-marquee-badge { font-size: 12px; line-height: 1.3333733333; font-weight: 600; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(zh) { letter-spacing: 0em } .typography-marquee-badge:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-badge:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-marquee-detail { font-size: 17px; line-height: 1.2353641176; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(ko), .typography-marquee-detail:lang(th), .typography-marquee-detail:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-marquee-detail:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-marquee-detail { font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(th), .typography-marquee-detail:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .typography-marquee-detail:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-marquee-detail-reduced { font-size: 17px; line-height: 1.2353641176; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(ko) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-marquee-detail-reduced:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-marquee-detail-reduced { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(zh) { letter-spacing: 0em } .typography-marquee-detail-reduced:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-marquee-detail-reduced:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .typography-aap-compare-modal-header-headline { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-modal-header-headline:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-modal-header-headline:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-modal-header-headline:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-modal-header-headline:lang(zh) { line-height: 1.25 } .typography-aap-compare-modal-header-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-modal-header-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-modal-header-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-modal-header-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-modal-header-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-group-button-link { font-size: 12px; line-height: 1.3333733333; font-weight: 600; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-group-button-link:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-group-button-link:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-group-button-link:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-group-button-link:lang(zh) { letter-spacing: 0em } .typography-aap-compare-group-button-link:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-group-button-link:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-group-button-link:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-group-button-link:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-group-button-link:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-product-name { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-product-name:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-product-name:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-product-name:lang(ko) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-product-name:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-aap-compare-product-name:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-product-name:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-product-name:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-product-name:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-product-name:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-currently-viewing { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-currently-viewing:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-currently-viewing:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-currently-viewing:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-currently-viewing:lang(zh) { letter-spacing: 0em } .typography-aap-compare-currently-viewing:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-currently-viewing:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-currently-viewing:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-currently-viewing:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-currently-viewing:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-headline { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-headline:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-headline:lang(ko) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-headline:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .typography-aap-compare-slide-card-headline:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-callout { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-callout:lang(ja) { line-height: 1.175; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-callout:lang(ko) { line-height: 1.2; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-callout:lang(th) { line-height: 1.35; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-callout:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-callout:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-callout:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-callout:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-callout:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-feature { font-size: 12px; line-height: 1.3333733333; font-weight: 600; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-feature:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-feature:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-feature:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-feature:lang(zh) { letter-spacing: 0em } .typography-aap-compare-slide-card-feature:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-feature:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-feature:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-feature:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-feature:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-zoom-level { font-size: 12px; line-height: 1.3333733333; font-weight: 700; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-zoom-level:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-zoom-level:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-zoom-level:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-zoom-level:lang(zh) { letter-spacing: 0em } .typography-aap-compare-slide-card-zoom-level:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-zoom-level:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-zoom-level:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-zoom-level:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-aap-compare-slide-card-zoom-level:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } [class*=typography-eyebrow] { display: block; margin-bottom: .4em } [class*=typography-eyebrow]+* { margin-top: 0 } .typography-headline+.typography-intro { --sk-headline-plus-first-element-margin: 1.2em } .typography-headline-super+.typography-intro-elevated { --sk-headline-plus-first-element-margin: 1.6em } .typography-headline-elevated+.typography-intro-elevated { --sk-headline-plus-first-element-margin: 1.4em } .typography-headline-reduced+.typography-body, .typography-headline-reduced+p, .typography-headline-reduced+ul { --sk-headline-plus-first-element-margin: 1em } @media(min-width:1441px) { body .ric-grid-wrap.children-ric-xlarge-1>*, body .ric-grid-wrap .ric-xlarge-1 { grid-column: auto/span 1 } body .children-ric-xlarge-1>*, body .ric-xlarge-1 { width: var(--ric-column-width-1) } body .children-ric-xlarge-1>*.ric-grid-wrap, body .ric-xlarge-1.ric-grid-wrap { grid-template-columns: repeat(1, 1fr) } body .ric-grid-wrap.children-ric-xlarge-2>*, body .ric-grid-wrap .ric-xlarge-2 { grid-column: auto/span 2 } body .children-ric-xlarge-2>*, body .ric-xlarge-2 { width: var(--ric-column-width-2) } body .children-ric-xlarge-2>*.ric-grid-wrap, body .ric-xlarge-2.ric-grid-wrap { grid-template-columns: repeat(2, 1fr) } body .ric-grid-wrap.children-ric-xlarge-3>*, body .ric-grid-wrap .ric-xlarge-3 { grid-column: auto/span 3 } body .children-ric-xlarge-3>*, body .ric-xlarge-3 { width: var(--ric-column-width-3) } body .children-ric-xlarge-3>*.ric-grid-wrap, body .ric-xlarge-3.ric-grid-wrap { grid-template-columns: repeat(3, 1fr) } body .ric-grid-wrap.children-ric-xlarge-4>*, body .ric-grid-wrap .ric-xlarge-4 { grid-column: auto/span 4 } body .children-ric-xlarge-4>*, body .ric-xlarge-4 { width: var(--ric-column-width-4) } body .children-ric-xlarge-4>*.ric-grid-wrap, body .ric-xlarge-4.ric-grid-wrap { grid-template-columns: repeat(4, 1fr) } body .ric-grid-wrap.children-ric-xlarge-5>*, body .ric-grid-wrap .ric-xlarge-5 { grid-column: auto/span 5 } body .children-ric-xlarge-5>*, body .ric-xlarge-5 { width: var(--ric-column-width-5) } body .children-ric-xlarge-5>*.ric-grid-wrap, body .ric-xlarge-5.ric-grid-wrap { grid-template-columns: repeat(5, 1fr) } body .ric-grid-wrap.children-ric-xlarge-6>*, body .ric-grid-wrap .ric-xlarge-6 { grid-column: auto/span 6 } body .children-ric-xlarge-6>*, body .ric-xlarge-6 { width: var(--ric-column-width-6) } body .children-ric-xlarge-6>*.ric-grid-wrap, body .ric-xlarge-6.ric-grid-wrap { grid-template-columns: repeat(6, 1fr) } body .ric-grid-wrap.children-ric-xlarge-7>*, body .ric-grid-wrap .ric-xlarge-7 { grid-column: auto/span 7 } body .children-ric-xlarge-7>*, body .ric-xlarge-7 { width: var(--ric-column-width-7) } body .children-ric-xlarge-7>*.ric-grid-wrap, body .ric-xlarge-7.ric-grid-wrap { grid-template-columns: repeat(7, 1fr) } body .ric-grid-wrap.children-ric-xlarge-8>*, body .ric-grid-wrap .ric-xlarge-8 { grid-column: auto/span 8 } body .children-ric-xlarge-8>*, body .ric-xlarge-8 { width: var(--ric-column-width-8) } body .children-ric-xlarge-8>*.ric-grid-wrap, body .ric-xlarge-8.ric-grid-wrap { grid-template-columns: repeat(8, 1fr) } body .ric-grid-wrap.children-ric-xlarge-9>*, body .ric-grid-wrap .ric-xlarge-9 { grid-column: auto/span 9 } body .children-ric-xlarge-9>*, body .ric-xlarge-9 { width: var(--ric-column-width-9) } body .children-ric-xlarge-9>*.ric-grid-wrap, body .ric-xlarge-9.ric-grid-wrap { grid-template-columns: repeat(9, 1fr) } body .ric-grid-wrap.children-ric-xlarge-10>*, body .ric-grid-wrap .ric-xlarge-10 { grid-column: auto/span 10 } body .children-ric-xlarge-10>*, body .ric-xlarge-10 { width: var(--ric-column-width-10) } body .children-ric-xlarge-10>*.ric-grid-wrap, body .ric-xlarge-10.ric-grid-wrap { grid-template-columns: repeat(10, 1fr) } body .ric-grid-wrap.children-ric-xlarge-11>*, body .ric-grid-wrap .ric-xlarge-11 { grid-column: auto/span 11 } body .children-ric-xlarge-11>*, body .ric-xlarge-11 { width: var(--ric-column-width-11) } body .children-ric-xlarge-11>*.ric-grid-wrap, body .ric-xlarge-11.ric-grid-wrap { grid-template-columns: repeat(11, 1fr) } body .ric-grid-wrap.children-ric-xlarge-12>*, body .ric-grid-wrap .ric-xlarge-12 { grid-column: auto/span 12 } body .children-ric-xlarge-12>*, body .ric-xlarge-12 { width: var(--ric-column-width-12) } body .children-ric-xlarge-12>*.ric-grid-wrap, body .ric-xlarge-12.ric-grid-wrap { grid-template-columns: repeat(12, 1fr) } } @media(max-width:1068px) { body .ric-grid-wrap.children-ric-medium-1>*, body .ric-grid-wrap .ric-medium-1 { grid-column: auto/span 1 } body .children-ric-medium-1>*, body .ric-medium-1 { width: var(--ric-column-width-1) } body .children-ric-medium-1>*.ric-grid-wrap, body .ric-medium-1.ric-grid-wrap { grid-template-columns: repeat(1, 1fr) } body .ric-grid-wrap.children-ric-medium-2>*, body .ric-grid-wrap .ric-medium-2 { grid-column: auto/span 2 } body .children-ric-medium-2>*, body .ric-medium-2 { width: var(--ric-column-width-2) } body .children-ric-medium-2>*.ric-grid-wrap, body .ric-medium-2.ric-grid-wrap { grid-template-columns: repeat(2, 1fr) } body .ric-grid-wrap.children-ric-medium-3>*, body .ric-grid-wrap .ric-medium-3 { grid-column: auto/span 3 } body .children-ric-medium-3>*, body .ric-medium-3 { width: var(--ric-column-width-3) } body .children-ric-medium-3>*.ric-grid-wrap, body .ric-medium-3.ric-grid-wrap { grid-template-columns: repeat(3, 1fr) } body .ric-grid-wrap.children-ric-medium-4>*, body .ric-grid-wrap .ric-medium-4 { grid-column: auto/span 4 } body .children-ric-medium-4>*, body .ric-medium-4 { width: var(--ric-column-width-4) } body .children-ric-medium-4>*.ric-grid-wrap, body .ric-medium-4.ric-grid-wrap { grid-template-columns: repeat(4, 1fr) } body .ric-grid-wrap.children-ric-medium-5>*, body .ric-grid-wrap .ric-medium-5 { grid-column: auto/span 5 } body .children-ric-medium-5>*, body .ric-medium-5 { width: var(--ric-column-width-5) } body .children-ric-medium-5>*.ric-grid-wrap, body .ric-medium-5.ric-grid-wrap { grid-template-columns: repeat(5, 1fr) } body .ric-grid-wrap.children-ric-medium-6>*, body .ric-grid-wrap .ric-medium-6 { grid-column: auto/span 6 } body .children-ric-medium-6>*, body .ric-medium-6 { width: var(--ric-column-width-6) } body .children-ric-medium-6>*.ric-grid-wrap, body .ric-medium-6.ric-grid-wrap { grid-template-columns: repeat(6, 1fr) } body .ric-grid-wrap.children-ric-medium-7>*, body .ric-grid-wrap .ric-medium-7 { grid-column: auto/span 7 } body .children-ric-medium-7>*, body .ric-medium-7 { width: var(--ric-column-width-7) } body .children-ric-medium-7>*.ric-grid-wrap, body .ric-medium-7.ric-grid-wrap { grid-template-columns: repeat(7, 1fr) } body .ric-grid-wrap.children-ric-medium-8>*, body .ric-grid-wrap .ric-medium-8 { grid-column: auto/span 8 } body .children-ric-medium-8>*, body .ric-medium-8 { width: var(--ric-column-width-8) } body .children-ric-medium-8>*.ric-grid-wrap, body .ric-medium-8.ric-grid-wrap { grid-template-columns: repeat(8, 1fr) } body .ric-grid-wrap.children-ric-medium-9>*, body .ric-grid-wrap .ric-medium-9 { grid-column: auto/span 9 } body .children-ric-medium-9>*, body .ric-medium-9 { width: var(--ric-column-width-9) } body .children-ric-medium-9>*.ric-grid-wrap, body .ric-medium-9.ric-grid-wrap { grid-template-columns: repeat(9, 1fr) } body .ric-grid-wrap.children-ric-medium-10>*, body .ric-grid-wrap .ric-medium-10 { grid-column: auto/span 10 } body .children-ric-medium-10>*, body .ric-medium-10 { width: var(--ric-column-width-10) } body .children-ric-medium-10>*.ric-grid-wrap, body .ric-medium-10.ric-grid-wrap { grid-template-columns: repeat(10, 1fr) } body .ric-grid-wrap.children-ric-medium-11>*, body .ric-grid-wrap .ric-medium-11 { grid-column: auto/span 11 } body .children-ric-medium-11>*, body .ric-medium-11 { width: var(--ric-column-width-11) } body .children-ric-medium-11>*.ric-grid-wrap, body .ric-medium-11.ric-grid-wrap { grid-template-columns: repeat(11, 1fr) } body .ric-grid-wrap.children-ric-medium-12>*, body .ric-grid-wrap .ric-medium-12 { grid-column: auto/span 12 } body .children-ric-medium-12>*, body .ric-medium-12 { width: var(--ric-column-width-12) } body .children-ric-medium-12>*.ric-grid-wrap, body .ric-medium-12.ric-grid-wrap { grid-template-columns: repeat(12, 1fr) } } @media(max-width:734px) { body .ric-grid-wrap.children-ric-small-1>*, body .ric-grid-wrap .ric-small-1 { grid-column: auto/span 1 } body .children-ric-small-1>*, body .ric-small-1 { width: var(--ric-column-width-1) } body .children-ric-small-1>*.ric-grid-wrap, body .ric-small-1.ric-grid-wrap { grid-template-columns: repeat(1, 1fr) } body .ric-grid-wrap.children-ric-small-2>*, body .ric-grid-wrap .ric-small-2 { grid-column: auto/span 2 } body .children-ric-small-2>*, body .ric-small-2 { width: var(--ric-column-width-2) } body .children-ric-small-2>*.ric-grid-wrap, body .ric-small-2.ric-grid-wrap { grid-template-columns: repeat(2, 1fr) } body .ric-grid-wrap.children-ric-small-3>*, body .ric-grid-wrap .ric-small-3 { grid-column: auto/span 3 } body .children-ric-small-3>*, body .ric-small-3 { width: var(--ric-column-width-3) } body .children-ric-small-3>*.ric-grid-wrap, body .ric-small-3.ric-grid-wrap { grid-template-columns: repeat(3, 1fr) } body .ric-grid-wrap.children-ric-small-4>*, body .ric-grid-wrap .ric-small-4 { grid-column: auto/span 4 } body .children-ric-small-4>*, body .ric-small-4 { width: var(--ric-column-width-4) } body .children-ric-small-4>*.ric-grid-wrap, body .ric-small-4.ric-grid-wrap { grid-template-columns: repeat(4, 1fr) } body .ric-grid-wrap.children-ric-small-5>*, body .ric-grid-wrap .ric-small-5 { grid-column: auto/span 5 } body .children-ric-small-5>*, body .ric-small-5 { width: var(--ric-column-width-5) } body .children-ric-small-5>*.ric-grid-wrap, body .ric-small-5.ric-grid-wrap { grid-template-columns: repeat(5, 1fr) } body .ric-grid-wrap.children-ric-small-6>*, body .ric-grid-wrap .ric-small-6 { grid-column: auto/span 6 } body .children-ric-small-6>*, body .ric-small-6 { width: var(--ric-column-width-6) } body .children-ric-small-6>*.ric-grid-wrap, body .ric-small-6.ric-grid-wrap { grid-template-columns: repeat(6, 1fr) } body .ric-grid-wrap.children-ric-small-7>*, body .ric-grid-wrap .ric-small-7 { grid-column: auto/span 7 } body .children-ric-small-7>*, body .ric-small-7 { width: var(--ric-column-width-7) } body .children-ric-small-7>*.ric-grid-wrap, body .ric-small-7.ric-grid-wrap { grid-template-columns: repeat(7, 1fr) } body .ric-grid-wrap.children-ric-small-8>*, body .ric-grid-wrap .ric-small-8 { grid-column: auto/span 8 } body .children-ric-small-8>*, body .ric-small-8 { width: var(--ric-column-width-8) } body .children-ric-small-8>*.ric-grid-wrap, body .ric-small-8.ric-grid-wrap { grid-template-columns: repeat(8, 1fr) } body .ric-grid-wrap.children-ric-small-9>*, body .ric-grid-wrap .ric-small-9 { grid-column: auto/span 9 } body .children-ric-small-9>*, body .ric-small-9 { width: var(--ric-column-width-9) } body .children-ric-small-9>*.ric-grid-wrap, body .ric-small-9.ric-grid-wrap { grid-template-columns: repeat(9, 1fr) } body .ric-grid-wrap.children-ric-small-10>*, body .ric-grid-wrap .ric-small-10 { grid-column: auto/span 10 } body .children-ric-small-10>*, body .ric-small-10 { width: var(--ric-column-width-10) } body .children-ric-small-10>*.ric-grid-wrap, body .ric-small-10.ric-grid-wrap { grid-template-columns: repeat(10, 1fr) } body .ric-grid-wrap.children-ric-small-11>*, body .ric-grid-wrap .ric-small-11 { grid-column: auto/span 11 } body .children-ric-small-11>*, body .ric-small-11 { width: var(--ric-column-width-11) } body .children-ric-small-11>*.ric-grid-wrap, body .ric-small-11.ric-grid-wrap { grid-template-columns: repeat(11, 1fr) } body .ric-grid-wrap.children-ric-small-12>*, body .ric-grid-wrap .ric-small-12 { grid-column: auto/span 12 } body .children-ric-small-12>*, body .ric-small-12 { width: var(--ric-column-width-12) } body .children-ric-small-12>*.ric-grid-wrap, body .ric-small-12.ric-grid-wrap { grid-template-columns: repeat(12, 1fr) } } @media(max-width:480px) { body .ric-grid-wrap.children-ric-xsmall-1>*, body .ric-grid-wrap .ric-xsmall-1 { grid-column: auto/span 1 } body .children-ric-xsmall-1>*, body .ric-xsmall-1 { width: var(--ric-column-width-1) } body .children-ric-xsmall-1>*.ric-grid-wrap, body .ric-xsmall-1.ric-grid-wrap { grid-template-columns: repeat(1, 1fr) } body .ric-grid-wrap.children-ric-xsmall-2>*, body .ric-grid-wrap .ric-xsmall-2 { grid-column: auto/span 2 } body .children-ric-xsmall-2>*, body .ric-xsmall-2 { width: var(--ric-column-width-2) } body .children-ric-xsmall-2>*.ric-grid-wrap, body .ric-xsmall-2.ric-grid-wrap { grid-template-columns: repeat(2, 1fr) } body .ric-grid-wrap.children-ric-xsmall-3>*, body .ric-grid-wrap .ric-xsmall-3 { grid-column: auto/span 3 } body .children-ric-xsmall-3>*, body .ric-xsmall-3 { width: var(--ric-column-width-3) } body .children-ric-xsmall-3>*.ric-grid-wrap, body .ric-xsmall-3.ric-grid-wrap { grid-template-columns: repeat(3, 1fr) } body .ric-grid-wrap.children-ric-xsmall-4>*, body .ric-grid-wrap .ric-xsmall-4 { grid-column: auto/span 4 } body .children-ric-xsmall-4>*, body .ric-xsmall-4 { width: var(--ric-column-width-4) } body .children-ric-xsmall-4>*.ric-grid-wrap, body .ric-xsmall-4.ric-grid-wrap { grid-template-columns: repeat(4, 1fr) } body .ric-grid-wrap.children-ric-xsmall-5>*, body .ric-grid-wrap .ric-xsmall-5 { grid-column: auto/span 5 } body .children-ric-xsmall-5>*, body .ric-xsmall-5 { width: var(--ric-column-width-5) } body .children-ric-xsmall-5>*.ric-grid-wrap, body .ric-xsmall-5.ric-grid-wrap { grid-template-columns: repeat(5, 1fr) } body .ric-grid-wrap.children-ric-xsmall-6>*, body .ric-grid-wrap .ric-xsmall-6 { grid-column: auto/span 6 } body .children-ric-xsmall-6>*, body .ric-xsmall-6 { width: var(--ric-column-width-6) } body .children-ric-xsmall-6>*.ric-grid-wrap, body .ric-xsmall-6.ric-grid-wrap { grid-template-columns: repeat(6, 1fr) } body .ric-grid-wrap.children-ric-xsmall-7>*, body .ric-grid-wrap .ric-xsmall-7 { grid-column: auto/span 7 } body .children-ric-xsmall-7>*, body .ric-xsmall-7 { width: var(--ric-column-width-7) } body .children-ric-xsmall-7>*.ric-grid-wrap, body .ric-xsmall-7.ric-grid-wrap { grid-template-columns: repeat(7, 1fr) } body .ric-grid-wrap.children-ric-xsmall-8>*, body .ric-grid-wrap .ric-xsmall-8 { grid-column: auto/span 8 } body .children-ric-xsmall-8>*, body .ric-xsmall-8 { width: var(--ric-column-width-8) } body .children-ric-xsmall-8>*.ric-grid-wrap, body .ric-xsmall-8.ric-grid-wrap { grid-template-columns: repeat(8, 1fr) } body .ric-grid-wrap.children-ric-xsmall-9>*, body .ric-grid-wrap .ric-xsmall-9 { grid-column: auto/span 9 } body .children-ric-xsmall-9>*, body .ric-xsmall-9 { width: var(--ric-column-width-9) } body .children-ric-xsmall-9>*.ric-grid-wrap, body .ric-xsmall-9.ric-grid-wrap { grid-template-columns: repeat(9, 1fr) } body .ric-grid-wrap.children-ric-xsmall-10>*, body .ric-grid-wrap .ric-xsmall-10 { grid-column: auto/span 10 } body .children-ric-xsmall-10>*, body .ric-xsmall-10 { width: var(--ric-column-width-10) } body .children-ric-xsmall-10>*.ric-grid-wrap, body .ric-xsmall-10.ric-grid-wrap { grid-template-columns: repeat(10, 1fr) } body .ric-grid-wrap.children-ric-xsmall-11>*, body .ric-grid-wrap .ric-xsmall-11 { grid-column: auto/span 11 } body .children-ric-xsmall-11>*, body .ric-xsmall-11 { width: var(--ric-column-width-11) } body .children-ric-xsmall-11>*.ric-grid-wrap, body .ric-xsmall-11.ric-grid-wrap { grid-template-columns: repeat(11, 1fr) } body .ric-grid-wrap.children-ric-xsmall-12>*, body .ric-grid-wrap .ric-xsmall-12 { grid-column: auto/span 12 } body .children-ric-xsmall-12>*, body .ric-xsmall-12 { width: var(--ric-column-width-12) } body .children-ric-xsmall-12>*.ric-grid-wrap, body .ric-xsmall-12.ric-grid-wrap { grid-template-columns: repeat(12, 1fr) } } body .ric-large-offset-0 { margin-inline-start: var(--ric-column-width-0) } body .ric-grid-wrap .ric-large-offset-0 { margin-inline-start: 0; grid-column-start: auto } body .ric-large-offset-1 { margin-inline-start: var(--ric-column-width-1) } body .ric-grid-wrap .ric-large-offset-1 { margin-inline-start: 0; grid-column-start: 2 } body .ric-large-offset-2 { margin-inline-start: var(--ric-column-width-2) } body .ric-grid-wrap .ric-large-offset-2 { margin-inline-start: 0; grid-column-start: 3 } body .ric-large-offset-3 { margin-inline-start: var(--ric-column-width-3) } body .ric-grid-wrap .ric-large-offset-3 { margin-inline-start: 0; grid-column-start: 4 } body .ric-large-offset-4 { margin-inline-start: var(--ric-column-width-4) } body .ric-grid-wrap .ric-large-offset-4 { margin-inline-start: 0; grid-column-start: 5 } body .ric-large-offset-5 { margin-inline-start: var(--ric-column-width-5) } body .ric-grid-wrap .ric-large-offset-5 { margin-inline-start: 0; grid-column-start: 6 } body .ric-large-offset-6 { margin-inline-start: var(--ric-column-width-6) } body .ric-grid-wrap .ric-large-offset-6 { margin-inline-start: 0; grid-column-start: 7 } body .ric-large-offset-7 { margin-inline-start: var(--ric-column-width-7) } body .ric-grid-wrap .ric-large-offset-7 { margin-inline-start: 0; grid-column-start: 8 } body .ric-large-offset-8 { margin-inline-start: var(--ric-column-width-8) } body .ric-grid-wrap .ric-large-offset-8 { margin-inline-start: 0; grid-column-start: 9 } body .ric-large-offset-9 { margin-inline-start: var(--ric-column-width-9) } body .ric-grid-wrap .ric-large-offset-9 { margin-inline-start: 0; grid-column-start: 10 } body .ric-large-offset-10 { margin-inline-start: var(--ric-column-width-10) } body .ric-grid-wrap .ric-large-offset-10 { margin-inline-start: 0; grid-column-start: 11 } body .ric-large-offset-11 { margin-inline-start: var(--ric-column-width-11) } body .ric-grid-wrap .ric-large-offset-11 { margin-inline-start: 0; grid-column-start: 12 } @media(min-width:1441px) { body .ric-xlarge-offset-0 { margin-inline-start: var(--ric-column-width-0) } body .ric-grid-wrap .ric-xlarge-offset-0 { margin-inline-start: 0; grid-column-start: auto } body .ric-xlarge-offset-1 { margin-inline-start: var(--ric-column-width-1) } body .ric-grid-wrap .ric-xlarge-offset-1 { margin-inline-start: 0; grid-column-start: 2 } body .ric-xlarge-offset-2 { margin-inline-start: var(--ric-column-width-2) } body .ric-grid-wrap .ric-xlarge-offset-2 { margin-inline-start: 0; grid-column-start: 3 } body .ric-xlarge-offset-3 { margin-inline-start: var(--ric-column-width-3) } body .ric-grid-wrap .ric-xlarge-offset-3 { margin-inline-start: 0; grid-column-start: 4 } body .ric-xlarge-offset-4 { margin-inline-start: var(--ric-column-width-4) } body .ric-grid-wrap .ric-xlarge-offset-4 { margin-inline-start: 0; grid-column-start: 5 } body .ric-xlarge-offset-5 { margin-inline-start: var(--ric-column-width-5) } body .ric-grid-wrap .ric-xlarge-offset-5 { margin-inline-start: 0; grid-column-start: 6 } body .ric-xlarge-offset-6 { margin-inline-start: var(--ric-column-width-6) } body .ric-grid-wrap .ric-xlarge-offset-6 { margin-inline-start: 0; grid-column-start: 7 } body .ric-xlarge-offset-7 { margin-inline-start: var(--ric-column-width-7) } body .ric-grid-wrap .ric-xlarge-offset-7 { margin-inline-start: 0; grid-column-start: 8 } body .ric-xlarge-offset-8 { margin-inline-start: var(--ric-column-width-8) } body .ric-grid-wrap .ric-xlarge-offset-8 { margin-inline-start: 0; grid-column-start: 9 } body .ric-xlarge-offset-9 { margin-inline-start: var(--ric-column-width-9) } body .ric-grid-wrap .ric-xlarge-offset-9 { margin-inline-start: 0; grid-column-start: 10 } body .ric-xlarge-offset-10 { margin-inline-start: var(--ric-column-width-10) } body .ric-grid-wrap .ric-xlarge-offset-10 { margin-inline-start: 0; grid-column-start: 11 } body .ric-xlarge-offset-11 { margin-inline-start: var(--ric-column-width-11) } body .ric-grid-wrap .ric-xlarge-offset-11 { margin-inline-start: 0; grid-column-start: 12 } } @media(max-width:1068px) { body .ric-medium-offset-0 { margin-inline-start: var(--ric-column-width-0) } body .ric-grid-wrap .ric-medium-offset-0 { margin-inline-start: 0; grid-column-start: auto } body .ric-medium-offset-1 { margin-inline-start: var(--ric-column-width-1) } body .ric-grid-wrap .ric-medium-offset-1 { margin-inline-start: 0; grid-column-start: 2 } body .ric-medium-offset-2 { margin-inline-start: var(--ric-column-width-2) } body .ric-grid-wrap .ric-medium-offset-2 { margin-inline-start: 0; grid-column-start: 3 } body .ric-medium-offset-3 { margin-inline-start: var(--ric-column-width-3) } body .ric-grid-wrap .ric-medium-offset-3 { margin-inline-start: 0; grid-column-start: 4 } body .ric-medium-offset-4 { margin-inline-start: var(--ric-column-width-4) } body .ric-grid-wrap .ric-medium-offset-4 { margin-inline-start: 0; grid-column-start: 5 } body .ric-medium-offset-5 { margin-inline-start: var(--ric-column-width-5) } body .ric-grid-wrap .ric-medium-offset-5 { margin-inline-start: 0; grid-column-start: 6 } body .ric-medium-offset-6 { margin-inline-start: var(--ric-column-width-6) } body .ric-grid-wrap .ric-medium-offset-6 { margin-inline-start: 0; grid-column-start: 7 } body .ric-medium-offset-7 { margin-inline-start: var(--ric-column-width-7) } body .ric-grid-wrap .ric-medium-offset-7 { margin-inline-start: 0; grid-column-start: 8 } body .ric-medium-offset-8 { margin-inline-start: var(--ric-column-width-8) } body .ric-grid-wrap .ric-medium-offset-8 { margin-inline-start: 0; grid-column-start: 9 } body .ric-medium-offset-9 { margin-inline-start: var(--ric-column-width-9) } body .ric-grid-wrap .ric-medium-offset-9 { margin-inline-start: 0; grid-column-start: 10 } body .ric-medium-offset-10 { margin-inline-start: var(--ric-column-width-10) } body .ric-grid-wrap .ric-medium-offset-10 { margin-inline-start: 0; grid-column-start: 11 } body .ric-medium-offset-11 { margin-inline-start: var(--ric-column-width-11) } body .ric-grid-wrap .ric-medium-offset-11 { margin-inline-start: 0; grid-column-start: 12 } } @media(max-width:734px) { body .ric-small-offset-0 { margin-inline-start: var(--ric-column-width-0) } body .ric-grid-wrap .ric-small-offset-0 { margin-inline-start: 0; grid-column-start: auto } body .ric-small-offset-1 { margin-inline-start: var(--ric-column-width-1) } body .ric-grid-wrap .ric-small-offset-1 { margin-inline-start: 0; grid-column-start: 2 } body .ric-small-offset-2 { margin-inline-start: var(--ric-column-width-2) } body .ric-grid-wrap .ric-small-offset-2 { margin-inline-start: 0; grid-column-start: 3 } body .ric-small-offset-3 { margin-inline-start: var(--ric-column-width-3) } body .ric-grid-wrap .ric-small-offset-3 { margin-inline-start: 0; grid-column-start: 4 } body .ric-small-offset-4 { margin-inline-start: var(--ric-column-width-4) } body .ric-grid-wrap .ric-small-offset-4 { margin-inline-start: 0; grid-column-start: 5 } body .ric-small-offset-5 { margin-inline-start: var(--ric-column-width-5) } body .ric-grid-wrap .ric-small-offset-5 { margin-inline-start: 0; grid-column-start: 6 } body .ric-small-offset-6 { margin-inline-start: var(--ric-column-width-6) } body .ric-grid-wrap .ric-small-offset-6 { margin-inline-start: 0; grid-column-start: 7 } body .ric-small-offset-7 { margin-inline-start: var(--ric-column-width-7) } body .ric-grid-wrap .ric-small-offset-7 { margin-inline-start: 0; grid-column-start: 8 } body .ric-small-offset-8 { margin-inline-start: var(--ric-column-width-8) } body .ric-grid-wrap .ric-small-offset-8 { margin-inline-start: 0; grid-column-start: 9 } body .ric-small-offset-9 { margin-inline-start: var(--ric-column-width-9) } body .ric-grid-wrap .ric-small-offset-9 { margin-inline-start: 0; grid-column-start: 10 } body .ric-small-offset-10 { margin-inline-start: var(--ric-column-width-10) } body .ric-grid-wrap .ric-small-offset-10 { margin-inline-start: 0; grid-column-start: 11 } body .ric-small-offset-11 { margin-inline-start: var(--ric-column-width-11) } body .ric-grid-wrap .ric-small-offset-11 { margin-inline-start: 0; grid-column-start: 12 } } @media(max-width:480px) { body .ric-xsmall-offset-0 { margin-inline-start: var(--ric-column-width-0) } body .ric-grid-wrap .ric-xsmall-offset-0 { margin-inline-start: 0; grid-column-start: auto } body .ric-xsmall-offset-1 { margin-inline-start: var(--ric-column-width-1) } body .ric-grid-wrap .ric-xsmall-offset-1 { margin-inline-start: 0; grid-column-start: 2 } body .ric-xsmall-offset-2 { margin-inline-start: var(--ric-column-width-2) } body .ric-grid-wrap .ric-xsmall-offset-2 { margin-inline-start: 0; grid-column-start: 3 } body .ric-xsmall-offset-3 { margin-inline-start: var(--ric-column-width-3) } body .ric-grid-wrap .ric-xsmall-offset-3 { margin-inline-start: 0; grid-column-start: 4 } body .ric-xsmall-offset-4 { margin-inline-start: var(--ric-column-width-4) } body .ric-grid-wrap .ric-xsmall-offset-4 { margin-inline-start: 0; grid-column-start: 5 } body .ric-xsmall-offset-5 { margin-inline-start: var(--ric-column-width-5) } body .ric-grid-wrap .ric-xsmall-offset-5 { margin-inline-start: 0; grid-column-start: 6 } body .ric-xsmall-offset-6 { margin-inline-start: var(--ric-column-width-6) } body .ric-grid-wrap .ric-xsmall-offset-6 { margin-inline-start: 0; grid-column-start: 7 } body .ric-xsmall-offset-7 { margin-inline-start: var(--ric-column-width-7) } body .ric-grid-wrap .ric-xsmall-offset-7 { margin-inline-start: 0; grid-column-start: 8 } body .ric-xsmall-offset-8 { margin-inline-start: var(--ric-column-width-8) } body .ric-grid-wrap .ric-xsmall-offset-8 { margin-inline-start: 0; grid-column-start: 9 } body .ric-xsmall-offset-9 { margin-inline-start: var(--ric-column-width-9) } body .ric-grid-wrap .ric-xsmall-offset-9 { margin-inline-start: 0; grid-column-start: 10 } body .ric-xsmall-offset-10 { margin-inline-start: var(--ric-column-width-10) } body .ric-grid-wrap .ric-xsmall-offset-10 { margin-inline-start: 0; grid-column-start: 11 } body .ric-xsmall-offset-11 { margin-inline-start: var(--ric-column-width-11) } body .ric-grid-wrap .ric-xsmall-offset-11 { margin-inline-start: 0; grid-column-start: 12 } } body .ric-flex-wrap { display: flex; flex-wrap: wrap } body .ric-grid-wrap { display: grid } body .ric-grid-wrap.ric-bento-gap { grid-gap: 20px; gap: 20px } body .ric-grid-wrap>* { width: 100% } html.no-js picture[data-lazy] { display: none !important } .viewport-content { margin-inline-start: auto; margin-inline-end: auto; width: 87.5%; max-width: var(--global-content-max-width) } .fade-gallery-caption-inline, .typography-ps-body, .typography-ps-card { color: #6e6e73 } .fade-gallery-caption-inline strong, .typography-ps-body strong, .typography-ps-card strong { color: #1d1d1f } .typography-caption-tile { font-size: 17px; line-height: 1.4705882353; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(zh) { letter-spacing: 0em } .typography-caption-tile:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .typography-caption-tile { font-size: 14px; line-height: 1.4285914286; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(ja) { line-height: 1.4; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(ko) { line-height: 1.5714285714; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(zh) { line-height: 1.5; letter-spacing: 0em } .typography-caption-tile:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .typography-caption-tile:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } html.localnav-expanded { overflow: hidden } html.localnav-expanded #ac-localeswitcher, html.localnav-expanded #globalheader { pointer-events: none; opacity: 0; visibility: hidden } #globalheader { transition: opacity .25s ease } .section.no-pad-top { --localnav-scroll-margin-offset: var(--global-section-padding); scroll-margin-top: var(--localnav-scroll-margin-offset) } #localnav { --localnav-anim-fn: ease-out; --localnav-spacing: 20px; --localnav-anim-duration: 0.4s; --localnav-max-width: 1024px; --localnav-max-height: 100dvh; --localnav-offset-top: 10px; --progress: 1; --anim-elem-x: 0px; --anim-elem-y: 0px; --cta-padding-inline: 10px; --cta-padding-block: 6px; --explore-in-duration: 0.15s; --explore-out-duration: 0.1s; position: sticky; top: 0; z-index: 9998; height: var(--localnav-total-height); margin: 0 auto; max-width: calc(var(--localnav-max-width) + var(--localnav-spacing)) } #localnav:has(#localnav-container.reveal) { pointer-events: auto } html.localnav-expanded #localnav { max-width: 100% } html.no-js #localnav { --progress: 1 } @media(max-width:376px) { #localnav { margin-bottom: calc(var(--localnav-spacing)*-1) } } .localnav-container { position: fixed; margin-inline: auto; z-index: 9998; width: 100%; padding-inline-start: max(var(--localnav-padding), env(safe-area-inset-left)); padding-inline-end: max(var(--localnav-padding), env(safe-area-inset-right)); box-sizing: border-box; opacity: 0; pointer-events: none; min-height: var(--localnav-min-height); height: auto; overflow-y: hidden; display: flex; justify-content: center; transition: transform var(--localnav-anim-duration) var(--localnav-anim-fn); --localnav-body: rgb(255, 255, 255); --localnav-body-alpha: rgba(255, 255, 255, 0.8); --localnav-outline: #e6e6e8; --localnav-explore-outline: rgb(134, 134, 139); --localnav-explore-hover: #f2f2f2; --localnav-close-hover: rgb(51, 51, 54); --localnav-blur-bg: rgba(255, 255, 255, 0.4); --localnav-paddlenav-shadow: rgba(134, 134, 139, 0.07); --localnav-disabled-link: rgb(134, 134, 139) } html.no-js .localnav-container { position: static; transform: none; pointer-events: auto; margin-inline: auto } @media(max-width:734px) { .localnav-container { --localnav-spacing: 12px } } @media(max-width:376px) { .localnav-container { padding-inline: 0px } } html.localnav-expanded .localnav-container { --localnav-expanded-offset: var(--localnav-container-top-offset); transform: translateY(calc(var(--localnav-expanded-offset)*-1)); overflow-y: scroll } html.reduced-motion .localnav-container { --localnav-anim-duration: 0s; --explore-in-duration: 0s; --explore-out-duration: 0s } html.no-js .localnav-container { opacity: 1 } .localnav-container.loaded { position: relative } .localnav-container.theme-dark { --localnav-body: #121212; --localnav-body-alpha: rgba(18, 18, 18, 0.8); --localnav-outline: #282828; --localnav-explore-outline: #6e6e73; --localnav-explore-hover: rgb(29, 29, 31); --localnav-close-hover: rgb(210, 210, 215); --localnav-blur-bg: rgba(0, 0, 0, 0.8); --localnav-paddlenav-shadow: rgba(0, 0, 0, 0.4); --localnav-disabled-link: rgb(134, 134, 139) } .localnav-container.theme-reveal-on-scroll .localnav-wrap { transform: translateY(calc(var(--localnav-total-height)*-1)) } html.text-zoom .localnav-container.theme-reveal-on-scroll .localnav-wrap { transform: none } html.no-reduced-motion .localnav-container.theme-reveal-on-scroll .localnav-wrap { transition: transform .23s ease } .localnav-container.theme-reveal-on-scroll.reveal .localnav-wrap { transform: translateY(0) } @media(max-width:376px) { .localnav-container.theme-reveal-on-scroll, .localnav-container.theme-standard { top: -10px } } .localnav-container.theme-standard.loaded { opacity: 1; pointer-events: auto } .localnav-container.theme-reveal-on-scroll.loaded { opacity: 1 } .localnav-container.theme-reveal-on-scroll.loaded.reveal, html.text-zoom .localnav-container.theme-reveal-on-scroll.loaded { pointer-events: auto } .localnav-container+.localnav-overlay-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9997; opacity: 0; pointer-events: none; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: opacity var(--localnav-anim-duration) var(--localnav-anim-fn) } .localnav-container .localnav-wrap { position: relative; z-index: 2; box-sizing: border-box; border-radius: calc(32px - 14px*(1 - var(--progress))); padding-block: 12px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background: var(--localnav-body-alpha); box-shadow: 0 0 0 1px var(--localnav-outline); margin-top: var(--localnav-offset-top); margin-bottom: 2px; width: 100%; max-width: var(--localnav-max-width); height: -moz-fit-content; height: fit-content; overflow: hidden } @media(max-width:376px) { .localnav-container .localnav-wrap { border-radius: 0 } } html.has-modal .localnav-container .localnav-wrap { inset-inline-start: 0 } .localnav-container .content-collapsed-wrap { z-index: 1; position: relative; padding-inline: var(--localnav-spacing); display: flex; justify-content: space-between; align-items: center } .localnav-container .content-collapsed-wrap .cta.buy, .localnav-container .content-collapsed-wrap .product-name { background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0); z-index: 1; text-decoration: none } .localnav-container .content-collapsed-wrap .cta-buttons { --cta-gap: 10px; display: flex; align-items: center; margin: 0; height: 100%; grid-gap: var(--cta-gap); gap: var(--cta-gap) } .localnav-container .content-collapsed-wrap .cta-buttons li { margin-bottom: -0.5px } .localnav-container .product-name { color: var(--sk-glyph); white-space: nowrap } .localnav-container .cta { background-color: var(--sk-fill-blue); color: var(--sk-fill); border-radius: 10em; padding: var(--cta-padding-block) var(--cta-padding-inline); outline: none; margin: 0; display: inline-block; text-decoration: none; white-space: nowrap } .localnav-container .cta[data-focus-method=key]:focus { outline: 2px solid var(--sk-fill-blue) } .localnav-container .cta[data-focus-method=key].buy:focus { outline-offset: 2px } .localnav-container .cta.explore { --explore-width: 100vw; --explore-viewport-offset: 6px; --explore-buy-button-offset: var(--buy-button-width); --explore-x-offset: calc(var(--explore-viewport-offset) + var(--explore-buy-button-offset)); --explore-y-offset: calc(var(--explore-viewport-offset)*-1); --explore-gap: var(--cta-gap); background-color: var(--localnav-body-alpha); color: var(--sk-glyph-gray); position: relative; box-shadow: 0 0 0 1px var(--localnav-explore-outline); padding-inline: calc(var(--cta-padding-inline) - (var(--cta-padding-inline) - var(--cta-padding-inline))*(1 - var(--progress))); padding-block: calc(var(--cta-padding-inline) - (var(--cta-padding-inline) - var(--cta-padding-block))*(1 - var(--progress))); transform: translate(calc((var(--explore-x-offset) + var(--explore-gap))*var(--progress)), calc(var(--explore-y-offset) - var(--explore-y-offset)*(1 - var(--progress)))) } .localnav-container .cta.explore:hover { background-color: var(--localnav-explore-hover) } @media(max-width:734px) { .localnav-container .cta.explore { --explore-viewport-offset: -2px } } .localnav-container .cta.explore .close-button-wrap { opacity: 0; position: absolute; top: 0; left: 0; pointer-events: none; transition: opacity var(--localnav-anim-duration) var(--localnav-anim-fn); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--sk-glyph-gray); border-radius: 10em } .localnav-container .cta.explore .close-button-wrap .close-button { width: 20px; height: 20px; fill: var(--sk-fill) } .localnav-container .cta.explore span { display: block; max-width: var(--explore-width); transition: max-width var(--localnav-anim-duration) var(--localnav-anim-fn); pointer-events: none } .localnav-container .cta.buy { color: #fff } .localnav-container .content-expand-wrap { display: flex; flex-direction: column; pointer-events: none; margin: 0; height: calc((var(--total-height) + var(--localnav-spacing))*var(--progress)); width: 100% } html.no-js .localnav-container .content-expand-wrap { pointer-events: auto } .localnav-container .content-expand-wrap *:focus-visible { outline: 2px solid var(--sk-fill-blue) } .localnav-container .content-expand-wrap:focus-visible { outline-offset: -14px } .localnav-container .content-expand-wrap .product-action, .localnav-container .content-expand-wrap .product-options { padding: var(--localnav-spacing) calc(var(--localnav-spacing)*2.5) } .localnav-container .content-expand-wrap .mutable-font-specs { line-height: var(--line-height-collapsed); letter-spacing: var(--letter-spacing-collapsed); font-size: calc(var(--font-size-expanded) - (var(--font-size-expanded) - var(--font-size-collapsed))*(1 - var(--progress))) } .localnav-container .content-expand-wrap .product-list-wrap { --wrap-margin-offset: -130px; --wrap-padding-top-offset: var(--localnav-spacing); --product-list-wrap-offset: 82px; position: relative; margin-top: calc(var(--product-list-wrap-offset)*-1 + var(--wrap-margin-offset)); padding-top: calc(var(--product-list-wrap-offset) + var(--wrap-padding-top-offset)); width: calc(100% - 2px); inset-inline-start: 1px } .localnav-container .content-expand-wrap .product-list-wrap::-webkit-scrollbar { display: none } @media(max-width:734px) { .localnav-container .content-expand-wrap .product-list-wrap { --wrap-margin-offset: -100px } } .localnav-container .content-expand-wrap .product-list-wrap .paddlenav { --paddlenav-offset: 96px; background-color: var(--localnav-body); position: absolute; top: 50%; transform: translateY(calc(-50% + var(--paddlenav-offset))); width: calc(var(--localnav-spacing)*2.5); height: 130px; display: flex; align-items: center; opacity: 0; transition: opacity .15s var(--localnav-anim-fn) } @media(max-width:734px) { .localnav-container .content-expand-wrap .product-list-wrap .paddlenav { --paddlenav-offset: 86px } } .localnav-container .content-expand-wrap .product-list-wrap .paddlenav::before { content: ""; width: 10px; height: 100%; position: absolute; top: 0 } .localnav-container .content-expand-wrap .product-list-wrap .paddlenav::after { content: ""; width: 100%; position: absolute; background-color: var(--localnav-body); top: -68px; height: 80px } .localnav-container .content-expand-wrap .product-list-wrap .paddlenav:focus-visible { outline-offset: -14px } .localnav-container .content-expand-wrap .product-list-wrap .paddlenav[data-focus-method=mouse] { outline: none } .localnav-container .content-expand-wrap .product-list-wrap .paddlenav.disabled { opacity: 0; pointer-events: none } .localnav-container .content-expand-wrap .product-list-wrap .paddlenav.disabled:focus { outline: none } .localnav-container .content-expand-wrap .product-list-wrap .paddlenav.disabled.hidden-from-voiceover { visibility: hidden } .localnav-container .content-expand-wrap .product-list-wrap .paddlenav-left { left: -1px } .localnav-container .content-expand-wrap .product-list-wrap .paddlenav-left::before { background-image: linear-gradient(90deg, var(--localnav-paddlenav-shadow), transparent); right: -10px } .localnav-container .content-expand-wrap .product-list-wrap .paddlenav-right { right: -1px } .localnav-container .content-expand-wrap .product-list-wrap .paddlenav-right::before { background-image: linear-gradient(270deg, var(--localnav-paddlenav-shadow), transparent); left: -10px } .localnav-container .content-expand-wrap .product-list-wrap .paddlenav .paddlenav-icon { pointer-events: none; width: 29px; height: 29px; fill: var(--sk-glyph-gray) } .localnav-container .content-expand-wrap .product-list { scrollbar-width: none; display: flex; width: 100%; overflow-y: hidden; box-sizing: border-box; position: relative; padding-top: var(--localnav-spacing); padding-bottom: calc(var(--localnav-spacing)*1.5); overflow-x: scroll; scroll-snap-type: inline; scroll-padding-inline: calc(var(--localnav-spacing)*2.75) } .localnav-container .content-expand-wrap .product-list::-webkit-scrollbar { width: 0 } .localnav-container .content-expand-wrap .product-list::after, .localnav-container .content-expand-wrap .product-list::before { content: ""; display: block; width: calc(var(--localnav-spacing)*2); flex-shrink: 0 } @media(max-width:734px) { .localnav-container .content-expand-wrap .product-list { padding-bottom: calc(var(--localnav-spacing)*3) } } .localnav-container .content-expand-wrap .product-list .product-wrap { --progress: 0; --product-gap: 26px; opacity: var(--progress); transform: translateY(calc(0px - 100px*(1 - var(--progress)))); margin-inline-end: var(--product-gap); border-radius: var(--localnav-spacing); margin-top: var(--product-list-wrap-offset); display: flex; align-items: end; scroll-snap-align: start } .site-localnav-nav-accessories { --p-width: 64px } .site-localnav-nav-accessories, .site-localnav-nav-compare { display: block; width: var(--p-width); height: var(--p-height); --p-height: 80px } .site-localnav-nav-compare { --p-width: 80px } .site-localnav-nav-ios { --p-width: 62px; --p-height: 62px } .site-localnav-nav-ios, .site-localnav-nav-iphone-16 { display: block; width: var(--p-width); height: var(--p-height) } .site-localnav-nav-iphone-16 { --p-width: 42px; --p-height: 78px } .site-localnav-nav-iphone-16e { --p-height: 72px } .site-localnav-nav-iphone-16e, .site-localnav-nav-iphone-17 { display: block; width: var(--p-width); height: var(--p-height); --p-width: 43px } .site-localnav-nav-iphone-17 { --p-height: 73px } .site-localnav-nav-iphone-17pro { display: block; width: var(--p-width); height: var(--p-height); --p-width: 47px; --p-height: 80px } .site-localnav-nav-iphone-air { --p-width: 45px; --p-height: 77px } .site-localnav-nav-iphone-air, .site-localnav-nav-shop { display: block; width: var(--p-width); height: var(--p-height) } .site-localnav-nav-shop { --p-width: 50px; --p-height: 75px } .localnav-container .content-expand-wrap .product-list .product-wrap .product-link { min-width: 80px } html.text-zoom .localnav-container .content-expand-wrap .product-list .product-wrap { --product-gap: 140px } html.no-js .localnav-container .content-expand-wrap .product-list .product-wrap { --progress: 1 } @media(max-width:734px) { .localnav-container .content-expand-wrap .product-list .product-wrap { --product-gap: 12px } } .localnav-container .content-expand-wrap .product-list .product-wrap:last-child { margin-inline-end: 0 } .localnav-container .content-expand-wrap .product-list .product-wrap .product-name-badge { white-space: nowrap } .localnav-container .content-expand-wrap .product-list .product-wrap .product-link { text-decoration: none; color: var(--sk-fill-gray); padding: var(--localnav-spacing) calc(var(--localnav-spacing)*0.75); border-radius: inherit; display: flex; flex-direction: column; align-items: center; position: relative } .localnav-container .content-expand-wrap .product-list .product-wrap .currently-viewing { pointer-events: none } .localnav-container .content-expand-wrap .product-list .product-wrap .badge { position: absolute; bottom: 4px; width: 100%; text-align: center; display: block; left: 50%; transform: translateX(-50%) } @media(max-width:734px) { .localnav-container .content-expand-wrap .product-list .product-wrap .badge { bottom: -4px } } .localnav-container .content-expand-wrap .product-list .product-wrap .badge-viewing { font-weight: 400; color: var(--sk-fill-gray-secondary) } .localnav-container .content-expand-wrap .product-list .product-wrap p { text-align: center; padding-top: 12px; font-weight: 500 } .localnav-container .content-expand-wrap .product-action { --wrap-width: auto; --wrap-height: auto; position: relative; padding-top: calc(var(--localnav-spacing)*2); padding-bottom: calc(var(--localnav-spacing)*1); display: flex; justify-content: space-between } html.text-zoom .localnav-container .content-expand-wrap .product-action { flex-direction: column; align-items: normal } @media(max-width:734px) { .localnav-container .content-expand-wrap .product-action { flex-direction: column; align-items: normal; padding-bottom: calc(var(--localnav-spacing)*0.2) } } .localnav-container .content-expand-wrap .product-action .product-name-wrap { margin: 0; padding: 0; width: -moz-fit-content; width: fit-content; max-width: calc(var(--wrap-width)*50px); height: var(--wrap-height) } @media(max-width:734px) { .localnav-container .content-expand-wrap .product-action .product-name-wrap { margin-bottom: 6px } } @media(max-width:1068px) { .localnav-container .content-expand-wrap .product-action .product-name .product-name-title { --font-size-expanded: 32px; --letter-spacing-expanded: 0.004em; --line-height-expanded: 1.125 } .localnav-container .content-expand-wrap .product-action .product-name .product-name-title:lang(ja), .localnav-container .content-expand-wrap .product-action .product-name .product-name-title:lang(ko) { --line-height-expanded: 1.21875 } .localnav-container .content-expand-wrap .product-action .product-name .product-name-title:lang(th) { --line-height-expanded: 1.375 } .localnav-container .content-expand-wrap .product-action .product-name .product-name-title:lang(zh) { --line-height-expanded: 1.21875 } } @media(max-width:734px) { .localnav-container .content-expand-wrap .product-action .product-name .product-name-title { --font-size-expanded: 24px; --letter-spacing-expanded: 0.009em; --line-height-expanded: 1.1666666667 } .localnav-container .content-expand-wrap .product-action .product-name .product-name-title:lang(ja) { --line-height-expanded: 1.25 } .localnav-container .content-expand-wrap .product-action .product-name .product-name-title:lang(ko) { --line-height-expanded: 1.2916666667 } .localnav-container .content-expand-wrap .product-action .product-name .product-name-title:lang(th) { --line-height-expanded: 1.375 } .localnav-container .content-expand-wrap .product-action .product-name .product-name-title:lang(zh) { --line-height-expanded: 1.2916666667 } } .localnav-container .content-expand-wrap .product-action::before { content: ""; position: absolute; top: 0; left: calc(var(--localnav-spacing)*2.5); height: 1px; width: calc(100% - var(--localnav-spacing)*5); background-color: var(--localnav-outline); opacity: 0; transition: opacity var(--localnav-anim-duration) var(--localnav-anim-fn) } .localnav-container .content-expand-wrap .product-action .product-cta { display: flex; align-items: center; grid-gap: var(--localnav-spacing); gap: var(--localnav-spacing) } @media(max-width:734px) { .localnav-container .content-expand-wrap .product-action .product-cta { justify-content: space-between; flex-wrap: wrap } } .localnav-container .content-expand-wrap .product-action .product-cta .pricing { transition: opacity var(--localnav-anim-duration) var(--localnav-anim-fn); opacity: 0; transform: translateY(calc(-200px*(1 - var(--progress)))); color: var(--sk-fill-gray); text-align: end; padding-inline: var(--localnav-spacing) 0; height: auto } @media(min-width:735px) { .localnav-container .content-expand-wrap .product-action .product-cta .pricing:has([data-toggle=acmi]) { height: 44px } html.hide-acmi .localnav-container .content-expand-wrap .product-action .product-cta .pricing:has([data-toggle=acmi]) { height: auto } } html.text-zoom .localnav-container .content-expand-wrap .product-action .product-cta .pricing { text-align: start; padding-inline: 0 var(--localnav-spacing) } @media(max-width:734px) { .localnav-container .content-expand-wrap .product-action .product-cta .pricing { text-align: start; padding-inline: 0 var(--localnav-spacing) } } .localnav-container .content-expand-wrap .product-action .product-cta .pricing .footnote { display: none } .localnav-container .content-expand-wrap .product-action .product-cta .pricing [data-pricing-loaded]+.footnote { display: inline } .localnav-container .content-expand-wrap .product-action .product-cta .cta-wrap { margin: 0; padding: 0; width: var(--wrap-width); height: var(--wrap-height) } .localnav-container .content-expand-wrap .product-action .product-cta .buy { --font-size-expanded: 17px; --font-size-collapsed: 12px; --letter-spacing-expanded: -0.022em; --letter-spacing-collapsed: -0.01em; --line-height-expanded: 1.2353641176; --line-height-collapsed: 1.3333733333; --buy-padding-expanded-block: 10px; --buy-padding-expanded-inline: 20px; padding-block: calc(var(--buy-padding-expanded-block) - (var(--buy-padding-expanded-block) - var(--cta-padding-block))*(1 - var(--progress))); padding-inline: calc(var(--buy-padding-expanded-inline) - (var(--buy-padding-expanded-inline) - var(--cta-padding-inline))*(1 - var(--progress))); transform: translate(calc(var(--anim-elem-x)*(1 - var(--progress))), calc(var(--anim-elem-y)*(1 - var(--progress)))) } .localnav-container .content-expand-wrap .product-action .product-cta .buy:lang(ar) { --letter-spacing-expanded: 0em; --letter-spacing-collapsed: 0em } .localnav-container .content-expand-wrap .product-action .product-cta .buy:lang(ja), .localnav-container .content-expand-wrap .product-action .product-cta .buy:lang(ko) { --letter-spacing-expanded: 0em; --letter-spacing-collapsed: 0em; --line-height-collapsed: 1.4166666667 } .localnav-container .content-expand-wrap .product-action .product-cta .buy:lang(ko) { --line-height-expanded: 1.3529611765 } .localnav-container .content-expand-wrap .product-action .product-cta .buy:lang(th), .localnav-container .content-expand-wrap .product-action .product-cta .buy:lang(zh) { --letter-spacing-expanded: 0em; --letter-spacing-collapsed: 0em; --line-height-expanded: 1.3529611765 } .localnav-container .content-expand-wrap .product-action .product-cta .buy:lang(th) { --line-height-collapsed: 1.3333733333 } @media(max-width:734px) { .localnav-container .content-expand-wrap .product-action .product-cta .buy { --font-size-expanded: 12px; --letter-spacing-expanded: -0.01em; --line-height-expanded: 1.3333733333 } .localnav-container .content-expand-wrap .product-action .product-cta .buy:lang(ar) { --letter-spacing-expanded: 0em } .localnav-container .content-expand-wrap .product-action .product-cta .buy:lang(ja), .localnav-container .content-expand-wrap .product-action .product-cta .buy:lang(ko) { --letter-spacing-expanded: 0em; --line-height-expanded: 1.4166666667 } .localnav-container .content-expand-wrap .product-action .product-cta .buy:lang(zh) { --letter-spacing-expanded: 0em } .localnav-container .content-expand-wrap .product-action .product-cta .buy:lang(th) { --letter-spacing-expanded: 0em; --line-height-expanded: 1.3333733333 } } .localnav-container .content-expand-wrap .product-action .product-cta .buy.hover, .localnav-container .content-expand-wrap .product-action .product-cta .buy:hover { background-color: #0076df } @media(max-width:734px) { .localnav-container .content-expand-wrap .product-action .product-cta .buy { --buy-padding-expanded-block: 8px; --buy-padding-expanded-inline: 14px } } .localnav-container .content-expand-wrap .product-options { --column-count: 3; padding-bottom: calc(var(--localnav-spacing)*3); padding-inline: calc(var(--localnav-spacing)*4) } @media(max-width:734px) { .localnav-container .content-expand-wrap .product-options { padding-inline: calc(var(--localnav-spacing)*2.5); padding-top: calc(var(--localnav-spacing)*2) } } .localnav-container .content-expand-wrap .product-options .option-type-links { display: flex; grid-gap: 14px; gap: 14px; flex-direction: column } .localnav-container .content-expand-wrap .product-options .option-type-tabs { --column-gap-large: 72px; --column-gap-small: 26px; display: grid; grid-template-rows: repeat(calc(var(--section-tab-count)/var(--column-count)), 1fr); grid-auto-flow: column; grid-auto-columns: max-content; grid-gap: 10px; gap: 10px; grid-column-gap: var(--column-gap-large); column-gap: var(--column-gap-large); padding-top: calc(var(--localnav-spacing)*0.75); padding-inline-start: calc(var(--localnav-spacing)*0.25); padding-bottom: var(--localnav-spacing) } html.no-js .localnav-container .content-expand-wrap .product-options .option-type-tabs { grid-template-rows: repeat(3, 1fr) } @media(max-width:734px) { .localnav-container .content-expand-wrap .product-options .option-type-tabs { grid-column-gap: var(--column-gap-small); column-gap: var(--column-gap-small) } } .localnav-container .content-expand-wrap .product-options .option-type-tabs:not(.tab-widths-ready) { grid-column-gap: 0px; column-gap: 0px; width: -moz-fit-content; width: fit-content } .localnav-container .content-expand-wrap .product-options .option-type-tabs[data-column-count="3"] { --column-count: 3 } .localnav-container .content-expand-wrap .product-options .option-type-tabs[data-column-count="2"] { --column-count: 2 } .localnav-container .content-expand-wrap .product-options .option-type-tabs[data-column-count="1"] { grid-auto-flow: row; grid-template-rows: none } .localnav-container .content-expand-wrap .product-options .option-wrap { --progress: 0; opacity: var(--progress); transform: translateY(calc(0px - 30px*(1 - var(--progress)))) } .localnav-container .content-expand-wrap .product-options .option-wrap:has(.option-type-tabs) .option-cta.link.disabled .icon::after, .localnav-container .content-expand-wrap .product-options .option-wrap:has(.option-type-tabs) .option-cta.link.disabled .icon::before { font-family: SF Pro Icons; color: inherit; display: inline-block; font-style: normal; font-weight: inherit; font-size: inherit; line-height: 1; text-decoration: underline; position: relative; z-index: 1; alt: ""; text-decoration: none } .localnav-container .content-expand-wrap .product-options .option-wrap:has(.option-type-tabs) .option-cta.link.disabled .icon::before { display: none } .localnav-container .content-expand-wrap .product-options .option-wrap:has(.option-type-tabs) .option-cta.link.disabled .icon::after, .localnav-container .content-expand-wrap .product-options .option-wrap:has(.option-type-tabs) .option-cta.link.disabled .icon::before { content: "" } .localnav-container .content-expand-wrap .product-options .option-wrap:has(.option-type-tabs) .option-cta.link.disabled .icon::after { padding-inline-start: .24em; top: 0 } :lang(ja) .icon::after { top: -0.07em } html.no-js .localnav-container .content-expand-wrap .product-options .option-wrap { --progress: 1 } .localnav-container .content-expand-wrap .product-options .option-cta { padding: 7px 14px } .localnav-container .content-expand-wrap .product-options .option-cta.button { border-radius: 10em; color: var(--sk-fill-gray); text-decoration: none; background-color: rgba(0, 0, 0, 0) } .localnav-container .content-expand-wrap .product-options .option-cta.button.selected, .localnav-container .content-expand-wrap .product-options .option-cta.button:hover { background-color: var(--sk-glyph-gray); color: var(--sk-fill) } .localnav-container .content-expand-wrap .product-options .option-cta.button.selected { pointer-events: none } .localnav-container .content-expand-wrap .product-options .option-cta.link { display: block; text-decoration: none; padding-inline: 0; width: -moz-fit-content; width: fit-content; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none } .localnav-container .content-expand-wrap .product-options .option-cta.link.disabled { color: var(--localnav-disabled-link); opacity: 1 } .localnav-container .content-expand-wrap .product-options .option-cta.link.disabled .icon::after, .localnav-container .content-expand-wrap .product-options .option-cta.link.disabled .icon::before { font-family: SF Pro Icons; color: inherit; display: inline-block; font-style: normal; font-weight: inherit; font-size: inherit; line-height: 1; text-decoration: underline; position: relative; z-index: 1; alt: ""; text-decoration: none } .localnav-container .content-expand-wrap .product-options .option-cta.link.disabled .icon::before { display: none } .localnav-container .content-expand-wrap .product-options .option-cta.link.disabled .icon::after, .localnav-container .content-expand-wrap .product-options .option-cta.link.disabled .icon::before { content: "" } .localnav-container .content-expand-wrap .product-options .option-cta.link.disabled .icon::after { padding-inline-start: .24em; top: 0 } :lang(ja) .icon::after { position: relative; top: -0.1em } :lang(ko) .icon::after { position: relative; top: -0.08em } .localnav-container .localnav-close { position: absolute; width: 42px; height: 42px; border-radius: 10em; top: -3px; inset-inline-end: 11px; z-index: 2; pointer-events: none } .localnav-container:not(.animating-in, .animating-out) .content-collapsed-wrap .product-name { height: 24px } .localnav-container.resizing:not(.animating-in) .content-collapsed-wrap .buy { background-color: var(--sk-fill-blue); color: #fff } .localnav-container.resizing:not(.animating-in) .content-collapsed-wrap .product-name { color: var(--sk-glyph) } .localnav-container.resizing:not(.animating-in) .content-expand-wrap .product-action { visibility: hidden } .localnav-container.animating-in, .localnav-container.animating-out { height: var(--localnav-max-height) } @media(max-width:376px) { .localnav-container.animating-in, .localnav-container.animating-out { height: calc(var(--localnav-max-height) + var(--localnav-spacing)*2) } .localnav-container.animating-in:not(.sticky), .localnav-container.animating-out:not(.sticky) { --localnav-expanded-offset: calc(var(--localnav-container-top-offset) + var(--localnav-offset-top)) } } .localnav-container.animating-in .localnav-wrap, .localnav-container.animating-out .localnav-wrap { transition: padding var(--localnav-anim-duration) var(--localnav-anim-fn), background var(--localnav-anim-duration) var(--localnav-anim-fn) } .localnav-container.animating-in .content-collapsed-wrap .explore, .localnav-container.animating-out .content-collapsed-wrap .explore { pointer-events: none } .localnav-container.animating-in .content-expand-wrap .product-cta .buy:focus, .localnav-container.animating-out .content-expand-wrap .product-cta .buy:focus { --localnav-anim-duration: 0s } .localnav-container.animating-in .localnav-close, .localnav-container.animating-out .localnav-close { pointer-events: auto } .localnav-container.animating-in+.localnav-overlay-background { opacity: 1; pointer-events: auto } .localnav-container.animating-in.animating-in-finished .content-expand-wrap { height: auto } .localnav-container.animating-in.animating-in-finished .content-expand-wrap .product-list-wrap { margin-top: -28px; padding-top: 0 } @media(max-width:734px) { .localnav-container.animating-in.animating-in-finished .content-expand-wrap .product-list-wrap { margin-top: -6px } } .localnav-container.animating-in.animating-in-finished .content-expand-wrap .product-list-wrap .product-list .product-wrap { margin-top: 0 } .localnav-container.animating-in.animating-in-finished .content-expand-wrap .product-list-wrap .paddlenav { --paddlenav-offset: 4px } @media(max-width:734px) { .localnav-container.animating-in.animating-in-finished .content-expand-wrap .product-list-wrap .paddlenav { --paddlenav-offset: -2px } } html.reduced-motion .localnav-container.animating-in, html.reduced-motion .localnav-container.animating-in .option-wrap, html.reduced-motion .localnav-container.animating-in .product-wrap { --progress: 1 !important } .localnav-container.animating-in.resizing { --localnav-anim-duration: 0s } .localnav-container.animating-in .localnav-wrap { margin-bottom: var(--localnav-spacing); padding: var(--localnav-spacing) 0 0; background: var(--localnav-body) } .localnav-container.animating-in .content-collapsed-wrap .buy { pointer-events: none } .localnav-container.animating-in .content-collapsed-wrap .cta-buttons { --cta-gap: 10px } .localnav-container.animating-in .explore { background-color: #e8e8ed; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0) } .localnav-container.animating-in .explore.hover .close-button-wrap { background-color: var(--localnav-close-hover) } .localnav-container.animating-in .explore::after { opacity: 1; transition: opacity var(--explore-in-duration) var(--localnav-anim-fn) var(--explore-in-duration) } .localnav-container.animating-in .explore span { opacity: 0 } .localnav-container.animating-in .explore .close-button-wrap { opacity: 1 } .localnav-container.animating-in .content-expand-wrap { pointer-events: auto } .localnav-container.animating-in .content-expand-wrap .mutable-font-specs { line-height: var(--line-height-expanded); letter-spacing: var(--letter-spacing-expanded) } .localnav-container.animating-in .content-expand-wrap .product-action .product-cta .pricing, .localnav-container.animating-in .content-expand-wrap .product-list-wrap .paddlenav:not(.disabled) { opacity: 1 } .localnav-container.animating-in .product-action::before { opacity: 1; transition-delay: .25s } .localnav-container.animating-out .explore::after { transition: opacity var(--explore-out-duration) var(--localnav-anim-fn) } .localnav-container.animating-out .explore span { transition: opacity var(--explore-in-duration) var(--localnav-anim-fn) var(--explore-in-duration) } .localnav-container.animating-out .content-expand-wrap .product-list-wrap .paddlenav, .localnav-container.animating-out .explore .close-button-wrap { opacity: 0; transition-duration: 0s; transition-delay: 0s } .localnav-container.animating-out .content-expand-wrap .product-action .product-cta .pricing { transition-duration: .05s } .all-access-pass { align-items: center; bottom: var(--aap-margin); display: flex; margin-bottom: 100px; margin-top: var(--aap-margin); pointer-events: auto; position: sticky; will-change: transform } @media(max-width:734px) { .all-access-pass { --aap-margin: 20px } } html.no-js .all-access-pass { opacity: 0; visibility: hidden } html.no-js .all-access-pass:has(a.action-handler) { opacity: 1; visibility: visible } .all-access-pass:focus { outline: none } .all-access-pass.all-access-pass-inline { bottom: 0; margin-bottom: calc(var(--global-section-aap-padding)*0.5 - var(--aap-min-height)*0.5); position: absolute } .all-access-pass__element { --alpha: 1; background-color: rgba(0, 0, 0, 0); border-radius: 28px; color: var(--aap-text-color); display: flex; opacity: 0; position: relative; z-index: 1 } html.no-enhanced .all-access-pass__element, html.no-js .all-access-pass__element:has(a.action-handler) { opacity: 1 } html.no-js .all-access-pass__element:has(a.action-handler) .all-access-pass__background { opacity: 1; width: 100% } .activated .all-access-pass__element { opacity: 1 } .all-access-pass__background { --scale: 1; align-self: center; -webkit-backdrop-filter: blur(calc(var(--aap-blur)*(2 - var(--alpha)))); backdrop-filter: blur(calc(var(--aap-blur)*(2 - var(--alpha)))); background-color: rgba(var(--aap-background-color-solid)/calc(1 - var(--alpha)*var(--aap-background-color-alpha))); border-radius: 28px; height: var(--aap-min-height); justify-self: center; left: 50%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -50%) scale(var(--scale)); width: var(--aap-min-height); will-change: transform; z-index: -1 } html.no-enhanced .all-access-pass__background { opacity: 1; width: 100% } .activated .all-access-pass__background { opacity: 1 } .all-access-pass__container { align-items: flex-end; display: flex; height: 100%; justify-content: center; left: 0; margin: 0; overflow: clip; pointer-events: none; position: absolute; top: 0; width: 100%; will-change: transform; z-index: 9995 } .ric-modal-content-wrapper .all-access-pass__container { z-index: 11002 } .all-access-pass__intro-element { border-radius: var(--aap-min-height); background-color: rgb(var(--aap-background-color-solid)); box-sizing: border-box; height: var(--aap-min-height); left: 50%; opacity: 0; position: absolute; top: 0; transform: translateX(-50%) scale(0.01); width: var(--aap-min-height) } html.no-enhanced .all-access-pass__intro-element { display: none } .tp-dfwv { position: fixed !important; z-index: 9999999 } .colornav { --colornav-background: rgb(245, 245, 247); --colornav-border-color: conic-gradient(from 270deg, rgba(0, 0, 0, 0.08) 0deg, rgba(0, 0, 0, 0.48) 64.8deg, rgba(0, 0, 0, 0.48) 115.2deg, rgba(0, 0, 0, 0.08) 180deg, rgba(0, 0, 0, 0) 208.8deg, rgba(0, 0, 0, 0) 331.2deg, rgba(0, 0, 0, 0.08) 360deg); --colornav-border-current: rgb(0, 113, 227); --colornav-label-color: rgb(29, 29, 31); --colornav-swatch-size: 28px; --colornav-item-size: 36px; display: inline-flex; text-align: center; justify-content: center } .colornav-items { display: flex; flex-wrap: wrap; list-style: none; margin: 0 8px; padding-top: 18px } .colornav-item { margin: -1px 4px } .colornav-value { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0 0 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0 } .colornav-link { border: 2px solid rgba(0, 0, 0, 0); color: var(--colornav-label-color); border-radius: 50%; box-sizing: border-box; cursor: pointer; display: inline-flex; margin-bottom: 2.7em; padding: calc(var(--colornav-item-size)/2 - var(--colornav-swatch-size)/2 - 2px); width: var(--colornav-item-size); height: var(--colornav-item-size); position: relative; z-index: 1 } .colornav-link.current, .colornav-value:checked~.colornav-link { color: var(--colornav-label-color); border-color: var(--colornav-border-current); cursor: default } .colornav-link:focus, .colornav-value:focus~.colornav-link { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: var(--sk-focus-offset, 1px) } .colornav-swatch { background: var(--colornav-background) 50%; border-radius: 50%; display: block; width: var(--colornav-swatch-size); height: var(--colornav-swatch-size) } .colornav-swatch:after { content: ""; display: block; position: absolute; height: inherit; width: inherit; background-image: var(--colornav-border-color); mask-image: radial-gradient(circle at 50%, at 50%, transparent calc(var(--colornav-swatch-size)/2 - 1.5px), black calc(var(--colornav-swatch-size)/2 - 0.5px)); mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--colornav-swatch-size)/2 - 1.5px), black calc(var(--colornav-swatch-size)/2 - 0.5px)); mask-size: 100% 100%; mask-clip: initial; border-radius: inherit } .colornav-label, .colornav-label-hidden { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0 0 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0 } .colornav-link.current .colornav-label, .colornav-value:checked~.colornav-link .colornav-label { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; clip: auto; clip-path: none; margin-left: -50px; padding-top: 5px; position: absolute; top: 100%; left: 50%; text-align: center; white-space: nowrap; width: 100px; height: auto; z-index: 1; overflow: visible } .colornav-link.current .colornav-label:lang(ar), .colornav-value:checked~.colornav-link .colornav-label:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .colornav-link.current .colornav-label:lang(ja), .colornav-value:checked~.colornav-link .colornav-label:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .colornav-link.current .colornav-label:lang(ko), .colornav-value:checked~.colornav-link .colornav-label:lang(ko) { letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .colornav-link.current .colornav-label:lang(zh), .colornav-value:checked~.colornav-link .colornav-label:lang(zh) { letter-spacing: 0em } .colornav-link.current .colornav-label:lang(th), .colornav-value:checked~.colornav-link .colornav-label:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .colornav-link.current .colornav-label:lang(zh-CN), .colornav-value:checked~.colornav-link .colornav-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .colornav-link.current .colornav-label:lang(zh-HK), .colornav-value:checked~.colornav-link .colornav-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .colornav-link.current .colornav-label:lang(zh-MO), .colornav-value:checked~.colornav-link .colornav-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .colornav-link.current .colornav-label:lang(zh-TW), .colornav-value:checked~.colornav-link .colornav-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .colornav-reduced { --colornav-swatch-size: 24px; --colornav-item-size: 32px } .colornav-reduced .colornav-items { padding-top: 14px } .colornav-reduced .colornav-link.current .colornav-label, .colornav-reduced .colornav-value:checked~.colornav-link .colornav-label { padding-top: 5px } .colornav-neutral { --colornav-border-current: rgb(29, 29, 31) } .colornav-logo-productred { margin-inline-start: 6px; padding-inline-end: 6px; position: absolute; z-index: 1; inset-inline-start: 100%; height: var(--colornav-swatch-size); display: flex; align-items: center; justify-content: center } .theme-dark .colornav { --colornav-background: rgb(29, 29, 31); --colornav-border-color: conic-gradient(from 90deg, rgba(255, 255, 255, 0.08) 0deg, rgba(255, 255, 255, 0.48) 64.8deg, rgba(255, 255, 255, 0.48) 115.2deg, rgba(255, 255, 255, 0.08) 180deg, rgba(255, 255, 255, 0) 208.8deg, rgba(255, 255, 255, 0) 331.2deg, rgba(255, 255, 255, 0.08) 360deg); --colornav-border-current: rgb(0, 113, 227); --colornav-label-color: rgb(245, 245, 247) } .theme-dark .colornav-neutral { --colornav-border-current: rgb(245, 245, 247) } .colornav-dark.colornav { --colornav-background: rgb(29, 29, 31); --colornav-border-color: conic-gradient(from 90deg, rgba(255, 255, 255, 0.08) 0deg, rgba(255, 255, 255, 0.48) 64.8deg, rgba(255, 255, 255, 0.48) 115.2deg, rgba(255, 255, 255, 0.08) 180deg, rgba(255, 255, 255, 0) 208.8deg, rgba(255, 255, 255, 0) 331.2deg, rgba(255, 255, 255, 0.08) 360deg); --colornav-border-current: rgb(0, 113, 227); --colornav-label-color: rgb(245, 245, 247) } .colornav-dark.colornav-neutral { --colornav-border-current: rgb(245, 245, 247) } .theme-light .colornav.colornav-dark.colornav { --colornav-background: rgb(29, 29, 31); --colornav-border-color: conic-gradient(from 90deg, rgba(255, 255, 255, 0.08) 0deg, rgba(255, 255, 255, 0.48) 64.8deg, rgba(255, 255, 255, 0.48) 115.2deg, rgba(255, 255, 255, 0.08) 180deg, rgba(255, 255, 255, 0) 208.8deg, rgba(255, 255, 255, 0) 331.2deg, rgba(255, 255, 255, 0.08) 360deg); --colornav-border-current: rgb(0, 113, 227); --colornav-label-color: rgb(245, 245, 247) } .theme-light .colornav.colornav-dark.colornav-neutral { --colornav-border-current: rgb(245, 245, 247) } .colornav-light.colornav { --colornav-background: rgb(245, 245, 247); --colornav-border-color: conic-gradient(from 270deg, rgba(0, 0, 0, 0.08) 0deg, rgba(0, 0, 0, 0.48) 64.8deg, rgba(0, 0, 0, 0.48) 115.2deg, rgba(0, 0, 0, 0.08) 180deg, rgba(0, 0, 0, 0) 208.8deg, rgba(0, 0, 0, 0) 331.2deg, rgba(0, 0, 0, 0.08) 360deg); --colornav-border-current: rgb(0, 113, 227); --colornav-label-color: rgb(29, 29, 31) } .colornav-light.colornav-neutral { --colornav-border-current: rgb(29, 29, 31) } .theme-dark .colornav.colornav-light.colornav { --colornav-background: rgb(245, 245, 247); --colornav-border-color: conic-gradient(from 270deg, rgba(0, 0, 0, 0.08) 0deg, rgba(0, 0, 0, 0.48) 64.8deg, rgba(0, 0, 0, 0.48) 115.2deg, rgba(0, 0, 0, 0.08) 180deg, rgba(0, 0, 0, 0) 208.8deg, rgba(0, 0, 0, 0) 331.2deg, rgba(0, 0, 0, 0.08) 360deg); --colornav-border-current: rgb(0, 113, 227); --colornav-label-color: rgb(29, 29, 31) } .theme-dark .colornav.colornav-light.colornav-neutral { --colornav-border-current: rgb(29, 29, 31) } .theme-dark { --aap-color-nav-label-background-color: rgba(0, 0, 0, 0.3); --aap-color-nav-label-color: rgb(210, 210, 215) } .aap-color-nav { --ltr: 1; margin-top: 44px; pointer-events: auto } .aap-color-nav .colornav { --selector-scale: 1; --selector-opacity: 1 } .aap-color-nav .colornav-items { padding: 12px 0 } .aap-color-nav .colornav-item { --color-index: 0; line-height: 1; will-change: transform } .aap-color-nav .colornav-item:has(:checked)::after { border: 2px solid var(--colornav-border-current); border-radius: 50%; content: ""; height: 32px; left: 0; opacity: var(--selector-opacity); pointer-events: none; position: absolute; top: 0; transform: scale(var(--selector-scale)); width: 32px } .aap-color-nav .colornav-link { margin-bottom: 0; overflow: hidden } .all-access-pass .colornav-link .colornav-swatch .aap-color-nav .colornav-label { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px } .aap-color-nav .colornav-value:checked { pointer-events: none } .aap-color-nav .colornav-value:checked~.colornav-link { border-color: rgba(0, 0, 0, 0); pointer-events: none } .aap-color-nav .colornav-value-ui-item:disabled+label { cursor: default } .aap-color-nav-label { background-color: var(--aap-color-nav-label-background-color); border-radius: 5px; bottom: calc(100% + 9px); box-sizing: border-box; color: var(--aap-color-nav-label-color); display: flex; opacity: 1; padding: 4px 6px; pointer-events: auto; position: absolute; left: 50%; line-height: 0; max-width: 87.5vw; text-align: center; transform: translateX(-50%); width: max-content } html.enhanced .aap-color-nav-label { opacity: 0 } html.enhanced .activated .aap-color-nav-label { opacity: 1; transition: opacity 380ms ease-out 600ms } .aap-color-nav-label-item { display: none } .aap-color-nav-label-item.active { display: inline } .aap-color-nav-label span { font-size: 12px; font-weight: 600; line-height: 16px } [data-aap-enabled=false] { visibility: hidden } .theme-dark { --aap-icon-color: rgb(245, 245, 247); --aap-active-fill-color: rgb(245, 245, 247); --aap-inactive-fill-color: #767677; --aap-dotnav-background: rgba(245, 245, 247, 0.8); --aap-dotnav-background-hover: rgba(255, 255, 255, 0.48) } .aap-media-card-gallery { --button-margin: 10px; --progress-bar-active-width: 48px; --animation-duration: var(--autoplay-persist-duration, 6.25s); --animation-timing-function: linear; --aap-background-transition-duration: 250ms; --ltr: 1; --dotnav-opacity-delay: 740ms; --dotnav-opacity-duration: 100ms; --playpause-opacity-delay: 940ms; --playpause-opacity-duration: 100ms; --playpause-scale-delay: 940ms; --playpause-scale-duration: 200ms; z-index: 1 } @media(max-width:734px) { .aap-media-card-gallery { --progress-bar-active-width: 32px; max-width: calc(100vw - 40px) } } .aap-media-card-gallery.all-access-pass::before { width: var(--aap-min-height) } .aap-media-card-gallery__timed-dotnav { --progress-intro: 1 } html.enhanced .aap-media-card-gallery__dotnav-item { opacity: 0; transform: scale(0.5) } html.enhanced .activated .aap-media-card-gallery__dotnav-item { opacity: 1; transform: scale(1); transition: opacity var(--dotnav-opacity-duration) ease-in var(--dotnav-opacity-delay) } .aap-media-card-gallery__button { --animation-offset: calc(var(--item-index) + 1) } html.enhanced .aap-media-card-gallery__button { opacity: 0; transform: scale(0.5) } html.enhanced .activated .aap-media-card-gallery__button { opacity: 1; transform: scale(1); transition: background-color linear 100ms, opacity var(--playpause-opacity-duration) ease-in var(--playpause-opacity-delay), transform var(--playpause-scale-duration) ease-out var(--playpause-scale-delay) } .aap-media-card-gallery .all-access-pass__element { align-items: center; box-sizing: border-box; display: flex; justify-content: space-between; min-height: var(--aap-min-height); pointer-events: auto; position: relative } .aap-media-card-gallery .all-access-pass__element .dotnav { display: flex; justify-content: center; align-items: center; line-height: 0 } .aap-media-card-gallery .all-access-pass__element .dotnav .dotnav-items .dotnav-item { --item-index: 0; width: auto } .aap-media-card-gallery .all-access-pass__element .dotnav .dotnav-items .dotnav-item .dotnav-link { border-radius: 10px; background-color: var(--aap-dotnav-background); position: relative; cursor: pointer; display: flex; justify-content: center; align-items: center } .aap-media-card-gallery .all-access-pass__element .dotnav .dotnav-items .dotnav-item .dotnav-link::before { content: ""; position: absolute; padding: var(--sk-dotnav-size); width: 100%; height: 100% } .aap-media-card-gallery .all-access-pass__element .dotnav .dotnav-items .dotnav-item .dotnav-link.current { overflow: hidden; cursor: default; background-color: var(--aap-active-fill-color) } .aap-media-card-gallery .all-access-pass__element .dotnav .dotnav-items .dotnav-item .dotnav-link:hover:not(.current) { background-color: var(--aap-dotnav-background-hover) } .aap-media-card-gallery .all-access-pass__element .dotnav { padding: 0 16px } .aap-media-card-gallery .all-access-pass__element .dotnav .dotnav-items { --dotnav-count: 0; --dot-width-total: calc((var(--dotnav-count) - 1)*var(--sk-dotnav-size)*3); --progress-width-total: calc(var(--progress-bar-active-width)*var(--progress-intro) + var(--sk-dotnav-size)*2); min-width: calc(var(--dot-width-total) + var(--progress-width-total)) } .aap-media-card-gallery .all-access-pass__element .dotnav .dotnav-items .dotnav-item .dotnav-link { --item-progress: calc(var(--item-index) - var(--autoplay-progress)); --abs-item-progress: max(var(--item-progress), -1 * var(--item-progress)); --item-expand-amount: min((1 - var(--abs-item-progress)), 1); --progress-bar-delta-width: calc(var(--progress-bar-active-width) - var(--sk-dotnav-size)); max-width: calc(var(--progress-bar-active-width)); min-width: calc(var(--progress-bar-delta-width)*var(--item-expand-amount)*var(--progress-intro) + var(--sk-dotnav-size)); transition: background-color linear var(--aap-background-transition-duration) } .aap-media-card-gallery .all-access-pass__element .dotnav .dotnav-items .dotnav-item .dotnav-link.current { background-color: var(--aap-dotnav-background) } .aap-media-card-gallery .all-access-pass__element .dotnav .dotnav-items .dotnav-item .dotnav-link.current::after { content: ""; width: 0; height: 100%; min-width: 15%; margin-inline-start: -15%; border-radius: 10px; background-color: var(--aap-active-fill-color); position: absolute; top: 0; inset-inline-start: 0; animation-name: aap-animate-progress; animation-duration: var(--animation-duration); animation-timing-function: var(--animation-timing-function); animation-play-state: paused; animation-fill-mode: forwards; transition: background-color linear var(--aap-background-transition-duration) } @keyframes aap-animate-progress { from { width: 0 } to { width: 115% } } .aap-media-card-gallery .play-pause-button-wrapper { order: 2; height: var(--aap-min-height); width: var(--aap-min-height); margin-inline-start: var(--aap-bubble-gap) } .aap-media-card-gallery .play-pause-button-wrapper .play-pause-button { height: 100%; width: 100%; pointer-events: all; display: flex; justify-content: center; align-items: center; border-radius: 32px } .aap-media-card-gallery .play-pause-button-wrapper .play-pause-button .svg-icon { height: 100%; width: 100%; display: none; fill: var(--aap-icon-color); transition: fill linear var(--aap-background-transition-duration) } .aap-media-card-gallery .play-pause-button-wrapper .play-pause-button:hover { background-color: var(--aap-button-hover) } .aap-media-card-gallery .play-pause-button-wrapper .play-pause-button:active { background-color: var(--aap-button-active) } .playing .tablist-wrapper .dotnav .dotnav-items .dotnav-item .dotnav-link.current::after { animation-play-state: running } .playing .play-pause-button .svg-icon.pause-icon { display: block } .paused .tablist-wrapper .dotnav .dotnav-items .dotnav-item .dotnav-link.current::after { animation-play-state: paused } .paused .play-pause-button .svg-icon.play-icon { display: block } .ended .tablist-wrapper .dotnav .dotnav-items .dotnav-item .dotnav-link.current::after { animation-play-state: paused } .ended .play-pause-button .svg-icon.replay-icon { display: block } .button-dark { --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.36); --sk-button-background: rgb(0, 113, 227); --sk-button-background-hover: #0076DF; --sk-button-background-active: #006EDB } .button-dark.button-neutral { --sk-button-background: rgb(245, 245, 247); --sk-button-background-hover: rgb(255, 255, 255); --sk-button-background-active: #EDEDF2; --sk-button-color: rgb(0, 0, 0) } .button-dark.button-secondary { --sk-button-background: transparent; --sk-button-background-hover: #0076DF; --sk-button-background-active: #006EDB; --sk-button-color: rgb(41, 151, 255); --sk-button-color-hover: rgb(255, 255, 255); --sk-button-border-color: rgb(41, 151, 255) } .button-dark.button-secondary-neutral { --sk-button-background: transparent; --sk-button-background-hover: rgb(255, 255, 255); --sk-button-background-active: #EDEDF2; --sk-button-color: rgb(245, 245, 247); --sk-button-color-hover: rgb(0, 0, 0); --sk-button-border-color: rgb(245, 245, 247) } .theme-light .button.button-dark { --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.36); --sk-button-background: rgb(0, 113, 227); --sk-button-background-hover: #0076DF; --sk-button-background-active: #006EDB } .theme-light .button.button-dark.button-neutral { --sk-button-background: rgb(245, 245, 247); --sk-button-background-hover: rgb(255, 255, 255); --sk-button-background-active: #EDEDF2; --sk-button-color: rgb(0, 0, 0) } .theme-light .button.button-dark.button-secondary { --sk-button-background: transparent; --sk-button-background-hover: #0076DF; --sk-button-background-active: #006EDB; --sk-button-color: rgb(41, 151, 255); --sk-button-color-hover: rgb(255, 255, 255); --sk-button-border-color: rgb(41, 151, 255) } .theme-light .button.button-dark.button-secondary-neutral { --sk-button-background: transparent; --sk-button-background-hover: rgb(255, 255, 255); --sk-button-background-active: #EDEDF2; --sk-button-color: rgb(245, 245, 247); --sk-button-color-hover: rgb(0, 0, 0); --sk-button-border-color: rgb(245, 245, 247) } .button-light { --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.42); --sk-button-background: rgb(0, 113, 227); --sk-button-background-hover: #0076DF; --sk-button-background-active: #006EDB } .button-light.button-neutral { --sk-button-background: rgb(29, 29, 31); --sk-button-background-hover: #272729; --sk-button-background-active: #18181A; --sk-button-color: rgb(255, 255, 255) } .button-light.button-secondary { --sk-button-background: transparent; --sk-button-background-hover: #0076DF; --sk-button-background-active: #006EDB; --sk-button-color: rgb(0, 102, 204); --sk-button-color-hover: rgb(255, 255, 255); --sk-button-border-color: rgb(0, 102, 204) } .button-light.button-secondary-neutral { --sk-button-background: transparent; --sk-button-background-hover: #272729; --sk-button-background-active: #18181A; --sk-button-color: rgb(29, 29, 31); --sk-button-color-hover: rgb(255, 255, 255); --sk-button-border-color: rgb(29, 29, 31) } .theme-dark .button.button-light { --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.42); --sk-button-background: rgb(0, 113, 227); --sk-button-background-hover: #0076DF; --sk-button-background-active: #006EDB } .theme-dark .button.button-light.button-neutral { --sk-button-background: rgb(29, 29, 31); --sk-button-background-hover: #272729; --sk-button-background-active: #18181A; --sk-button-color: rgb(255, 255, 255) } .theme-dark .button.button-light.button-secondary { --sk-button-background: transparent; --sk-button-background-hover: #0076DF; --sk-button-background-active: #006EDB; --sk-button-color: rgb(0, 102, 204); --sk-button-color-hover: rgb(255, 255, 255); --sk-button-border-color: rgb(0, 102, 204) } .theme-dark .button.button-light.button-secondary-neutral { --sk-button-background: transparent; --sk-button-background-hover: #272729; --sk-button-background-active: #18181A; --sk-button-color: rgb(29, 29, 31); --sk-button-color-hover: rgb(255, 255, 255); --sk-button-border-color: rgb(29, 29, 31) } .action-handler:not(.button).icon-wrapper:hover .icon-copy, button.action-handler:not(.icon-wrapper):not(.button) { text-decoration: underline } button.action-handler:not(.button) { color: var(--sk-body-link-color) } html.no-js button.action-handler[data-modal-open] { display: none } .aap-text-icon-control { --button-margin: 10px; color: var(--aap-text-color); border-radius: 32px; justify-content: space-between; min-height: var(--aap-min-height); pointer-events: auto; position: relative; text-decoration: none; width: 100% } .aap-text-icon-control, .aap-text-icon-control .icon { align-items: center; box-sizing: border-box; display: flex } .aap-text-icon-control .icon { background-color: var(--aap-accent-color); border-radius: 50px; height: calc(var(--aap-min-height) - var(--button-margin)*2); justify-content: center; margin-inline-end: var(--button-margin); padding: 9px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: calc(var(--aap-min-height) - var(--button-margin)*2); will-change: transform } html.enhanced .aap-text-icon-control .icon { opacity: 0 } html.enhanced .activated .aap-text-icon-control .icon { opacity: 1 } .aap-text-icon-control .icon svg { height: 100%; width: 36px; right: 0; opacity: .8; position: absolute; top: 50%; transform: translateY(-50%); transition: opacity 200ms ease; fill: #fff; will-change: opacity } .aap-text-icon-control .icon-copy { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; --offset: 16px; color: var(--aap-text-color); display: inline-block; margin-inline-start: 24px; margin-inline-end: calc(var(--aap-min-height) + var(--offset) - var(--button-margin)); max-width: 30em; padding: 15px 0 16px; text-align: left; will-change: opacity } .aap-text-icon-control .icon-copy:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(ko), .aap-text-icon-control .icon-copy:lang(th), .aap-text-icon-control .icon-copy:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .aap-text-icon-control .icon-copy:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .aap-text-icon-control .icon-copy { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(th), .aap-text-icon-control .icon-copy:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .aap-text-icon-control .icon-copy:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .aap-text-icon-control .icon-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .aap-text-icon-control .icon-copy { max-width: calc(100vw - 126px); padding: 9px 0 11px } } html.enhanced .aap-text-icon-control .icon-copy { opacity: 0; transform: scale(0.5) } html.enhanced .activated .aap-text-icon-control .icon-copy { opacity: 1; transform: scale(1); transition: opacity 380ms ease-in-out 600ms } .aap-text-icon-control:hover { text-decoration: none } .aap-text-icon-control:hover .icon svg { opacity: 1 } .aap-text-icon-control.action-handler:not(.button).icon-wrapper:hover .icon-copy, .aap-text-icon-control.action-handler:not(.icon-wrapper, .button), .aap-text-icon-control:hover span.icon-copy { text-decoration: none } .badge-dark { --sk-badge-background: rgba(245, 99, 0, 0.2); --sk-badge-text-color: rgb(255, 121, 27) } .badge-dark.badge-no-scrim { --sk-badge-background: transparent; --sk-badge-text-color: rgb(255, 121, 27) } .badge-dark.badge-solid-scrim { --sk-badge-background: rgb(71, 30, 0) } .badge-dark.badge-neutral { --sk-badge-background: rgba(245, 245, 247, 0.14); --sk-badge-text-color: rgb(210, 210, 215) } .badge-dark.badge-neutral.badge-solid-scrim { --sk-badge-background: rgb(51, 51, 54) } .theme-light .badge.badge-dark { --sk-badge-background: rgba(245, 99, 0, 0.2); --sk-badge-text-color: rgb(255, 121, 27) } .theme-light .badge.badge-dark.badge-no-scrim { --sk-badge-background: transparent; --sk-badge-text-color: rgb(255, 121, 27) } .theme-light .badge.badge-dark.badge-solid-scrim { --sk-badge-background: rgb(71, 30, 0) } .theme-light .badge.badge-dark.badge-neutral { --sk-badge-background: rgba(245, 245, 247, 0.14); --sk-badge-text-color: rgb(210, 210, 215) } .theme-light .badge.badge-dark.badge-neutral.badge-solid-scrim { --sk-badge-background: rgb(51, 51, 54) } .badge-light { --sk-badge-background: rgba(245, 99, 0, 0.1); --sk-badge-text-color: rgb(182, 68, 0) } .badge-light.badge-no-scrim { --sk-badge-background: transparent; --sk-badge-text-color: rgb(182, 68, 0) } .badge-light.badge-solid-scrim { --sk-badge-background: rgb(250, 233, 225) } .badge-light.badge-neutral { --sk-badge-background: rgba(29, 29, 31, 0.07); --sk-badge-text-color: rgb(66, 66, 69) } .badge-light.badge-neutral.badge-solid-scrim { --sk-badge-background: rgb(232, 232, 237) } .theme-dark .badge.badge-light { --sk-badge-background: rgba(245, 99, 0, 0.1); --sk-badge-text-color: rgb(182, 68, 0) } .theme-dark .badge.badge-light.badge-no-scrim { --sk-badge-background: transparent; --sk-badge-text-color: rgb(182, 68, 0) } .theme-dark .badge.badge-light.badge-solid-scrim { --sk-badge-background: rgb(250, 233, 225) } .theme-dark .badge.badge-light.badge-neutral { --sk-badge-background: rgba(29, 29, 31, 0.07); --sk-badge-text-color: rgb(66, 66, 69) } .theme-dark .badge.badge-light.badge-neutral.badge-solid-scrim { --sk-badge-background: rgb(232, 232, 237) } .will-change { will-change: transform, opacity } .card { width: 100%; --sk-tile-background: rgb(245, 245, 247); --sk-tile-border-radius: 28px } html.safari .card.tile-rounded { isolation: isolate; clip-path: inset(1px round var(--sk-tile-border-radius, 28px)) } .card-hover { transition: transform .3s cubic-bezier(0, 0, 0.5, 1); transform: scale(1) } html.no-touch .card-hover:hover { transform: scale(var(--card-element-scale)) } .card-hover .footnote { --target-size: 44px; --rtl: -1 } .card-hover .footnote a::after { content: ""; position: absolute; top: 50%; inset-inline-start: 50%; transform: translateY(-50%) translateX(calc(50%*var(--rtl))); width: max(100%, var(--target-size)); height: max(100%, var(--target-size)) } .card .card-control { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; border-radius: var(--sk-tile-border-radius) } .card .card-control:focus { outline-offset: calc(var(--sk-focus-offset-container)*-1) } html.no-js .card .card-control[data-modal-open] { display: none } .card .card-control .tile-button-wrapper { right: 16px; bottom: 16px } .card .card-control .tile-button { --sk-tile-button-icon-color: rgb(255, 255, 255); --sk-tile-button-icon-color-hover: rgb(255, 255, 255); --sk-tile-button-background: rgb(29, 29, 31); --sk-tile-button-background-hover: #272729; --sk-tile-button-background-active: #18181A } .card .card-control .tile-button .tile-icon { height: 36px; width: 36px } .theme-dark .card .card-control .tile-button { --sk-tile-button-icon-color: rgb(0, 0, 0); --sk-tile-button-icon-color-hover: rgb(0, 0, 0); --sk-tile-button-background: rgb(245, 245, 247); --sk-tile-button-background-hover: rgb(255, 255, 255); --sk-tile-button-background-active: #EDEDF2 } .card.theme-dark, .theme-dark:not(.theme-light)>.card { --sk-tile-background: rgb(29, 29, 31); color: rgb(245, 245, 247) } .background-alt .card { --sk-tile-background: rgb(255, 255, 255) } .background-alt.theme-dark:not(.theme-light)>.card, .theme-dark .background-alt:not(.theme-light)>.card { --sk-tile-background: rgb(0, 0, 0) } .theme-dark:not(.theme-light)>.card { --sk-tile-background: rgb(29, 29, 31) } .theme-dark.background-alt:not(.theme-light)>.card, .theme-dark .background-alt:not(.theme-light)>.card { --sk-tile-background: rgb(0, 0, 0) } .banner-card { --ctas-margin-top: 18px } @media(max-width:734px) { .banner-card { --ctas-margin-top: 14px } } .banner-card:has(.banner-card-cta.button) { --ctas-margin-top: 32px } .banner-card.banner-card-ctas-stacked { --ctas-stacked-gap: 17px } @media(max-width:734px) { .banner-card.banner-card-ctas-stacked { --ctas-stacked-gap: 14px } } @media(max-width:734px) { .banner-card.banner-card-ctas-stacked:has(.banner-card-ctas>.banner-card-cta.button) { --ctas-stacked-gap: 15px } } .banner-card .banner-card-active-area { display: none } @media(min-width:735px) { .banner-card .banner-card-cta.button { --sk-button-padding-horizontal: 22px; --sk-button-padding-vertical: 12px; --sk-button-min-width-basis: 70px; --sk-button-margin-horizontal: 18px; --sk-button-margin-vertical: 18px; font-size: 17px; line-height: 1.1764805882; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .banner-card .banner-card-cta.button:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .banner-card .banner-card-cta.button:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .banner-card .banner-card-cta.button:lang(ko) { letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .banner-card .banner-card-cta.button:lang(zh) { letter-spacing: 0em } .banner-card .banner-card-cta.button:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .banner-card .banner-card-cta.button:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .banner-card .banner-card-cta.button:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .banner-card .banner-card-cta.button:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .banner-card .banner-card-cta.button:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(min-width:1069px) { .banner-card:only-of-type.banner-card-text-alignment-start.banner-card-ctas-stacked .banner-card-ctas { justify-content: start } } .banner-card.has-ctas .banner-card-active-area { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 1 } .banner-card.has-ctas .banner-card-row { pointer-events: none } .banner-card.has-ctas .banner-card-ctas>* { pointer-events: all } .banner-card-ctas { display: inline-flex; align-items: center; grid-gap: 33px; gap: 33px; margin-top: var(--ctas-margin-top) } .banner-card-ctas-primary-neutral .banner-card-cta:not(.button), .banner-card-ctas-secondary-neutral .banner-card-cta:not(.button) { color: var(--copy-color) } @media(max-width:734px) { .banner-card-ctas-inline .banner-card-ctas { grid-column-gap: 27px; column-gap: 27px } } .banner-card-ctas-stacked .banner-card-ctas { display: grid; grid-auto-flow: row; justify-content: center; grid-row-gap: var(--ctas-stacked-gap); row-gap: var(--ctas-stacked-gap) } @media(min-width:1069px) { .banner-card:only-of-type.banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .banner-card-asset-column { justify-content: start } .banner-card:only-of-type.banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .banner-card-asset-column:has([class*=" asset-position-medium-center-"]) { justify-content: center } .banner-card:only-of-type.banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .banner-card-asset-column:has([class*=" asset-position-medium-end-"]) { justify-content: end } } @media(min-width:1069px) { .banner-card:only-of-type.banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .banner-card-asset-column { justify-content: start } .banner-card:only-of-type.banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .banner-card-asset-column:has([class*=" asset-position-medium-center-"]) { justify-content: center } .banner-card:only-of-type.banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .banner-card-asset-column:has([class*=" asset-position-medium-end-"]) { justify-content: end } } @media(max-width:1068px) { .banner-card:only-of-type.banner-card-asset-type-inline-medium-down .banner-card-asset-column { justify-content: start } .banner-card:only-of-type.banner-card-asset-type-inline-medium-down .banner-card-asset-column:has([class*=" asset-position-medium-center-"]) { justify-content: center } .banner-card:only-of-type.banner-card-asset-type-inline-medium-down .banner-card-asset-column:has([class*=" asset-position-medium-end-"]) { justify-content: end } } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .banner-card-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: hidden; align-content: end; justify-content: center; place-content: end center } @media(min-width:1069px) { .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .banner-card-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: hidden; align-content: end; justify-content: center; place-content: end center } } @media(max-width:1068px) { .banner-card.banner-card-asset-type-background-medium-down .banner-card-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: hidden; align-content: end; justify-content: center; place-content: end center } } @media(min-width:1069px) { .banner-card:only-of-type.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-large-center-top.banner-card-image { align-content: start; justify-content: center; place-content: start center } .banner-card:only-of-type.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-large-center-bottom.banner-card-image { align-content: end; justify-content: center; place-content: end center } .banner-card:only-of-type.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-large-center-center.banner-card-image { align-content: center; justify-content: center; place-content: center } .banner-card:only-of-type.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-large-start-top.banner-card-image { align-content: start; justify-content: start; place-content: start } .banner-card:only-of-type.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-large-start-bottom.banner-card-image { align-content: end; justify-content: start; place-content: end start } .banner-card:only-of-type.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-large-start-center.banner-card-image { align-content: center; justify-content: start; place-content: center start } .banner-card:only-of-type.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-large-end-top.banner-card-image { align-content: start; justify-content: end; place-content: start end } .banner-card:only-of-type.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-large-end-bottom.banner-card-image { align-content: end; justify-content: end; place-content: end } .banner-card:only-of-type.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-large-end-center.banner-card-image { align-content: center; justify-content: end; place-content: center end } .banner-card:only-of-type.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .banner-card-image { align-content: center; justify-content: center; place-content: center } } @media(min-width:1069px) { .banner-card:only-of-type.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-large-center-top.banner-card-image { align-content: start; justify-content: center; place-content: start center } .banner-card:only-of-type.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-large-center-bottom.banner-card-image { align-content: end; justify-content: center; place-content: end center } .banner-card:only-of-type.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-large-center-center.banner-card-image { align-content: center; justify-content: center; place-content: center } .banner-card:only-of-type.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-large-start-top.banner-card-image { align-content: start; justify-content: start; place-content: start } .banner-card:only-of-type.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-large-start-bottom.banner-card-image { align-content: end; justify-content: start; place-content: end start } .banner-card:only-of-type.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-large-start-center.banner-card-image { align-content: center; justify-content: start; place-content: center start } .banner-card:only-of-type.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-large-end-top.banner-card-image { align-content: start; justify-content: end; place-content: start end } .banner-card:only-of-type.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-large-end-bottom.banner-card-image { align-content: end; justify-content: end; place-content: end } .banner-card:only-of-type.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-large-end-center.banner-card-image { align-content: center; justify-content: end; place-content: center end } .banner-card:only-of-type.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .banner-card-image { align-content: center; justify-content: center; place-content: center } } @media(max-width:1068px) { .banner-card:only-of-type.banner-card-asset-type-background-medium-down .background-asset-position-large-center-top.banner-card-image { align-content: start; justify-content: center; place-content: start center } .banner-card:only-of-type.banner-card-asset-type-background-medium-down .background-asset-position-large-center-bottom.banner-card-image { align-content: end; justify-content: center; place-content: end center } .banner-card:only-of-type.banner-card-asset-type-background-medium-down .background-asset-position-large-center-center.banner-card-image { align-content: center; justify-content: center; place-content: center } .banner-card:only-of-type.banner-card-asset-type-background-medium-down .background-asset-position-large-start-top.banner-card-image { align-content: start; justify-content: start; place-content: start } .banner-card:only-of-type.banner-card-asset-type-background-medium-down .background-asset-position-large-start-bottom.banner-card-image { align-content: end; justify-content: start; place-content: end start } .banner-card:only-of-type.banner-card-asset-type-background-medium-down .background-asset-position-large-start-center.banner-card-image { align-content: center; justify-content: start; place-content: center start } .banner-card:only-of-type.banner-card-asset-type-background-medium-down .background-asset-position-large-end-top.banner-card-image { align-content: start; justify-content: end; place-content: start end } .banner-card:only-of-type.banner-card-asset-type-background-medium-down .background-asset-position-large-end-bottom.banner-card-image { align-content: end; justify-content: end; place-content: end } .banner-card:only-of-type.banner-card-asset-type-background-medium-down .background-asset-position-large-end-center.banner-card-image { align-content: center; justify-content: end; place-content: center end } .banner-card:only-of-type.banner-card-asset-type-background-medium-down .banner-card-image { align-content: center; justify-content: center; place-content: center } } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-center-top.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-center-top.banner-card-image { align-content: start; justify-content: center; place-content: start center } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-center-bottom.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-center-bottom.banner-card-image { align-content: end; justify-content: center; place-content: end center } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-center-center.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-center-center.banner-card-image { align-content: center; justify-content: center; place-content: center } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-start-top.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-start-top.banner-card-image { align-content: start; justify-content: start; place-content: start } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-start-bottom.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-start-bottom.banner-card-image { align-content: end; justify-content: start; place-content: end start } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-start-center.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-start-center.banner-card-image { align-content: center; justify-content: start; place-content: center start } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-end-top.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-end-top.banner-card-image { align-content: start; justify-content: end; place-content: start end } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-end-bottom.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-end-bottom.banner-card-image { align-content: end; justify-content: end; place-content: end } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-end-center.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).background-asset-position-large-end-center.banner-card-image { align-content: center; justify-content: end; place-content: center end } @media(min-width:1069px) { .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-center-top.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-center-top.banner-card-image { align-content: start; justify-content: center; place-content: start center } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-center-bottom.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-center-bottom.banner-card-image { align-content: end; justify-content: center; place-content: end center } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-center-center.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-center-center.banner-card-image { align-content: center; justify-content: center; place-content: center } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-start-top.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-start-top.banner-card-image { align-content: start; justify-content: start; place-content: start } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-start-bottom.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-start-bottom.banner-card-image { align-content: end; justify-content: start; place-content: end start } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-start-center.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-start-center.banner-card-image { align-content: center; justify-content: start; place-content: center start } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-end-top.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-end-top.banner-card-image { align-content: start; justify-content: end; place-content: start end } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-end-bottom.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-end-bottom.banner-card-image { align-content: end; justify-content: end; place-content: end } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-end-center.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.background-asset-position-large-end-center.banner-card-image { align-content: center; justify-content: end; place-content: center end } } @media(max-width:1068px) { .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background-medium-down.background-asset-position-large-center-top.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background-medium-down.background-asset-position-large-center-top.banner-card-image { align-content: start; justify-content: center; place-content: start center } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background-medium-down.background-asset-position-large-center-bottom.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background-medium-down.background-asset-position-large-center-bottom.banner-card-image { align-content: end; justify-content: center; place-content: end center } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background-medium-down.background-asset-position-large-center-center.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background-medium-down.background-asset-position-large-center-center.banner-card-image { align-content: center; justify-content: center; place-content: center } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background-medium-down.background-asset-position-large-start-top.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background-medium-down.background-asset-position-large-start-top.banner-card-image { align-content: start; justify-content: start; place-content: start } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background-medium-down.background-asset-position-large-start-bottom.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background-medium-down.background-asset-position-large-start-bottom.banner-card-image { align-content: end; justify-content: start; place-content: end start } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background-medium-down.background-asset-position-large-start-center.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background-medium-down.background-asset-position-large-start-center.banner-card-image { align-content: center; justify-content: start; place-content: center start } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background-medium-down.background-asset-position-large-end-top.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background-medium-down.background-asset-position-large-end-top.banner-card-image { align-content: start; justify-content: end; place-content: start end } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background-medium-down.background-asset-position-large-end-bottom.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background-medium-down.background-asset-position-large-end-bottom.banner-card-image { align-content: end; justify-content: end; place-content: end } .banner-card:first-child:nth-last-child(2).banner-card-asset-type-background-medium-down.background-asset-position-large-end-center.banner-card-image, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-asset-type-background-medium-down.background-asset-position-large-end-center.banner-card-image { align-content: center; justify-content: end; place-content: center end } } @media(max-width:1068px) { .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-medium-center-top.banner-card-image { align-content: start; justify-content: center; place-content: start center } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-medium-center-bottom.banner-card-image { align-content: end; justify-content: center; place-content: end center } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-medium-center-center.banner-card-image { align-content: center; justify-content: center; place-content: center } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-medium-start-top.banner-card-image { align-content: start; justify-content: start; place-content: start } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-medium-start-bottom.banner-card-image { align-content: end; justify-content: start; place-content: end start } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-medium-start-center.banner-card-image { align-content: center; justify-content: start; place-content: center start } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-medium-end-top.banner-card-image { align-content: start; justify-content: end; place-content: start end } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-medium-end-bottom.banner-card-image { align-content: end; justify-content: end; place-content: end } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-medium-end-center.banner-card-image { align-content: center; justify-content: end; place-content: center end } } @media(max-width:734px) { .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-small-center-top.banner-card-image { align-content: start; justify-content: center; place-content: start center } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-small-center-bottom.banner-card-image { align-content: end; justify-content: center; place-content: end center } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-small-center-center.banner-card-image { align-content: center; justify-content: center; place-content: center } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-small-start-top.banner-card-image { align-content: start; justify-content: start; place-content: start } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-small-start-bottom.banner-card-image { align-content: end; justify-content: start; place-content: end start } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-small-start-center.banner-card-image { align-content: center; justify-content: start; place-content: center start } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-small-end-top.banner-card-image { align-content: start; justify-content: end; place-content: start end } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-small-end-bottom.banner-card-image { align-content: end; justify-content: end; place-content: end } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .background-asset-position-small-end-center.banner-card-image { align-content: center; justify-content: end; place-content: center end } } @media(min-width:1069px)and (max-width:1068px) { .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-medium-center-top.banner-card-image { align-content: start; justify-content: center; place-content: start center } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-medium-center-bottom.banner-card-image { align-content: end; justify-content: center; place-content: end center } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-medium-center-center.banner-card-image { align-content: center; justify-content: center; place-content: center } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-medium-start-top.banner-card-image { align-content: start; justify-content: start; place-content: start } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-medium-start-bottom.banner-card-image { align-content: end; justify-content: start; place-content: end start } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-medium-start-center.banner-card-image { align-content: center; justify-content: start; place-content: center start } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-medium-end-top.banner-card-image { align-content: start; justify-content: end; place-content: start end } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-medium-end-bottom.banner-card-image { align-content: end; justify-content: end; place-content: end } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-medium-end-center.banner-card-image { align-content: center; justify-content: end; place-content: center end } } @media(min-width:1069px)and (max-width:734px) { .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-small-center-top.banner-card-image { align-content: start; justify-content: center; place-content: start center } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-small-center-bottom.banner-card-image { align-content: end; justify-content: center; place-content: end center } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-small-center-center.banner-card-image { align-content: center; justify-content: center; place-content: center } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-small-start-top.banner-card-image { align-content: start; justify-content: start; place-content: start } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-small-start-bottom.banner-card-image { align-content: end; justify-content: start; place-content: end start } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-small-start-center.banner-card-image { align-content: center; justify-content: start; place-content: center start } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-small-end-top.banner-card-image { align-content: start; justify-content: end; place-content: start end } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-small-end-bottom.banner-card-image { align-content: end; justify-content: end; place-content: end } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .background-asset-position-small-end-center.banner-card-image { align-content: center; justify-content: end; place-content: center end } } @media(max-width:1068px)and (max-width:1068px) { .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-medium-center-top.banner-card-image { align-content: start; justify-content: center; place-content: start center } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-medium-center-bottom.banner-card-image { align-content: end; justify-content: center; place-content: end center } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-medium-center-center.banner-card-image { align-content: center; justify-content: center; place-content: center } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-medium-start-top.banner-card-image { align-content: start; justify-content: start; place-content: start } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-medium-start-bottom.banner-card-image { align-content: end; justify-content: start; place-content: end start } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-medium-start-center.banner-card-image { align-content: center; justify-content: start; place-content: center start } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-medium-end-top.banner-card-image { align-content: start; justify-content: end; place-content: start end } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-medium-end-bottom.banner-card-image { align-content: end; justify-content: end; place-content: end } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-medium-end-center.banner-card-image { align-content: center; justify-content: end; place-content: center end } } @media(max-width:1068px)and (max-width:734px) { .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-small-center-top.banner-card-image { align-content: start; justify-content: center; place-content: start center } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-small-center-bottom.banner-card-image { align-content: end; justify-content: center; place-content: end center } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-small-center-center.banner-card-image { align-content: center; justify-content: center; place-content: center } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-small-start-top.banner-card-image { align-content: start; justify-content: start; place-content: start } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-small-start-bottom.banner-card-image { align-content: end; justify-content: start; place-content: end start } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-small-start-center.banner-card-image { align-content: center; justify-content: start; place-content: center start } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-small-end-top.banner-card-image { align-content: start; justify-content: end; place-content: start end } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-small-end-bottom.banner-card-image { align-content: end; justify-content: end; place-content: end } .banner-card.banner-card-asset-type-background-medium-down .background-asset-position-small-end-center.banner-card-image { align-content: center; justify-content: end; place-content: center end } } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .banner-card-image { margin: auto } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-large-center-top { margin: 0 auto auto } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-large-center-bottom { margin: auto auto 0 } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-large-center-center { margin: auto } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-large-start-top { margin: 0 auto auto 0 } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-large-start-bottom { margin: auto auto 0 0 } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-large-start-center { margin: auto auto auto 0 } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-large-end-top { margin: 0 0 auto auto } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-large-end-bottom { margin: auto 0 0 auto } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-large-end-center { margin: auto 0 auto auto } @media(max-width:1068px) { .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-medium-center-top { margin: 0 auto auto } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-medium-center-bottom { margin: auto auto 0 } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-medium-center-center { margin: auto } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-medium-start-top { margin: 0 auto auto 0 } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-medium-start-bottom { margin: auto auto 0 0 } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-medium-start-center { margin: auto auto auto 0 } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-medium-end-top { margin: 0 0 auto auto } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-medium-end-bottom { margin: auto 0 0 auto } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-medium-end-center { margin: auto 0 auto auto } } @media(max-width:734px) { .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-small-center-top { margin: 0 auto auto } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-small-center-bottom { margin: auto auto 0 } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-small-center-center { margin: auto } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-small-start-top { margin: 0 auto auto 0 } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-small-start-bottom { margin: auto auto 0 0 } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-small-start-center { margin: auto auto auto 0 } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-small-end-top { margin: 0 0 auto auto } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-small-end-bottom { margin: auto 0 0 auto } .banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .asset-position-small-end-center { margin: auto 0 auto auto } } @media(min-width:1069px) { .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .banner-card-image { margin: auto } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-large-center-top { margin: 0 auto auto } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-large-center-bottom { margin: auto auto 0 } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-large-center-center { margin: auto } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-large-start-top { margin: 0 auto auto 0 } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-large-start-bottom { margin: auto auto 0 0 } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-large-start-center { margin: auto auto auto 0 } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-large-end-top { margin: 0 0 auto auto } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-large-end-bottom { margin: auto 0 0 auto } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-large-end-center { margin: auto 0 auto auto } } @media(min-width:1069px)and (max-width:1068px) { .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-medium-center-top { margin: 0 auto auto } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-medium-center-bottom { margin: auto auto 0 } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-medium-center-center { margin: auto } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-medium-start-top { margin: 0 auto auto 0 } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-medium-start-bottom { margin: auto auto 0 0 } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-medium-start-center { margin: auto auto auto 0 } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-medium-end-top { margin: 0 0 auto auto } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-medium-end-bottom { margin: auto 0 0 auto } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-medium-end-center { margin: auto 0 auto auto } } @media(min-width:1069px)and (max-width:734px) { .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-small-center-top { margin: 0 auto auto } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-small-center-bottom { margin: auto auto 0 } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-small-center-center { margin: auto } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-small-start-top { margin: 0 auto auto 0 } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-small-start-bottom { margin: auto auto 0 0 } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-small-start-center { margin: auto auto auto 0 } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-small-end-top { margin: 0 0 auto auto } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-small-end-bottom { margin: auto 0 0 auto } .banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .asset-position-small-end-center { margin: auto 0 auto auto } } @media(max-width:1068px) { .banner-card-asset-type-inline-medium-down .banner-card-image { margin: auto } .banner-card-asset-type-inline-medium-down .asset-position-large-center-top { margin: 0 auto auto } .banner-card-asset-type-inline-medium-down .asset-position-large-center-bottom { margin: auto auto 0 } .banner-card-asset-type-inline-medium-down .asset-position-large-center-center { margin: auto } .banner-card-asset-type-inline-medium-down .asset-position-large-start-top { margin: 0 auto auto 0 } .banner-card-asset-type-inline-medium-down .asset-position-large-start-bottom { margin: auto auto 0 0 } .banner-card-asset-type-inline-medium-down .asset-position-large-start-center { margin: auto auto auto 0 } .banner-card-asset-type-inline-medium-down .asset-position-large-end-top { margin: 0 0 auto auto } .banner-card-asset-type-inline-medium-down .asset-position-large-end-bottom { margin: auto 0 0 auto } .banner-card-asset-type-inline-medium-down .asset-position-large-end-center { margin: auto 0 auto auto } } @media(max-width:1068px)and (max-width:1068px) { .banner-card-asset-type-inline-medium-down .asset-position-medium-center-top { margin: 0 auto auto } .banner-card-asset-type-inline-medium-down .asset-position-medium-center-bottom { margin: auto auto 0 } .banner-card-asset-type-inline-medium-down .asset-position-medium-center-center { margin: auto } .banner-card-asset-type-inline-medium-down .asset-position-medium-start-top { margin: 0 auto auto 0 } .banner-card-asset-type-inline-medium-down .asset-position-medium-start-bottom { margin: auto auto 0 0 } .banner-card-asset-type-inline-medium-down .asset-position-medium-start-center { margin: auto auto auto 0 } .banner-card-asset-type-inline-medium-down .asset-position-medium-end-top { margin: 0 0 auto auto } .banner-card-asset-type-inline-medium-down .asset-position-medium-end-bottom { margin: auto 0 0 auto } .banner-card-asset-type-inline-medium-down .asset-position-medium-end-center { margin: auto 0 auto auto } } @media(max-width:1068px)and (max-width:734px) { .banner-card-asset-type-inline-medium-down .asset-position-small-center-top { margin: 0 auto auto } .banner-card-asset-type-inline-medium-down .asset-position-small-center-bottom { margin: auto auto 0 } .banner-card-asset-type-inline-medium-down .asset-position-small-center-center { margin: auto } .banner-card-asset-type-inline-medium-down .asset-position-small-start-top { margin: 0 auto auto 0 } .banner-card-asset-type-inline-medium-down .asset-position-small-start-bottom { margin: auto auto 0 0 } .banner-card-asset-type-inline-medium-down .asset-position-small-start-center { margin: auto auto auto 0 } .banner-card-asset-type-inline-medium-down .asset-position-small-end-top { margin: 0 0 auto auto } .banner-card-asset-type-inline-medium-down .asset-position-small-end-bottom { margin: auto 0 0 auto } .banner-card-asset-type-inline-medium-down .asset-position-small-end-center { margin: auto 0 auto auto } } .card-set { --sk-cssgrid-column-gutter-inner: 20px; margin: 0; list-style-type: none; grid-auto-flow: column; grid-template-columns: unset; grid-auto-columns: 1fr } .card-set-full-bleed { --sk-cssgrid-column-gutter-outer: 0 } html.no-js .card-set { display: flex; flex-direction: column } .banner-card { display: grid; --min-height: 580px } @media(max-width:734px) { .banner-card { --min-height: 480px } } .banner-card .card { display: flex; min-height: var(--min-height) } .banner-card .banner-card-row { align-items: center; flex-direction: column; flex-wrap: nowrap; z-index: 1 } .banner-card .banner-card-copy-column { box-sizing: initial } @media(min-width:1069px) { .banner-card .banner-card-copy-column { --width: 400px; width: var(--width); flex-shrink: 0 } } @media(max-width:1068px) { .banner-card .banner-card-copy-column { --width: 480px; max-width: var(--width) } } @media(max-width:734px) { .banner-card .banner-card-copy-column { --width: auto } } html.text-zoom .banner-card .banner-card-copy-column { width: auto; max-width: 20em } html.text-zoom .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .banner-card-copy-column { padding: .8em; background-color: rgba(255, 255, 255, .92) } html.text-zoom .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down).theme-dark .banner-card-copy-column { background-color: rgba(0, 0, 0, .88) } .banner-card.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .banner-card-image { display: flex; flex-wrap: wrap } @media(min-width:1069px) { html.text-zoom .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .banner-card-copy-column { padding: .8em; background-color: rgba(255, 255, 255, .92) } html.text-zoom .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down.theme-dark .banner-card-copy-column { background-color: rgba(0, 0, 0, .88) } .banner-card.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .banner-card-image { display: flex; flex-wrap: wrap } } @media(max-width:1068px) { html.text-zoom .banner-card.banner-card-asset-type-background-medium-down .banner-card-copy-column { padding: .8em; background-color: rgba(255, 255, 255, .92) } html.text-zoom .banner-card.banner-card-asset-type-background-medium-down.theme-dark .banner-card-copy-column { background-color: rgba(0, 0, 0, .88) } .banner-card.banner-card-asset-type-background-medium-down .banner-card-image { display: flex; flex-wrap: wrap } } .banner-card.banner-card-asset-type-background .banner-card-image { display: flex; flex-wrap: wrap } .banner-card .banner-card-asset-column { width: 100%; display: flex; justify-content: center } @media(min-width:1069px) { .banner-card:only-of-type { --min-height: 480px } .banner-card:only-of-type.banner-card-slim { --min-height: 320px } } @media(max-width:1068px) { .banner-card:only-of-type.banner-card-slim { --copy-column-v-margin: 0; --min-height: 380px } } @media(max-width:734px) { .banner-card:only-of-type.banner-card-slim { --min-height: 330px } } .banner-card:only-of-type .banner-card-row { box-sizing: border-box } @media(min-width:1069px) { .banner-card:only-of-type .banner-card-row { align-items: center } } @media(min-width:1069px) { .banner-card:only-of-type:not(.banner-card-text-column-placement-center) .banner-card-row { flex-direction: row } } @media(max-width:734px) { .banner-card:first-child:nth-last-child(2), .banner-card:first-child:nth-last-child(2)~.banner-card { width: 100%; min-width: 260px } } .banner-card:only-of-type.banner-card-text-column-placement-center.banner-card-asset-type-inline:not(.banner-card-asset-type-background-medium-down) .banner-card-asset-column { display: none } @media(min-width:1069px) { .banner-card:only-of-type.banner-card-text-column-placement-center.banner-card-asset-type-inline.banner-card-asset-type-background-medium-down .banner-card-asset-column { display: none } } @media(max-width:1068px) { .banner-card:only-of-type.banner-card-text-column-placement-center.banner-card-asset-type-inline-medium-down .banner-card-asset-column { display: none } } .banner-card:only-of-type.banner-card-text-column-placement-center.banner-card-asset-type-background:not(.banner-card-asset-type-inline-medium-down) .banner-card-asset-column { position: absolute; margin: 0 } @media(min-width:1069px) { .banner-card:only-of-type.banner-card-text-column-placement-center.banner-card-asset-type-background.banner-card-asset-type-inline-medium-down .banner-card-asset-column { position: absolute; margin: 0 } } @media(max-width:1068px) { .banner-card:only-of-type.banner-card-text-column-placement-center.banner-card-asset-type-background-medium-down .banner-card-asset-column { position: absolute; margin: 0 } } .banner-card:only-of-type.banner-card-text-column-placement-center .banner-card-row { padding-inline-start: 0; text-align: center; justify-content: center } .banner-card:only-of-type.banner-card-text-column-placement-center.banner-card-text-row-placement-top .banner-card-row { justify-content: start } .banner-card:only-of-type.banner-card-text-column-placement-center.banner-card-text-row-placement-bottom .banner-card-row { justify-content: end } @media(min-width:1069px) { .banner-card:only-of-type.banner-card-text-column-placement-end { direction: rtl } } @media(min-width:1069px) { .banner-card:only-of-type.banner-card-text-column-placement-end .banner-card-asset-column, .banner-card:only-of-type.banner-card-text-column-placement-end .banner-card-copy-column { direction: ltr } } @media(max-width:1068px) { .banner-card:only-of-type.banner-card-text-row-placement-bottom .banner-card-row { flex-direction: column-reverse } } .banner-card:first-child:nth-last-child(2).banner-card-text-row-placement-bottom .banner-card-row, .banner-card:first-child:nth-last-child(2)~.banner-card.banner-card-text-row-placement-bottom .banner-card-row { flex-direction: column-reverse } html.no-js .banner-card .card:has(.ric-modal) { flex-direction: column; min-height: auto } html.no-js .banner-card .card:has(.ric-modal) .banner-card-row:has(.banner-card-inline-media-wrapper) { flex-direction: column } html.no-js .banner-card .card:has(.ric-modal) .banner-card-asset-column .inline-media-component-container.inline-media-demo-background { position: relative } html.no-js .banner-card .ric-modal { flex: 0 0 100% } html.no-js .banner-card .ric-modal .ric-modal-overlay-container { min-height: auto } html.no-js .banner-card .ric-modal .ric-modal-overlay-container .card { flex-direction: column } .banner-card { --default-text-content-height: calc(var(--copy-column-v-padding) + var(--default-badge-height) + var(--badge-margin-bottom) + var(--default-headline-height) + var(--copy-margin-top) + var(--default-copy-height) + var(--ctas-plus-margin-height)); --ctas-plus-margin-height: calc(var(--ctas-margin-top) + var(--ctas-height)); --copy-column-v-margin: calc(var(--target-default-card-height) - var(--default-text-content-height)); --ctas-height: var(--text-link-height); --button-height: 36px; --default-badge-height: 16px; --default-headline-height: 36px; --default-copy-height: 42px; --text-link-height: 21px; --target-default-card-height: 604px } @media(max-width:1068px) { .banner-card { --default-badge-height: 16px; --default-headline-height: 28px; --default-copy-height: 42px; --text-link-height: 21px; --target-default-card-height: 604px } } @media(max-width:734px) { .banner-card { --default-badge-height: 16px; --default-headline-height: 25px; --default-copy-height: 36px; --text-link-height: 18px; --target-default-card-height: 504px } } @media(min-width:735px) { .banner-card { --button-height: 44px } } .banner-card.no-ctas { --ctas-plus-margin-height: 0px } .banner-card.banner-card-ctas-inline.has-a-button { --ctas-height: var(--button-height) } .banner-card.banner-card-ctas-stacked { --ctas-height: calc(var(--ctas-stacked-gap) + var(--text-link-height)*2) } .banner-card.banner-card-ctas-stacked.has-a-button { --ctas-height: calc(var(--ctas-stacked-gap) + var(--button-height) + var(--text-link-height)) } .banner-card { --copy-max-width: 100%; --copy-color: var(--sk-glyph-gray-alpha); --copy-column-v-padding: 56px; --badge-margin-bottom: 8px; --copy-margin-top: 12px; text-align: center } @media(max-width:734px) { .banner-card { --copy-column-v-padding: 48px } } .banner-card .banner-card-row { --h-padding: 32px } @media(max-width:1068px) { .banner-card .banner-card-row { --h-padding: 28px } } @media(max-width:734px) { .banner-card .banner-card-row { --h-padding: 24px } } .banner-card .banner-card-copy-column { padding: var(--copy-column-v-padding) var(--h-padding) 0; z-index: 1; color: var(--copy-color) } .banner-card.banner-card-text-row-placement-bottom .banner-card-asset-column { margin-bottom: var(--copy-column-v-margin) } .banner-card.banner-card-text-row-placement-bottom .banner-card-copy-column, .banner-card.banner-card-text-row-placement-top .banner-card-asset-column { margin-top: calc(var(--copy-column-v-margin)*-1) } .banner-card.banner-card-text-row-placement-top .banner-card-copy-column { margin-bottom: var(--copy-column-v-margin) } @media(max-width:1068px) { .banner-card:only-of-type.banner-card-text-column-placement-center .banner-card-copy-column { margin: calc(var(--copy-column-v-margin)/2 - var(--copy-column-v-padding)/2) 0; padding-top: var(--copy-column-v-padding); padding-bottom: var(--copy-column-v-padding) } } @media(max-width:1068px) { .banner-card:only-of-type.banner-card-text-column-placement-center.banner-card-text-row-placement-top .banner-card-copy-column { margin-bottom: var(--copy-column-v-margin); margin-top: 0; padding-bottom: 0; padding-top: var(--copy-column-v-padding) } .banner-card:only-of-type.banner-card-text-column-placement-center.banner-card-text-row-placement-center .banner-card-copy-column { margin: calc(var(--copy-column-v-margin)/2 - var(--copy-column-v-padding)/2) 0; padding-top: var(--copy-column-v-padding); padding-bottom: var(--copy-column-v-padding) } } @media(max-width:1068px) { .banner-card:only-of-type.banner-card-text-column-placement-center.banner-card-text-row-placement-bottom .banner-card-copy-column, .banner-card:only-of-type.banner-card-text-column-placement-center.banner-card-text-row-placement-medium-down-bottom .banner-card-copy-column { margin-bottom: 0; margin-top: var(--copy-column-v-margin); padding-bottom: var(--copy-column-v-padding); padding-top: 0 } .banner-card:only-of-type.banner-card-text-column-placement-center.banner-card-text-row-placement-medium-down-center .banner-card-copy-column { margin: calc(var(--copy-column-v-margin)/2 - var(--copy-column-v-padding)/2) 0; padding-top: var(--copy-column-v-padding); padding-bottom: var(--copy-column-v-padding) } .banner-card:only-of-type.banner-card-text-column-placement-center.banner-card-text-row-placement-medium-down-top .banner-card-copy-column { margin-bottom: var(--copy-column-v-margin); margin-top: 0; padding-bottom: 0; padding-top: var(--copy-column-v-padding) } } .banner-card .banner-card-badge { display: block; margin-bottom: var(--badge-margin-bottom) } .banner-card .banner-card-headline { display: block; color: var(--copy-color) } .banner-card .banner-card-copy, .banner-card .banner-card-header { max-width: var(--copy-max-width); margin-left: auto; margin-right: auto } .banner-card .footnote { pointer-events: all } .banner-card .banner-card-copy { margin-top: var(--copy-margin-top) } .banner-card .banner-card-asset-column { height: 100%; flex-basis: var(--copy-column-v-margin); flex-grow: 1 } @media(min-width:1069px) { .banner-card:only-of-type { text-align: left } .banner-card:only-of-type .banner-card-asset-column { min-height: unset } } @media(min-width:1069px) { .banner-card:only-of-type.banner-card-text-row-placement-bottom .banner-card-asset-column, .banner-card:only-of-type.banner-card-text-row-placement-bottom .banner-card-copy-column, .banner-card:only-of-type.banner-card-text-row-placement-top .banner-card-asset-column, .banner-card:only-of-type.banner-card-text-row-placement-top .banner-card-copy-column { margin: 0 } } @media(min-width:1069px) { .banner-card:only-of-type .banner-card-row { --h-padding: clamp(0px, 6.25vw, 120px); height: 100%; padding-inline-start: var(--h-padding) } } @media(min-width:1069px) { .banner-card:only-of-type .banner-card-row .banner-card-copy-column { padding: var(--copy-column-v-padding) 0; margin: 0 } } @media(min-width:1069px) { .banner-card:only-of-type:not(.banner-card-text-alignment-center) .banner-card-copy, .banner-card:only-of-type:not(.banner-card-text-alignment-center) .banner-card-header { margin-inline-start: 0 } } @media(min-width:1069px) { .banner-card:only-of-type .banner-card-copy-column+.banner-card-asset-column { margin-bottom: 0 } } .banner-card-text-row-placement-bottom .banner-card-copy-column { padding-top: 0; padding-bottom: var(--copy-column-v-padding) } @media(min-width:1069px) { .banner-card.banner-card-text-alignment-center { text-align: center } } .background-alt .banner-card.theme-dark .tile { --sk-tile-background: rgb(0, 0, 0) } html.no-js .ric-dynamic-pricing { display: none } html.text-zoom .ric-dynamic-pricing-from-monthly { word-break: break-word } .feature-card { position: relative; width: var(--feature-card-width); --feature-card-width: 372px; --feature-card-min-height: 680px; --feature-card-copy-color: #1d1d1f; --feature-card-caption-color: #1d1d1f } @media(max-width:1068px) { .feature-card { --feature-card-width: 344px; --feature-card-min-height: 628px } } @media(max-width:734px) { .feature-card { --feature-card-width: 260px; --feature-card-min-height: 480px } } .feature-card .card { display: flex; justify-content: space-between; flex-direction: column; box-sizing: border-box; min-height: var(--feature-card-min-height); background: var(--sk-tile-background) } .feature-card .feature-card-copy .feature-card-body, .feature-card .feature-card-copy .feature-card-headline, .feature-card .feature-card-copy .feature-card-label { color: var(--feature-card-copy-color) } .feature-card .feature-card-copy .feature-card-caption, .feature-card .feature-card-copy .feature-card-caption a { color: var(--feature-card-caption-color) } .feature-card.background-alt .card .feature-card-copy { --feature-card-caption-color: #6e6e73 } .feature-card.theme-dark:not(.theme-light) .feature-card-copy, .theme-dark .feature-card:not(.theme-light) .feature-card-copy { --feature-card-copy-color: rgba(255, 255, 255, .92); --feature-card-caption-color: rgba(255, 255, 255, .92) } html.text-zoom .feature-card.theme-dark:not(.theme-light) .feature-card-copy .feature-card-body, html.text-zoom .feature-card.theme-dark:not(.theme-light) .feature-card-copy .feature-card-caption, html.text-zoom .feature-card.theme-dark:not(.theme-light) .feature-card-copy .feature-card-caption a, html.text-zoom .feature-card.theme-dark:not(.theme-light) .feature-card-copy .feature-card-headline, html.text-zoom .feature-card.theme-dark:not(.theme-light) .feature-card-copy .feature-card-label, html.text-zoom .theme-dark .feature-card:not(.theme-light) .feature-card-copy .feature-card-body, html.text-zoom .theme-dark .feature-card:not(.theme-light) .feature-card-copy .feature-card-caption, html.text-zoom .theme-dark .feature-card:not(.theme-light) .feature-card-copy .feature-card-caption a, html.text-zoom .theme-dark .feature-card:not(.theme-light) .feature-card-copy .feature-card-headline, html.text-zoom .theme-dark .feature-card:not(.theme-light) .feature-card-copy .feature-card-label { background-color: rgba(0, 0, 0, .88) } .feature-card.theme-dark:not(.theme-light).background-alt .card .feature-card-copy, .theme-dark .feature-card:not(.theme-light).background-alt .card .feature-card-copy { --feature-card-copy-color: rgba(255, 255, 255, .92); --feature-card-caption-color: rgba(255, 255, 255, .56) } .short .feature-card { --feature-card-min-height: 387px } @media(max-width:1068px) { .short .feature-card { --feature-card-min-height: 356px } } @media(max-width:734px) { .short .feature-card { --feature-card-min-height: 255px } } @media(min-width:1069px) { .feature-card.wide, .feature-card .wide { --feature-card-width: 696px; --feature-card-copy-width: 496px } } @media(min-width:735px)and (max-width:1068px) { .feature-card.wide, .feature-card .wide { --feature-card-width: 643px; --feature-card-copy-width: 424px } } @media(min-width:735px) { .feature-card.wide .feature-card-caption-container, .feature-card .wide .feature-card-caption-container, .feature-card.wide .feature-card-copy-container, .feature-card .wide .feature-card-copy-container { width: var(--feature-card-copy-width) } } .feature-card .feature-card-copy { padding: var(--feature-card-copy-padding) var(--feature-card-copy-padding) 0; --feature-card-copy-padding: 32px } @media(max-width:1068px) { .feature-card .feature-card-copy { --feature-card-copy-padding: 28px } } @media(max-width:734px) { .feature-card .feature-card-copy { --feature-card-copy-padding: 24px } } html.text-zoom .feature-card .feature-card-copy { overflow-wrap: break-word } html.text-zoom .feature-card .feature-card-copy .feature-card-body, html.text-zoom .feature-card .feature-card-copy .feature-card-caption, html.text-zoom .feature-card .feature-card-copy .feature-card-headline, html.text-zoom .feature-card .feature-card-copy .feature-card-label { background-color: rgba(255, 255, 255, .92) } html.no-js .feature-card .feature-card-content { width: var(--feature-card-width); margin: 0 auto } .feature-card .feature-card-content:not(.image-inline) .feature-card-copy-stack { min-height: 96px; padding-bottom: var(--feature-card-copy-padding-bottom); --feature-card-copy-padding-bottom: calc(523px - var(--feature-card-copy-padding)) } .short .feature-card .feature-card-content:not(.image-inline) .feature-card-copy-stack { min-height: 32px; --feature-card-copy-padding-bottom: calc(294px - var(--feature-card-copy-padding)) } @media(max-width:1068px) { .feature-card .feature-card-content:not(.image-inline) .feature-card-copy-stack { min-height: 84px; --feature-card-copy-padding-bottom: calc(490px - var(--feature-card-copy-padding)) } .short .feature-card .feature-card-content:not(.image-inline) .feature-card-copy-stack { min-height: 28px; --feature-card-copy-padding-bottom: calc(274px - var(--feature-card-copy-padding)) } } @media(max-width:734px) { .feature-card .feature-card-content:not(.image-inline) .feature-card-copy-stack { min-height: 75px; --feature-card-copy-padding-bottom: calc(356px - var(--feature-card-copy-padding)) } .short .feature-card .feature-card-content:not(.image-inline) .feature-card-copy-stack { min-height: 25px; --feature-card-copy-padding-bottom: calc(180px - var(--feature-card-copy-padding)) } } html.no-js .feature-card .feature-card-image-container { position: relative; transform: unset; inset: unset } .feature-card .feature-card-caption-container { max-width: var(--feature-card-caption-width); --feature-card-caption-width: 264px; padding-bottom: var(--feature-card-copy-padding) } @media(max-width:1068px) { .feature-card .feature-card-caption-container { --feature-card-caption-width: 240px } } @media(max-width:734px) { .feature-card .feature-card-caption-container { --feature-card-caption-width: 160px } } @media(min-width:735px) { .feature-card:first-child:nth-last-child(2):not(.wide), .feature-card:first-child:nth-last-child(2):not(.wide), .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide), .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) { --feature-card-width: 100% } } @media(min-width:1069px) { .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-copy-container, .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-copy-container, .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-copy-container, .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-copy-container { max-width: var(--feature-card-copy-width); padding-inline-end: var(--feature-card-copy-padding-end); --feature-card-copy-width: 384px; --feature-card-copy-padding-end: 129px } .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body), .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body), .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body), .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) { --feature-card-copy-width: 100%; --feature-card-copy-padding-end: 76px; --feature-card-caption-width: 384px } .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack, .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack, .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack, .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack { display: flex; grid-gap: 32px; gap: 32px } .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack .feature-card-body, .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack .feature-card-body, .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack .feature-card-headline, .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack .feature-card-headline, .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack .feature-card-body, .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack .feature-card-body, .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack .feature-card-headline, .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack .feature-card-headline { width: 50% } .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack .feature-card-body, .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack .feature-card-body, .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack .feature-card-body, .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-copy-container:has(.feature-card-copy-stack):has(.feature-card-body) .feature-card-copy-stack .feature-card-body { margin-top: 0 } .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-caption-container, .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-caption-container, .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-caption-container, .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-caption-container { --feature-card-caption-width: 296px } } @media(min-width:735px)and (max-width:1068px) { .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-caption-container, .feature-card:first-child:nth-last-child(2):not(.wide) .feature-card-caption-container, .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-caption-container, .feature-card:first-child:nth-last-child(2)~.feature-card:not(.wide) .feature-card-caption-container { --feature-card-caption-width: 264px; width: var(--feature-card-caption-width); max-width: 67% } } @media(min-width:1069px) { .feature-card:first-child:nth-last-child(3):not(.wide), .feature-card:first-child:nth-last-child(3):not(.wide), .feature-card:first-child:nth-last-child(3)~.feature-card:not(.wide), .feature-card:first-child:nth-last-child(3)~.feature-card:not(.wide) { --feature-card-width: 100% } .feature-card:first-child:nth-last-child(3):not(.wide) .feature-card-copy-container, .feature-card:first-child:nth-last-child(3):not(.wide) .feature-card-copy-container, .feature-card:first-child:nth-last-child(3)~.feature-card:not(.wide) .feature-card-copy-container, .feature-card:first-child:nth-last-child(3)~.feature-card:not(.wide) .feature-card-copy-container { max-width: var(--feature-card-copy-width); --feature-card-copy-width: 308px } .feature-card:first-child:nth-last-child(3):not(.wide) .feature-card-caption-container, .feature-card:first-child:nth-last-child(3):not(.wide) .feature-card-caption-container, .feature-card:first-child:nth-last-child(3)~.feature-card:not(.wide) .feature-card-caption-container, .feature-card:first-child:nth-last-child(3)~.feature-card:not(.wide) .feature-card-caption-container { --feature-card-caption-width: 296px } } @media(min-width:735px)and (max-width:1068px) { .feature-card:first-child:nth-last-child(3):not(.wide) .feature-card-caption-container, .feature-card:first-child:nth-last-child(3):not(.wide) .feature-card-caption-container, .feature-card:first-child:nth-last-child(3)~.feature-card:not(.wide) .feature-card-caption-container, .feature-card:first-child:nth-last-child(3)~.feature-card:not(.wide) .feature-card-caption-container { --feature-card-caption-width: 264px; width: var(--feature-card-caption-width); max-width: 67% } } @media(min-width:735px) { .feature-card-gallery .card-set:has(>li:first-child:nth-last-child(2), >li:first-child:nth-last-child(2)~li) { grid-auto-columns: minmax(0, 1fr) } } .feature-card-content { display: grid; grid-template-columns: 100%; height: 100%; pointer-events: none } .feature-card-content .feature-card-copy-container, .feature-card-content .feature-card-image-container { grid-area: 1/1 } .feature-card-content .feature-card-image-container { position: absolute } .feature-card-content .feature-card-image-container .feature-card-image { position: relative; display: flex } .feature-card-content.image-inline { grid-template-rows: min-content } .feature-card-content.image-inline .feature-card-image-container { position: relative; grid-area: auto } .feature-card-content .feature-card-caption-container, .feature-card-content .feature-card-copy { z-index: 5 } .feature-card-content .feature-card-copy { position: relative } .feature-card-content .feature-card-copy a { pointer-events: all } .feature-card-content .feature-card-label+.feature-card-headline { margin-top: 8px } .feature-card-content .feature-card-caption-container { position: absolute; bottom: 0 } .ric-modal { overflow: auto; z-index: -1; position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; opacity: 0 } html.no-js .ric-modal { opacity: 1; display: block; position: relative; z-index: auto; width: auto; height: auto } .ric-modal::after { content: ""; display: block; position: fixed; top: 0; inset-inline-start: 0; height: 100%; width: 100%; background: linear-gradient(var(--modal-scrim-fill), var(--modal-scrim-fill)) } html.no-js .ric-modal::after { display: none } .ric-modal.ric-modal-scrollable::after { width: calc(100% - var(--global-scrollbar-width, 0)) } .ric-modal.ric-modal-scrim-blur::after { -webkit-backdrop-filter: blur(var(--modal-scrim-blur)); backdrop-filter: blur(var(--modal-scrim-blur)) } .ric-modal.ric-modal-open { z-index: 11000; display: block } .ric-modal-content-wrapper { visibility: hidden } html.no-js .ric-modal-content-wrapper { visibility: visible } .ric-modal .ric-modal-overlay-container { box-sizing: border-box; display: flex; align-items: center; min-height: 100%; padding-inline-start: var(--modal-overlay-padding-inline); padding-inline-end: var(--modal-overlay-padding-inline); padding-top: var(--modal-overlay-padding-top); padding-bottom: var(--modal-overlay-padding-bottom) } .ric-modal .ric-modal-overlay { z-index: 1; box-sizing: border-box; position: relative; display: flex; flex-direction: column; width: var(--modal-overlay-width, 100%); height: var(--modal-overlay-height, auto); max-width: var(--modal-overlay-max-width); border-radius: var(--modal-overlay-border-radius-top) var(--modal-overlay-border-radius-top) var(--modal-overlay-border-radius-bottom) var(--modal-overlay-border-radius-bottom); margin-inline-start: auto; margin-inline-end: auto; pointer-events: none; color: var(--sk-body-text-color) } @media(max-width:734px) { .ric-modal .ric-modal-overlay { box-sizing: initial } } .ric-modal .ric-modal-overlay:focus-visible { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: var(--sk-focus-offset, 1px) } .ric-modal .ric-modal-content-wrapper { order: 2; z-index: 1; position: relative; visibility: visible; background: var(--modal-overlay-background); padding-top: var(--modal-overlay-content-padding-top); padding-bottom: var(--modal-overlay-content-padding-bottom); height: 100%; min-height: var(--modal-overlay-min-height); pointer-events: auto; clip-path: inset(0 0 0 0 round var(--modal-overlay-border-radius-top) var(--modal-overlay-border-radius-top) var(--modal-overlay-border-radius-bottom) var(--modal-overlay-border-radius-bottom)) } @media(max-width:734px) { .ric-modal .ric-modal-content-wrapper { box-sizing: border-box } } .ric-modal .ric-modal-content-wrapper.flush-top { padding-top: 0 } .ric-modal .ric-modal-content-wrapper.flush-bottom { padding-bottom: 0 } .ric-modal .ric-modal-viewport-content { padding-inline-start: var(--modal-overlay-content-padding-inline); padding-inline-end: var(--modal-overlay-content-padding-inline) } .ric-modal .ric-modal-close-button-wrapper { position: var(--modal-close-button-position); order: 1; align-self: flex-end; justify-content: center; align-items: center; z-index: 9999; top: var(--modal-close-button-offset-top); height: 0 } .ric-modal .ric-modal-close-button { cursor: auto; display: flex; justify-content: flex-start; align-items: flex-start; height: var(--modal-close-button-size); width: var(--modal-close-button-size); margin-inline-end: calc(var(--modal-close-button-offset-inline-end) - var(--modal-close-button-size) + var(--modal-close-icon-size)); margin-top: var(--modal-close-button-margin-top); pointer-events: auto } html.has-modal .ric-modal .ric-modal-close-button { cursor: pointer } html.no-js .ric-modal .ric-modal-close-button { display: none } .ric-modal .ric-modal-close-button:focus-visible { outline: none } .ric-modal .ric-modal-close-button:focus-visible .ric-modal-close-icon { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: 3px } .ric-modal .ric-modal-close-button:hover .ric-modal-close-icon { background: var(--modal-close-background-hover); color: var(--modal-close-color) } .ric-modal .ric-modal-close-button:active .ric-modal-close-icon { background: var(--modal-close-background-active) } .ric-modal .ric-modal-close-button .ric-modal-close-icon { background: var(--modal-close-background); border-radius: var(--modal-close-border-radius); color: var(--modal-close-color); display: flex; align-items: center; height: var(--modal-close-icon-size); width: var(--modal-close-icon-size); outline: none; transition: color 100ms linear, background 100ms linear; position: relative; pointer-events: none } .ric-modal .ric-modal-close-button .ric-modal-close-icon svg { fill: currentcolor; position: absolute; inset-inline-start: 50%; height: var(--modal-close-icon-svg-size); width: var(--modal-close-icon-svg-size); pointer-events: none } .ric-modal.theme-dark, .theme-dark .ric-modal { --sk-glyph: rgb(255, 255, 255); --sk-glyph-gray: rgb(245, 245, 247); --sk-glyph-gray-alpha: rgba(255, 255, 255, 0.92); --sk-glyph-gray-secondary: rgb(134, 134, 139); --sk-glyph-gray-secondary-alpha: rgba(255, 255, 255, 0.56); --sk-glyph-gray-secondary-alt: rgb(210, 210, 215); --sk-glyph-gray-secondary-alt-alpha: rgba(255, 255, 255, 0.8); --sk-glyph-gray-tertiary: rgb(110, 110, 115); --sk-glyph-gray-tertiary-alpha: rgba(255, 255, 255, 0.4); --sk-glyph-blue: rgb(41, 151, 255); --sk-glyph-orange: rgb(255, 121, 27); --sk-glyph-green: rgb(3, 161, 14); --sk-glyph-red: rgb(255, 48, 55); --sk-fill: rgb(0, 0, 0); --sk-fill-secondary: rgb(22, 22, 23); --sk-fill-tertiary: rgb(29, 29, 31); --sk-fill-gray: rgb(245, 245, 247); --sk-fill-gray-alpha: rgba(255, 255, 255, 0.92); --sk-fill-gray-secondary: rgb(110, 110, 115); --sk-fill-gray-secondary-alpha: rgba(255, 255, 255, 0.4); --sk-fill-gray-tertiary: rgb(66, 66, 69); --sk-fill-gray-tertiary-alpha: rgba(255, 255, 255, 0.24); --sk-fill-gray-quaternary: rgb(51, 51, 54); --sk-fill-gray-quaternary-alpha: rgba(255, 255, 255, 0.2); --sk-fill-orange-secondary: rgb(41, 13, 0); --sk-fill-green-secondary: rgb(0, 43, 3); --sk-fill-red: rgb(255, 48, 55); --sk-fill-red-secondary: rgb(51, 0, 0); --sk-fill-yellow: rgb(173, 130, 0); --sk-fill-yellow-secondary: rgb(43, 32, 0); --sk-enviro-neutral: rgb(0, 0, 0); --sk-body-background-color: rgb(0, 0, 0); --sk-body-text-color: rgb(245, 245, 247); --sk-headline-text-color: rgb(245, 245, 247); --sk-body-link-color: rgb(41, 151, 255); --modal-close-background: rgb(245, 245, 247); --modal-close-background-hover: #fff; --modal-close-background-active: #ededf2; --modal-close-color: rgb(0, 0, 0) } .ric-modal { --modal-close-background: rgb(29, 29, 31); --modal-close-background-hover: #272729; --modal-close-background-active: #18181a; --modal-close-color: rgb(255, 255, 255); --modal-close-button-margin-top: 20px; --modal-close-button-offset-top: 0; --modal-close-button-offset-inline-end: 20px; --modal-close-button-position: sticky; --modal-close-border-radius: 50%; --modal-close-icon-size: 36px; --modal-close-icon-svg-size: 36px; --modal-close-button-size: 44px; --modal-overlay-border-radius-top: 28px; --modal-overlay-border-radius-bottom: 28px; --modal-overlay-background: var(--sk-body-background-color); --modal-overlay-padding-top: 40px; --modal-overlay-padding-inline: 0; --modal-overlay-padding-bottom: 40px; --modal-scrim-fill: rgba(0, 0, 0, 0.48); --modal-scrim-blur: 20px } .ric-modal.ric-modal-scrim-light { --modal-scrim-fill: rgba(232, 232, 237, 0.48) } @media(max-width:734px) { .ric-modal { --modal-overlay-max-width: 480px; --modal-overlay-padding-top: 28px; --modal-overlay-padding-inline: 10px; --modal-overlay-padding-bottom: 28px } } .ric-modal-page-overlay { --modal-overlay-content-padding-top: 76px; --modal-overlay-content-padding-bottom: 76px; --modal-overlay-width: 816px; --modal-overlay-content-padding-inline: 76px } @media(max-width:734px) { .ric-modal-page-overlay { --modal-overlay-content-padding-bottom: 60px } } @media(max-width:1068px) { .ric-modal-page-overlay { --modal-overlay-width: 692px } } @media(max-width:734px) { .ric-modal-page-overlay { --modal-overlay-width: 100% } } @media(max-width:1068px) { .ric-modal-page-overlay { --modal-overlay-content-padding-inline: 76px } } @media(max-width:734px) { .ric-modal-page-overlay { --modal-overlay-content-padding-inline: 6.25% } } @media(min-width:1069px) { .ric-modal-page-overlay.ric-modal-page-overlay-wide { --modal-overlay-width: 1029px } } .modal-header .modal-header-topic-label+.modal-header-headline { margin-top: 12px } @media(max-width:734px) { .modal-header .modal-header-topic-label+.modal-header-headline { margin-top: 8px } } @media(min-width:1069px) { .ric-modal.inner-container-modal { --modal-overlay-max-width: 1260px } } @media(min-width:735px) { .ric-modal.inner-container-modal { --modal-overlay-width: 87.5% } } @media(min-width:735px)and (max-width:1068px) { .ric-modal.inner-container-modal { --modal-overlay-max-width: 934px } } .ric-modal.inner-container-modal.theme-light .inner-container-modal-copy-highlight { color: #1d1d1f } .ric-modal.inner-container-modal.theme-light .inner-container-modal-copy { color: #6e6e73 } .ric-modal.inner-container-modal.theme-light .ric-modal-content-wrapper { background-color: #fff } .ric-modal.inner-container-modal.theme-light .ric-modal-content-wrapper .card { background-color: #f5f5f7 } .ric-modal.inner-container-modal.theme-light .ric-modal-close-button-wrapper { --modal-close-background: rgb(29, 29, 31); --modal-close-background-hover: #272729; --modal-close-background-active: #18181a; --modal-close-color: rgb(255, 255, 255) } .ric-modal.inner-container-modal.theme-dark .ric-modal-content-wrapper { background-color: #000 } .ric-modal.inner-container-modal.theme-dark .ric-modal-content-wrapper .card { background-color: #1d1d1f } .ric-modal.inner-container-modal.theme-dark .ric-modal-close-button-wrapper { --modal-close-background: rgb(245, 245, 247); --modal-close-background-hover: #fff; --modal-close-background-active: #ededf2; --modal-close-color: rgb(0, 0, 0) } .ric-modal.inner-container-modal.theme-light.theme-alt .ric-modal-content-wrapper { background-color: #f5f5f7 } .ric-modal.inner-container-modal.theme-light.theme-alt .ric-modal-content-wrapper .card { background-color: #fff } .ric-modal.inner-container-modal.theme-dark.theme-alt .ric-modal-content-wrapper { background-color: #1d1d1f } .ric-modal.inner-container-modal.theme-dark.theme-alt .ric-modal-content-wrapper .card { background-color: #000 } .inner-container-modal-tile { --tile-card-vertical-space: 64px; margin-top: var(--tile-card-vertical-space) } @media(max-width:734px) { .inner-container-modal-tile { margin-top: 48px } } .inner-container-modal-tile+.inner-container-modal-tile { margin-top: 20px } .inner-container-modal-tile .card { min-height: auto; padding: var(--tile-card-vertical-space) 0 } .inner-container-modal-tile .card .inner-container-modal-copyblock, .inner-container-modal-tile .card .inner-container-modal-text-caption { max-width: 848px } @media(max-width:1068px) { .inner-container-modal-tile .card .inner-container-modal-copyblock, .inner-container-modal-tile .card .inner-container-modal-text-caption { max-width: 560px } } @media(max-width:734px) { .inner-container-modal-tile .card .inner-container-modal-copyblock, .inner-container-modal-tile .card .inner-container-modal-text-caption { max-width: 100% } } .inner-container-modal-tile .card .inner-container-modal-copyblock { position: relative } .inner-container-modal-tile .card .inner-container-modal-copyblock+.inner-container-modal-caption-wrapper.inner-container-modal-image-caption { margin-top: 32px } .inner-container-modal-tile .card .image-container { margin-top: 32px; position: relative } .inner-container-modal-tile .card .image-container+.inner-container-modal-caption-wrapper.inner-container-modal-image-caption { margin-top: 28px } @media(max-width:734px) { .inner-container-modal-tile .card .image-container+.inner-container-modal-caption-wrapper.inner-container-modal-image-caption { margin-top: 24px } } .inner-container-modal-tile .card .image-container .responsive-image { position: relative; display: flex } .inner-container-modal-tile .card .image-container .responsive-image img { width: 100%; height: auto } .inner-container-modal-tile .card .inner-container-modal-caption-wrapper { position: relative; display: flex } .inner-container-modal-tile .card .inner-container-modal-caption-wrapper .inner-container-modal-caption { color: #6e6e73 } .inner-container-modal-tile .card .inner-container-modal-caption-wrapper.inner-container-modal-text-caption { margin-top: 28px } @media(max-width:734px) { .inner-container-modal-tile .card .inner-container-modal-caption-wrapper.inner-container-modal-text-caption { margin-top: 24px } } .inner-container-modal-tile .card .inner-container-modal-caption-wrapper.inner-container-modal-image-caption+.image-container { margin-top: 28px } @media(max-width:734px) { .inner-container-modal-tile .card .inner-container-modal-caption-wrapper.inner-container-modal-image-caption+.image-container { margin-top: 24px } } .inner-container-modal-tile .card .inner-container-modal-caption-wrapper.inner-container-modal-image-caption .inner-container-modal-caption { width: 480px } @media(max-width:1068px) { .inner-container-modal-tile .card .inner-container-modal-caption-wrapper.inner-container-modal-image-caption .inner-container-modal-caption { width: 400px } } @media(max-width:734px) { .inner-container-modal-tile .card .inner-container-modal-caption-wrapper.inner-container-modal-image-caption .inner-container-modal-caption { width: 100% } } .inner-container-modal-tile.bleed-bottom .card { padding: var(--tile-card-vertical-space) 0 0 } .inner-container-modal-tile .inner-container-modal-content { padding-inline-start: 56px; padding-inline-end: 56px; margin: 0 auto } @media(max-width:1068px) { .inner-container-modal-tile .inner-container-modal-content { padding-inline-start: 40px; padding-inline-end: 40px } } @media(max-width:734px) { .inner-container-modal-tile .inner-container-modal-content { padding-inline-start: 24px; padding-inline-end: 24px } } .inner-container-modal-tile .inner-container-modal-copyblock .inner-container-modal-copy, .inner-container-modal-tile .inner-container-modal-copyblock .inner-container-modal-copy-highlight, .inner-container-modal-tile .inner-container-modal-copyblock .inner-container-modal-copy p:first-child { display: inline } .inner-container-modal-tile .inner-container-modal-copyblock .inner-container-modal-copy { color: #6e6e73 } .inner-container-modal-tile .inner-container-modal-copyblock .inner-container-modal-cta { margin-top: 15px } @media(max-width:734px) { .inner-container-modal-tile .inner-container-modal-copyblock .inner-container-modal-cta { margin-top: 12px } } @media(min-width:1069px) { .inner-container-modal-tile.tile-horizontal-layout .tile { display: flex; align-items: center; min-height: 720px; padding: 0 } .inner-container-modal-tile.tile-horizontal-layout .tile .inner-container-modal-copyblock { width: 336px; flex-shrink: 0; padding-top: var(--tile-card-vertical-space); padding-bottom: var(--tile-card-vertical-space) } .inner-container-modal-tile.tile-horizontal-layout .tile .inner-container-modal-content { padding-inline-start: 56px; padding-inline-end: 0; margin: 0 } .inner-container-modal-tile.tile-horizontal-layout .tile .image-container { position: relative; margin-top: 0; margin-inline-start: auto; margin-inline-end: 0 } .inner-container-modal-tile.tile-horizontal-layout .tile .image-container.pin-middle-center { margin-inline-start: auto; margin-inline-end: auto } .inner-container-modal-tile.tile-horizontal-layout .tile .image-container img { position: relative; width: auto; max-width: none } .inner-container-modal-tile.tile-horizontal-layout.image-first .tile { flex-direction: row-reverse } .inner-container-modal-tile.tile-horizontal-layout.image-first .tile .inner-container-modal-content { padding-inline-start: 0; padding-inline-end: 56px } .inner-container-modal-tile.tile-horizontal-layout.image-first .tile .image-container { margin-inline-start: 0; margin-inline-end: auto } .inner-container-modal-tile.tile-horizontal-layout.image-first .tile .image-container.pin-middle-center { margin-inline-start: auto; margin-inline-end: auto } } .theme-dark .inner-container-modal-tile .inner-container-modal-copy { color: #f5f5f7 } .theme-dark .inner-container-modal-tile .card .inner-container-modal-caption-wrapper .inner-container-modal-caption { color: #86868b } .theme-light .inner-container-modal-tile .inner-container-modal-copyblock .inner-container-modal-copy { color: #6e6e73 } .theme-light .inner-container-modal-tile .card { background: swatch(fill, light) } .theme-light .inner-container-modal-tile .card .inner-container-modal-image-caption { color: #6e6e73 } .card-control .tile-button-high-contrast.tile-button.theme-light { --sk-tile-button-icon-color: rgb(255, 255, 255); --sk-tile-button-icon-color-hover: rgb(255, 255, 255); --sk-tile-button-background: rgb(29, 29, 31); --sk-tile-button-background-hover: #272729; --sk-tile-button-background-active: #18181A } .card-control .tile-button-high-contrast.tile-button.theme-dark:not(.theme-light), .theme-dark .card-control .tile-button-high-contrast.tile-button:not(.theme-light) { --sk-tile-button-icon-color: rgb(0, 0, 0); --sk-tile-button-icon-color-hover: rgb(0, 0, 0); --sk-tile-button-background: rgb(245, 245, 247); --sk-tile-button-background-hover: rgb(255, 255, 255); --sk-tile-button-background-active: #EDEDF2 } .media-block { --media-offset-x: 0px; --media-offset-y: 0px; display: grid; height: 100% } .media-block picture img { display: block; position: relative; width: 100%; height: 100% } .media-block[data-media-type=animation].animation-static-end picture.positioned-media-element { animation-name: none } .media-block.static-fallback-only .positioned-media-element:not(.static, picture:first-of-type.end-frame, picture:first-of-type.start-frame) { display: none } .media-block.static-fallback-only picture:first-of-type.end-frame, .media-block.static-fallback-only picture:first-of-type.start-frame { opacity: 1 } .media-block:not(.static-fallback-only) .fallback-frame { visibility: hidden } html.no-js .media-block:not(.static-fallback-only) .fallback-frame { visibility: unset } .media-block.animation-static-end .inline-media-ui-button, .media-block.static-fallback-only .inline-media-ui-button { display: none } html.safari .media-block[data-media-type=video] picture.positioned-media-element { z-index: 0 } .media-block .positioned-media-element { --pin-offset-x: var(--media-offset-x); --pin-offset-y: var(--media-offset-y); grid-area: 1/1; margin: var(--pin-offset-block); width: var(--p-width); height: var(--p-height) } html.no-js .media-block .positioned-media-element.media { display: none } .media-block .positioned-media-element.end-frame, .media-block .positioned-media-element.start-frame { opacity: 0; visibility: hidden } .media-block .positioned-media-element.end-frame.show, .media-block .positioned-media-element.start-frame.show { visibility: visible; opacity: 1 } .media-block .positioned-media-element.end-frame, .media-block .positioned-media-element.start-frame.show { transition: opacity var(--frame-transition-duration) ease-out } .media-block .positioned-media-element.hide { visibility: hidden } .media-block.ended .positioned-media-element.end-frame, .media-block.media-unloaded .positioned-media-element.end-frame, .media-block:not(.loaded, .loading-disabled, .media-unloaded) .positioned-media-element.start-frame { opacity: 1; visibility: visible; pointer-events: all } html.no-touch .media-block.ended .positioned-media-element.end-frame, html.no-touch .media-block.media-unloaded .positioned-media-element.end-frame { pointer-events: all } .media-block.media-unloaded .positioned-media-element.media, .media-block.media-unloaded .positioned-media-element.start-frame { visibility: hidden } .media-block .inline-media-ui-button { position: absolute; top: 20px; inset-inline-end: 0; z-index: 2; --inline-media-playpause-icon-color: rgb(0 0 0/56%); --inline-media-playpause-icon-color-hover: rgb(0 0 0/64%); --inline-media-playpause-scrim-color: rgb(210 210 215/64%); --inline-media-playpause-icon-color: rgba(0, 0, 0, 0.56); --inline-media-playpause-icon-color-hover: rgba(0, 0, 0, 0.72); --inline-media-playpause-scrim-color: rgba(210, 210, 215, 0.64); --inline-media-playpause-scrim-color-hover: rgba(223, 223, 227, 0.6976); --inline-media-playpause-scrim-color-active: rgba(193, 193, 198, 0.6544) } html.no-js .media-block .inline-media-ui-button { display: none } .media-block .inline-media-ui-button.loading-empty .play-pause-button { opacity: 0 } .media-block .inline-media-ui-button.loading .play-pause-button { pointer-events: none; opacity: 1 } .media-block .inline-media-ui-button.loading .play-pause-button::after { mask: none; background: no-repeat 50%/contain rgba(0, 0, 0, 0); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyMXYyMUgweiIvPjxwYXRoIGQ9Ik0xMC41IDMuNWExIDEgMCAwMTEgMXYyYTEgMSAwIDAxLTIgMHYtMmExIDEgMCAwMTEtMXoiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xNS40NSA1LjU1YTEgMSAwIDAxMCAxLjQxTDE0IDguMzhBMSAxIDAgMTExMi42MiA3TDE0IDUuNTVhMSAxIDAgMDExLjQ1IDB6IiBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjEiLz48cGF0aCBkPSJNMTcuNSAxMC41YTEgMSAwIDAxLTEgMWgtMmExIDEgMCAwMTAtMmgyYTEgMSAwIDAxMSAxeiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTE1LjQ1IDE1LjQ1YTEgMSAwIDAxLTEuNDEgMEwxMi42MiAxNEExIDEgMCAxMTE0IDEyLjYyTDE1LjQ1IDE0YTEgMSAwIDAxMCAxLjQ1eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTEwLjUgMTcuNWExIDEgMCAwMS0xLTF2LTJhMSAxIDAgMDEyIDB2MmExIDEgMCAwMS0xIDF6IiBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJNNS41NSAxNS40NWExIDEgMCAwMTAtMS40MUw3IDEyLjYyQTEgMSAwIDExOC4zOCAxNEw3IDE1LjQ1YTEgMSAwIDAxLTEuNDUgMHoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNiIvPjxwYXRoIGQ9Ik0zLjUgMTAuNWExIDEgMCAwMTEtMWgyYTEgMSAwIDAxMCAyaC0yYTEgMSAwIDAxLTEtMXoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNyIvPjxwYXRoIGQ9Ik01LjU1IDUuNTVhMSAxIDAgMDExLjQ1IDBMOC4zOCA3QTEgMSAwIDAxNyA4LjM4TDUuNTUgN2ExIDEgMCAwMTAtMS40NXoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuOSIvPjwvc3ZnPg=="); position: absolute; top: 50%; left: 50%; translate: -50% -50%; transform-origin: center; width: 21px; height: 21px; animation: inline-media-spin .85s steps(8) infinite } .media-block .inline-media-ui-button.loading .play-pause-button:active::after, .media-block .inline-media-ui-button.loading .play-pause-button:hover::after { background-color: rgba(0, 0, 0, 0) } .media-block .inline-media-ui-button.loaded.playing .play-pause-button::after { mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTIzLjUgMTIuODkzdjEwLjIxNGMwIC43NjktLjU5NyAxLjM5My0xLjMzMyAxLjM5M2gtMS4zMzRjLS43MzYgMC0xLjMzMy0uNjI0LTEuMzMzLTEuMzkzVjEyLjg5M2MwLS43Ny41OTctMS4zOTMgMS4zMzMtMS4zOTNoMS4zMzRjLjczNiAwIDEuMzMzLjYyNCAxLjMzMyAxLjM5M3pNMTUuMTY3IDExLjVoLTEuMzM0Yy0uNzM2IDAtMS4zMzMuNjI0LTEuMzMzIDEuMzkzdjEwLjIxNGMwIC43NjkuNTk3IDEuMzkzIDEuMzMzIDEuMzkzaDEuMzM0Yy43MzYgMCAxLjMzMy0uNjI0IDEuMzMzLTEuMzkzVjEyLjg5M2MwLS43Ny0uNTk3LTEuMzkzLTEuMzMzLTEuMzkzeiIvPjwvc3ZnPg==") } .media-block .inline-media-ui-button.loaded.ended .play-pause-button::after { mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTIzLjUgMTYuNUExLjUgMS41IDAgMDAyMiAxOGMwIDIuMjA2LTEuNzk0IDQtNCA0cy00LTEuNzk0LTQtNGMwLTEuOTkgMS40NjQtMy42MyAzLjM2OS0zLjkzNmwtLjM3Ni4zNzVhMS41IDEuNSAwIDEwMi4xMjEgMi4xMjJsMi45MjktMi45M2ExLjUgMS41IDAgMDAwLTIuMTJsLTMuMDcxLTMuMDcyYTEuNSAxLjUgMCAxMC0yLjEyMSAyLjEyMmwuNDczLjQ3M0MxMy43OCAxMS4zNzUgMTEgMTQuMzY4IDExIDE4YzAgMy44NiAzLjE0IDcgNyA3czctMy4xNCA3LTdhMS41IDEuNSAwIDAwLTEuNS0xLjV6Ii8+PC9zdmc+") } .media-block .inline-media-ui-button.loaded .play-pause-button { pointer-events: all; opacity: 1 } .media-block .inline-media-ui-button .play-pause-button { position: relative; display: flex; justify-self: flex-end; align-self: flex-end; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin-inline-end: 20px; margin-bottom: 20px; border: none; background: none; background-color: var(--inline-media-playpause-scrim-color); background-repeat: no-repeat; opacity: 0; transition: opacity 100ms linear, transform .2s ease; cursor: pointer; pointer-events: none } .media-block .inline-media-ui-button .play-pause-button::after { content: ""; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTE0IDIyLjU4N3YtOS4xNjhjMC0uOTM0LjU2My0xLjQyNSAxLjI2LTEuNDI1LjM4NiAwIC42MjcuMDY1Ljk2Ny4yNzNsNy40NjggNC40MDNjLjY2Mi4zOSAxLjAyLjcwNyAxLjAyIDEuMzI0IDAgLjYxOC0uMzU4LjkzNS0xLjAyIDEuMzI1bC03LjQ2OCA0LjQwM2MtLjM0LjIwOC0uNTgxLjI3My0uOTY2LjI3My0uNjk4IDAtMS4yNjEtLjQ3My0xLjI2MS0xLjQwOCIvPjwvc3ZnPg=="); mask-size: cover; display: inline-block; width: 36px; height: 36px; position: absolute; background-color: var(--inline-media-playpause-icon-color) } .media-block .inline-media-ui-button .play-pause-button:disabled { pointer-events: none; opacity: .32 } .media-block .inline-media-ui-button .play-pause-button:hover { background-color: var(--inline-media-playpause-scrim-color-hover) } .media-block .inline-media-ui-button .play-pause-button:hover::after { background-color: var(--inline-media-playpause-icon-color-hover) } .media-block .inline-media-ui-button .play-pause-button:active { background-color: var(--inline-media-playpause-scrim-color-active); transform: scale(0.95) } .media-block .inline-media-ui-button .play-pause-button:active::after { background-color: var(--inline-media-playpause-icon-color) } .media-block .inline-media-ui-button .play-pause-button:focus-visible { outline: none } .media-block .inline-media-ui-button .play-pause-button:focus-visible::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: inherit; box-sizing: border-box; outline: 2px solid #0071e3; outline-offset: 3px } .media-block .inline-media-ui-button .play-pause-button { border-radius: 50% } .media-block .inline-media-ui-button .play-pause-button:focus-visible { box-shadow: 0 0 0 3px #000, 0 0 0 5px #0071e3 } .media-block .inline-media-ui-button .play-pause-button:not(:focus-visible)::before { border: none } .media-block .inline-media-ui-button.loading { --inline-media-playpause-scrim-color: rgb(0 0 0/0%) } .media-block .inline-media-ui-button.loading .play-pause-button:hover::after { --inline-media-playpause-icon-color-hover: rgb(0 0 0/0%) } html.no-reduced-motion .media-block .inline-media-ui-button.inline-media-ui-replay-only { opacity: 0; visibility: hidden; pointer-events: none } html.no-reduced-motion .media-block .inline-media-ui-button.inline-media-ui-replay-only.loaded.ended { transition: opacity 400ms ease-in-out; opacity: 1; visibility: visible; pointer-events: all } .media-block.with-media-ui-dark:not(.with-media-ui-light) .inline-media-ui-button, .theme-dark .media-block:not(.with-media-ui-light) .inline-media-ui-button { --inline-media-playpause-icon-color: rgba(255, 255, 255, 0.8); --inline-media-playpause-icon-color-hover: rgb(255, 255, 255); --inline-media-playpause-scrim-color: rgba(66, 66, 69, 0.72); --inline-media-playpause-scrim-color-hover: rgba(73, 73, 76, 0.7256); --inline-media-playpause-scrim-color-active: rgba(57, 57, 60, 0.7424) } .media-block.with-media-ui-dark:not(.with-media-ui-light) .inline-media-ui-button.loading, .theme-dark .media-block:not(.with-media-ui-light) .inline-media-ui-button.loading { --inline-media-playpause-scrim-color: rgb(0 0 0/0%) } .media-block.with-media-ui-dark:not(.with-media-ui-light) .inline-media-ui-button.loading .play-pause-button:hover::after, .theme-dark .media-block:not(.with-media-ui-light) .inline-media-ui-button.loading .play-pause-button:hover::after { --inline-media-playpause-icon-color-hover: rgb(0 0 0/0%) } .media-block picture img { position: static } html.no-js .media-block noscript { grid-area: 1/1; width: var(--p-width); height: var(--p-height) } .media-block .inline-media-ui-button { top: unset; bottom: 0 } .media-block .inline-media-ui-button.loading, .media-block .inline-media-ui-button:not(.loaded, .ended, .playing) { --inline-media-playpause-scrim-color: rgb(210 210 215/64%) } .media-block .inline-media-ui-button:not(.loaded, .ended, .playing) .play-pause-button { pointer-events: none; opacity: 1 } .media-block .inline-media-ui-button:not(.loaded, .ended, .playing) .play-pause-button::after { mask: none; background: no-repeat 50%/contain rgba(0, 0, 0, 0); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyMXYyMUgweiIvPjxwYXRoIGQ9Ik0xMC41IDMuNWExIDEgMCAwMTEgMXYyYTEgMSAwIDAxLTIgMHYtMmExIDEgMCAwMTEtMXoiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xNS40NSA1LjU1YTEgMSAwIDAxMCAxLjQxTDE0IDguMzhBMSAxIDAgMTExMi42MiA3TDE0IDUuNTVhMSAxIDAgMDExLjQ1IDB6IiBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjEiLz48cGF0aCBkPSJNMTcuNSAxMC41YTEgMSAwIDAxLTEgMWgtMmExIDEgMCAwMTAtMmgyYTEgMSAwIDAxMSAxeiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTE1LjQ1IDE1LjQ1YTEgMSAwIDAxLTEuNDEgMEwxMi42MiAxNEExIDEgMCAxMTE0IDEyLjYyTDE1LjQ1IDE0YTEgMSAwIDAxMCAxLjQ1eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTEwLjUgMTcuNWExIDEgMCAwMS0xLTF2LTJhMSAxIDAgMDEyIDB2MmExIDEgMCAwMS0xIDF6IiBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJNNS41NSAxNS40NWExIDEgMCAwMTAtMS40MUw3IDEyLjYyQTEgMSAwIDExOC4zOCAxNEw3IDE1LjQ1YTEgMSAwIDAxLTEuNDUgMHoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNiIvPjxwYXRoIGQ9Ik0zLjUgMTAuNWExIDEgMCAwMTEtMWgyYTEgMSAwIDAxMCAyaC0yYTEgMSAwIDAxLTEtMXoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNyIvPjxwYXRoIGQ9Ik01LjU1IDUuNTVhMSAxIDAgMDExLjQ1IDBMOC4zOCA3QTEgMSAwIDAxNyA4LjM4TDUuNTUgN2ExIDEgMCAwMTAtMS40NXoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuOSIvPjwvc3ZnPg=="); position: absolute; top: 50%; left: 50%; translate: -50% -50%; transform-origin: center; width: 21px; height: 21px; animation: inline-media-spin .85s steps(8) infinite } .media-block .inline-media-ui-button:not(.loaded, .ended, .playing) .play-pause-button:hover::after { --inline-media-playpause-icon-color-hover: rgb(0 0 0/0%) } .media-block.with-media-ui-dark .inline-media-ui-button.loading, .media-block.with-media-ui-dark .inline-media-ui-button:not(.loaded, .ended, .playing) { --inline-media-playpause-scrim-color: rgb(66 66 69/72%) } .paddlenav-dark, .paddlenav-dark.paddlenav-alpha { --sk-paddlenav-arrow-color: rgba(255, 255, 255, 0.8); --sk-paddlenav-arrow-color-hover: rgb(255, 255, 255); --sk-paddlenav-arrow-color-active: rgb(255, 255, 255) } .paddlenav-dark.paddlenav-alpha { --sk-paddlenav-background: rgba(66, 66, 69, 0.72); --sk-paddlenav-background-hover: rgba(73, 73, 76, 0.7256); --sk-paddlenav-background-active: rgba(57, 57, 60, 0.7424) } .paddlenav-dark.paddlenav-solid { --sk-paddlenav-arrow-color: rgba(255, 255, 255, 0.8); --sk-paddlenav-arrow-color-hover: rgb(255, 255, 255); --sk-paddlenav-arrow-color-active: rgb(255, 255, 255); --sk-paddlenav-background: rgb(51, 51, 54); --sk-paddlenav-background-hover: #37373a; --sk-paddlenav-background-active: #2f2f32 } .theme-light .paddlenav.paddlenav-dark { --sk-paddlenav-arrow-color: rgba(0, 0, 0, 0.56); --sk-paddlenav-arrow-color-hover: rgba(0, 0, 0, 0.64); --sk-paddlenav-arrow-color-active: rgba(0, 0, 0, 0.64); --sk-paddlenav-background: rgb(232, 232, 237); --sk-paddlenav-background-hover: rgb(255, 255, 255); --sk-paddlenav-background-active: rgb(255, 255, 255) } .theme-light .paddlenav.paddlenav-dark.paddlenav-alpha { --sk-paddlenav-arrow-color: rgba(255, 255, 255, 0.8); --sk-paddlenav-arrow-color-hover: rgb(255, 255, 255); --sk-paddlenav-arrow-color-active: rgb(255, 255, 255); --sk-paddlenav-background: rgba(66, 66, 69, 0.72); --sk-paddlenav-background-hover: rgba(73, 73, 76, 0.7256); --sk-paddlenav-background-active: rgba(57, 57, 60, 0.7424) } .theme-light .paddlenav.paddlenav-dark.paddlenav-solid { --sk-paddlenav-arrow-color: rgba(255, 255, 255, 0.8); --sk-paddlenav-arrow-color-hover: rgb(255, 255, 255); --sk-paddlenav-arrow-color-active: rgb(255, 255, 255); --sk-paddlenav-background: rgb(51, 51, 54); --sk-paddlenav-background-hover: #37373a; --sk-paddlenav-background-active: #2f2f32 } .paddlenav-light, .paddlenav-light.paddlenav, .paddlenav-light.paddlenav-alpha, .paddlenav-light.paddlenav-solid { --sk-paddlenav-arrow-color: rgba(0, 0, 0, 0.56); --sk-paddlenav-arrow-color-hover: rgba(0, 0, 0, 0.64); --sk-paddlenav-arrow-color-active: rgba(0, 0, 0, 0.64) } .paddlenav-light.paddlenav-solid { --sk-paddlenav-background: rgb(232, 232, 237); --sk-paddlenav-background-hover: #ececf0; --sk-paddlenav-background-active: #dfdfe4 } .theme-dark .paddlenav.paddlenav-light { --sk-paddlenav-arrow-color: rgba(0, 0, 0, 0.56); --sk-paddlenav-arrow-color-hover: rgba(0, 0, 0, 0.64); --sk-paddlenav-arrow-color-active: rgba(0, 0, 0, 0.64); --sk-paddlenav-background: rgba(0, 0, 0, 0.56); --sk-paddlenav-background-hover: rgba(0, 0, 0, 0.64); --sk-paddlenav-background-active: rgba(0, 0, 0, 0.64) } .theme-dark .paddlenav.paddlenav-light.paddlenav-alpha { --sk-paddlenav-arrow-color: rgba(0, 0, 0, 0.56); --sk-paddlenav-arrow-color-hover: rgba(0, 0, 0, 0.64); --sk-paddlenav-arrow-color-active: rgba(0, 0, 0, 0.64); --sk-paddlenav-background: rgba(210, 210, 215, 0.64); --sk-paddlenav-background-hover: rgba(223, 223, 227, 0.6976); --sk-paddlenav-background-active: rgba(193, 193, 198, 0.6544) } .theme-dark .paddlenav.paddlenav-light.paddlenav-solid { --sk-paddlenav-arrow-color: rgba(0, 0, 0, 0.56); --sk-paddlenav-arrow-color-hover: rgba(0, 0, 0, 0.64); --sk-paddlenav-arrow-color-active: rgba(0, 0, 0, 0.64); --sk-paddlenav-background: rgb(232, 232, 237); --sk-paddlenav-background-hover: #ececf0; --sk-paddlenav-background-active: #dfdfe4 } .scroll-gallery-paddlenav { --paddlenav-height: 36px; --paddlenavs-width: 90px; --paddlenav-sticky-offset: 0px; --paddlenav-padding: 48px; --responsive-content-max-width: var(--global-content-max-width); --responsive-content-width: min(var(--global-content-max-width), 87.5%); --responsive-gutter-width: calc(50% - var(--responsive-content-width)/2); position: absolute; display: flex; justify-content: end; inset-inline-start: var(--responsive-gutter-width); width: var(--responsive-content-width); height: var(--paddlenav-height); transition: opacity .2s ease-out; padding-top: var(--paddlenav-padding) } @media(max-width:1068px) { .scroll-gallery-paddlenav { --paddlenav-padding: 44px } } @media(max-width:734px) { .scroll-gallery-paddlenav { --paddlenav-padding: 40px } } .scroll-gallery-paddlenav:focus-visible { outline: none } .scroll-gallery-paddlenav ul { grid-gap: 18px; gap: 18px } .scroll-gallery-paddlenav.hide { visibility: hidden; opacity: 0 } .scroll-gallery-paddlenav.paddlenav-centered ul { justify-content: center } .scroll-gallery-paddlenav.sticky { top: 0; height: 100%; pointer-events: none } .scroll-gallery-paddlenav .sticky-element { z-index: 2; position: sticky; pointer-events: all; height: var(--sticky-paddlenav-container-height); align-items: center; bottom: 0; margin-top: auto; --ltr: 1 } .scroll-gallery-paddlenav .sticky-element .left-item, .scroll-gallery-paddlenav .sticky-element .right-item { z-index: 1 } .scroll-gallery-paddlenav .sticky-element .scrim { --background-color: var(--sk-fill); display: block; z-index: 0; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, var(--background-color), var(--background-color) 58%, transparent) } .scroll-gallery-paddlenav .sticky-element .paddlenav-arrow { top: calc(var(--paddlenav-height)*0.6) } .scroll-gallery-paddlenav .paddlenav-arrow.paddlenav-arrow-next, .scroll-gallery-paddlenav .paddlenav-arrow.paddlenav-arrow-previous { position: relative; inset-inline-start: auto; inset-inline-end: auto; display: flex; align-items: center; justify-content: center; top: calc(var(--paddlenav-height)*0.5) } .scroll-gallery-paddlenav .paddlenav-arrow.paddlenav-arrow-next svg, .scroll-gallery-paddlenav .paddlenav-arrow.paddlenav-arrow-previous svg { width: 36px; height: 36px } .background-alt .scroll-gallery-paddlenav .sticky-element .scrim { --background-color: var(--global-section-background-color-alt) } .background-alt .theme-dark .scroll-gallery-paddlenav .sticky-element .scrim, .theme-dark .background-alt .scroll-gallery-paddlenav .sticky-element .scrim { --background-color: var(--global-section-background-color-alt-dark) } [data-component-list*=StaggeredFadeIn] { --staggered-delay: 0.15; --staggered-opacity-duration: 0.9; --staggered-translate-y: 30px; --staggered-translate-y-duration: 0.7 } [data-component-list*=StaggeredFadeIn].pre-animation { visibility: hidden; opacity: 0 } [data-component-list*=StaggeredFadeIn][data-staggered-item-no-translate] { --staggered-translate-y: 0 } [data-component-list*=StaggeredFadeIn]:not(.staggered-end)[data-staggered-item], [data-component-list*=StaggeredFadeIn]:not(.staggered-end) [data-staggered-item] { opacity: 0 } html.no-reduced-motion [data-component-list*=StaggeredFadeIn]:not(.staggered-end)[data-staggered-item], html.no-reduced-motion [data-component-list*=StaggeredFadeIn]:not(.staggered-end) [data-staggered-item] { transform: none; transition: none } html.no-js [data-component-list*=StaggeredFadeIn]:not(.staggered-end)[data-staggered-item], html.no-js [data-component-list*=StaggeredFadeIn]:not(.staggered-end) [data-staggered-item], html.reduced-motion [data-component-list*=StaggeredFadeIn]:not(.staggered-end)[data-staggered-item], html.reduced-motion [data-component-list*=StaggeredFadeIn]:not(.staggered-end) [data-staggered-item] { opacity: 1 } [data-component-list*=StaggeredFadeIn].staggered-start[data-staggered-item], [data-component-list*=StaggeredFadeIn].staggered-start [data-staggered-item] { will-change: opacity, transform; visibility: visible } [data-component-list*=StaggeredFadeIn].staggered-start[data-staggered-item].hide, [data-component-list*=StaggeredFadeIn].staggered-start [data-staggered-item].hide { visibility: hidden } [data-component-list*=StaggeredFadeIn].staggered-end[data-staggered-item], [data-component-list*=StaggeredFadeIn].staggered-end [data-staggered-item] { will-change: auto } .scroll-gallery { --paddlenav-height: 36px; --paddlenavs-width: 90px; --paddlenav-sticky-offset: 0px; --paddlenav-padding: 48px; --responsive-content-width: 87.5%; --responsive-content-max-width: var(--global-content-max-width); --responsive-content-clamped-width: min(var(--responsive-content-max-width), var(--responsive-content-width)); --responsive-gutter-width: calc(50% - var(--responsive-content-clamped-width)/2); position: relative; margin-top: 0;} @media(max-width:1068px) { .scroll-gallery { --paddlenav-padding: 44px } } @media(max-width:734px) { .scroll-gallery { --paddlenav-padding: 40px } } .scroll-gallery.no-paddlenav { padding-bottom: 0 } .scroll-gallery::-webkit-scrollbar { width: 0; height: 0; background: rgba(0, 0, 0, 0) } .scroll-gallery .scroll-container { position: relative; overflow-x: scroll; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding: var(--responsive-gutter-width); padding: 10px 0 var(--staggered-translate-y, 30px); margin: -10px 0 calc(var(--staggered-translate-y, 30px)*-1) } .scroll-gallery .scroll-container::-webkit-scrollbar { display: none } .scroll-gallery .item-container { width: var(--responsive-content-clamped-width); min-width: -moz-fit-content; min-width: fit-content; padding: 0 var(--responsive-gutter-width) } html.no-js .scroll-gallery .item-container { min-width: unset } .scroll-gallery .gallery-item { scroll-snap-align: start } .scroll-gallery .gallery-item:last-child { scroll-snap-align: start end } .scroll-gallery .gallery-item:not([data-no-default-focus]):focus-visible { outline: none } html.no-js .scroll-gallery .gallery-item { width: auto !important } .scroll-gallery .card-container:focus-visible, .scroll-gallery .card-set:focus-visible, .scroll-gallery .gallery-item:focus-visible, .scroll-gallery .item-container:focus-visible, .scroll-gallery .scroll-container:focus-visible { outline: unset } .icon-card { box-sizing: border-box } .icon-card .card { min-height: 184px } @media(max-width:1068px) { .icon-card .card { min-height: 213px } } @media(max-width:734px) { .icon-card .card { min-height: 223px } } .icon-card .tile-content { pointer-events: none; padding-top: 28px; padding-inline-end: 76px; padding-bottom: 52px; padding-inline-start: 32px } @media(max-width:1068px) { .icon-card .tile-content { padding-inline-end: 72px; padding-inline-start: 28px } } @media(max-width:734px) { .icon-card .tile-content { padding-top: 24px; padding-bottom: 72px; padding-inline-start: 24px; padding-inline-end: 24px } } .icon-card .icon-card-content { position: relative; z-index: 1 } .icon-card .icon-card-content .highlight-recycling { color: #8668ff } .icon-card .icon-card-content .highlight-electricity { color: #ed6300 } .icon-card .icon-card-content .highlight-packaging { color: #00a1b3 } html.text-zoom .icon-card .icon-card-content { overflow-wrap: break-word } .icon-card .icon-card-icon { margin-bottom: 9px } .icon-card a { pointer-events: all } @media(max-width:734px) { .icon-card:first-child:nth-last-child(2), .icon-card:first-child:nth-last-child(2)~.icon-card { width: 100%; min-width: 260px } } @media(min-width:735px) { .icon-card:first-child:nth-last-child(2), .icon-card:first-child:nth-last-child(2)~.icon-card { --icon-card-2-up-copy-col-min-width: 240px; --icon-card-2-up-copy-col-max-width: 296px; --icon-card-2-up-copy-col-gap: 32px } } @media(min-width:1069px) { .icon-card:first-child:nth-last-child(2) .icon-card-content, .icon-card:first-child:nth-last-child(2)~.icon-card .icon-card-content { display: flex; flex-direction: column; width: 100%; max-width: calc(var(--icon-card-2-up-copy-col-max-width)*2 + var(--icon-card-2-up-copy-col-gap)); margin-inline-start: auto; margin-inline-end: auto } } @media(min-width:1069px) { .icon-card:first-child:nth-last-child(2) .icon-card-copy-wrapper, .icon-card:first-child:nth-last-child(2)~.icon-card .icon-card-copy-wrapper { display: grid; grid-template-rows: repeat(1, auto); grid-template-columns: repeat(auto-fit, minmax(var(--icon-card-2-up-copy-col-min-width), 1fr)); grid-column-gap: var(--icon-card-2-up-copy-col-gap); grid-row-gap: var(--sk-headline-plus-first-element-margin); justify-content: stretch } } @media(min-width:1069px) { .icon-card:first-child:nth-last-child(2) .icon-card-body-copy, .icon-card:first-child:nth-last-child(2) .icon-card-headline, .icon-card:first-child:nth-last-child(2)~.icon-card .icon-card-body-copy, .icon-card:first-child:nth-last-child(2)~.icon-card .icon-card-headline { min-width: var(--icon-card-2-up-copy-col-min-width) } } @media(min-width:735px) { .icon-card:first-child:nth-last-child(2) .icon-card-body-copy, .icon-card:first-child:nth-last-child(2) .icon-card-headline, .icon-card:first-child:nth-last-child(2)~.icon-card .icon-card-body-copy, .icon-card:first-child:nth-last-child(2)~.icon-card .icon-card-headline { max-width: var(--icon-card-2-up-copy-col-max-width) } } @media(min-width:1069px) { .icon-card:first-child:nth-last-child(2) .icon-card-headline+*, .icon-card:first-child:nth-last-child(2)~.icon-card .icon-card-headline+* { margin-top: 0 } } .icon-card:first-child:nth-last-child(3), .icon-card:first-child:nth-last-child(3)~.icon-card { width: 100%; min-width: 372px } @media(max-width:1068px) { .icon-card:first-child:nth-last-child(3), .icon-card:first-child:nth-last-child(3)~.icon-card { min-width: unset; width: 344px } } @media(max-width:734px) { .icon-card:first-child:nth-last-child(3), .icon-card:first-child:nth-last-child(3)~.icon-card { min-width: unset; width: 260px } } .icon-card:first-child:nth-last-child(3) .icon-card-content, .icon-card:first-child:nth-last-child(3)~.icon-card .icon-card-content { max-width: 360px } @media(min-width:1069px) { .icon-card:first-child:nth-last-child(n+3).icon-card-link .card, .icon-card:first-child:nth-last-child(n+3)~.icon-card.icon-card-link .card { min-height: 248px } } .icon-card:first-child:nth-last-child(n+4), .icon-card:first-child:nth-last-child(n+4)~.icon-card { min-width: unset; width: 372px } @media(max-width:1068px) { .icon-card:first-child:nth-last-child(n+4), .icon-card:first-child:nth-last-child(n+4)~.icon-card { min-width: unset; width: 344px } } @media(max-width:734px) { .icon-card:first-child:nth-last-child(n+4), .icon-card:first-child:nth-last-child(n+4)~.icon-card { min-width: unset; width: 260px } } .icon-card:first-child:nth-last-child(n+4) .card, .icon-card:first-child:nth-last-child(n+4)~.icon-card .card { min-height: 217px } .icon-card.icon-card-link .card { min-height: 204px } @media(max-width:1068px) { .icon-card.icon-card-link .card { min-height: 244px } } @media(max-width:734px) { .icon-card.icon-card-link .card { min-height: 228px } } .icon-card.icon-card-link .tile-content { padding-bottom: 48px } @media(max-width:1068px) { .icon-card.icon-card-link .tile-content { padding-inline-end: 56px } } @media(max-width:734px) { .icon-card.icon-card-link .tile-content { padding-inline-end: 24px } } .section:has(.index) { background-color: #fafafc } .theme-dark .section:has(.index) { background-color: #161617 } @keyframes link-in { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: translateY(0) } } .index { --motion-highest-index-group-with-elevated: 0; --motion-group-index: 0; --motion-link-index: 0; --motion-total-link-index: 0; --motion-duration-long: 320ms; --motion-delay-medium: 80ms; --motion-delay-short: 40ms; --motion-delay-rapid: 20ms } .no-js .index { display: none } .index.animate { visibility: visible } html.no-reduced-motion .index.animate .index-item-base, html.no-reduced-motion .index.animate .index-item-elevated, html.no-reduced-motion .index.animate .index-list-title { animation-name: link-in } .index .index-title { margin-bottom: 53px } @media(max-width:1068px) { .index .index-title { margin-bottom: 38px } } @media(max-width:734px) { .index .index-title { margin-bottom: 34px } } .index .index-list-title { color: #6e6e73; margin-bottom: 15px } .theme-dark .index .index-list-title { color: #86868b } @media(max-width:734px) { .index .index-list-title { margin-bottom: 12px } } .index .index-groups { display: flex; flex-wrap: wrap } .index .index-group { padding-inline-end: 44px; max-width: 25%; box-sizing: border-box } @media(max-width:1068px) { .index .index-group { max-width: 50% } } @media(max-width:734px) { .index .index-group { width: 100%; max-width: none; padding-inline-end: 0 } } .index .index-group:first-of-type { padding-inline-end: 88px; max-width: 50% } @media(min-width:735px)and (max-width:1068px) { .index .index-group:first-of-type { box-sizing: initial; width: 100%; padding-inline-end: 25%; max-width: 75% } } @media(max-width:734px) { .index .index-group:first-of-type { max-width: none; padding-inline-end: 0 } } .index .index-group:first-of-type .index-list-title { margin-bottom: 14px } @media(max-width:734px) { .index .index-group:first-of-type .index-list-title { margin-bottom: 11px } } @media(max-width:1068px) { .index .index-group+.index-group { margin-top: 42px } } @media(max-width:734px) { .index .index-group+.index-group { margin-top: 26px } .index .index-group+.index-group .index-list-title { margin-top: -1px } } .index [dir=rtl] .index-group { float: right } .index .index-list { list-style-type: none; margin-inline-start: 0 } .index .index-item-base { margin-bottom: 14px } @media(max-width:734px) { .index .index-item-base { margin-bottom: 11px } } .index .index-item-elevated { margin-bottom: 11px } @media(min-width:1069px) { .index .index-item-elevated:first-of-type { margin-top: -1px } } @media(max-width:1068px) { .index .index-item-elevated { margin-bottom: 9px } } @media(max-width:734px) { .index .index-item-elevated { margin-bottom: 8px } } .index .index-item-elevated+.index-item-base { margin-top: 31px } @media(max-width:1068px) { .index .index-item-elevated+.index-item-base { margin-top: 22px } } @media(max-width:734px) { .index .index-item-elevated+.index-item-base { margin-top: 19px } } .index .index-link { color: #333336 } .theme-dark .index .index-link { color: #e8e8ed } .index .index-link:hover .icon-copy { text-decoration: none } html.no-reduced-motion .index .index-item-base, html.no-reduced-motion .index .index-item-elevated, html.no-reduced-motion .index .index-list-title { --animation-delay: calc(var(--motion-delay-medium) + min(var(--motion-group-index), var(--motion-highest-index-group-with-elevated))*var(--motion-delay-medium) + max(var(--motion-group-index) - var(--motion-highest-index-group-with-elevated), 0)*var(--motion-delay-short) + var(--motion-link-index)*var(--motion-delay-rapid)); opacity: 0; transform: translateY(-4px); will-change: opacity, transform; animation-delay: calc(var(--animation-delay) + 0.2s); animation-duration: var(--motion-duration-long); animation-fill-mode: both; animation-timing-function: ease } @media(max-width:734px) { html.no-reduced-motion .index .index-item-base, html.no-reduced-motion .index .index-item-elevated, html.no-reduced-motion .index .index-list-title { --animation-delay: calc(var(--motion-delay-medium) + var(--motion-total-link-index)*var(--motion-delay-rapid)) } } html.no-inline-media .inline-media-component-container .video-wrapper picture:first-of-type { position: relative; opacity: 1; visibility: visible } html.no-inline-media .inline-media-component-container .video-wrapper picture:not(:first-of-type), html.no-inline-media .inline-media-component-container .video-wrapper video { display: none } .inline-media-component-container { position: relative; width: 100%; display: flex; justify-content: center; align-items: center } @media(min-width:1441px) { .inline-media-component-container { max-width: var(--global-content-max-width-hero) } } html.reduced-motion .inline-media-component-container:not(.with-media-ui) picture:first-of-type { position: relative; opacity: 1; visibility: visible } html.reduced-motion .inline-media-component-container:not(.with-media-ui) picture:not(:first-of-type), html.reduced-motion .inline-media-component-container:not(.with-media-ui) video { display: none } .inline-media-component-container .video-wrapper { display: grid; position: relative; width: 100%; height: 100%; isolation: isolate } .inline-media-component-container .video-wrapper:focus-visible { outline: unset } .inline-media-component-container .video-wrapper::after { content: ""; left: 0; background: rgba(0, 0, 0, 0) } .inline-media-component-container .video-wrapper::after, .inline-media-component-container .video-wrapper video { display: block; position: absolute; height: 100%; width: 100%; top: 0 } html.safari .inline-media-component-container .video-wrapper video { mask-image: radial-gradient(white, white) } html.no-js .inline-media-component-container .video-wrapper video { display: none } .inline-media-component-container .video-wrapper .end-frame, .inline-media-component-container .video-wrapper .fallback-frame, .inline-media-component-container .video-wrapper .start-frame { position: absolute; opacity: 0 } html.no-touch .inline-media-component-container .video-wrapper .end-frame, html.no-touch .inline-media-component-container .video-wrapper .fallback-frame, html.no-touch .inline-media-component-container .video-wrapper .start-frame { pointer-events: none } .inline-media-component-container .video-wrapper .end-frame img, .inline-media-component-container .video-wrapper .fallback-frame img, .inline-media-component-container .video-wrapper .start-frame img { width: 100% } .inline-media-component-container .video-wrapper .start-frame { z-index: 4 } html.no-js .inline-media-component-container .video-wrapper .start-frame { position: relative } .inline-media-component-container .video-wrapper .end-frame { z-index: 3 } .inline-media-component-container .video-wrapper .fallback-frame { z-index: 2; visibility: hidden } .inline-media-component-container .video-wrapper .start-frame.webm, .inline-media-component-container .video-wrapper:not(.loaded, .loading-disabled, .media-unloaded) .start-frame { opacity: 1; pointer-events: all } .inline-media-component-container .video-wrapper.ended .end-frame, .inline-media-component-container .video-wrapper.media-unloaded .end-frame { opacity: 1; pointer-events: all; transition: opacity .4s ease-out } html.no-touch .inline-media-component-container .video-wrapper.ended .end-frame, html.no-touch .inline-media-component-container .video-wrapper.media-unloaded .end-frame { pointer-events: all } .inline-media-component-container.fallback picture:first-of-type { position: relative; opacity: 1; visibility: visible } .inline-media-component-container.fallback picture:not(:first-of-type), .inline-media-component-container.fallback video { display: none } .inline-media-component-container.fluid .video-wrapper picture.end-frame, .inline-media-component-container.fluid .video-wrapper picture.fallback-frame, .inline-media-component-container.fluid .video-wrapper picture.start-frame, .inline-media-component-container.fluid .video-wrapper picture img { width: 100%; height: 100% } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button { position: absolute; top: 20px; inset-inline-end: 0; z-index: 2; --inline-media-playpause-icon-color: rgb(0 0 0/56%); --inline-media-playpause-icon-color-hover: rgb(0 0 0/64%); --inline-media-playpause-scrim-color: rgb(210 210 215/64%); --inline-media-playpause-icon-color: rgba(0, 0, 0, 0.56); --inline-media-playpause-icon-color-hover: rgba(0, 0, 0, 0.72); --inline-media-playpause-scrim-color: rgba(210, 210, 215, 0.64); --inline-media-playpause-scrim-color-hover: rgba(223, 223, 227, 0.6976); --inline-media-playpause-scrim-color-active: rgba(193, 193, 198, 0.6544) } html.no-js .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button { display: none } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button.loading-empty .play-pause-button { opacity: 0 } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button.loading .play-pause-button { pointer-events: none; opacity: 1 } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button.loading .play-pause-button::after { mask: none; background: no-repeat 50%/contain rgba(0, 0, 0, 0); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyMXYyMUgweiIvPjxwYXRoIGQ9Ik0xMC41IDMuNWExIDEgMCAwMTEgMXYyYTEgMSAwIDAxLTIgMHYtMmExIDEgMCAwMTEtMXoiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xNS40NSA1LjU1YTEgMSAwIDAxMCAxLjQxTDE0IDguMzhBMSAxIDAgMTExMi42MiA3TDE0IDUuNTVhMSAxIDAgMDExLjQ1IDB6IiBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjEiLz48cGF0aCBkPSJNMTcuNSAxMC41YTEgMSAwIDAxLTEgMWgtMmExIDEgMCAwMTAtMmgyYTEgMSAwIDAxMSAxeiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTE1LjQ1IDE1LjQ1YTEgMSAwIDAxLTEuNDEgMEwxMi42MiAxNEExIDEgMCAxMTE0IDEyLjYyTDE1LjQ1IDE0YTEgMSAwIDAxMCAxLjQ1eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTEwLjUgMTcuNWExIDEgMCAwMS0xLTF2LTJhMSAxIDAgMDEyIDB2MmExIDEgMCAwMS0xIDF6IiBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJNNS41NSAxNS40NWExIDEgMCAwMTAtMS40MUw3IDEyLjYyQTEgMSAwIDExOC4zOCAxNEw3IDE1LjQ1YTEgMSAwIDAxLTEuNDUgMHoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNiIvPjxwYXRoIGQ9Ik0zLjUgMTAuNWExIDEgMCAwMTEtMWgyYTEgMSAwIDAxMCAyaC0yYTEgMSAwIDAxLTEtMXoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNyIvPjxwYXRoIGQ9Ik01LjU1IDUuNTVhMSAxIDAgMDExLjQ1IDBMOC4zOCA3QTEgMSAwIDAxNyA4LjM4TDUuNTUgN2ExIDEgMCAwMTAtMS40NXoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuOSIvPjwvc3ZnPg=="); position: absolute; top: 50%; left: 50%; translate: -50% -50%; transform-origin: center; width: 21px; height: 21px; animation: inline-media-spin .85s steps(8) infinite } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button.loading .play-pause-button:active::after, .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button.loading .play-pause-button:hover::after { background-color: rgba(0, 0, 0, 0) } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button.loaded.playing .play-pause-button::after { mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTIzLjUgMTIuODkzdjEwLjIxNGMwIC43NjktLjU5NyAxLjM5My0xLjMzMyAxLjM5M2gtMS4zMzRjLS43MzYgMC0xLjMzMy0uNjI0LTEuMzMzLTEuMzkzVjEyLjg5M2MwLS43Ny41OTctMS4zOTMgMS4zMzMtMS4zOTNoMS4zMzRjLjczNiAwIDEuMzMzLjYyNCAxLjMzMyAxLjM5M3pNMTUuMTY3IDExLjVoLTEuMzM0Yy0uNzM2IDAtMS4zMzMuNjI0LTEuMzMzIDEuMzkzdjEwLjIxNGMwIC43NjkuNTk3IDEuMzkzIDEuMzMzIDEuMzkzaDEuMzM0Yy43MzYgMCAxLjMzMy0uNjI0IDEuMzMzLTEuMzkzVjEyLjg5M2MwLS43Ny0uNTk3LTEuMzkzLTEuMzMzLTEuMzkzeiIvPjwvc3ZnPg==") } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button.loaded.ended .play-pause-button::after { mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTIzLjUgMTYuNUExLjUgMS41IDAgMDAyMiAxOGMwIDIuMjA2LTEuNzk0IDQtNCA0cy00LTEuNzk0LTQtNGMwLTEuOTkgMS40NjQtMy42MyAzLjM2OS0zLjkzNmwtLjM3Ni4zNzVhMS41IDEuNSAwIDEwMi4xMjEgMi4xMjJsMi45MjktMi45M2ExLjUgMS41IDAgMDAwLTIuMTJsLTMuMDcxLTMuMDcyYTEuNSAxLjUgMCAxMC0yLjEyMSAyLjEyMmwuNDczLjQ3M0MxMy43OCAxMS4zNzUgMTEgMTQuMzY4IDExIDE4YzAgMy44NiAzLjE0IDcgNyA3czctMy4xNCA3LTdhMS41IDEuNSAwIDAwLTEuNS0xLjV6Ii8+PC9zdmc+") } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button.loaded .play-pause-button { pointer-events: all; opacity: 1 } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button .play-pause-button { position: relative; display: flex; justify-self: flex-end; align-self: flex-end; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin-inline-end: 20px; margin-bottom: 20px; border: none; background: none; background-color: var(--inline-media-playpause-scrim-color); background-repeat: no-repeat; opacity: 0; transition: opacity 100ms linear, transform .2s ease; cursor: pointer; pointer-events: none } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button .play-pause-button::after { content: ""; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTE0IDIyLjU4N3YtOS4xNjhjMC0uOTM0LjU2My0xLjQyNSAxLjI2LTEuNDI1LjM4NiAwIC42MjcuMDY1Ljk2Ny4yNzNsNy40NjggNC40MDNjLjY2Mi4zOSAxLjAyLjcwNyAxLjAyIDEuMzI0IDAgLjYxOC0uMzU4LjkzNS0xLjAyIDEuMzI1bC03LjQ2OCA0LjQwM2MtLjM0LjIwOC0uNTgxLjI3My0uOTY2LjI3My0uNjk4IDAtMS4yNjEtLjQ3My0xLjI2MS0xLjQwOCIvPjwvc3ZnPg=="); mask-size: cover; display: inline-block; width: 36px; height: 36px; position: absolute; background-color: var(--inline-media-playpause-icon-color) } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button .play-pause-button:disabled { pointer-events: none; opacity: .32 } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button .play-pause-button:hover { background-color: var(--inline-media-playpause-scrim-color-hover) } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button .play-pause-button:hover::after { background-color: var(--inline-media-playpause-icon-color-hover) } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button .play-pause-button:active { background-color: var(--inline-media-playpause-scrim-color-active); transform: scale(0.95) } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button .play-pause-button:active::after { background-color: var(--inline-media-playpause-icon-color) } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button .play-pause-button:focus-visible { outline: none } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button .play-pause-button:focus-visible::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: inherit; box-sizing: border-box; outline: 2px solid #0071e3; outline-offset: 3px } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button .play-pause-button { border-radius: 50% } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button .play-pause-button:focus-visible { box-shadow: 0 0 0 3px #000, 0 0 0 5px #0071e3 } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button .play-pause-button:not(:focus-visible)::before { border: none } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button.loading { --inline-media-playpause-scrim-color: rgb(0 0 0/0%) } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button.loading .play-pause-button:hover::after { --inline-media-playpause-icon-color-hover: rgb(0 0 0/0%) } html.no-reduced-motion .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button.inline-media-ui-replay-only { opacity: 0; visibility: hidden; pointer-events: none } html.no-reduced-motion .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button .inline-media-ui-button.inline-media-ui-replay-only.loaded.ended { transition: opacity 400ms ease-in-out; opacity: 1; visibility: visible; pointer-events: all } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button.with-media-ui-dark:not(.with-media-ui-light) .inline-media-ui-button, .theme-dark .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button:not(.with-media-ui-light) .inline-media-ui-button { --inline-media-playpause-icon-color: rgba(255, 255, 255, 0.8); --inline-media-playpause-icon-color-hover: rgb(255, 255, 255); --inline-media-playpause-scrim-color: rgba(66, 66, 69, 0.72); --inline-media-playpause-scrim-color-hover: rgba(73, 73, 76, 0.7256); --inline-media-playpause-scrim-color-active: rgba(57, 57, 60, 0.7424) } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button.with-media-ui-dark:not(.with-media-ui-light) .inline-media-ui-button.loading, .theme-dark .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button:not(.with-media-ui-light) .inline-media-ui-button.loading { --inline-media-playpause-scrim-color: rgb(0 0 0/0%) } .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button.with-media-ui-dark:not(.with-media-ui-light) .inline-media-ui-button.loading .play-pause-button:hover::after, .theme-dark .inline-media-component-container:not(.fallback, .media-unloaded).with-media-ui-button:not(.with-media-ui-light) .inline-media-ui-button.loading .play-pause-button:hover::after { --inline-media-playpause-icon-color-hover: rgb(0 0 0/0%) } .inline-media-component-container.fallback.with-media-ui .inline-media-ui, .inline-media-component-container.hide-ui.with-media-ui .inline-media-ui, .inline-media-component-container.media-unloaded.with-media-ui .inline-media-ui { display: none } .inline-media-component-container.with-media-ui-text { --inline-media-text-button-spacing-top: 40px; --inline-media-text-button-spacing-bottom: 60px; margin-bottom: calc(var(--inline-media-text-button-spacing-top) + var(--inline-media-text-button-spacing-bottom)) } @media(max-width:1068px) { .inline-media-component-container.with-media-ui-text { --inline-media-text-button-spacing-bottom: 50px } } @media(max-width:734px) { .inline-media-component-container.with-media-ui-text { --inline-media-text-button-spacing-bottom: 40px } } .inline-media-component-container.with-media-ui-text.fallback { margin-bottom: var(--inline-media-text-button-spacing-bottom) } .inline-media-component-container.with-media-ui-text .inline-media-ui-text { display: flex; z-index: 20; position: absolute; bottom: calc(var(--inline-media-text-button-spacing-top, 40px)*-1); width: 100%; justify-content: center; opacity: 0; pointer-events: none } .inline-media-component-container.with-media-ui-text .inline-media-ui-text.ended, .inline-media-component-container.with-media-ui-text .inline-media-ui-text.loaded, .inline-media-component-container.with-media-ui-text .inline-media-ui-text.loading, .inline-media-component-container.with-media-ui-text .inline-media-ui-text.playing, .inline-media-component-container.with-media-ui-text .inline-media-ui-text:not(.loading-empty) { opacity: 1; pointer-events: all } .inline-media-component-container.with-media-ui-text .inline-media-ui-text .play-pause-button { text-align: center; color: #06c } .theme-dark .inline-media-component-container.with-media-ui-text .inline-media-ui-text .play-pause-button { color: #2997ff } .inline-media-component-container.with-media-ui-text .inline-media-ui-text .play-pause-button::after, .inline-media-component-container.with-media-ui-text .inline-media-ui-text .play-pause-button::before { display: none } .inline-media-component-container.with-media-ui-text .inline-media-ui-text .play-pause-button:active { transform: none } .inline-media-component-container.with-media-ui-text .inline-media-ui-text .play-pause-button:focus-visible { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: var(--sk-focus-offset, 1px) } .inline-media-component-container.with-media-ui-text .inline-media-ui-text .play-pause-button:hover .text { text-decoration: underline } .inline-media-component-container.with-media-ui-text .inline-media-ui-text .ended, .inline-media-component-container.with-media-ui-text .inline-media-ui-text .paused, .inline-media-component-container.with-media-ui-text .inline-media-ui-text .playing { display: none; opacity: 0; transition: opacity 400ms ease-out } .inline-media-component-container.with-media-ui-text .inline-media-ui-text.ended .ended, .inline-media-component-container.with-media-ui-text .inline-media-ui-text.paused .paused, .inline-media-component-container.with-media-ui-text .inline-media-ui-text.playing .playing { display: block; opacity: 1 } .inline-media-component-container.with-media-ui-text .inline-media-ui-text.disabled { opacity: 0; pointer-events: none } html.no-reduced-motion .inline-media-component-container.with-media-ui-text .inline-media-ui-text.inline-media-ui-replay-only { opacity: 0; visibility: hidden; pointer-events: none } html.no-reduced-motion .inline-media-component-container.with-media-ui-text .inline-media-ui-text.inline-media-ui-replay-only.loaded.ended { transition: opacity 400ms ease-in-out; opacity: 1; visibility: visible; pointer-events: all } .inline-media-component-container.with-media-ui-text.fallback .inline-media-ui-text { display: none } .media-card-set { --shared-media-gallery-transition-duration: 1s; --shared-media-gallery-responsive-content-absolute-max-width: var(--global-content-max-width); --shared-media-gallery-responsive-content-absolute-min-width: 280px; --shared-media-gallery-viewport-content: max(87.5vw - var(--global-scrollbar-width), var(--shared-media-gallery-responsive-content-absolute-min-width)); --shared-media-gallery-padding: max(6.25vw, (100vw - var(--shared-media-gallery-responsive-content-absolute-max-width))/2, env(safe-area-inset-left), env(safe-area-inset-right)); --shared-media-gallery-width: min(var(--shared-media-gallery-viewport-content), var(--shared-media-gallery-responsive-content-absolute-max-width)); --shared-media-gallery-height: 680px } @media(max-width:1068px) { .media-card-set { --shared-media-gallery-height: 628px } } @media(max-width:734px) { .media-card-set { --shared-media-gallery-height: 480px; --shared-media-gallery-width-single: max(min(var(--shared-media-gallery-responsive-content-absolute-max-width), 87.5vw - var(--global-scrollbar-width)), var(--shared-media-gallery-responsive-content-absolute-min-width)); --shared-media-gallery-viewport-content: calc(var(--shared-media-gallery-width-single) - 20px) } } .media-card-set .scroll-container { position: relative; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x mandatory; padding-bottom: var(--staggered-translate-y, 30px); margin-bottom: calc(var(--staggered-translate-y, 30px)*-1); scrollbar-width: none } @media(max-width:734px) { .media-card-set .scroll-container { scroll-padding-inline-start: var(--shared-media-gallery-padding) } } .media-card-set .scroll-container::-webkit-scrollbar { display: none; width: 0; background: rgba(0, 0, 0, 0) } .media-card-set .item-container { margin: 0 auto; display: grid; grid-gap: 20px; grid-auto-flow: column; width: -moz-fit-content; width: fit-content; padding: 0 var(--shared-media-gallery-padding); list-style-type: none } .media-card-set .gallery-item { display: flex; width: var(--shared-media-gallery-width); min-height: var(--shared-media-gallery-height); scroll-snap-align: center; list-style-type: none } html.no-touch .media-card-set .gallery-item:not(.current, :only-child):hover { cursor: pointer } @media(max-width:734px) { .media-card-set .gallery-item { scroll-snap-align: start } .media-card-set .gallery-item:only-child { width: var(--shared-media-gallery-width-single) } } .media-card-set .card-container:focus-visible, .media-card-set .card-set:focus-visible, .media-card-set .gallery-item:focus-visible, .media-card-set .item-container:focus-visible, .media-card-set .scroll-container:focus-visible { outline: unset } [data-component-list*=MediaCardGallery]:not([data-component-list*=MediaCardGalleryControl]), [data-media-card-gallery] { --autoplay-persist-duration: 6.15s; --autoplay-progress: 0; --animation-duration: 5s; --animation-reset-duration: 0.2s; --frame-transition-duration: 200ms; --scroll-gallery-scrollbar-height: 15px; --card-color: var(--global-section-background-color-alt); --card-color-dark: var(--global-section-background-color-alt-dark); --caption-color: rgba(0, 0, 0, 0.88); --caption-color-dark: rgba(255, 255, 255, 0.92); --caption-offset: 120px; --caption-offset-delay: 0s; --caption-offset-duration: calc(var(--autoplay-transition-duration)*0.6); --caption-width: 584px; --caption-width-middle-aligned: 400px; --caption-top: 48px; --caption-left: 48px; --caption-offset-x: var(--caption-left); --caption-offset-y: var(--caption-top); --current-viewport: large } @media(max-width:1068px) { [data-component-list*=MediaCardGallery]:not([data-component-list*=MediaCardGalleryControl]), [data-media-card-gallery] { --caption-width: 555px; --caption-width-middle-aligned: 320px; --caption-top: 44px; --caption-left: 44px } } @media(max-width:734px) { [data-component-list*=MediaCardGallery]:not([data-component-list*=MediaCardGalleryControl]), [data-media-card-gallery] { --caption-width: calc(100% - var(--caption-left)); --caption-width-middle-aligned: var(--caption-width); --caption-top: 32px; --caption-left: 32px } } html.text-zoom [data-component-list*=MediaCardGallery]:not([data-component-list*=MediaCardGalleryControl]), html.text-zoom [data-media-card-gallery] { --caption-width: calc(100% - var(--caption-left) - 40px) } @media(max-width:1068px) { [data-component-list*=MediaCardGallery]:not([data-component-list*=MediaCardGalleryControl]), [data-media-card-gallery] { --current-viewport: medium } } @media(max-width:734px) { [data-component-list*=MediaCardGallery]:not([data-component-list*=MediaCardGalleryControl]), [data-media-card-gallery] { --current-viewport: small } } .dotnav { --sk-dotnav-background: rgba(0, 0, 0, 0.42); --sk-dotnav-background-hover: rgba(0, 0, 0, 0.54); --sk-dotnav-background-current: rgba(0, 0, 0, 0.8); --sk-dotnav-size: 8px; --sk-dotnav-margin-block: 0; --sk-dotnav-margin-inline: 8px; text-align: center; box-sizing: border-box } .dotnav-items { margin: 0; list-style: none; display: inline-flex; justify-content: center } .dotnav-item { list-style: none; margin-block: var(--sk-dotnav-margin-block); margin-inline: var(--sk-dotnav-margin-inline); position: relative } .dotnav-item, .dotnav-link { width: var(--sk-dotnav-size); height: var(--sk-dotnav-size) } .dotnav-link { top: 0; left: 0; outline: none; position: absolute; border-radius: 50%; box-sizing: border-box; padding: 0; background: var(--sk-dotnav-background) } .dotnav-link:hover { background: var(--sk-dotnav-background-hover) } .dotnav-link:focus-visible { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: var(--sk-focus-offset-container, 3px) } .dotnav .current.dotnav-item .dotnav-link, .dotnav .current.dotnav-link { cursor: default; background: var(--sk-dotnav-background-current) } .dotnav-dark, .theme-light .dotnav.dotnav-dark { --sk-dotnav-background: rgba(255, 255, 255, 0.36); --sk-dotnav-background-hover: rgba(255, 255, 255, 0.48); --sk-dotnav-background-current: rgba(255, 255, 255, 0.8) } .dotnav-light, .theme-dark .dotnav.dotnav-light { --sk-dotnav-background: rgba(0, 0, 0, 0.42); --sk-dotnav-background-hover: rgba(0, 0, 0, 0.54); --sk-dotnav-background-current: rgba(0, 0, 0, 0.8) } [data-component-list=MediaCardGallery], [data-media-card-gallery] { --ltr: 1; width: 100%; margin: 0 auto } [data-component-list=MediaCardGallery] .media-gallery-wrapper, [data-media-card-gallery] .media-gallery-wrapper { width: 100%; margin: 0 auto } [data-component-list=MediaCardGallery] .media-gallery-wrapper.disable-scroll .scroll-container, [data-media-card-gallery] .media-gallery-wrapper.disable-scroll .scroll-container { overflow-x: hidden } [data-component-list=MediaCardGallery] .media-gallery, [data-media-card-gallery] .media-gallery { width: 100%; margin: 0 auto; position: relative; height: var(--shared-media-gallery-height) } html.no-js [data-component-list=MediaCardGallery] .media-gallery, html.no-js [data-media-card-gallery] .media-gallery { height: auto } [data-component-list=MediaCardGallery] .media-gallery.scroll-container.animating, [data-media-card-gallery] .media-gallery.scroll-container.animating { pointer-events: none } [data-component-list=MediaCardGallery] .media-gallery .gallery-item .card, [data-media-card-gallery] .media-gallery .gallery-item .card { background-color: var(--card-color-custom, var(--sk-tile-background)); display: grid; grid-template-areas: "stack" } html.no-js [data-component-list=MediaCardGallery] .media-gallery .gallery-item .card, html.no-js [data-media-card-gallery] .media-gallery .gallery-item .card { height: auto } html.safari.reduced-motion [data-component-list=MediaCardGallery] .media-gallery .gallery-item .media-block picture.positioned-media-element, html.safari.reduced-motion [data-media-card-gallery] .media-gallery .gallery-item .media-block picture.positioned-media-element { z-index: unset } html.reduced-motion [data-component-list=MediaCardGallery] .media-gallery .gallery-item .media-block[data-media-type=animation]+.caption-container, html.reduced-motion [data-media-card-gallery] .media-gallery .gallery-item .media-block[data-media-type=animation]+.caption-container { z-index: 0 } [data-component-list=MediaCardGallery] .media-gallery .gallery-item[data-ac-gallery-item], [data-media-card-gallery] .media-gallery .gallery-item[data-ac-gallery-item] { --animation-duration: 4s; --animation-position: 0 } [data-component-list=MediaCardGallery] .media-gallery .gallery-item .inline-media-ui-button, [data-media-card-gallery] .media-gallery .gallery-item .inline-media-ui-button { pointer-events: none; opacity: 0; transition: opacity .2s ease-out; top: auto; bottom: 0 } [data-component-list=MediaCardGallery] .media-gallery .gallery-item.current .inline-media-ui-button, [data-media-card-gallery] .media-gallery .gallery-item.current .inline-media-ui-button { pointer-events: all; opacity: 1 } html.no-touch [data-component-list=MediaCardGallery] .media-gallery .gallery-item:hover, html.no-touch [data-media-card-gallery] .media-gallery .gallery-item:hover { cursor: pointer } [data-component-list=MediaCardGallery] .media-gallery .gallery-item.theme-dark .card, [data-media-card-gallery] .media-gallery .gallery-item.theme-dark .card { background-color: var(--card-color-custom-dark, var(--sk-tile-background)) } [data-component-list=MediaCardGallery] .media-gallery .gallery-item.theme-dark .caption, [data-media-card-gallery] .media-gallery .gallery-item.theme-dark .caption { color: var(--caption-color-dark) } html.text-zoom [data-component-list=MediaCardGallery] .media-gallery .gallery-item.theme-dark .caption, html.text-zoom [data-media-card-gallery] .media-gallery .gallery-item.theme-dark .caption { background-color: rgba(0, 0, 0, .88) } [data-component-list=MediaCardGallery] .media-gallery .caption-container, [data-component-list=MediaCardGallery] .media-gallery .media-container, [data-media-card-gallery] .media-gallery .caption-container, [data-media-card-gallery] .media-gallery .media-container { grid-area: stack; width: var(--shared-media-gallery-width) } [data-component-list=MediaCardGallery] .media-gallery .media-block.ended video, [data-media-card-gallery] .media-gallery .media-block.ended video { transition: visibility 0s .5s; visibility: hidden } [data-component-list=MediaCardGallery] .media-gallery .caption-container, [data-media-card-gallery] .media-gallery .caption-container { --pin-offset-x: var(--caption-offset-x); --pin-offset-y: var(--caption-offset-y); display: flex } [data-component-list=MediaCardGallery] .media-gallery .caption-container.pin-bottom-center, [data-component-list=MediaCardGallery] .media-gallery .caption-container.pin-center-center, [data-component-list=MediaCardGallery] .media-gallery .caption-container.pin-top-center, [data-media-card-gallery] .media-gallery .caption-container.pin-bottom-center, [data-media-card-gallery] .media-gallery .caption-container.pin-center-center, [data-media-card-gallery] .media-gallery .caption-container.pin-top-center { text-align: center } [data-component-list=MediaCardGallery] .media-gallery .caption-container.pin-center-left .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.pin-center-right .caption, [data-media-card-gallery] .media-gallery .caption-container.pin-center-left .caption, [data-media-card-gallery] .media-gallery .caption-container.pin-center-right .caption { width: var(--caption-width-middle-aligned) } [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-bottom-center, [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-center-center, [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-top-center, [data-media-card-gallery] .media-gallery .caption-container.large-pin-bottom-center, [data-media-card-gallery] .media-gallery .caption-container.large-pin-center-center, [data-media-card-gallery] .media-gallery .caption-container.large-pin-top-center { text-align: center } [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-bottom-left, [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-bottom-right, [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-center-left, [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-center-right, [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-top-left, [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-top-right, [data-media-card-gallery] .media-gallery .caption-container.large-pin-bottom-left, [data-media-card-gallery] .media-gallery .caption-container.large-pin-bottom-right, [data-media-card-gallery] .media-gallery .caption-container.large-pin-center-left, [data-media-card-gallery] .media-gallery .caption-container.large-pin-center-right, [data-media-card-gallery] .media-gallery .caption-container.large-pin-top-left, [data-media-card-gallery] .media-gallery .caption-container.large-pin-top-right { text-align: unset } [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-center-left .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-center-right .caption, [data-media-card-gallery] .media-gallery .caption-container.large-pin-center-left .caption, [data-media-card-gallery] .media-gallery .caption-container.large-pin-center-right .caption { width: var(--caption-width-middle-aligned) } [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-bottom-center .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-bottom-left .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-bottom-right .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-center-center .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-top-center .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-top-left .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.large-pin-top-right .caption, [data-media-card-gallery] .media-gallery .caption-container.large-pin-bottom-center .caption, [data-media-card-gallery] .media-gallery .caption-container.large-pin-bottom-left .caption, [data-media-card-gallery] .media-gallery .caption-container.large-pin-bottom-right .caption, [data-media-card-gallery] .media-gallery .caption-container.large-pin-center-center .caption, [data-media-card-gallery] .media-gallery .caption-container.large-pin-top-center .caption, [data-media-card-gallery] .media-gallery .caption-container.large-pin-top-left .caption, [data-media-card-gallery] .media-gallery .caption-container.large-pin-top-right .caption { width: var(--caption-width) } @media(max-width:1068px) { [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-bottom-center, [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-center-center, [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-top-center, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-bottom-center, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-center-center, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-top-center { text-align: center } [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-bottom-left, [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-bottom-right, [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-center-left, [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-center-right, [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-top-left, [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-top-right, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-bottom-left, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-bottom-right, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-center-left, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-center-right, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-top-left, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-top-right { text-align: unset } [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-center-left .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-center-right .caption, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-center-left .caption, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-center-right .caption { width: var(--caption-width-middle-aligned) } [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-bottom-center .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-bottom-left .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-bottom-right .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-center-center .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-top-center .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-top-left .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.medium-pin-top-right .caption, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-bottom-center .caption, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-bottom-left .caption, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-bottom-right .caption, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-center-center .caption, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-top-center .caption, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-top-left .caption, [data-media-card-gallery] .media-gallery .caption-container.medium-pin-top-right .caption { width: var(--caption-width) } } @media(max-width:734px) { [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-bottom-center, [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-center-center, [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-top-center, [data-media-card-gallery] .media-gallery .caption-container.small-pin-bottom-center, [data-media-card-gallery] .media-gallery .caption-container.small-pin-center-center, [data-media-card-gallery] .media-gallery .caption-container.small-pin-top-center { text-align: center } [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-bottom-left, [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-bottom-right, [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-center-left, [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-center-right, [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-top-left, [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-top-right, [data-media-card-gallery] .media-gallery .caption-container.small-pin-bottom-left, [data-media-card-gallery] .media-gallery .caption-container.small-pin-bottom-right, [data-media-card-gallery] .media-gallery .caption-container.small-pin-center-left, [data-media-card-gallery] .media-gallery .caption-container.small-pin-center-right, [data-media-card-gallery] .media-gallery .caption-container.small-pin-top-left, [data-media-card-gallery] .media-gallery .caption-container.small-pin-top-right { text-align: unset } [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-center-left .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-center-right .caption, [data-media-card-gallery] .media-gallery .caption-container.small-pin-center-left .caption, [data-media-card-gallery] .media-gallery .caption-container.small-pin-center-right .caption { width: var(--caption-width-middle-aligned) } [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-bottom-center .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-bottom-left .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-bottom-right .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-center-center .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-top-center .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-top-left .caption, [data-component-list=MediaCardGallery] .media-gallery .caption-container.small-pin-top-right .caption, [data-media-card-gallery] .media-gallery .caption-container.small-pin-bottom-center .caption, [data-media-card-gallery] .media-gallery .caption-container.small-pin-bottom-left .caption, [data-media-card-gallery] .media-gallery .caption-container.small-pin-bottom-right .caption, [data-media-card-gallery] .media-gallery .caption-container.small-pin-center-center .caption, [data-media-card-gallery] .media-gallery .caption-container.small-pin-top-center .caption, [data-media-card-gallery] .media-gallery .caption-container.small-pin-top-left .caption, [data-media-card-gallery] .media-gallery .caption-container.small-pin-top-right .caption { width: var(--caption-width) } } [data-component-list=MediaCardGallery] .media-gallery .caption, [data-media-card-gallery] .media-gallery .caption { --parallax-offset: calc((var(--progress) - var(--autoplay-progress))*var(--ltr)); --parallax-x: calc((var(--parallax-offset) + var(--parallax-offset)*1.6)*var(--caption-offset)); --parallax-opacity: calc(1 - max(var(--parallax-offset), -1 * var(--parallax-offset))*3.2); color: var(--caption-color); width: var(--caption-width); margin: var(--pin-offset-y) var(--pin-offset-x); transform: translateX(var(--parallax-x)); opacity: var(--parallax-opacity) } html.text-zoom [data-component-list=MediaCardGallery] .media-gallery .caption, html.text-zoom [data-media-card-gallery] .media-gallery .caption { background-color: rgba(255, 255, 255, .92) } html.reduced-motion [data-component-list=MediaCardGallery] .media-gallery .caption, html.reduced-motion [data-media-card-gallery] .media-gallery .caption { transform: none; opacity: 1 } [data-component-list=MediaCardGallery] .dotnav-item.current, [data-component-list=MediaCardGallery] .dotnav-link.current, [data-media-card-gallery] .dotnav-item.current, [data-media-card-gallery] .dotnav-link.current { pointer-events: none } .ar-link { display: none } html.ar-quicklook .ar-link { display: inline } .ar-link a { position: relative } .ar-link a img { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0 0 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0 } .ar-link a span { position: relative } .ar-link a:not(.icon-arkit) span::after, .ar-link a:not(.icon-arkit) span::before { font-family: SF Pro Icons; color: inherit; display: inline-block; font-style: normal; font-weight: inherit; font-size: inherit; line-height: 1; text-decoration: underline; position: relative; z-index: 1; alt: ""; text-decoration: none } .ar-link a:not(.icon-arkit) span::before { display: none } .ar-link a:not(.icon-arkit) span::after, .ar-link a:not(.icon-arkit) span::before { content: "" } .ar-link a:not(.icon-arkit) span::after { padding-inline-start: .24em; top: 0 } .section-header { display: flex; justify-content: space-between; padding-bottom: 80px; grid-row-gap: 20px; row-gap: 20px; grid-column-gap: 120px; column-gap: 120px } @media(min-width:735px) { .section-header { align-items: flex-end; grid-column-gap: 80px; column-gap: 80px } } @media(max-width:1068px) { .section-header { padding-bottom: 64px } } @media(max-width:734px) { .section-header { flex-direction: column; padding-bottom: 48px; align-content: flex-start; grid-gap: 16px; gap: 16px } } .section-header .section-header-headline { flex-grow: 1 } @media(min-width:735px) { .section-header .section-header-headline { max-width: 75%; min-width: 50% } } @media(max-width:734px) { .section-header .section-header-headline { width: 100% } } .section-header .visuallyhidden+.section-header-headline { margin-top: 0 } .section-header .section-header-cta-list-wrapper { display: inline-block; padding-bottom: 4px; margin-top: 0 } @media(max-width:1068px) { .section-header .section-header-cta-list-wrapper { padding-bottom: 2px } } .section-header .section-header-cta-list { display: flex; flex-wrap: wrap; flex-direction: row; grid-column-gap: 34px; column-gap: 34px; grid-row-gap: 6px; row-gap: 6px } @media(max-width:734px) { .section-header .section-header-cta-list { grid-column-gap: 28px; column-gap: 28px; grid-row-gap: 5px; row-gap: 5px } } .section-header .section-header-cta-item { list-style-type: none; display: inline } .tout-disclaimer { color: var(--sk-glyph-gray-secondary); margin-top: 9px } @media(min-width:735px) { .tout-group { text-align: center } } .tout-group .tout+.tout { margin-top: 40px } .tout-icon-wrapper { --icon-wrapper-height: 56px; height: var(--icon-wrapper-height); display: flex; align-items: center } .tout-list { margin-inline-start: 0 } .tout-list li { margin-top: .8em; list-style-type: none } .tout-list li:first-child { margin-top: 0 } .tout:has(.tout-scrim) { justify-content: center } .stat-dark, .theme-light .stat.stat-dark { --sk-stat-value-color: rgb(245, 245, 247); --sk-stat-caption-color: rgb(245, 245, 247) } .stat-light, .theme-dark .stat.stat-light { --sk-stat-value-color: rgb(29, 29, 31); --sk-stat-caption-color: rgb(29, 29, 31) } .tout .stat { margin-inline-end: 0; width: 100% } .tout .stat .stat-caption { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-caption:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-caption:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-caption:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-caption:lang(zh) { letter-spacing: 0em } .tout .stat .stat-caption:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-caption:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-caption:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-caption:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-caption:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; white-space: normal; margin: 6px 0 0; inset-inline-start: -0.04em } .tout .stat .stat-value:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh) { line-height: 1.25 } .tout .stat .stat-value:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .tout .stat .stat-value { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh) { line-height: 1.2916666667 } .tout .stat .stat-value:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .tout .stat .stat-value { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh) { line-height: 1.3334033333 } .tout .stat .stat-value:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tout .stat .stat-value:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .tout .stat .stat-value { margin-top: 4px } } .tout .stat .stat-value+.stat-caption { position: relative; margin-top: 8px } @media(max-width:734px) { .tout .stat .stat-value+.stat-caption { margin-top: 6px } } .tout .stat .stat-content { margin-bottom: 2px; padding-bottom: 0 } @media(max-width:734px) { .tout .stat .stat-content { margin-bottom: 4px } } .tout { --tout-max-width: 100%; display: flex; flex-direction: column; width: 100%; max-width: var(--tout-max-width) } @media(min-width:735px) { .tout { align-items: center; margin-inline: auto } } .tout-icon-wrapper+* { margin-top: 1.1em } @media(max-width:734px) { .tout-icon-wrapper+* { margin-top: .8em } } .tout-icon-wrapper+.tout-subheading { margin-top: .5em } .tout-subheading+* { margin-top: .8em } .product-tile-ctas { --button-height: 36px; margin-top: 38px } @media(min-width:735px) { .product-tile-ctas { --button-height: 42px } } @media(max-width:734px) { .product-tile-ctas { margin-top: 39px } } .product-tile-ctas-stacked { margin-top: 37px } @media(min-width:735px) { .product-tile-ctas-stacked .product-tile-current, .product-tile-ctas-stacked .product-tile-link { margin-left: auto; margin-right: auto } } .product-tile-ctas .product-tile-link { width: -moz-fit-content; width: fit-content } .product-tile-ctas .product-tile-current { --sk-button-color: rgb(255, 255, 255); --sk-button-color-hover: var(--sk-button-color); --sk-button-color-active: var(--sk-button-color-hover); --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.42); --sk-button-border-color: transparent; --sk-button-border-radius: 980px; --sk-button-margin-horizontal: 14px; --sk-button-margin-vertical: 14px; --sk-button-min-width-basis: 60px; --sk-button-padding-horizontal: 16px; --sk-button-padding-vertical: 9px; --sk-button-border-width: 1px; --sk-button-box-sizing: content-box; --sk-button-width: auto; --sk-button-display: inline-block; font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; background: var(--sk-button-background); color: var(--sk-button-color); padding-block: calc(var(--sk-button-padding-vertical) - var(--sk-button-border-width)); padding-inline: calc(var(--sk-button-padding-horizontal) - var(--sk-button-border-width)); border-radius: var(--sk-button-border-radius); border: var(--sk-button-border-width) solid var(--sk-button-border-color); width: var(--sk-button-width); min-width: calc(var(--sk-button-min-width-basis) - var(--sk-button-padding-horizontal)*2); cursor: pointer; display: var(--sk-button-display); box-sizing: var(--sk-button-box-sizing); text-align: center; text-decoration: none; white-space: nowrap; display: flex; align-items: center; color: var(--sk-glyph-gray-secondary-alt); cursor: auto; padding-inline: 0; white-space: normal; text-align: initial; max-height: var(--button-height); box-sizing: border-box } .product-tile-ctas .product-tile-current:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .product-tile-current:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .product-tile-current:lang(ko) { letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .product-tile-current:lang(zh) { letter-spacing: 0em } .product-tile-ctas .product-tile-current:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .product-tile-current:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .product-tile-current:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .product-tile-current:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .product-tile-current:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .product-tile-current:hover { background: var(--sk-button-background-hover, var(--sk-button-background)); color: var(--sk-button-color-hover, var(--sk-button-color)); text-decoration: none; border-color: rgba(0, 0, 0, 0) } .product-tile-ctas .product-tile-current:focus-visible { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: var(--sk-focus-offset-container, 3px) } .product-tile-ctas .product-tile-current:active { background: var(--sk-button-background-active, var(--sk-button-background)); color: var(--sk-button-color-active, var(--sk-button-color)); outline: none } .product-tile-ctas .product-tile-current.disabled, .product-tile-ctas .product-tile-current:disabled { pointer-events: none; opacity: var(--sk-button-disabled-opacity) } @media(min-width:735px) { .product-tile-ctas .product-tile-current { text-align: center } } .product-tile-ctas .product-tile-current:active, .product-tile-ctas .product-tile-current:focus-visible, .product-tile-ctas .product-tile-current:hover { background: none; color: var(--sk-glyph-gray-secondary-alt); border-color: rgba(0, 0, 0, 0); outline: none } .product-tile-ctas .button, .product-tile-ctas button { flex-shrink: 0 } @media(min-width:735px) { .product-tile-ctas .button, .product-tile-ctas .product-tile-current, .product-tile-ctas button { --sk-button-padding-horizontal: 22px; --sk-button-padding-vertical: 12px; --sk-button-min-width-basis: 70px; --sk-button-margin-horizontal: 18px; --sk-button-margin-vertical: 18px; font-size: 17px; line-height: 1.1764805882; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .button:lang(ar), .product-tile-ctas .product-tile-current:lang(ar), .product-tile-ctas button:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .button:lang(ja), .product-tile-ctas .product-tile-current:lang(ja), .product-tile-ctas button:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .button:lang(ko), .product-tile-ctas .product-tile-current:lang(ko), .product-tile-ctas button:lang(ko) { letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .button:lang(zh), .product-tile-ctas .product-tile-current:lang(zh), .product-tile-ctas button:lang(zh) { letter-spacing: 0em } .product-tile-ctas .button:lang(th), .product-tile-ctas .product-tile-current:lang(th), .product-tile-ctas button:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .button:lang(zh-CN), .product-tile-ctas .product-tile-current:lang(zh-CN), .product-tile-ctas button:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .button:lang(zh-HK), .product-tile-ctas .product-tile-current:lang(zh-HK), .product-tile-ctas button:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .button:lang(zh-MO), .product-tile-ctas .product-tile-current:lang(zh-MO), .product-tile-ctas button:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .product-tile-ctas .button:lang(zh-TW), .product-tile-ctas .product-tile-current:lang(zh-TW), .product-tile-ctas button:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .product-tile-ctas.product-tile-ctas-neutral a:not(.button) { color: var(--sk-body-text-color) } .product-tile:has(.tout-group) .product-tile-ctas { margin-bottom: 54px } @media(max-width:1068px) { .product-tile:has(.tout-group) .product-tile-ctas { margin-bottom: 46px } } @media(max-width:734px) { .product-tile:has(.tout-group) .product-tile-ctas { margin-bottom: 53px } } .colorindicator { --sk-colorindicator-background-color: rgb(245, 245, 247); --sk-colorindicator-swatch-border-color: conic-gradient(from 270deg, rgba(0, 0, 0, 0.08) 0deg, rgba(0, 0, 0, 0.48) 64.8deg, rgba(0, 0, 0, 0.48) 115.2deg, rgba(0, 0, 0, 0.08) 180deg, rgba(0, 0, 0, 0) 208.8deg, rgba(0, 0, 0, 0) 331.2deg, rgba(0, 0, 0, 0.08) 360deg); --sk-colorindicator-label-color: rgb(110, 110, 115); --sk-colorindicator-swatch-size: 12px; --sk-colorindicator-border-width: 1px; --sk-colorindicator-item-margin: 3px; --sk-colorindicator-gradient-stop: calc(var(--sk-colorindicator-swatch-size)/2 - 0.5px) } .colorindicator .colorindicator-items { display: inline-flex; justify-content: center; align-items: center; margin: 0; list-style: none } .colorindicator .colorindicator-item { margin: calc(var(--sk-colorindicator-border-width)*-1) var(--sk-colorindicator-item-margin) } .colorindicator .colorindicator-item.colorindicator-label { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; font-feature-settings: "case"; color: var(--sk-colorindicator-label-color); margin-left: 2px } .colorindicator .colorindicator-item.colorindicator-label:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .colorindicator .colorindicator-item.colorindicator-label:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .colorindicator .colorindicator-item.colorindicator-label:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .colorindicator .colorindicator-item.colorindicator-label:lang(zh) { letter-spacing: 0em } .colorindicator .colorindicator-item.colorindicator-label:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .colorindicator .colorindicator-item.colorindicator-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .colorindicator .colorindicator-item.colorindicator-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .colorindicator .colorindicator-item.colorindicator-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .colorindicator .colorindicator-item.colorindicator-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .colorindicator .colorindicator-swatch { background: var(--sk-colorindicator-background-color); border-radius: 50%; display: block; width: var(--sk-colorindicator-swatch-size); height: var(--sk-colorindicator-swatch-size); position: relative } .colorindicator .colorindicator-swatch::after { content: ""; background-image: var(--sk-colorindicator-swatch-border-color); mask-image: radial-gradient(circle at 50%, at 50%, transparent calc(var(--sk-colorindicator-gradient-stop) - var(--sk-colorindicator-border-width)), black var(--sk-colorindicator-gradient-stop)); mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--sk-colorindicator-gradient-stop) - var(--sk-colorindicator-border-width)), black var(--sk-colorindicator-gradient-stop)); mask-size: 100% 100%; mask-clip: initial; border-radius: inherit; display: block; width: 100%; height: 100%; position: absolute; top: 0 } .colorindicator .colorindicator-swatch picture { border-radius: inherit; display: block } .colorindicator .colorindicator-swatch picture img { border-radius: inherit; display: block; width: 100% } .colorindicator-dark, .theme-light .colorindicator.colorindicator-dark { --sk-colorindicator-background-color: rgb(29, 29, 31); --sk-colorindicator-swatch-border-color: conic-gradient(from 90deg, rgba(255, 255, 255, 0.08) 0deg, rgba(255, 255, 255, 0.48) 64.8deg, rgba(255, 255, 255, 0.48) 115.2deg, rgba(255, 255, 255, 0.08) 180deg, rgba(255, 255, 255, 0) 208.8deg, rgba(255, 255, 255, 0) 331.2deg, rgba(255, 255, 255, 0.08) 360deg); --sk-colorindicator-label-color: rgb(134, 134, 139) } .colorindicator-light, .theme-dark .colorindicator.colorindicator-light { --sk-colorindicator-background-color: rgb(245, 245, 247); --sk-colorindicator-swatch-border-color: conic-gradient(from 270deg, rgba(0, 0, 0, 0.08) 0deg, rgba(0, 0, 0, 0.48) 64.8deg, rgba(0, 0, 0, 0.48) 115.2deg, rgba(0, 0, 0, 0.08) 180deg, rgba(0, 0, 0, 0) 208.8deg, rgba(0, 0, 0, 0) 331.2deg, rgba(0, 0, 0, 0.08) 360deg); --sk-colorindicator-label-color: rgb(110, 110, 115) } .product-tile .colorindicator { margin: 0 0 27px; height: 14px } @media(max-width:734px) { .product-tile .colorindicator { padding-inline-end: var(--product-tile-padding) } } .product-tile .colorindicator .colorindicator-items { position: relative; top: -7px } @media(max-width:734px) { .product-tile .colorindicator .colorindicator-items { flex-wrap: wrap; justify-content: start; grid-row-gap: 4px; row-gap: 4px; margin-inline-start: -3px; margin-inline-end: -3px } } .product-tile-image-link { color: inherit; text-decoration: none; margin: 0 0 40px } @media(max-width:1068px) { .product-tile-image-link { margin-bottom: 33px } } @media(max-width:734px) { .product-tile-image-link { margin-bottom: 35px } } a.product-tile-image-link .product-tile-image { transition: transform .3s cubic-bezier(0, 0, 0.5, 1) } a.product-tile-image-link:focus .product-tile-image, a.product-tile-image-link:hover .product-tile-image { transform: scale(1.0161) } .product-tile-subheading { display: block; margin-top: 4px } @media(max-width:734px) { .product-tile-subheading { margin-top: 5px } } .product-tile-badge { white-space: normal; margin: 0 0 9px } @media(max-width:734px) { .product-tile-badge { margin-bottom: 8px } } @media(min-width:735px) { .product-tile-headline, .product-tile-positioning, .product-tile-price, .product-tile-subheading { margin-inline: auto } } .product-tile-positioning { margin-top: 12px } @media(max-width:734px) { .product-tile-positioning { margin-top: 10px } } .product-tile-price { margin-top: 12px } @media(max-width:734px) { .product-tile-price { margin-top: 10px } } .product-tile-image { margin: 0 auto } @media(max-width:734px) { .product-tile-image { margin-inline-start: 0 } } .product-tile-image-link { width: 100% } .product-tile-set { display: grid; grid-column-gap: 20px; grid-auto-flow: column; grid-template-rows: [image] auto [colorindicator] auto [product-id-start badge] auto [headline] auto [positioning product-id-end] auto [price] auto [ctas-start ctas-inline] auto [ctas-stacked] auto [ctas-end tout-group-start tout-1] auto [tout-2] auto [tout-3] auto [tout-4] auto [tout-5] auto [tout-6] auto [tout-7] auto [tout-8] auto [tout-group-end] } @media(max-width:734px) { .product-tile-set { grid-template-columns: repeat(2, minmax(0, 1fr)) } } .product-tile { display: grid; grid-template-rows: subgrid; grid-row: 1/-1 } @media(max-width:734px) { .product-tile .colorindicator, .product-tile .product-tile-ctas, .product-tile .product-tile-image-link, .product-tile .product-tile-positioning, .product-tile .product-tile-price, .product-tile .product-tile-product-id, .product-tile .tout-group { min-width: 0 } } .product-tile .product-tile-image-link { grid-row: image } .product-tile .product-tile-image img { bottom: 0; left: 0; right: 0 } .product-tile .product-tile-colorindicator { grid-row: colorindicator } .product-tile .product-tile-product-id { display: grid; grid-template-rows: subgrid; grid-row: product-id } .product-tile .product-tile-badge { grid-row: badge } .product-tile .product-tile-headline-group { grid-row: headline; display: block } .product-tile .product-tile-headline { display: block } .product-tile .product-tile-positioning { grid-row: positioning } .product-tile .product-tile-price { grid-row: price } .product-tile .product-tile-ctas { display: flex; align-items: center; justify-content: center; grid-row: ctas } .product-tile .product-tile-ctas-inline { grid-column-gap: 34px; column-gap: 34px } @media(max-width:734px) { .product-tile .product-tile-ctas-inline { grid-column-gap: 27px; column-gap: 27px } } .product-tile .product-tile-ctas-stacked { display: grid; grid-template-rows: subgrid; grid-row-gap: 18px; row-gap: 18px } @media(max-width:734px) { .product-tile .product-tile-ctas-stacked { grid-row-gap: 14px; row-gap: 14px } } .product-tile .product-tile-ctas-stacked .product-tile-button, .product-tile .product-tile-ctas-stacked .product-tile-current { grid-row: ctas-inline } .product-tile .product-tile-ctas-stacked .product-tile-link { grid-row: ctas-stacked } @media(max-width:734px) { .product-tile .product-tile-ctas { justify-content: start } } .product-tile .tout-group { display: grid; grid-template-rows: subgrid; grid-row: tout-group; position: relative; padding-top: 52px; width: 100%; box-sizing: border-box } @media(max-width:1068px) { .product-tile .tout-group { padding-top: 54px } } @media(max-width:734px) { .product-tile .tout-group { padding-top: 51px } } .product-tile .tout-group::before { content: ""; position: absolute; left: -10px; right: -10px; top: 0; height: 1px; background-color: #d2d2d7 } .theme-dark .product-tile .tout-group::before { background-color: #424245 } .product-tile .tout-group p { margin: 0 } .product-tile .tout>*:not(.tout-icon-wrapper) { padding-inline-start: var(--product-tile-padding); padding-inline-end: var(--product-tile-padding) } @media(max-width:734px) { .product-tile .tout>*:not(.tout-icon-wrapper) { padding-inline-start: 0 } } [data-component-list*=StaggeredFadeIn].staggered-start .product-tile[data-staggered-item] .tout-group::before { animation: none; opacity: 0 } [data-component-list*=StaggeredFadeIn].staggered-end .product-tile[data-staggered-item] .tout-group::before { animation: fade-in calc(var(--staggered-opacity-duration, 0.9)*0.5s) both; animation-delay: calc(var(--staggered-delay, 0.15)*1s) } html.reduced-motion [data-component-list*=StaggeredFadeIn].staggered-end .product-tile[data-staggered-item] .tout-group::before { animation: none } .product-tile-set { margin: 0 } .product-tile { --sk-paragraph-plus-element-margin: 0px; --sk-headline-plus-first-element-margin: 0px; --product-tile-width: 372px; --product-tile-padding: 28px; width: var(--product-tile-width); list-style-type: none } @media(max-width:1068px) { .product-tile { --product-tile-width: 344px; --product-tile-padding: 24px; --product-tile-padding: 16px; --product-tile-width: 311px } } @media(max-width:734px) { .product-tile { --product-tile-padding: 28px; --product-tile-width: 100%; --product-tile-padding: 0 } } @media(min-width:735px) { .product-tile { text-align: center } } .product-tile .product-tile-padding { padding-inline-start: var(--product-tile-padding); padding-inline-end: var(--product-tile-padding) } @media(max-width:734px) { .product-tile .product-tile-padding { padding-inline-start: 0 } } @keyframes fade-in { 0% { opacity: 0 } 100% { opacity: 1 } } .product-tile-contrast-container { display: flex; justify-content: center; padding-top: 120px; padding-bottom: 120px } @media(max-width:1068px) { .product-tile-contrast-container { background-color: rgba(0, 0, 0, 0); padding-top: 0; padding-bottom: 0 } .product-tile-contrast-container.tile-rounded { border-radius: unset } html.safari .product-tile-contrast-container.tile-rounded { isolation: unset; clip-path: unset } } .product-tile-contrast-container .colorindicator .colorindicator-label { display: none } @media(min-width:1069px) { .product-tile-contrast-container .colorindicator-items:has(:nth-child(10)) .colorindicator-label { display: initial } } @media(min-width:1069px) { .product-tile-contrast-container .colorindicator-item:not(.colorindicator-label):nth-child(n+9) { display: none } } @media(min-width:735px)and (max-width:1068px) { .product-tile-contrast-container .colorindicator-items:has(:nth-child(10)) .colorindicator-label { display: initial } } @media(min-width:735px)and (max-width:1068px) { .product-tile-contrast-container .colorindicator-item:not(.colorindicator-label):nth-child(n+9) { display: none } } @media(max-width:734px) { .product-tile-contrast-container .colorindicator-items:has(:nth-child(8)) .colorindicator-label { display: initial } } @media(max-width:734px) { .product-tile-contrast-container .colorindicator-item:not(.colorindicator-label):nth-child(n+7) { display: none } } .product-tile-contrast-container .product-tile-contrast-alignment-container { display: flex; flex-direction: column; width: min-content; z-index: 1 } @media(min-width:735px) { .product-tile-contrast-container .product-tile-contrast-alignment-container { align-items: center } } @media(max-width:734px) { .product-tile-contrast-container .product-tile-contrast-alignment-container { width: 100% } } .product-tile-contrast-container .product-tile-contrast-headline { max-width: 680px; margin-bottom: 80px } @media(min-width:735px) { .product-tile-contrast-container .product-tile-contrast-headline { text-align: center } } @media(max-width:1068px) { .product-tile-contrast-container .product-tile-contrast-headline { max-width: 576px; margin-bottom: 64px } } @media(max-width:734px) { .product-tile-contrast-container .product-tile-contrast-headline { max-width: 320px; margin-bottom: 48px } } .utility-modal-block .utility-modal-block-caption { max-width: 400px; color: var(--sk-glyph-gray-secondary) } .utility-modal-block .utility-modal-block-caption-text { margin-top: 32px } .utility-modal-block .utility-modal-block-ctas { display: inline-flex; margin-top: 15px } .utility-modal-block .utility-modal-block-ctas-inline { grid-gap: 20px; gap: 20px } .utility-modal-block .utility-modal-block-ctas-stacked { flex-direction: column; grid-row-gap: 6px; row-gap: 6px } .utility-modal-block .utility-modal-block-image { margin-top: 32px } .utility-modal-block .utility-modal-block-image-responsive picture { width: 100% } .utility-modal-block .utility-modal-block-image-crop-and-reveal picture { width: 100%; overflow: hidden } .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container { display: flex } .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-top { margin-bottom: 12px } .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-top[class*=" pin-bottom"] { display: none } .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-bottom { margin-top: 12px } .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-bottom[class*=" pin-top"] { display: none } .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption { display: inline-block } @media(min-width:735px) { .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption { width: 480px } } @media(max-width:734px) { .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption { width: 100%; max-width: 400px } } .utility-modal-block .utility-modal-block-image .utility-modal-block-image-picture-container { display: flex; flex-wrap: wrap } html.no-js .utility-modal-block .utility-modal-block-image .utility-modal-block-image-picture-container noscript { width: 100%; height: 100%; align-items: inherit; justify-content: inherit; align-content: inherit; display: inherit } .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-top[class*=" large-pin-top-"] { display: flex } .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-bottom[class*=" large-pin-top-"], .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-top[class*=" large-pin-bottom-"] { display: none } .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-bottom[class*=" large-pin-bottom-"] { display: flex } @media(max-width:1068px) { .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-top[class*=" medium-pin-top-"] { display: flex } .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-bottom[class*=" medium-pin-top-"], .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-top[class*=" medium-pin-bottom-"] { display: none } .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-bottom[class*=" medium-pin-bottom-"] { display: flex } } @media(max-width:734px) { .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-top[class*=" small-pin-top-"] { display: flex } .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-bottom[class*=" small-pin-top-"], .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-top[class*=" small-pin-bottom-"] { display: none } .utility-modal-block .utility-modal-block-image .utility-modal-block-image-caption-container-bottom[class*=" small-pin-bottom-"] { display: flex } } .utility-modal-block .utility-modal-block-inline-headline+.utility-modal-block-body { margin-top: 0 } .utility-modal-block .utility-modal-block-table { width: 100%; margin-top: 48px; --utility-modal-block-table-space-between-columns: 80px } @media(max-width:734px) { .utility-modal-block .utility-modal-block-table { --utility-modal-block-table-space-between-columns: 40px } } .utility-modal-block .utility-modal-block-table .utility-modal-block-table-column-leading { padding-inline-end: calc(var(--utility-modal-block-table-space-between-columns)/2); text-align: start } .utility-modal-block .utility-modal-block-table .utility-modal-block-table-column-trailing { padding-inline-start: calc(var(--utility-modal-block-table-space-between-columns)/2); text-align: end } .utility-modal-block .utility-modal-block-table caption { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0 0 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0 } .utility-modal-block .utility-modal-block-table thead th { padding: 0 0 24px; vertical-align: initial } .utility-modal-block .utility-modal-block-table tbody tr { border-bottom: 1px solid var(--sk-fill-gray-tertiary) } .utility-modal-block .utility-modal-block-table tbody tr td { padding: 24px 0 } .utility-modal-block .utility-modal-block-table tbody tr:last-child { border: 0 } .utility-modal-block .utility-modal-block-table:last-child tbody tr:last-child td { padding-bottom: 0 } .utility-modal-block { padding-top: 20px } .utility-modal-block+.utility-modal-block { padding-top: 40px } @media(max-width:1068px) { :root { --global-section-padding: 128px } } @media(max-width:734px) { :root { --global-section-padding: 96px } } @media(max-width:1068px) { :root { --global-section-aap-padding: 206px } } @media(max-width:734px) { :root { --global-section-aap-padding: 196px } } .section { padding-top: var(--global-section-padding); padding-bottom: var(--global-section-aap-padding) } .section:not(:has(.all-access-pass:not(.fallback))) { padding-bottom: var(--global-section-padding) } .section:not(:has(.all-access-pass:not(.fallback))).no-pad, .section:not(:has(.all-access-pass:not(.fallback))).no-pad-bottom { padding-bottom: 0 } .section:has(.all-access-pass:not(.fallback)) { padding-bottom: var(--global-section-aap-padding) } .section:has(.all-access-pass:not(.fallback)).no-pad, .section:has(.all-access-pass:not(.fallback)).no-pad-bottom { padding-bottom: 0 } html.no-inline-media .section:not(:has(.all-access-pass:not(.aap-timer))) { padding-bottom: var(--global-section-padding) } html.no-inline-media .section:not(:has(.all-access-pass:not(.aap-timer))).no-pad, html.no-inline-media .section:not(:has(.all-access-pass:not(.aap-timer))).no-pad-bottom { padding-bottom: 0 } html.no-inline-media .section:has(.all-access-pass:not(.aap-timer)) { padding-bottom: var(--global-section-aap-padding) } html.no-inline-media .section:has(.all-access-pass:not(.aap-timer)).no-pad, html.no-inline-media .section:has(.all-access-pass:not(.aap-timer)).no-pad-bottom { padding-bottom: 0 } .section.no-pad-top { padding-top: 0 } .section.no-pad, .section.no-pad-bottom { padding-bottom: 0 } .section.no-pad { padding-top: 0 } .section.theme-dark { background-color: var(--sk-body-background-color, rgb(0, 0, 0)); color: var(--sk-body-text-color, rgb(245, 245, 247)) } .section.background-alt { background-color: var(--global-section-background-color-alt) } .section.background-alt.theme-dark, .theme-dark .section.background-alt { background-color: var(--global-section-background-color-alt-dark) } :root { --global-nav-collective-height: var(--r-globalnav-height, 0px) } :root.ac-gn-segmentbar-visible.ac-ls-visible { --global-nav-collective-height: calc(var(--r-globalnav-height, 0px) + var(--r-globalnav-segmentbar-height, 0px) + var(--r-localeswitcher-height, 0px)) } :root.ac-gn-segmentbar-visible { --global-nav-collective-height: calc(var(--r-globalnav-height, 0px) + var(--r-globalnav-segmentbar-height, 0px)) } :root.ac-ls-visible { --global-nav-collective-height: calc(var(--r-globalnav-height, 0px) + var(--r-localeswitcher-height, 0px)) } :root.aow { --global-nav-collective-height: 0px !important; --r-globalnav-height: 0px !important; --r-localeswitcher-height: 0px !important; --r-globalnav-segmentbar-height: 0px !important } .gradient-wrapper { margin-top: 0; padding-bottom: 10%; margin-bottom: -10%; background: linear-gradient(90deg, #a977c8, #6f8cc7 17%, #639a47 33%, #1d1d1f 50.01%, #1d1d1f); display: inline-block; background-clip: text; background-size: 300% 100%; background-position-x: 0%; transition: background-position-x 1300ms cubic-bezier(0.37, 0, 0.63, 1); color: rgba(0, 0, 0, 0) } .gradient-wrapper[data-gradient-headline] { background-position-x: 100% } .gradient-wrapper[data-gradient-headline].gradient-show { background-position-x: 0% } html.reduced-motion .gradient-wrapper[data-gradient-headline] { transition: none; background-position-x: 0% } .ps-section-header.large-centered { text-align: center } @media(max-width:734px) { .ps-section-header.large-centered { text-align: start } } .ps-section-header .typography-ps-headline-elevated { margin-top: 28px } @media(max-width:1068px) { .ps-section-header .typography-ps-headline-elevated { margin-top: 16px } } @media(max-width:734px) { .ps-section-header .typography-ps-headline-elevated { margin-top: 6px } } .ps-section-header .typography-ps-body { margin-top: 32px } @media(max-width:1068px) { .ps-section-header .typography-ps-body { margin-top: 24px } } @media(max-width:734px) { .ps-section-header .typography-ps-body { margin-top: 14px } } main { --ax-contrast-color: rgb(255, 255, 255) } main .theme-dark { --ax-contrast-color: rgb(0, 0, 0) } main .tile { --ax-contrast-color: var(--sk-tile-background) } main .section.background-alt, main .section:has(.index) { --ax-contrast-color: var(--global-section-background-color-alt) } main .section [data-component-list=MediaCardGallery] .media-gallery .gallery-item { --ax-contrast-color: var(--card-color) } main .section [data-component-list=MediaCardGallery] .media-gallery .gallery-item.theme-dark { --ax-contrast-color: var(--card-color-dark) } html.text-zoom main h1:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *), html.text-zoom main h2:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *), html.text-zoom main h3:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *), html.text-zoom main h4:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *), html.text-zoom main h5:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *), html.text-zoom main h6:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *), html.text-zoom main p:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *) { background-color: var(--ax-contrast-color) !important } html.text-zoom main h1:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *).caption, html.text-zoom main h2:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *).caption, html.text-zoom main h3:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *).caption, html.text-zoom main h4:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *).caption, html.text-zoom main h5:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *).caption, html.text-zoom main h6:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *).caption, html.text-zoom main p:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *).caption { width: auto } @media(inverted-colors:inverted)or (prefers-contrast:more)or (prefers-reduced-transparency) { main h1:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *), main h2:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *), main h3:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *), main h4:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *), main h5:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *), main h6:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *), main p:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *) { background-color: var(--ax-contrast-color) !important } main h1:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *).caption, main h2:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *).caption, main h3:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *).caption, main h4:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *).caption, main h5:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *).caption, main h6:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *).caption, main p:not(:has(>.visuallyhidden:only-child, >picture:only-child), [role=presentation] *).caption { width: auto } } .section-product-story { position: relative; --ps-spacing-160:160px; --ps-spacing-128:128px; --ps-spacing-120:120px; --ps-spacing-112:112px; --ps-spacing-96:96px; --ps-spacing-80:80px; --ps-spacing-72:72px; --ps-spacing-64:64px; --ps-spacing-60:60px; --ps-spacing-56:56px; --ps-spacing-52:52px; --ps-spacing-48:48px; --ps-spacing-46:46px; --ps-spacing-42:42px; --ps-spacing-40:40px; --ps-spacing-36:36px; --ps-spacing-32:32px; --ps-spacing-30:30px; --ps-spacing-26:26px; --ps-spacing-24:24px; --ps-spacing-20:20px; --ps-spacing-16:16px; --ps-spacing-12:12px; --ps-spacing-6:6px; --ps-spacing-4:4px; --ps-spacing-0:0px } .section-product-story .ps-spacing-large-160 { margin-top: var(--ps-spacing-160) } .section-product-story .ps-spacing-large-128 { margin-top: var(--ps-spacing-128) } .section-product-story .ps-spacing-large-120 { margin-top: var(--ps-spacing-120) } .section-product-story .ps-spacing-large-112 { margin-top: var(--ps-spacing-112) } .section-product-story .ps-spacing-large-96 { margin-top: var(--ps-spacing-96) } .section-product-story .ps-spacing-large-80 { margin-top: var(--ps-spacing-80) } .section-product-story .ps-spacing-large-72 { margin-top: var(--ps-spacing-72) } .section-product-story .ps-spacing-large-64 { margin-top: var(--ps-spacing-64) } .section-product-story .ps-spacing-large-60 { margin-top: var(--ps-spacing-60) } .section-product-story .ps-spacing-large-56 { margin-top: var(--ps-spacing-56) } .section-product-story .ps-spacing-large-52 { margin-top: var(--ps-spacing-52) } .section-product-story .ps-spacing-large-48 { margin-top: var(--ps-spacing-48) } .section-product-story .ps-spacing-large-46 { margin-top: var(--ps-spacing-46) } .section-product-story .ps-spacing-large-42 { margin-top: var(--ps-spacing-42) } .section-product-story .ps-spacing-large-40 { margin-top: var(--ps-spacing-40) } .section-product-story .ps-spacing-large-36 { margin-top: var(--ps-spacing-36) } .section-product-story .ps-spacing-large-32 { margin-top: var(--ps-spacing-32) } .section-product-story .ps-spacing-large-30 { margin-top: var(--ps-spacing-30) } .section-product-story .ps-spacing-large-26 { margin-top: var(--ps-spacing-26) } .section-product-story .ps-spacing-large-24 { margin-top: var(--ps-spacing-24) } .section-product-story .ps-spacing-large-20 { margin-top: var(--ps-spacing-20) } .section-product-story .ps-spacing-large-16 { margin-top: var(--ps-spacing-16) } .section-product-story .ps-spacing-large-12 { margin-top: var(--ps-spacing-12) } .section-product-story .ps-spacing-large-6 { margin-top: var(--ps-spacing-6) } .section-product-story .ps-spacing-large-4 { margin-top: var(--ps-spacing-4) } .section-product-story .ps-spacing-large-0 { margin-top: var(--ps-spacing-0) } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-160 { margin-top: var(--ps-spacing-160) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-128 { margin-top: var(--ps-spacing-128) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-120 { margin-top: var(--ps-spacing-120) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-112 { margin-top: var(--ps-spacing-112) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-96 { margin-top: var(--ps-spacing-96) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-80 { margin-top: var(--ps-spacing-80) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-72 { margin-top: var(--ps-spacing-72) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-64 { margin-top: var(--ps-spacing-64) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-60 { margin-top: var(--ps-spacing-60) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-56 { margin-top: var(--ps-spacing-56) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-52 { margin-top: var(--ps-spacing-52) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-48 { margin-top: var(--ps-spacing-48) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-46 { margin-top: var(--ps-spacing-46) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-42 { margin-top: var(--ps-spacing-42) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-40 { margin-top: var(--ps-spacing-40) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-36 { margin-top: var(--ps-spacing-36) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-32 { margin-top: var(--ps-spacing-32) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-30 { margin-top: var(--ps-spacing-30) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-26 { margin-top: var(--ps-spacing-26) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-24 { margin-top: var(--ps-spacing-24) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-20 { margin-top: var(--ps-spacing-20) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-16 { margin-top: var(--ps-spacing-16) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-12 { margin-top: var(--ps-spacing-12) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-6 { margin-top: var(--ps-spacing-6) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-4 { margin-top: var(--ps-spacing-4) } } @media(min-width:1441px) { .section-product-story .ps-spacing-xlarge-0 { margin-top: var(--ps-spacing-0) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-160 { margin-top: var(--ps-spacing-160) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-128 { margin-top: var(--ps-spacing-128) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-120 { margin-top: var(--ps-spacing-120) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-112 { margin-top: var(--ps-spacing-112) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-96 { margin-top: var(--ps-spacing-96) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-80 { margin-top: var(--ps-spacing-80) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-72 { margin-top: var(--ps-spacing-72) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-64 { margin-top: var(--ps-spacing-64) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-60 { margin-top: var(--ps-spacing-60) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-56 { margin-top: var(--ps-spacing-56) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-52 { margin-top: var(--ps-spacing-52) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-48 { margin-top: var(--ps-spacing-48) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-46 { margin-top: var(--ps-spacing-46) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-42 { margin-top: var(--ps-spacing-42) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-40 { margin-top: var(--ps-spacing-40) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-36 { margin-top: var(--ps-spacing-36) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-32 { margin-top: var(--ps-spacing-32) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-30 { margin-top: var(--ps-spacing-30) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-26 { margin-top: var(--ps-spacing-26) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-24 { margin-top: var(--ps-spacing-24) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-20 { margin-top: var(--ps-spacing-20) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-16 { margin-top: var(--ps-spacing-16) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-12 { margin-top: var(--ps-spacing-12) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-6 { margin-top: var(--ps-spacing-6) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-4 { margin-top: var(--ps-spacing-4) } } @media(max-width:1068px) { .section-product-story .ps-spacing-medium-0 { margin-top: var(--ps-spacing-0) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-160 { margin-top: var(--ps-spacing-160) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-128 { margin-top: var(--ps-spacing-128) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-120 { margin-top: var(--ps-spacing-120) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-112 { margin-top: var(--ps-spacing-112) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-96 { margin-top: var(--ps-spacing-96) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-80 { margin-top: var(--ps-spacing-80) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-72 { margin-top: var(--ps-spacing-72) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-64 { margin-top: var(--ps-spacing-64) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-60 { margin-top: var(--ps-spacing-60) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-56 { margin-top: var(--ps-spacing-56) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-52 { margin-top: var(--ps-spacing-52) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-48 { margin-top: var(--ps-spacing-48) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-46 { margin-top: var(--ps-spacing-46) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-42 { margin-top: var(--ps-spacing-42) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-40 { margin-top: var(--ps-spacing-40) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-36 { margin-top: var(--ps-spacing-36) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-32 { margin-top: var(--ps-spacing-32) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-30 { margin-top: var(--ps-spacing-30) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-26 { margin-top: var(--ps-spacing-26) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-24 { margin-top: var(--ps-spacing-24) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-20 { margin-top: var(--ps-spacing-20) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-16 { margin-top: var(--ps-spacing-16) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-12 { margin-top: var(--ps-spacing-12) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-6 { margin-top: var(--ps-spacing-6) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-4 { margin-top: var(--ps-spacing-4) } } @media(max-width:734px) { .section-product-story .ps-spacing-small-0 { margin-top: var(--ps-spacing-0) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-160 { margin-top: var(--ps-spacing-160) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-128 { margin-top: var(--ps-spacing-128) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-120 { margin-top: var(--ps-spacing-120) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-112 { margin-top: var(--ps-spacing-112) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-96 { margin-top: var(--ps-spacing-96) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-80 { margin-top: var(--ps-spacing-80) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-72 { margin-top: var(--ps-spacing-72) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-64 { margin-top: var(--ps-spacing-64) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-60 { margin-top: var(--ps-spacing-60) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-56 { margin-top: var(--ps-spacing-56) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-52 { margin-top: var(--ps-spacing-52) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-48 { margin-top: var(--ps-spacing-48) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-46 { margin-top: var(--ps-spacing-46) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-42 { margin-top: var(--ps-spacing-42) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-40 { margin-top: var(--ps-spacing-40) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-36 { margin-top: var(--ps-spacing-36) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-32 { margin-top: var(--ps-spacing-32) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-30 { margin-top: var(--ps-spacing-30) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-26 { margin-top: var(--ps-spacing-26) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-24 { margin-top: var(--ps-spacing-24) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-20 { margin-top: var(--ps-spacing-20) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-16 { margin-top: var(--ps-spacing-16) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-12 { margin-top: var(--ps-spacing-12) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-6 { margin-top: var(--ps-spacing-6) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-4 { margin-top: var(--ps-spacing-4) } } @media(max-width:480px) { .section-product-story .ps-spacing-xsmall-0 { margin-top: var(--ps-spacing-0) } } .section-product-story .text-large-start { text-align: start } .section-product-story .text-large-center { text-align: center } .section-product-story .text-large-end { text-align: end } @media(min-width:1441px) { .section-product-story .text-xlarge-start { text-align: start } } @media(min-width:1441px) { .section-product-story .text-xlarge-center { text-align: center } } @media(min-width:1441px) { .section-product-story .text-xlarge-end { text-align: end } } @media(max-width:1068px) { .section-product-story .text-medium-start { text-align: start } } @media(max-width:1068px) { .section-product-story .text-medium-center { text-align: center } } @media(max-width:1068px) { .section-product-story .text-medium-end { text-align: end } } @media(max-width:734px) { .section-product-story .text-small-start { text-align: start } } @media(max-width:734px) { .section-product-story .text-small-center { text-align: center } } @media(max-width:734px) { .section-product-story .text-small-end { text-align: end } } @media(max-width:480px) { .section-product-story .text-xsmall-start { text-align: start } } @media(max-width:480px) { .section-product-story .text-xsmall-center { text-align: center } } @media(max-width:480px) { .section-product-story .text-xsmall-end { text-align: end } } .section-product-story .section { position: relative } section.section .inline-compare-wrap { box-sizing: border-box; border-radius: 28px; background: #f5f5f7; padding-bottom: var(--ps-spacing-72); padding-top: var(--ps-spacing-72) } @media(max-width:1068px) { section.section .inline-compare-wrap { padding-top: var(--ps-spacing-56) } } @media(max-width:734px) { section.section .inline-compare-wrap { padding-top: var(--ps-spacing-40) } } section.section .inline-compare-wrap .form-dropdown { margin: 0 } @media(min-width:735px) { section.section .inline-compare-wrap .form-dropdown { min-width: 264px } } @media(max-width:734px) { section.section .inline-compare-wrap .form-dropdown { width: 100%; text-align: center; margin-top: var(--ps-spacing-20) } } section.section .inline-compare-wrap .form-dropdown-wrap { display: flex } @media(max-width:734px) { section.section .inline-compare-wrap .form-dropdown-wrap { flex-direction: column; align-items: start } } section.section .inline-compare-wrap .form-dropdown-chevron { top: 50%; transform: translateY(-50%) } section.section .inline-compare-wrap .form-dropdown-chevron::after { color: #0071e3 } section.section .inline-compare-wrap .form-dropdown-select { height: 42px; border-radius: 26px; box-sizing: border-box; background-color: rgba(0, 0, 0, 0); color: #1d1d1f; font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(zh) { line-height: 1.2916666667 } section.section .inline-compare-wrap .form-dropdown-select:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { section.section .inline-compare-wrap .form-dropdown-select { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(zh) { line-height: 1.3334033333 } section.section .inline-compare-wrap .form-dropdown-select:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .form-dropdown-select:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(min-width:481px) { html.firefox section.section .inline-compare-wrap .form-dropdown-select { width: 102% } } section.section .inline-compare-wrap .form-dropdown-select, section.section .inline-compare-wrap .form-dropdown-select:focus, section.section .inline-compare-wrap .form-dropdown-select:focus:not(button) { border-width: 1px; padding: 0 42px 0 22px } @media(min-width:481px) { html.firefox section.section .inline-compare-wrap .form-dropdown-select, html.firefox section.section .inline-compare-wrap .form-dropdown-select:focus, html.firefox section.section .inline-compare-wrap .form-dropdown-select:focus:not(button) { padding-inline-end: 44px } } html.text-zoom section.section .inline-compare-wrap .form-dropdown-select, html.text-zoom section.section .inline-compare-wrap .form-dropdown-select:focus, html.text-zoom section.section .inline-compare-wrap .form-dropdown-select:focus:not(button) { height: 2rem; padding: 0 2.4rem 0 1rem } section.section .inline-compare-wrap .inline-compare-select-label { color: #6e6e73; font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; margin-inline-end: var(--ps-spacing-20) } section.section .inline-compare-wrap .inline-compare-select-label:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(zh) { line-height: 1.2916666667 } section.section .inline-compare-wrap .inline-compare-select-label:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { section.section .inline-compare-wrap .inline-compare-select-label { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(zh) { line-height: 1.3334033333 } section.section .inline-compare-wrap .inline-compare-select-label:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .inline-compare-wrap .inline-compare-select-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } section.section .inline-compare-wrap .inline-compare-option { display: none; flex-wrap: wrap; margin-top: 0; grid-row-gap: var(--ps-spacing-32); row-gap: var(--ps-spacing-32) } @media(max-width:1068px) { section.section .inline-compare-wrap .inline-compare-option { grid-row-gap: var(--ps-spacing-48); row-gap: var(--ps-spacing-48) } } @media(max-width:734px) { section.section .inline-compare-wrap .inline-compare-option { grid-row-gap: var(--ps-spacing-32); row-gap: var(--ps-spacing-32) } } section.section .inline-compare-wrap .inline-compare-option-wrap { margin-top: var(--ps-spacing-56) } @media(max-width:734px) { section.section .inline-compare-wrap .inline-compare-option-wrap { margin-top: var(--ps-spacing-32) } } section.section .inline-compare-wrap .inline-compare-option.show { display: flex; align-items: baseline } section.section .ps-stat { color: #6e6e73 } section.section .ps-stat .gradient-wrapper { font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: 0em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; display: inline-block } section.section .ps-stat .gradient-wrapper:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(ja) { font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(ko) { font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { section.section .ps-stat .gradient-wrapper { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(zh) { line-height: 1.25 } section.section .ps-stat .gradient-wrapper:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section .ps-stat .gradient-wrapper:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } section.section .ps-stat .ps-stat-copy { display: block } section.section .ps-stat .ps-stat-copy:first-child { margin-bottom: 4px } section.section .ps-stat .ps-stat-copy:last-child { margin-top: 4px } section.section .ps-stat .footnote a { color: #6e6e73; font-size: 1em; text-underline-offset: -0.28em; vertical-align: inherit } section.section .ps-stat.offset-custom-large { margin-inline-start: calc(var(--ric-column-width-1)*0.5) } @media(max-width:734px) { section.section .ps-stat.offset-custom-large { margin-inline-start: var(--ric-column-width-1) } } section.section .inline-compare-option-wrap .ps-stat { display: flex } html.text-zoom section.section .inline-compare-option-wrap .ps-stat { width: 100% } html.text-zoom section.section .inline-compare-option-wrap .ps-stat.offset-custom-large { margin-inline-start: var(--ric-column-width-1) } section.section .inline-compare-option-wrap .ps-stat-p { flex-shrink: 0 } section.section .inline-compare-intro { text-align: start } @media(max-width:1068px) { section.section .inline-compare-intro { text-align: center } } @media(max-width:734px) { section.section .inline-compare-intro { text-align: start } } html.text-zoom section.section .inline-compare-intro { flex-direction: column-reverse } html.text-zoom section.section .inline-compare-intro .ps-header-copy { margin-top: 50px } section.section .inline-compare-intro .offset-custom-large { margin-inline-start: calc(var(--ric-column-width-1)*1.5) } @media(max-width:1068px) { section.section .inline-compare-intro .offset-custom-large { margin-inline-start: calc(var(--ric-column-width-1)*2) } } @media(max-width:734px) { section.section .inline-compare-intro .offset-custom-large { margin-inline-start: 0 } } section.section .inline-compare-intro .ps-stat { width: min-content } @media(max-width:1068px) { section.section .inline-compare-intro .ps-stat { padding-top: var(--ps-spacing-40); margin: 0 auto } } @media(max-width:734px) { section.section .inline-compare-intro .ps-stat { margin: 0; width: auto } } .tabnav { font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; --tabnav-line-height: 18px; --tabnav-height: 44px; --tabnav-scale: 1; --tabnav-inner-height: 36px; --tabnav-platter-padding: 4px; --tabnav-platter-background: rgb(232, 232, 237); --tabnav-platter-blur: 20px; --tabnav-mask-gradient-width: 22px; --tabnav-mask-opaque-width: calc(var(--tabnav-paddle-width) - var(--tabnav-platter-padding)); --tabnav-mask-offset: calc(var(--tabnav-mask-opaque-width) + var(--tabnav-mask-gradient-width)); --tabnav-mask-color-left: transparent; --tabnav-mask-color-right: transparent; --tabnav-mask-gradient: linear-gradient(90deg, var(--tabnav-mask-color-left) 0, var(--tabnav-mask-color-left) var(--tabnav-mask-opaque-width), black calc(var(--tabnav-mask-opaque-width) + var(--tabnav-mask-gradient-width)), black calc(100% - var(--tabnav-mask-opaque-width) - var(--tabnav-mask-gradient-width)), var(--tabnav-mask-color-right) calc(100% - var(--tabnav-mask-opaque-width)), var(--tabnav-mask-color-right)); --tabnav-items-offset: 0px; --tabnav-item-padding: 16px; --tabnav-item-color: rgb(0, 0, 0); --tabnav-item-color-active: rgb(255, 255, 255); --tabnav-paddle-width: calc(var(--tabnav-inner-height) + var(--tabnav-platter-padding)); --tabnav-paddle-height: var(--tabnav-inner-height); --tabnav-paddle-color: rgba(0, 0, 0, .56); --tabnav-paddle-color-hover: rgba(0, 0, 0, .64); --tabnav-paddle-icon-opacity-disabled: 0.42; --tabnav-indicator-background: rgb(29, 29, 31); --tabnav-indicator-start: var(--tabnav-platter-padding); --tabnav-indicator-width: 0px; --tabnav-focus-color: var(--sk-focus-color, #0071e3); --tabnav-motion-scroll-duration: 320ms; --tabnav-motion-indicator-transform-duration: 320ms; --r-tabnav-scaling-font-size: 14px; position: relative; width: -moz-fit-content; width: fit-content; max-width: 100%; box-sizing: border-box } .tabnav:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav:lang(th), .tabnav:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .tabnav:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav:lang(ja) { --tabnav-line-height: 19px } .tabnav:lang(ko) { --tabnav-line-height: 20px } .tabnav:lang(th), .tabnav:lang(zh) { --tabnav-line-height: 19px } @property --tabnav-mask-color-left { syntax: ""; inherits: true; initial-value: rgba(0, 0, 0, 0) } @property --tabnav-mask-color-right { syntax: ""; inherits: true; initial-value: rgba(0, 0, 0, 0) } .tabnav-alpha { --tabnav-platter-background: rgba(210, 210, 215, 0.64) } .tabnav.tabnav-dark, .theme-dark .tabnav { --tabnav-platter-background: rgb(51, 51, 54); --tabnav-item-color: rgb(255, 255, 255); --tabnav-item-color-active: rgb(0, 0, 0); --tabnav-paddle-color: rgba(255, 255, 255, .8); --tabnav-paddle-color-hover: rgb(255, 255, 255); --tabnav-paddle-icon-opacity-disabled: 0.36; --tabnav-indicator-background: rgb(245, 245, 247); --tabnav-focus-color: rgb(255, 255, 255) } .tabnav.tabnav-dark-alpha, .theme-dark .tabnav-alpha { --tabnav-platter-background: rgba(66, 66, 69, 0.72) } .theme-dark .tabnav.tabnav-light { --tabnav-platter-background: rgb(232, 232, 237); --tabnav-item-color: rgb(0, 0, 0); --tabnav-item-color-active: rgb(255, 255, 255); --tabnav-paddle-color: rgba(0, 0, 0, .56); --tabnav-paddle-color-hover: rgba(0, 0, 0, .64); --tabnav-indicator-background: rgb(29, 29, 31) } .theme-dark .tabnav.tabnav-light-alpha { --tabnav-platter-background: rgba(210, 210, 215, 0.64) } .tabnav:has(.tabnav-paddle-left.tabnav-paddle-hidden) { --tabnav-mask-color-left: black } .tabnav:has(.tabnav-paddle-right.tabnav-paddle-hidden) { --tabnav-mask-color-right: black } .tabnav:not(.tabnav.tabnav-disable-transitions) { transition-property: --tabnav-mask-color-left, --tabnav-mask-color-right; transition-duration: 40ms; transition-delay: 0ms, 0ms } .tabnav:not(.tabnav.tabnav-disable-transitions):has(.tabnav-paddle-left.tabnav-paddle-hidden) { transition-delay: 280ms, 0ms } .tabnav:not(.tabnav.tabnav-disable-transitions):has(.tabnav-paddle-right.tabnav-paddle-hidden) { transition-delay: 0ms, 280ms } .tabnav:not(.tabnav.tabnav-disable-transitions):has(.tabnav-paddle-left.tabnav-paddle-hidden+.tabnav-paddle-right.tabnav-paddle-hidden) { transition-delay: 280ms, 280ms } .tabnav.tabnav-with-2-lines { --tabnav-lines: 2 } .tabnav.tabnav-with-2-lines:not(.tabnav-line) { font-size: 10px; line-height: 1; font-weight: 400; letter-spacing: -0.006em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; --tabnav-line-height: 10px } .tabnav.tabnav-with-2-lines:not(.tabnav-line):lang(ar) { line-height: 1.4; letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-with-2-lines:not(.tabnav-line):lang(ja) { line-height: 1.1; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-with-2-lines:not(.tabnav-line):lang(ko) { line-height: 1.1; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-with-2-lines:not(.tabnav-line):lang(zh) { letter-spacing: 0em } .tabnav.tabnav-with-2-lines:not(.tabnav-line):lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-with-2-lines:not(.tabnav-line):lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-with-2-lines:not(.tabnav-line):lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-with-2-lines:not(.tabnav-line):lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-with-2-lines:not(.tabnav-line):lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-with-2-lines:not(.tabnav-line):lang(ar) { --tabnav-line-height: 14px } .tabnav.tabnav-with-2-lines:not(.tabnav-line):lang(ja), .tabnav.tabnav-with-2-lines:not(.tabnav-line):lang(ko) { --tabnav-line-height: 11px } .tabnav.tabnav-elevated { font-size: 17px; line-height: 1.2353641176; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; --tabnav-line-height: 21px; --tabnav-height: 56px; --tabnav-inner-height: 44px; --tabnav-platter-padding: 6px; --tabnav-item-padding: 22px } .tabnav.tabnav-elevated:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated:lang(ko), .tabnav.tabnav-elevated:lang(th), .tabnav.tabnav-elevated:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .tabnav.tabnav-elevated:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated:lang(ko), .tabnav.tabnav-elevated:lang(th), .tabnav.tabnav-elevated:lang(zh) { --tabnav-line-height: 23px } .tabnav.tabnav-elevated.tabnav-with-2-lines:not(.tabnav-line) { font-size: 12px; line-height: 1; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; --tabnav-line-height: 12px } .tabnav.tabnav-elevated.tabnav-with-2-lines:not(.tabnav-line):lang(ar) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated.tabnav-with-2-lines:not(.tabnav-line):lang(ja) { line-height: 1.0833733333; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated.tabnav-with-2-lines:not(.tabnav-line):lang(ko) { line-height: 1.0833733333; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated.tabnav-with-2-lines:not(.tabnav-line):lang(zh) { letter-spacing: 0em } .tabnav.tabnav-elevated.tabnav-with-2-lines:not(.tabnav-line):lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated.tabnav-with-2-lines:not(.tabnav-line):lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated.tabnav-with-2-lines:not(.tabnav-line):lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated.tabnav-with-2-lines:not(.tabnav-line):lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated.tabnav-with-2-lines:not(.tabnav-line):lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .tabnav.tabnav-elevated.tabnav-with-2-lines:not(.tabnav-line):lang(ar) { --tabnav-line-height: 16px } .tabnav.tabnav-elevated.tabnav-with-2-lines:not(.tabnav-line):lang(ja), .tabnav.tabnav-elevated.tabnav-with-2-lines:not(.tabnav-line):lang(ko) { --tabnav-line-height: 13px } .tabnav:focus-within:has([data-focus-method=key]) .tabnav-indicator { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: 2px; outline-color: var(--tabnav-focus-color) } .tabnav * { box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } .tabnav.tabnav-disable-transitions, .tabnav.tabnav-disable-transitions *, .tabnav.tabnav-disable-transitions *::after, .tabnav.tabnav-disable-transitions *::before, .tabnav.tabnav-disable-transitions::after, .tabnav.tabnav-disable-transitions::before, .tabnav.tabnav-reduced-motion, .tabnav.tabnav-reduced-motion *, .tabnav.tabnav-reduced-motion *::after, .tabnav.tabnav-reduced-motion *::before, .tabnav.tabnav-reduced-motion::after, .tabnav.tabnav-reduced-motion::before { transition: none !important } .tabnav-scale { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0 0 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; font-size: var(--r-tabnav-scaling-font-size); height: 1em } .tabnav-platter { height: calc(var(--tabnav-height)*var(--tabnav-scale)); padding: var(--tabnav-platter-padding); background-color: var(--tabnav-platter-background); border-radius: 999px; overflow: hidden; -webkit-backdrop-filter: blur(var(--tabnav-platter-blur)); backdrop-filter: blur(var(--tabnav-platter-blur)) } .tabnav-platter:focus-visible { outline: none } .tabnav.tabnav-noblur .tabnav-platter { -webkit-backdrop-filter: none; backdrop-filter: none } .tabnav-mask { position: relative; height: 100%; z-index: 1; width: 100%; overflow-x: hidden; mask-image: var(--tabnav-mask-gradient); overscroll-behavior: none } .tabnav-mask.tabnav-mask-noscroll { mask-image: none; display: contents; margin-inline-start: 0; padding: 0 } .tabnav-items { display: flex; align-items: center; margin: 0; width: -moz-fit-content; width: fit-content; list-style: none; z-index: 1 } .tabnav-item, .tabnav-items { white-space: nowrap; position: relative; height: 100% } .tabnav-item { color: var(--tabnav-item-color); transition-duration: 120ms; transition-property: color; transition-timing-function: ease-out } .tabnav-item .tabnav-link { display: flex; align-items: center; height: 100%; padding: 0 var(--tabnav-item-padding); background: rgba(0, 0, 0, 0); border: none; color: inherit; text-decoration: none; letter-spacing: inherit; opacity: .8; transition-property: opacity; transition-duration: 100ms; transition-timing-function: ease-in-out; border-radius: 999px } .tabnav-item .tabnav-link:focus { outline: none } .tabnav-item .tabnav-link:hover { opacity: 1 } .tabnav-item.tabnav-item-active { color: var(--tabnav-item-color-active); transition-delay: 160ms; transition-duration: 160ms; transition-timing-function: ease-in } .tabnav-item.tabnav-item-active .tabnav-link { opacity: 1; cursor: auto } .tabnav.tabnav-focus-split .tabnav-item-active .tabnav-link { background-color: var(--tabnav-indicator-background) } .tabnav-paddle { position: absolute; display: block; transform: translateZ(0); top: var(--tabnav-platter-padding); bottom: var(--tabnav-platter-padding); width: var(--tabnav-paddle-width); min-height: var(--tabnav-paddle-height); background-color: rgba(0, 0, 0, 0); border: none; color: var(--tabnav-paddle-color); cursor: pointer; z-index: 2; transition-delay: 0ms, 40ms, 40ms; transition-duration: 100ms, 80ms, 80ms; transition-property: color, opacity, visibility; transition-timing-function: ease-in-out, ease-out, step-start } .tabnav-paddle-icon { position: absolute; translate: -50% 50%; bottom: 50% } .tabnav-paddle-left { left: 0 } .tabnav-paddle-left .tabnav-paddle-icon { left: calc(50% - 2px + var(--tabnav-platter-padding)) } .tabnav-paddle-right { right: 0 } .tabnav-paddle-right .tabnav-paddle-icon { left: calc(50% + 2px - var(--tabnav-platter-padding)) } .tabnav-paddle:hover { color: var(--tabnav-paddle-color-hover) } .tabnav-paddle.tabnav-paddle-hidden { opacity: 0; visibility: hidden; transition-delay: 200ms; transition-duration: 80ms; transition-property: opacity, visibility; transition-timing-function: ease-out, step-end } .tabnav-paddle:disabled:not(.tabnav-paddle-hidden) .tabnav-paddle-icon { opacity: var(--tabnav-paddle-icon-opacity-disabled) } .tabnav.tabnav-no-property .tabnav-paddle { transition: none !important } .tabnav-indicator { position: absolute; top: var(--tabnav-platter-padding); left: var(--tabnav-indicator-start); bottom: var(--tabnav-platter-padding); width: var(--tabnav-indicator-width); height: calc(100% - var(--tabnav-platter-padding)*2); background-color: var(--tabnav-indicator-background); border-radius: 999px; transition-property: left, width; transition-duration: var(--tabnav-motion-indicator-transform-duration); transition-timing-function: ease-out; pointer-events: none } .tabnav.tabnav-focus-split .tabnav-indicator { display: none } .tabnav.tabnav-line { --tabnav-height: calc(var(--tabnav-image-height) + var(--tabnav-item-label-height) + var(--tabnav-line-keyline-height)); --tabnav-inner-height: calc(var(--tabnav-height) - var(--tabnav-line-keyline-height) - var(--tabnav-item-label-padding-block-end)); --tabnav-platter-padding: 0px; --tabnav-platter-background: rgba(210, 210, 215, 0.64); --tabnav-platter-blur: none; --tabnav-item-color: rgba(0, 0, 0, 0.8); --tabnav-item-color-active: rgb(0, 0, 0); --tabnav-paddle-width: 36px; --tabnav-paddle-height: 100%; --tabnav-indicator-background: rgb(0, 0, 0); --tabnav-mask-opaque-width: var(--tabnav-paddle-width); --tabnav-image-height: 0px; --tabnav-lines: 1; --tabnav-paddle-icon-bottom: calc(var(--tabnav-item-label-padding-block-end) + var(--tabnav-line-height)/2 + var(--tabnav-line-keyline-height)); --tabnav-line-keyline-height: 1px; --tabnav-item-label-height: calc(var(--tabnav-line-height)*var(--tabnav-lines) + var(--tabnav-item-label-padding-block-start) + var(--tabnav-item-label-padding-block-end)); --tabnav-item-label-padding-block-start: 8px; --tabnav-item-label-padding-block-end: calc(9px + var(--tabnav-line-keyline-height)); --tabnav-indicator-inset: var(--tabnav-item-padding); --tabnav-link-justification: flex-end; --tabnav-link-content-height: auto; --tabnav-keyline-mask-opaque-width: 8px; --tabnav-keyline-mask-gradient-width: 18px; --tabnav-keyline-mask-gradient: linear-gradient(90deg, var(--tabnav-mask-color-left) 0, var(--tabnav-mask-color-left) var(--tabnav-keyline-mask-opaque-width), black calc(var(--tabnav-keyline-mask-opaque-width) + var(--tabnav-keyline-mask-gradient-width)), black calc(100% - var(--tabnav-keyline-mask-opaque-width) - var(--tabnav-keyline-mask-gradient-width)), var(--tabnav-mask-color-right) calc(100% - var(--tabnav-keyline-mask-opaque-width)), var(--tabnav-mask-color-right)); --tabnav-item-focus-block-start: 0px; --tabnav-item-focus-block-end: var(--tabnav-item-label-padding-block-end); --tabnav-item-focus-block-start-padding: var(--tabnav-item-label-padding-block-start); --r-tabnav-focus-outline-offset: 1px } .tabnav.tabnav-line.tabnav-dark, .theme-dark .tabnav.tabnav-line { --tabnav-item-color: rgba(255, 255, 255, 0.8); --tabnav-item-color-active: rgb(255, 255, 255); --tabnav-indicator-background: rgb(255, 255, 255); --tabnav-platter-background: rgba(66, 66, 69, 0.72) } .tabnav.tabnav-line.tabnav-elevated { --tabnav-item-label-padding-block-start: 11px; --tabnav-item-label-padding-block-end: calc(12px + var(--tabnav-line-keyline-height)); --tabnav-paddle-width: 44px; --tabnav-keyline-mask-opaque-width: 12px; --tabnav-keyline-mask-gradient-width: 20px } .tabnav.tabnav-line.tabnav-elevated.tabnav-with-icons { --tabnav-item-label-padding-block-start: 6px } .tabnav.tabnav-line.tabnav-with-icons { --tabnav-image-height: 56px; --tabnav-paddle-icon-bottom: calc(var(--tabnav-inner-height)/2 + var(--tabnav-item-label-padding-block-end) + var(--tabnav-line-keyline-height)); --tabnav-link-justification: space-between; --tabnav-link-content-height: 100%; --r-tabnav-focus-outline-offset: 3px; --tabnav-item-label-padding-block-start: 4px; --tabnav-item-focus-block-start-padding: 0px } .tabnav.tabnav-line:focus-within:not(:has(.tabnav-paddle:focus)):not(:has([data-focus-method=mouse], [data-focus-method=touch])) .tabnav-indicator { outline: none } .tabnav.tabnav-line:focus-within:not(:has(.tabnav-paddle:focus)):not(:has([data-focus-method=mouse], [data-focus-method=touch])) .tabnav-indicator::after { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: var(--sk-focus-offset, 1px); outline-offset: var(--r-tabnav-focus-outline-offset) } .tabnav.tabnav-line.tabnav-with-2-lines:not(.tabnav-with-icons):focus-within:not(:has(.tabnav-paddle:focus)):not(:has([data-focus-method=mouse], [data-focus-method=touch])) .tabnav-indicator::after { display: none } .tabnav.tabnav-line.tabnav-with-2-lines:not(.tabnav-with-icons):has(.tabnav-item-active .tabnav-link:focus):not(:has([data-focus-method=mouse], [data-focus-method=touch])) .tabnav-indicator { outline: none } .tabnav.tabnav-line.tabnav-with-2-lines:not(.tabnav-with-icons):has(.tabnav-item-active .tabnav-link:focus):not(:has([data-focus-method=mouse], [data-focus-method=touch])) .tabnav-indicator::after { display: block; outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: var(--sk-focus-offset, 1px); outline-offset: var(--r-tabnav-focus-outline-offset) } .tabnav.tabnav-line:has(.tabnav-item-active.tabnav-item-first) { --tabnav-indicator-inset: 0px var(--tabnav-item-padding) } .tabnav.tabnav-line:has(.tabnav-item-active.tabnav-item-last) { --tabnav-indicator-inset: var(--tabnav-item-padding) 0px } .tabnav.tabnav-line .tabnav-platter { background-color: rgba(0, 0, 0, 0); border-radius: 0; height: auto } .tabnav.tabnav-line .tabnav-keyline { height: var(--tabnav-line-keyline-height); width: 100%; overflow: hidden; position: absolute; z-index: 0; bottom: 0 } .tabnav.tabnav-line .tabnav-keyline-mask { position: relative; height: 100%; z-index: 1; width: 100%; overflow-x: hidden; mask-image: var(--tabnav-keyline-mask-gradient) } .tabnav.tabnav-line .tabnav-keyline-mask::after { content: ""; display: block; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; inset-inline-end: 0; border-radius: 999px; background-color: var(--tabnav-platter-background) } .tabnav.tabnav-line .tabnav-mask.tabnav-mask-noscroll~.tabnav-keyline .tabnav-keyline-mask { mask-image: none; margin-inline-start: 0; padding: 0 } .tabnav.tabnav-line .tabnav-items { align-items: stretch } .tabnav.tabnav-line .tabnav-item { margin-block: 0; height: auto } .tabnav.tabnav-line .tabnav-item:first-child .tabnav-link-content { margin-inline-start: 0 } .tabnav.tabnav-line .tabnav-item:last-child .tabnav-link-content { margin-inline-end: 0 } .tabnav.tabnav-line .tabnav-item:hover { color: var(--tabnav-item-color-active); transition-duration: 100ms; transition-timing-function: ease-in-out } .tabnav.tabnav-line .tabnav-item.tabnav-item-active { transition-delay: 0ms } .tabnav.tabnav-line .tabnav-link { flex-direction: column; justify-content: var(--tabnav-link-justification); opacity: 1; padding: 0 } .tabnav.tabnav-line .tabnav-link-content { height: var(--tabnav-link-content-height); display: flex; flex-direction: column; align-items: center; justify-content: var(--tabnav-link-justification); margin-inline: var(--tabnav-item-padding); position: relative } .tabnav.tabnav-line .tabnav-link-content::after { content: ""; height: var(--tabnav-line-keyline-height); position: absolute; bottom: 0; left: 0; width: 100%; border-radius: 999px } .tabnav.tabnav-line.tabnav-focus-split .tabnav-item-active .tabnav-link { background-color: rgba(0, 0, 0, 0) } .tabnav.tabnav-line.tabnav-focus-split .tabnav-item-active .tabnav-link-content::after { background: var(--tabnav-indicator-background) } .tabnav.tabnav-line .tabnav-label { display: block; padding-block-start: var(--tabnav-item-label-padding-block-start); padding-block-end: var(--tabnav-item-label-padding-block-end) } .tabnav.tabnav-line .tabnav-icon { height: var(--tabnav-image-height) } .tabnav.tabnav-line .tabnav-paddle { border-radius: 0 } .tabnav.tabnav-line .tabnav-paddle-icon { bottom: var(--tabnav-paddle-icon-bottom) } .tabnav.tabnav-line .tabnav-paddle-left .tabnav-paddle-icon { left: calc(50% - 2px) } .tabnav.tabnav-line .tabnav-paddle-right .tabnav-paddle-icon { left: calc(50% + 2px) } .tabnav.tabnav-line .tabnav-indicator { bottom: 0; top: auto; background: rgba(0, 0, 0, 0); outline: none } .tabnav.tabnav-line .tabnav-indicator::before { content: ""; display: block; position: absolute; inset-block-start: auto; inset-block-end: 0; inset-inline: var(--tabnav-indicator-inset); height: var(--tabnav-line-keyline-height); z-index: 1; border-radius: 999px; background: var(--tabnav-indicator-background) } .tabnav.tabnav-line .tabnav-indicator::after { content: ""; position: absolute; display: block; transition-property: left, width; transition-duration: var(--tabnav-motion-indicator-transform-duration); transition-timing-function: ease-out; inset-inline: var(--tabnav-indicator-inset); inset-block-end: var(--tabnav-item-focus-block-end); inset-block-start: calc(var(--tabnav-item-focus-block-start-padding) + var(--tabnav-item-focus-block-start)); pointer-events: none } .overview-contextual-compare-slides-camera-stunning-shots { display: block; width: var(--p-width); height: var(--p-height); --p-width: 144px; --p-height: 140px } @media(max-width:734px)and (max-width:734px) { .overview-contextual-compare-slides-camera-stunning-shots { --p-width: 124px; --p-height: 140px } } .overview-contextual-compare-slides-camera-pro-camera { display: block; width: var(--p-width); height: var(--p-height); --p-width: 144px; --p-height: 140px } @media(max-width:734px)and (max-width:734px) { .overview-contextual-compare-slides-camera-pro-camera { --p-width: 124px; --p-height: 140px } } .overview-contextual-compare-slides-camera-single-camera { display: block; width: var(--p-width); height: var(--p-height); --p-width: 144px; --p-height: 140px } @media(max-width:734px)and (max-width:734px) { .overview-contextual-compare-slides-camera-single-camera { --p-width: 124px; --p-height: 140px } } .overview-contextual-compare-slides-camera-dual-fusion { display: block; width: var(--p-width); height: var(--p-height); --p-width: 144px; --p-height: 140px } @media(max-width:734px)and (max-width:734px) { .overview-contextual-compare-slides-camera-dual-fusion { --p-width: 124px; --p-height: 140px } } .overview-contextual-compare-slides-camera-pro-fusion { display: block; width: var(--p-width); height: var(--p-height); --p-width: 144px; --p-height: 140px } @media(max-width:734px)and (max-width:734px) { .overview-contextual-compare-slides-camera-pro-fusion { --p-width: 124px; --p-height: 140px } } .overview-contextual-compare-slides-camera-fusion { display: block; width: var(--p-width); height: var(--p-height); --p-width: 144px; --p-height: 140px } @media(max-width:734px)and (max-width:734px) { .overview-contextual-compare-slides-camera-fusion { --p-width: 124px; --p-height: 140px } } .overview-contextual-compare-slides-chip-chip { display: block; width: var(--p-width); height: var(--p-height); --p-width: 144px; --p-height: 140px } @media(max-width:734px)and (max-width:734px) { .overview-contextual-compare-slides-chip-chip { --p-width: 124px; --p-height: 140px } } .overview-contextual-compare-slides-chip-chip-pro { display: block; width: var(--p-width); height: var(--p-height); --p-width: 144px; --p-height: 140px } @media(max-width:734px)and (max-width:734px) { .overview-contextual-compare-slides-chip-chip-pro { --p-width: 124px; --p-height: 140px } } .overview-contextual-compare-slides-design-thin { display: block; width: var(--p-width); height: var(--p-height); --p-width: 144px; --p-height: 140px } @media(max-width:734px)and (max-width:734px) { .overview-contextual-compare-slides-design-thin { --p-width: 124px; --p-height: 140px } } .overview-contextual-compare-slides-design-durable { display: block; width: var(--p-width); height: var(--p-height); --p-width: 144px; --p-height: 140px } @media(max-width:734px)and (max-width:734px) { .overview-contextual-compare-slides-design-durable { --p-width: 124px; --p-height: 140px } } .overview-contextual-compare-slides-design-design { display: block; width: var(--p-width); height: var(--p-height); --p-width: 144px; --p-height: 140px } @media(max-width:734px)and (max-width:734px) { .overview-contextual-compare-slides-design-design { --p-width: 124px; --p-height: 140px } } .overview-contextual-compare-slides-design-aluminum { display: block; width: var(--p-width); height: var(--p-height); --p-width: 144px; --p-height: 140px } @media(max-width:734px)and (max-width:734px) { .overview-contextual-compare-slides-design-aluminum { --p-width: 124px; --p-height: 140px } } .overview-contextual-compare-slides-design-unibody { display: block; width: var(--p-width); height: var(--p-height); --p-width: 144px; --p-height: 140px } @media(max-width:734px)and (max-width:734px) { .overview-contextual-compare-slides-design-unibody { --p-width: 124px; --p-height: 140px } } .overview-contextual-compare-slides-design-titanium { display: block; width: var(--p-width); height: var(--p-height); --p-width: 144px; --p-height: 140px } @media(max-width:734px)and (max-width:734px) { .overview-contextual-compare-slides-design-titanium { --p-width: 124px; --p-height: 140px } } #compare-modal { --modal-overlay-max-width: 480px; --compare-gallery-overflow-scroll-height: 812px; --compare-gallery-padding-inline: 20px; --compare-gallery-padding-bottom: 12px; --compare-gallery-padding-top: 34px; --compare-gallery-slide-width: 390px; --compare-gallery-slide-card-height: 140px; --compare-gallery-slide-gap: 10px; --compare-gallery-card-vertical-gap: 45px; --compare-gallery-card-padding-inline-start-with-image: 30px; --compare-gallery-card-padding-inline-start-no-image: 25px; --compare-gallery-card-padding-inline-end: 24px; --compare-gallery-card-background: var(--sk-fill-tertiary); --compare-gallery-card-border-radius: 10px; --compare-gallery-card-dot-diameter: 30px; --compare-gallery-card-dot-margin: 4px; --compare-gallery-card-dot-background: var(--sk-glyph-gray-secondary); --compare-gallery-card-dot-color: #fff; --compare-gallery-card-callout-color: var(--sk-glyph-gray); --compare-gallery-card-headline-color: var(--sk-glyph-gray); --compare-gallery-card-feature-color: var(--sk-glyph-gray-secondary); --compare-gallery-client-width: var(--modal-overlay-max-width); --compare-gallery-group-buttons-padding-top: 12px; --compare-gallery-group-button-height: 60px; --compare-gallery-group-button-width: 89px; --compare-gallery-group-button-gap: 0px; --compare-gallery-group-button-background: #fff; --compare-gallery-group-button-background-selected: var(--sk-fill-gray); --compare-gallery-group-button-color: #6e6e73; --compare-gallery-group-button-color-selected: #f5f5f7; --compare-gallery-group-button-border-radius: 12px; --compare-gallery-group-button-icon-width: 25px; --compare-gallery-group-button-icon-height: 25px; --compare-gallery-paddlenav-padding-top: 18px; --compare-gallery-paddlenav-padding-bottom: 18px; --compare-gallery-paddlenav-diameter: 24px; --compare-gallery-paddlenav-offset-bottom: 92px; --compare-gallery-scroll-container-padding-bottom: var(--compare-gallery-paddlenav-total-height); --compare-gallery-product-name-padding-top: 0px; --compare-gallery-product-name-padding-bottom: 4px; --compare-gallery-product-name-padding-inline: 29px; --compare-gallery-paddlenav-total-height: calc(var(--compare-gallery-paddlenav-padding-top) + var(--compare-gallery-paddlenav-diameter) + var(--compare-gallery-paddlenav-padding-bottom)); --compare-gallery-gap-end: calc(var(--compare-gallery-client-width) - var(--compare-gallery-slide-width) - var(--compare-gallery-padding-inline)); --compare-gallery-inner-content-width: calc(var(--compare-gallery-client-width) - var(--compare-gallery-padding-inline)*2); --compare-gallery-product-names-width: calc(var(--compare-gallery-client-width) - var(--compare-gallery-product-name-padding-inline)*2) } @media(max-width:734px) { #compare-modal { --modal-overlay-max-width: min(calc(100dvw - var(--global-scrollbar-width)), 373px); --modal-overlay-padding-inline: 0px } } @media screen and (max-width:374px) { #compare-modal { --modal-overlay-padding-inline: 0px; --modal-overlay-padding-top: 2dvh; --modal-overlay-padding-bottom: 0px; --modal-overlay-max-width: 100dvw } } @media screen and (max-width:374px)and (max-height:var(--compare-gallery-overflow-scroll-height)) { #compare-modal { --modal-overlay-max-width: calc(100dvw - var(--global-scrollbar-width)) } } #compare-modal::after { pointer-events: none } @media(max-width:734px) { #compare-modal { --compare-gallery-padding-top: 28px; --compare-gallery-padding-bottom: 6px; --compare-gallery-slide-width: 330px; --compare-gallery-group-button-height: 62px; --compare-gallery-group-button-width: 75px; --compare-gallery-paddlenav-offset-bottom: 84px; --compare-gallery-group-buttons-padding-top: 6px; --compare-gallery-card-vertical-gap: 40px; --compare-gallery-card-padding-inline-start-no-image: 25px; --compare-gallery-card-padding-inline-start-with-image: 15px; --compare-gallery-card-padding-inline-end: 12px; --compare-gallery-product-name-padding-inline: 31px; --sk-focus-offset: -2px } } @media screen and (max-width:374px) { #compare-modal { --compare-gallery-slide-width: 300px; --compare-gallery-padding-inline: 10px; --compare-gallery-card-padding-inline-start-with-image: 14px; --compare-gallery-product-name-padding-inline: 21px } } #compare-modal .modal-header { padding: var(--compare-gallery-padding-top) calc(var(--modal-close-button-size) + var(--modal-close-button-offset-inline-end)) 5px var(--compare-gallery-padding-inline) } #compare-modal .modal-header .modal-header-headline { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; padding-inline-start: 8px } #compare-modal .modal-header .modal-header-headline:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-modal .modal-header .modal-header-headline:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-modal .modal-header .modal-header-headline:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-modal .modal-header .modal-header-headline:lang(zh) { line-height: 1.25 } #compare-modal .modal-header .modal-header-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-modal .modal-header .modal-header-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-modal .modal-header .modal-header-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-modal .modal-header .modal-header-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-modal .modal-header .modal-header-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { #compare-modal .modal-header .modal-header-headline { padding-inline-start: 10px } } #compare-modal [data-pricing-hide-all]+.pricing-fallback { display: none } #compare-modal [data-pricing-hide-all][style*="display:none"]+.pricing-fallback { display: flex } #compare-modal.storage-alt [data-pricing-hide-all] { display: none } #compare-modal.storage-alt [data-pricing-hide-all]+.pricing-fallback { display: flex } #compare-gallery-and-controller-wrapper { display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: clip } html.text-zoom #compare-gallery-and-controller-wrapper { padding-top: 50px } #compare-gallery-and-controller-wrapper .tabnav-wrapper { --tabnav-platter-padding: 4px; position: sticky; bottom: 0; z-index: 3; order: 1; background: var(--sk-fill); padding-bottom: var(--compare-gallery-padding-bottom); padding-inline: calc(var(--compare-gallery-padding-inline) - var(--tabnav-platter-padding)*2); padding-top: var(--compare-gallery-group-buttons-padding-top) } #compare-gallery-and-controller-wrapper .tabnav { --tabnav-height: calc(var(--compare-gallery-group-button-height) + var(--tabnav-platter-padding)*2); --tabnav-platter-background: transparent; --tabnav-item-color: var(--sk-glyph-gray-secondary); --tabnav-item-color-active: var(--sk-fill); --tabnav-mask-opaque-width: 14px; width: auto } #compare-gallery-and-controller-wrapper .tabnav .tabnav-paddle-right { right: -14px } #compare-gallery-and-controller-wrapper .tabnav .tabnav-paddle-left { left: -11px } #compare-gallery-and-controller-wrapper .tabnav-platter { border-radius: 0 } #compare-gallery-and-controller-wrapper .tabnav-items { justify-content: stretch; grid-gap: var(--compare-gallery-group-button-gap); gap: var(--compare-gallery-group-button-gap); min-width: 100% } #compare-gallery-and-controller-wrapper .tabnav-link { flex-direction: column; justify-content: center; border-radius: var(--compare-gallery-group-button-border-radius); min-width: var(--compare-gallery-group-button-width); transition-duration: 0s } #compare-gallery-and-controller-wrapper .tabnav-link:focus { outline: unset } #compare-gallery-and-controller-wrapper .tabnav-link:focus-visible { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: var(--sk-focus-offset, 1px) } #compare-gallery-and-controller-wrapper .tabnav-link svg { width: var(--compare-gallery-group-button-icon-width); height: var(--compare-gallery-group-button-icon-height); overflow: visible; fill: currentcolor } #compare-gallery-and-controller-wrapper .tabnav-label { display: block } #compare-gallery-and-controller-wrapper .tabnav-indicator { outline: none !important; border-radius: var(--compare-gallery-group-button-border-radius) } #compare-gallery-wrapper { width: 100%; position: relative; order: 0 } #compare-gallery-wrapper .scroll-container { overflow-x: scroll; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline-start: var(--compare-gallery-padding-inline); scroll-padding-inline-end: var(--compare-gallery-gap-end); padding-bottom: var(--compare-gallery-scroll-container-padding-bottom) } #compare-gallery-wrapper .product-names-overlay { pointer-events: none } #compare-gallery-wrapper .product-names-overlay .product-name { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; margin-top: 0; position: absolute; z-index: 2; display: inline-flex; align-items: baseline; width: auto; padding-bottom: var(--compare-gallery-product-name-padding-bottom); padding-top: var(--compare-gallery-product-name-padding-top); margin-inline-start: var(--compare-gallery-product-name-padding-inline); pointer-events: all } #compare-gallery-wrapper .product-names-overlay .product-name:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .product-names-overlay .product-name:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .product-names-overlay .product-name:lang(ko) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .product-names-overlay .product-name:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } #compare-gallery-wrapper .product-names-overlay .product-name:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .product-names-overlay .product-name:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .product-names-overlay .product-name:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .product-names-overlay .product-name:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .product-names-overlay .product-name:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { #compare-gallery-wrapper .product-names-overlay .product-name { justify-content: space-between } } #compare-gallery-wrapper .product-names-overlay .product-name .current-product { font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; padding-inline-start: 8px; color: var(--sk-glyph-orange) } #compare-gallery-wrapper .product-names-overlay .product-name .current-product:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .product-names-overlay .product-name .current-product:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .product-names-overlay .product-name .current-product:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .product-names-overlay .product-name .current-product:lang(zh) { letter-spacing: 0em } #compare-gallery-wrapper .product-names-overlay .product-name .current-product:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .product-names-overlay .product-name .current-product:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .product-names-overlay .product-name .current-product:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .product-names-overlay .product-name .current-product:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .product-names-overlay .product-name .current-product:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .item-container { display: grid; grid-template-rows: repeat(3, auto); grid-template-columns: none; grid-auto-flow: column; grid-column-gap: var(--compare-gallery-slide-gap); column-gap: var(--compare-gallery-slide-gap); z-index: 1; list-style: none; margin: auto 0; padding-inline: var(--compare-gallery-padding-inline) var(--compare-gallery-gap-end); width: -moz-fit-content; width: fit-content } #compare-gallery-wrapper .gallery-item { display: grid; grid-template-rows: subgrid; grid-row: span 3; position: relative; width: -moz-fit-content; width: fit-content; min-height: 400px; scroll-snap-align: start } #compare-gallery-wrapper .gallery-item:last-child { scroll-snap-align: start end } #compare-gallery-wrapper .vo-product-title-helper { width: auto; height: auto; transform: translateY(-100%) } #compare-gallery-wrapper .gallery-card { display: flex; overflow: hidden; margin-top: var(--compare-gallery-card-vertical-gap); background-color: var(--compare-gallery-card-background); border-radius: var(--compare-gallery-card-border-radius); width: var(--compare-gallery-slide-width); min-height: var(--compare-gallery-slide-card-height) } html.text-zoom #compare-gallery-wrapper .gallery-card { padding: 1ch; width: -moz-fit-content; width: fit-content; min-width: var(--compare-gallery-slide-width); flex-direction: column; align-items: center; text-align: center; justify-content: center; grid-gap: 15px; gap: 15px } #compare-gallery-wrapper .gallery-card-image { display: block; flex-shrink: 0; margin: 0; height: var(--p-height); width: var(--p-width) } html.text-zoom #compare-gallery-wrapper .gallery-card-image { overflow: hidden; border-radius: var(--compare-gallery-card-border-radius) } @media screen and (max-width:374px) { #compare-gallery-wrapper .gallery-card-image { width: 100px } #compare-gallery-wrapper .gallery-card-image img { object-fit: cover; width: 100px; height: 100% } } #compare-gallery-wrapper .copy-container { margin-top: 0; display: flex; flex-direction: column; justify-content: center; padding-inline-start: var(--compare-gallery-card-padding-inline-start-no-image); padding-inline-end: var(--compare-gallery-card-padding-inline-end) } html.text-zoom #compare-gallery-wrapper .copy-container { padding-inline: 0 } #compare-gallery-wrapper .copy-container .vo-helper { color: rgba(0, 0, 0, 0); position: absolute; height: 100% } #compare-gallery-wrapper .copy-container .vo-helper.reduce-font { font-size: 40% } #compare-gallery-wrapper .copy-container .vo-helped { pointer-events: none } #compare-gallery-wrapper .copy-container p { margin-top: 0; position: relative } #compare-gallery-wrapper .copy-container .headline { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; color: var(--compare-gallery-card-headline-color) } #compare-gallery-wrapper .copy-container .headline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .headline:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .headline:lang(ko) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .headline:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } #compare-gallery-wrapper .copy-container .headline:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .feature { font-size: 12px; line-height: 1.3333733333; font-weight: 600; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; text-transform: uppercase; color: var(--compare-gallery-card-feature-color) } #compare-gallery-wrapper .copy-container .feature:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .feature:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .feature:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .feature:lang(zh) { letter-spacing: 0em } #compare-gallery-wrapper .copy-container .feature:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .feature:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .feature:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .feature:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .feature:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .callout { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; color: var(--compare-gallery-card-callout-color) } #compare-gallery-wrapper .copy-container .callout:lang(ja) { line-height: 1.175; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .callout:lang(ko) { line-height: 1.2; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .callout:lang(th) { line-height: 1.35; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .callout:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .callout:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .callout:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .callout:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .callout:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media screen and (max-width:374px) { #compare-gallery-wrapper .copy-container .callout { font-size: 32px } } #compare-gallery-wrapper .copy-container .zoom-levels { padding-top: 4px; margin: 0; list-style: none; display: flex } html.text-zoom #compare-gallery-wrapper .copy-container .zoom-levels { justify-content: center } #compare-gallery-wrapper .copy-container .zoom-levels li { font-size: 12px; line-height: 1.3333733333; font-weight: 700; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; display: inline-flex; position: relative; align-items: center; justify-content: center; padding: 0; border-radius: 50%; background: var(--compare-gallery-card-dot-background); width: var(--compare-gallery-card-dot-diameter); height: var(--compare-gallery-card-dot-diameter); margin-inline-end: var(--compare-gallery-card-dot-margin); color: var(--compare-gallery-card-dot-color) } #compare-gallery-wrapper .copy-container .zoom-levels li:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .zoom-levels li:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .zoom-levels li:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .zoom-levels li:lang(zh) { letter-spacing: 0em } #compare-gallery-wrapper .copy-container .zoom-levels li:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .zoom-levels li:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .zoom-levels li:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .zoom-levels li:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } #compare-gallery-wrapper .copy-container .zoom-levels li:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } html.text-zoom #compare-gallery-wrapper .copy-container .zoom-levels li { padding: 1ch } #compare-gallery-wrapper .copy-container .callout~.feature { margin-top: 4px } #compare-gallery-wrapper .copy-container .headline~.feature { margin-top: 9px } #compare-gallery-wrapper .copy-container:has(.zoom-levels) .headline~.feature { margin-top: 8px } #compare-gallery-wrapper .gallery-card-image~.copy-container { padding-inline-start: var(--compare-gallery-card-padding-inline-start-with-image) } #compare-gallery-wrapper .paddlenav { --sk-paddlenav-diameter: var(--compare-gallery-paddlenav-diameter); position: sticky; bottom: var(--compare-gallery-paddlenav-offset-bottom) } #compare-gallery-wrapper::-webkit-scrollbar { width: 0; height: 0; background: rgba(0, 0, 0, 0); display: none } .marquee-ctas-list { position: relative; margin-inline-start: 0; list-style: none } .marquee-ctas-link { display: inline-block; position: relative } .marquee-ctas-link:first-child { margin-top: 0 } .marquee-ctas-link.button { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit } .marquee-detail { display: flow-root; position: relative; color: var(--sk-body-text-color) } .marquee-detail:first-child { margin-top: 0 } .detail-inner-group, .marquee-header { position: relative } .marquee-header { display: flow-root } .marquee-header p { color: var(--sk-body-text-color) } .header-badge { margin-top: 0 } .header-badge, .header-eyebrow, .header-headline, .header-tagline { position: relative; margin-bottom: 0 } .marquee-milestone { display: block; position: relative } .marquee-milestone:first-child { margin-top: 0 } .milestone-primary { font-weight: 600 } .milestone-primary+.milestone-secondary { margin-top: 0 } .marquee-pricing { font-weight: 600; position: relative } .marquee-pricing:first-child { margin-top: 0 } .pricing-product { position: relative } .pricing-product:first-child { margin-top: 0 } .pricing-product:not(:first-child) { font-weight: 400 } .pricing-product+.pricing-product { margin-top: 0; margin-bottom: 0 } .marquee { --marquee-header-detail-row-gap: 32px; z-index: 1; box-sizing: border-box; overflow: hidden; display: flow-root; position: relative; width: 100%; padding-top: 64px; padding-bottom: 64px } @media(min-width:1441px) { .marquee { padding-top: 80px; padding-bottom: 80px } } @media(max-width:1068px) { .marquee { padding-top: 48px; padding-bottom: 48px } } @media(max-width:734px) { .marquee { --marquee-header-detail-row-gap: 24px; padding-top: 32px; padding-bottom: 32px } } .marquee .viewport-content { position: relative; height: 100% } @media(min-width:1441px) { .marquee .viewport-content { max-width: var(--global-content-max-width-hero) } } .marquee .marquee-scrim { --scrim-blur: 20px; --scrim-mask-angle: 180deg; --scrim-mask-stop-color: 100%; --scrim-saturate: 1; --scrim-tint: 255 255 255; --scrim-tint-alpha: 100%; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; background-color: rgb(var(--scrim-tint)/var(--scrim-tint-alpha)); -webkit-backdrop-filter: blur(var(--scrim-blur)) saturate(var(--scrim-saturate)); backdrop-filter: blur(var(--scrim-blur)) saturate(var(--scrim-saturate)); mask-image: linear-gradient(var(--scrim-mask-angle), transparent, #000 var(--scrim-mask-stop-color)) } .marquee .marquee-scrim.scrim-mask-debug { background: linear-gradient(var(--scrim-mask-angle), #fff, #000 use-mask-stop) } .header-eyebrow, .header-headline { margin-top: 8px } @media(max-width:1068px) { .header-headline { margin-top: 7px } } @media(max-width:734px) { .header-headline { margin-top: 6px } } .header-headline.typography-marquee-headline-elevated { margin-top: 9px } @media(max-width:1068px) { .header-headline.typography-marquee-headline-elevated { margin-top: 8px } } @media(max-width:734px) { .header-headline.typography-marquee-headline-elevated { margin-top: 7px } } .header-tagline { margin-top: 8px } @media(max-width:1068px) { .header-tagline { margin-top: 7px } } @media(max-width:734px) { .header-tagline { margin-top: 6px } } .header-tagline.typography-marquee-tagline-elevated { margin-top: 9px } @media(max-width:1068px) { .header-tagline.typography-marquee-tagline-elevated { margin-top: 8px } } @media(max-width:734px) { .header-tagline.typography-marquee-tagline-elevated { margin-top: 7px } } .marquee-header .marquee-milestone { margin-top: 8px } .marquee-header .marquee-milestone .milestone-secondary { margin-top: 4px } .marquee-ctas-link, .marquee-ctas-list, .marquee-detail, .marquee-milestone, .marquee-pricing { margin-top: var(--marquee-header-detail-row-gap) } .section-welcome { --welcome-margin-top: 0px; z-index: 1; position: relative; display: flow-root; margin-top: var(--welcome-margin-top) } .section-welcome.section-welcome-localnav-overlap { --welcome-margin-top: calc(var(--r-localnav-height)*-1) } .section-welcome.section-welcome-localnav-overlap.section-welcome-globalnav-overlap { --welcome-margin-top: calc(var(--r-globalnav-height)*-1 + var(--r-localnav-height)*-1) } .section-welcome .inline-media-component-container.with-media-ui-button .inline-media-ui-button { top: 0 } .section-welcome .inline-media-component-container.with-media-ui-button .inline-media-ui-button .play-pause-button { --welcome-media-ui-offset: 40px; margin-top: var(--welcome-media-ui-offset); margin-bottom: var(--welcome-media-ui-offset); margin-inline-end: calc(var(--welcome-media-ui-offset) + var(--global-scrollbar-width, 0px)) } @media(max-width:734px) { .section-welcome .inline-media-component-container.with-media-ui-button .inline-media-ui-button .play-pause-button { --welcome-media-ui-offset: 28px } } @keyframes ribbon-drop { 0% { transform: translateY(-100%) } 100% { transform: translateY(0) } } .ribbon { --ribbon-link-inline-color: inherit; overflow: hidden; font-size: 14px; line-height: 1.4285914286; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; --ribbon-link-color: rgb(0, 102, 204); --ribbon-focus-color: #0071e3; --ribbon-text-color: rgb(29, 29, 31); --ribbon-background-color: rgb(245, 245, 247); --ribbon-content-padding-top: 16px; --ribbon-content-padding-bottom: var(--ribbon-content-padding-top); --ribbon-content-width: 83.33333%; --ribbon-content-minimum-width: 320px; width: var(--ribbon-width); padding-top: var(--ribbon-padding-top); padding-bottom: var(--ribbon-padding-bottom) } .ribbon-content-wrapper { text-align: center } .ribbon-content { margin-left: auto; margin-right: auto; width: var(--ribbon-content-width); min-width: var(--ribbon-content-minimum-width) } .ribbon-link { white-space: nowrap } .ribbon-link:focus { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: var(--sk-focus-offset, 1px) } .ribbon-link-inline { color: var(--ribbon-link-inline-color) } .ribbon-link-inline, .ribbon-link-inline:link { text-decoration: underline } .ribbon:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon:lang(ja) { line-height: 1.4; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon:lang(ko) { line-height: 1.5714285714; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon:lang(zh) { line-height: 1.5; letter-spacing: 0em } .ribbon:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon-content-wrapper { background-color: var(--ribbon-background-color); -webkit-backdrop-filter: blur(var(--ribbon-background-blur)); backdrop-filter: blur(var(--ribbon-background-blur)); padding-top: var(--ribbon-content-padding-top); padding-bottom: var(--ribbon-content-padding-bottom); border-radius: var(--ribbon-border-radius) } .ribbon-content { color: var(--ribbon-text-color) } .ribbon-link { color: var(--ribbon-link-color) } .ribbon-link:focus { outline-color: var(--ribbon-focus-color) } .ribbon-elevated { font-size: 17px; line-height: 1.4705882353; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; --ribbon-content-padding-top: 24px } .ribbon-elevated:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon-elevated:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon-elevated:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon-elevated:lang(zh) { letter-spacing: 0em } .ribbon-elevated:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon-elevated:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon-elevated:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon-elevated:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon-elevated:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .ribbon-elevated.ribbon-inset { --ribbon-border-radius: 12px } .ribbon-blue { --ribbon-background-color: rgb(0, 113, 227); --ribbon-text-color: rgb(245, 245, 247); --ribbon-link-color: rgb(245, 245, 247); --ribbon-focus-color: rgb(255, 255, 255) } .ribbon-variant-neutral-alpha { --ribbon-background-color: rgba(245, 245, 247, 0.8) } .ribbon-variant-neutral-alt { --ribbon-background-color: rgb(255, 255, 255) } .ribbon-blue-to-default { --ribbon-background-color: rgb(245, 245, 247); --ribbon-background-color-initial: rgb(0, 113, 227); --ribbon-text-color: rgb(29, 29, 31); --ribbon-text-color-initial: rgb(245, 245, 247); --ribbon-link-color: rgb(0, 102, 204); --ribbon-link-color-initial: rgb(245, 245, 247) } @keyframes ribbon-animate-background { 0% { background-color: var(--ribbon-background-color-initial) } 100% { background-color: var(--ribbon-background-color) } } .ribbon-animate-color .ribbon-content-wrapper { background-color: var(--ribbon-background-color-initial); animation: ribbon-animate-background .8s ease-in-out 1.6s forwards } @media(prefers-reduced-motion) { .ribbon-animate-color .ribbon-content-wrapper { background-color: var(--ribbon-background-color); animation: none } } @keyframes ribbon-animate-text-color { 0% { color: var(--ribbon-text-color-initial) } 100% { color: var(--ribbon-text-color) } } .ribbon-animate-color .ribbon-content { color: var(--ribbon-text-color-initial); animation: ribbon-animate-text-color .8s ease-in-out 1.6s forwards } @media(prefers-reduced-motion) { .ribbon-animate-color .ribbon-content { color: var(--ribbon-text-color); animation: none } } @keyframes ribbon-animate-link-color { 0% { color: var(--ribbon-link-color-initial) } 100% { color: var(--ribbon-link-color) } } .ribbon-animate-color .ribbon-link { color: var(--ribbon-link-color-initial); animation: ribbon-animate-link-color .8s ease-in-out 1.6s forwards } @media(prefers-reduced-motion) { .ribbon-animate-color .ribbon-link { color: var(--ribbon-link-color); animation: none } } .ribbon-drop-wrapper { animation: ribbon-drop .8s ease-in-out forwards } @media(prefers-reduced-motion) { .ribbon-drop-wrapper { animation: none } } .ribbon-inset { --ribbon-width: 83.33333%; --ribbon-padding-top: 16px; --ribbon-border-radius: 10px; margin: 0 auto } .ribbon-inset .ribbon-content { width: var(--ribbon-width) } @media(max-width:734px) { .ribbon-inset { --ribbon-width: 87.5% } .ribbon-inset .ribbon-content { min-width: var(--ribbon-width) } } .ribbon-blur { --ribbon-background-blur: 20px } .theme-dark.ribbon, .theme-dark .ribbon { --ribbon-text-color: rgb(245, 245, 247); --ribbon-background-color: rgb(29, 29, 31); --ribbon-link-color: rgb(41, 151, 255); --ribbon-focus-color: #0071e3 } .theme-dark.ribbon-blue, .theme-dark .ribbon-blue { --ribbon-background-color: rgb(0, 113, 227); --ribbon-text-color: rgb(245, 245, 247); --ribbon-link-color: rgb(245, 245, 247); --ribbon-focus-color: rgb(255, 255, 255) } .theme-dark.ribbon-variant-neutral-alpha, .theme-dark .ribbon-variant-neutral-alpha { --ribbon-background-color: rgba(29, 29, 31, 0.8) } .theme-dark.ribbon-variant-neutral-alt, .theme-dark .ribbon-variant-neutral-alt { --ribbon-background-color: rgb(0, 0, 0) } .theme-dark.ribbon-blue-to-default, .theme-dark .ribbon-blue-to-default { --ribbon-background-color: rgb(29, 29, 31); --ribbon-text-color: rgb(245, 245, 247); --ribbon-link-color: rgb(41, 151, 255) } .theme-light.ribbon, .theme-light .ribbon { --ribbon-text-color: rgb(29, 29, 31); --ribbon-background-color: rgb(245, 245, 247); --ribbon-link-color: rgb(0, 102, 204); --ribbon-focus-color: #0071e3 } .theme-light.ribbon-blue, .theme-light .ribbon-blue { --ribbon-background-color: rgb(0, 113, 227); --ribbon-text-color: rgb(245, 245, 247); --ribbon-link-color: rgb(245, 245, 247); --ribbon-focus-color: rgb(255, 255, 255) } .theme-light.ribbon-variant-neutral-alpha, .theme-light .ribbon-variant-neutral-alpha { --ribbon-background-color: rgba(245, 245, 247, 0.8) } .theme-light.ribbon-variant-neutral-alt, .theme-light .ribbon-variant-neutral-alt { --ribbon-background-color: rgb(255, 255, 255) } .theme-light.ribbon-blue-to-default, .theme-light .ribbon-blue-to-default { --ribbon-background-color: rgb(245, 245, 247); --ribbon-text-color: rgb(29, 29, 31); --ribbon-link-color: rgb(0, 102, 204) } #localnav { pointer-events: none } .ribbon { position: relative; z-index: 3; margin-top: calc(var(--localnav-total-height)*-1) } html.text-zoom .ribbon { margin-top: unset } .section-welcome { --p-width: 1440px; --p-height: 1440px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: var(--welcome-section-height); max-height: var(--welcome-section-height); margin-top: 0; overflow: hidden; --welcome-section-height: calc(100svh - var(--global-nav-collective-height) - var(--r-localnav-height)); --media-padding-top: 100px; --media-padding-bottom: 100px } @media(min-width:1441px)and (min-width:1441px) { .section-welcome { --p-width: 1880px; --p-height: 1694px } } @media(max-width:1068px)and (max-width:1068px) { .section-welcome { --p-width: 430px; --p-height: 616px } } @media(max-width:734px)and (max-width:734px) { .section-welcome { --p-width: 280px; --p-height: 408px } } @media(min-width:735px) { .section-welcome { min-height: calc(720px - var(--global-nav-collective-height) - var(--r-localnav-height)) } } @media(max-width:1068px) { .section-welcome { flex-direction: column; justify-content: center } } @media(max-width:734px) { .section-welcome { min-height: 524px; max-height: 850px } } .section-welcome .welcome-video { max-height: var(--p-height); height: 100%; width: var(--p-width); flex-shrink: 0 } @media(min-width:1069px) { .section-welcome .welcome-video { max-width: 100vw } } @media(max-width:1068px) { .section-welcome .welcome-video { width: var(--p-width); flex-shrink: 1; position: relative; height: 100%; margin: 20px 0 30px } } @media(max-width:734px) { .section-welcome .welcome-video { margin: 13px 0 16px } } .section-welcome .welcome-video video { clip-path: inset(1px) } .section-welcome .welcome-video.with-media-ui-button .inline-media-ui-button { left: clamp(0px, 50% + 50vw, var(--global-content-max-width)/2 + 50% + 17px); transform: translateX(-100%) translateY(calc(100% + 17px)); margin: 0; width: 53px; display: flex } @media(min-width:1069px) { .section-welcome .welcome-video.with-media-ui-button .inline-media-ui-button { height: 36px; bottom: calc(100vh - var(--global-nav-collective-height)) } } @media(max-width:1068px) { .section-welcome .welcome-video.with-media-ui-button .inline-media-ui-button { top: calc(50% - 24px + var(--welcome-section-height)/2); transform: translateX(-100%) translateY(-100%) } } @media(max-width:734px) { .section-welcome .welcome-video.with-media-ui-button .inline-media-ui-button { top: calc(50% - 8px + var(--welcome-section-height)/2) } } .section-welcome .welcome-video.with-media-ui-button .inline-media-ui-button .play-pause-button { margin: 0 } @media(min-width:1069px) { .section-welcome .welcome-video .video-wrapper { bottom: 5% } } @media(max-width:1068px) { .section-welcome .welcome-video .video-wrapper { left: 50%; transform: translateX(-50%) } } .section-welcome .welcome-video .video-wrapper picture, .section-welcome .welcome-video .video-wrapper video { position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; margin: auto } .section-welcome .welcome-video .video-wrapper img, .section-welcome .welcome-video .video-wrapper video { object-position: center bottom; object-fit: contain; height: 100%; width: 100% } @media(max-width:1068px) { .section-welcome .welcome-video .video-wrapper img, .section-welcome .welcome-video .video-wrapper video { object-position: center } } @media(max-width:734px) { .section-welcome .marquee { padding-bottom: 0 } } .section-welcome .viewport-content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; grid-column-gap: 80px; column-gap: 80px; grid-row-gap: var(--marquee-header-detail-row-gap); row-gap: var(--marquee-header-detail-row-gap) } @media(min-width:1441px) { .section-welcome .viewport-content { grid-column-gap: 120px; column-gap: 120px } } .section-welcome .marquee-header { min-width: 50% } @media(max-width:734px) { .section-welcome .marquee-header { min-width: auto } } .section-welcome .marquee-header .marquee-milestone { position: absolute; top: 100%; inset-inline-start: 0 } @media(max-width:734px) { .section-welcome .marquee-header .marquee-milestone { position: relative; top: unset; inset-inline-start: unset } } .section-welcome .marquee-detail { margin-top: 0 } @media(max-width:734px) { .section-welcome .marquee-detail { max-width: none } } .section-welcome .detail-inner-group { display: flex; justify-content: space-between; align-items: center; grid-column-gap: 34px; column-gap: 34px } @media(max-width:734px) { .section-welcome .detail-inner-group { grid-column-gap: 28px; column-gap: 28px } } .section-welcome .marquee-ctas-link { display: flex; justify-content: center; align-items: center; margin-top: 0 } .section-welcome .marquee { flex-shrink: 0; --frame-1-time: 1100ms; --frame-1-curve: cubic-bezier(0.37, 0, 0.63, 1); --frame-2-time: 2000ms; --frame-2-curve: cubic-bezier(0.37, 0, 0.63, 1) } @media(min-width:1069px) { .section-welcome .marquee { position: absolute; bottom: 0 } } @media(max-width:1068px) { .section-welcome .marquee { margin: 0; padding: 0 } } .section-welcome .marquee .viewport-content { max-width: var(--global-content-max-width) } @media(max-width:1068px) { .section-welcome .marquee { padding-bottom: 0 } } @media(max-width:1068px) { .section-welcome .marquee .header-eyebrow { margin-top: 0 } } .section-welcome .marquee .header-headline { display: inline-block; color: rgba(0, 0, 0, 0); background: linear-gradient(90deg, #a977c8, #6f8cc7 8.5%, #639a47 16.5%, #1d1d1f 33%, #1d1d1f 66%, #a977c8 83.5%, #6f8cc7 91.5%, #639a47); background-size: 600% 100%; background-position-x: 0%; background-clip: text; transition: background-position-x var(--frame-2-time) var(--frame-2-curve); padding-bottom: 10%; margin-bottom: -9%; margin-top: 0 } @media(min-width:1441px) { .section-welcome .marquee .header-headline { left: -4px } } @media(min-width:1069px)and (max-width:1440px) { .section-welcome .marquee .header-headline { left: -2px } } .section-welcome .marquee .header-headline.welcome-gradient-to-black { background-position-x: 50%; transition: background-position-x var(--frame-1-time) var(--frame-2-curve) } .section-welcome .marquee .header-headline.welcome-gradient-to-gradient { background-position-x: 100% } .section-welcome .marquee .header-headline.welcome-gradient-prevent-rewind { transition: none; background-position-x: 0% } @media(min-width:1069px) { .section-welcome .marquee .marquee-header { width: 50% } } @media(max-width:1068px) { .section-welcome .marquee .marquee-header { text-align: center; min-width: 100% } } @media(max-width:480px) { .section-welcome .marquee .marquee-header { text-align: center; margin: 0 auto } } @media(max-width:1068px) { .section-welcome .marquee-top { margin-top: 30px } } @media(max-width:734px) { .section-welcome .marquee-top { margin-top: 10px } } html.text-zoom .section-welcome .marquee-top { transform: translateY(-120px) } @media(max-width:1068px) { .section-welcome .marquee-bottom { padding-bottom: 30px } } @media(max-width:734px) { .section-welcome .marquee-bottom { padding-bottom: 10px } } @media(min-width:1069px) { .section-welcome .marquee-bottom .viewport-content { justify-content: flex-end } } html.text-zoom .section-welcome .marquee-bottom .viewport-content { justify-content: flex-start } .section-welcome .marquee-detail { padding: 12px; padding-inline-start: 25px } @media(min-width:1069px) { .section-welcome .marquee-detail { margin-bottom: 3px } } @media(max-width:1068px) { .section-welcome .marquee-detail { width: 100%; text-align: center; padding: 0 } } @media(max-width:734px) { .section-welcome .marquee-detail { padding-left: 0; padding-right: 0 } } .section-welcome .marquee-detail::before { --scrim-blur: 20px; --scrim-mask-angle: 180deg; --scrim-mask-stop-color: 100%; --scrim-saturate: 1; --scrim-tint: 255 255 255; --scrim-tint-alpha: 100%; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; background-color: rgb(var(--scrim-tint)/var(--scrim-tint-alpha)); -webkit-backdrop-filter: blur(var(--scrim-blur)) saturate(var(--scrim-saturate)); backdrop-filter: blur(var(--scrim-blur)) saturate(var(--scrim-saturate)); mask-image: linear-gradient(var(--scrim-mask-angle), transparent, #000 var(--scrim-mask-stop-color)); content: ""; background-color: rgba(232, 232, 237, .5); border-radius: 100vmax; mask-image: none } @media(max-width:1068px) { .section-welcome .marquee-detail::before { display: none } } .section-welcome .marquee-detail .marquee-milestone { color: #6e6e73 } @media(min-width:1069px) { .section-welcome .marquee-detail .marquee-milestone { position: absolute; bottom: 0; right: -12px; width: 87.5vw; max-width: var(--global-content-max-width); transform: translateY(calc(100% + 35px)); margin: 0 } } @media(max-width:1068px) { .section-welcome .marquee-detail .marquee-milestone { margin: 14px 0 17px } } @media(max-width:734px) { .section-welcome .marquee-detail .marquee-milestone { display: flex; flex-direction: column; align-items: center; white-space: nowrap } } html.text-zoom .section-welcome .marquee-detail .marquee-milestone { right: auto } @media(min-width:1069px) { .section-welcome .marquee-detail .pricing-product { display: flex; flex-direction: column } } .section-welcome .marquee-detail .pricing-product .footnote a:focus-visible { outline-offset: -2px } .section-welcome .detail-inner-group { grid-column-gap: 20px; column-gap: 20px } @media(max-width:1068px) { .section-welcome .detail-inner-group { display: block } } @media(max-width:1068px) { .section-welcome .detail-inner-group .button { display: inline-block } } .section-welcome .detail-inner-group .marquee-pricing { min-width: 43px } @media(min-width:1069px) { .section-welcome .detail-inner-group .marquee-pricing { white-space: nowrap } } @media(max-width:1068px) { .section-welcome .detail-inner-group .marquee-pricing { margin-bottom: 14px } } @media(max-width:734px) { .section-welcome .detail-inner-group .marquee-pricing { white-space: nowrap; display: flex; justify-content: center } } .section-welcome .detail-inner-group .product-acmi { display: none } .section-welcome .welcome-pricing { white-space: nowrap } @media(min-width:735px) { .section-welcome .marquee-ctas-link { padding-inline: 21px } } .cameras-content { --camera-width: 495px; --camera-offset: 180px; --cameras-margin-right: 130px; width: calc(var(--camera-width) + var(--camera-offset)); margin-right: var(--cameras-margin-right); --camera-offset: 175px; --camera-width: 370px; --cameras-margin-right: 310px } @media(min-width:1441px) { .cameras-content { --camera-offset: 175px; --camera-width: 370px; --cameras-margin-right: 320px } } @media(max-width:1068px) { .cameras-content { --camera-offset: 150px; --camera-width: 360px; --cameras-margin-right: 0px } } @media(max-width:734px) { .cameras-content { --camera-offset: 75px; --camera-width: 170px; --cameras-margin-right: 0px } } .enhanced .media-gallery-item-cameras .media-wrapper { --animation-duration: 0.5s; --custom-animation-duration: 0.5s; --animation-reset-duration: 0.5s; --animation-easing: cubic-bezier(0.34, 0, 0, 1); --translate-y: 120px; transform: translate3d(0, var(--translate-y), 0); animation-fill-mode: forwards; --translate-y: 170px } @media(min-width:1441px) { .enhanced .media-gallery-item-cameras .media-wrapper { --translate-y: 170px } } @media(max-width:1068px) { .enhanced .media-gallery-item-cameras .media-wrapper { --translate-y: 130px } } @media(max-width:734px) { .enhanced .media-gallery-item-cameras .media-wrapper { --translate-y: 120px } } @keyframes cameras-front-slide { 0% { transform: translate3d(0, var(--translate-y), 0) } 100% { transform: translateZ(0) } } .enhanced .media-gallery-item-cameras .media-wrapper { animation-name: cameras-front-slide; animation-timing-function: var(--animation-easing); animation-duration: var(--custom-animation-duration, var(--animation-duration, 4s)); animation-delay: var(--animation-position, 0); animation-play-state: paused } .ios-content { --main-image-width: 385px; --animation-duration: 0.5s; --custom-animation-duration: 0.5s; --animation-reset-duration: 0.5s; --animation-easing: cubic-bezier(0.34, 0, 0, 1); width: 100%; --main-image-width: 810px } @media(min-width:1441px) { .ios-content { --main-image-width: 810px } } @media(max-width:1068px) { .ios-content { --main-image-width: 480px; margin-top: 110px } } @media(max-width:734px) { .ios-content { --main-image-width: 365px; margin-top: 80px } } @media(max-width:480px) { .ios-content { --main-image-width: 300px } } .media-wrapper { --image-width: var(--main-image-width); width: var(--image-width) } @media(max-width:480px) { .media-wrapper { max-width: var(--image-width); width: 100% } } .enhanced .media-gallery-item-ios { --scale: 1.35 } @media(min-width:735px)and (max-width:1068px) { .enhanced .media-gallery-item-ios { --scale: 1.55 } } @keyframes ios-container-slide-y { 0% { transform: translateY(70px) } 100% { transform: translateY(0) } } .enhanced .media-gallery-item-ios .ios-content { animation-name: ios-container-slide-y; animation-timing-function: var(--animation-easing); animation-duration: var(--custom-animation-duration, var(--animation-duration, 4s)); animation-delay: var(--animation-position, 0); animation-play-state: paused } @keyframes ios-container-slide-scale { 0% { transform: scale(var(--scale)) } 100% { transform: scale(1) } } .enhanced .media-gallery-item-ios .media-wrapper-container { animation-name: ios-container-slide-scale; animation-timing-function: var(--animation-easing); animation-duration: var(--custom-animation-duration, var(--animation-duration, 4s)); animation-delay: var(--animation-position, 0); animation-play-state: paused } .enhanced .media-gallery-item-ios .ios-content, .enhanced .media-gallery-item-ios .media-wrapper-container { animation-fill-mode: forwards } .enhanced .media-gallery-item-ios .ios-content { transform: translateY(70px) } .enhanced .media-gallery-item-ios .media-wrapper-container { transform: scale(var(--scale)) } .section-highlights { position: relative } .section-highlights::before { content: ""; position: absolute; width: 100%; top: 0; z-index: 1; background: linear-gradient(#fff, transparent) } @media(min-width:1069px) { .section-highlights::before { display: none } } @media(max-width:1068px) { .section-highlights::before { height: 130px } } @media(max-width:734px) { .section-highlights::before { height: 90px } } .section-highlights .all-access-pass__container { height: 75%; top: auto; bottom: 0 } .section-highlights [data-ac-gallery-item].media-gallery-item-cameras .positioned-media-element.static { display: block; width: var(--p-width); height: var(--p-height); --p-width: 1260px; --p-height: 680px } @media(max-width:1068px)and (max-width:1068px) { .section-highlights [data-ac-gallery-item].media-gallery-item-cameras .positioned-media-element.static { --p-width: 934px; --p-height: 628px } } @media(max-width:734px)and (max-width:734px) { .section-highlights [data-ac-gallery-item].media-gallery-item-cameras .positioned-media-element.static { --p-width: 400px; --p-height: 480px } } .section-highlights [data-ac-gallery-item].media-gallery-item-chip-battery .positioned-media-element.static { display: block; width: var(--p-width); height: var(--p-height); --p-width: 1260px; --p-height: 680px } @media(max-width:1068px)and (max-width:1068px) { .section-highlights [data-ac-gallery-item].media-gallery-item-chip-battery .positioned-media-element.static { --p-width: 934px; --p-height: 628px } } @media(max-width:734px)and (max-width:734px) { .section-highlights [data-ac-gallery-item].media-gallery-item-chip-battery .positioned-media-element.static { --p-width: 400px; --p-height: 480px } } .section-highlights [data-ac-gallery-item].media-gallery-item-intelligence .positioned-media-element.static { display: block; width: var(--p-width); height: var(--p-height); --p-width: 1260px; --p-height: 680px } @media(max-width:1068px)and (max-width:1068px) { .section-highlights [data-ac-gallery-item].media-gallery-item-intelligence .positioned-media-element.static { --p-width: 934px; --p-height: 628px } } @media(max-width:734px)and (max-width:734px) { .section-highlights [data-ac-gallery-item].media-gallery-item-intelligence .positioned-media-element.static { --p-width: 400px; --p-height: 480px } } .section-highlights [data-ac-gallery-item].media-gallery-item-ios .positioned-media-element.static { display: block; width: var(--p-width); height: var(--p-height); --p-width: 1260px; --p-height: 680px } @media(max-width:1068px)and (max-width:1068px) { .section-highlights [data-ac-gallery-item].media-gallery-item-ios .positioned-media-element.static { --p-width: 934px; --p-height: 628px } } @media(max-width:734px)and (max-width:734px) { .section-highlights [data-ac-gallery-item].media-gallery-item-ios .positioned-media-element.static { --p-width: 400px; --p-height: 480px } } .section-highlights [data-ac-gallery-item].gallery-item .media-block:has(picture.overview-highlights-ceramic-shield-highlights-ceramic-shield-startframe) { --p-width: 1260px; --p-height: 680px } @media(max-width:1068px)and (max-width:1068px) { .section-highlights [data-ac-gallery-item].gallery-item .media-block:has(picture.overview-highlights-ceramic-shield-highlights-ceramic-shield-startframe) { --p-width: 934px; --p-height: 628px } } @media(max-width:734px)and (max-width:734px) { .section-highlights [data-ac-gallery-item].gallery-item .media-block:has(picture.overview-highlights-ceramic-shield-highlights-ceramic-shield-startframe) { --p-width: 400px; --p-height: 480px } } .section-highlights [data-ac-gallery-item].gallery-item .media-block:has(picture.overview-highlights-front-camera-highlights-front-camera-startframe) { --p-width: 1260px; --p-height: 680px } @media(max-width:1068px)and (max-width:1068px) { .section-highlights [data-ac-gallery-item].gallery-item .media-block:has(picture.overview-highlights-front-camera-highlights-front-camera-startframe) { --p-width: 934px; --p-height: 628px } } @media(max-width:734px)and (max-width:734px) { .section-highlights [data-ac-gallery-item].gallery-item .media-block:has(picture.overview-highlights-front-camera-highlights-front-camera-startframe) { --p-width: 400px; --p-height: 480px } } .section-highlights [data-ac-gallery-item].gallery-item .media-block:has(picture.overview-highlights-chip-battery-highlights-chip-startframe) { --p-width: 1260px; --p-height: 680px } @media(max-width:1068px)and (max-width:1068px) { .section-highlights [data-ac-gallery-item].gallery-item .media-block:has(picture.overview-highlights-chip-battery-highlights-chip-startframe) { --p-width: 934px; --p-height: 628px } } @media(max-width:734px)and (max-width:734px) { .section-highlights [data-ac-gallery-item].gallery-item .media-block:has(picture.overview-highlights-chip-battery-highlights-chip-startframe) { --p-width: 400px; --p-height: 480px } } @media(min-width:1069px) { .section-highlights .media-gallery-item-cameras { --caption-width: 400px } } @media(max-width:1068px) { .section-highlights .media-gallery-item-chip-battery { --caption-width: 490px } } .section-highlights .media-gallery-item-intelligence .gradient-intelligence { background-image: linear-gradient(108deg, #0894ff, #c959dd 34%, #ff2e54 68%, #ff9004); background-size: initial } .colorindicator-swatch { --sk-colorindicator-background-color: var(--finish-color) } .finish-background { background: var(--finish-color) } :root { --aap-pv-beat-color: rgb(232 232 237/0.72); --aap-pv-beat-color-hover: rgb(232 232 237/0.92); --app-pv-intro-beat: rgb(232 232 237); --app-pv-icon-fill: #1d1d1f; --app-pv-background-transition-duration: 250ms; --colornav-border-color: conic-gradient(from 270deg, rgba(0, 0, 0, 0.08) 0deg, rgba(0, 0, 0, 0.48) 64.8deg, rgba(0, 0, 0, 0.48) 115.2deg, rgba(0, 0, 0, 0.08) 180deg, rgba(0, 0, 0, 0) 208.8deg, rgba(0, 0, 0, 0) 331.2deg, rgba(0, 0, 0, 0.08) 360deg) } .theme-dark { --aap-pv-beat-color: rgb(42 42 45/0.72); --aap-pv-beat-color-hover: rgb(42 42 45/0.92); --app-pv-intro-beat: rgb(42 42 45); --app-pv-icon-fill: #f4f4f7; --colornav-border-color: conic-gradient(from 90deg, rgba(255, 255, 255, 0.08) 0deg, rgba(255, 255, 255, 0.48) 64.8deg, rgba(255, 255, 255, 0.48) 115.2deg, rgba(255, 255, 255, 0.08) 180deg, rgba(255, 255, 255, 0) 208.8deg, rgba(255, 255, 255, 0) 331.2deg, rgba(255, 255, 255, 0.08) 360deg) } .all-access-pass--product-viewer { --blur-amount: 20px; --max-card-height: 56px; --aap-expanded-width: 423px; --aap-contracted-height: 56px; --label-offset-y-distance: 0px; --label-offset-t-duration-enter: 300ms; --label-offset-t-duration-exit: 300ms; --label-offset-t-delay: 200ms; --label-offset-o-duration-enter: 300ms; --label-offset-o-duration-exit: 200ms; --label-offset-o-delay: 200ms; --content-offset-y-distance: 24px; --content-offset-y-distance-tour: 24px; --content-offset-y-duration-enter: 420ms; --content-offset-y-duration-exit: 300ms; --content-offset-y-delay: 0ms; --content-offset-o-duration-enter: 420ms; --content-offset-o-duration-exit: 200ms; --content-offset-o-delay: 200ms; pointer-events: none; z-index: 999 } @media(min-width:735px) { html.text-zoom .all-access-pass--product-viewer { --aap-expanded-width: 630px } } @media(max-width:1068px) { .all-access-pass--product-viewer { --aap-expanded-width: 374px } } @media(max-width:734px) { .all-access-pass--product-viewer { --aap-expanded-width: min(calc(100vw - 80px), 400px); bottom: auto; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; overflow: clip; pointer-events: none; position: absolute; top: 0; width: 100% } } html.no-small-breakpoint .all-access-pass--product-viewer { --card-button-fade-out-opacity-anim-duration: 400ms; --card-button-fade-out-opacity-anim-delay: 350ms; --card-button-fade-in-opacity-anim-duration: 50ms; --card-button-fade-in-opacity-anim-delay: 0ms; --card-content-fade-out-opacity-anim-duration: 300ms; --card-content-fade-out-opacity-anim-delay: 0ms; --card-content-fade-in-opacity-anim-duration: 600ms; --card-content-fade-in-opacity-anim-delay: 250ms; --card-content-y-anim-amount: var(--product-viewer-ref-border-radius); --card-content-fade-out-y-anim-duration: 400ms; --card-content-fade-out-y-anim-delay: 0ms; --card-content-fade-in-y-anim-duration: 400ms; --card-content-fade-in-y-anim-delay: 0ms; --card-content-image-fade-out-opacity-anim-duration: 200ms; --card-content-image-fade-out-opacity-anim-delay: 0ms; --card-content-image-fade-in-opacity-anim-duration: 200ms; --card-content-image-fade-in-opacity-anim-delay: 250ms; --blur-amount: 0px } html.no-small-breakpoint.no-js .all-access-pass--product-viewer { pointer-events: all } html.no-small-breakpoint.reduced-motion .all-access-pass--product-viewer { --card-button-fade-out-opacity-anim-duration: 0ms; --card-button-fade-out-opacity-anim-delay: 0ms; --card-button-fade-in-opacity-anim-duration: 0ms; --card-button-fade-in-opacity-anim-delay: 0ms; --card-content-fade-out-opacity-anim-duration: 0ms; --card-content-fade-out-opacity-anim-delay: 0ms; --card-content-fade-in-opacity-anim-duration: 0ms; --card-content-fade-in-opacity-anim-delay: 0ms; --card-content-y-anim-amount: 0ms; --card-content-fade-out-y-anim-duration: 0ms; --card-content-fade-out-y-anim-delay: 0ms; --card-content-fade-in-y-anim-duration: 0ms; --card-content-fade-in-y-anim-delay: 0ms; --card-content-image-fade-out-opacity-anim-duration: 0ms; --card-content-image-fade-out-opacity-anim-delay: 0ms; --card-content-image-fade-in-opacity-anim-duration: 0ms; --card-content-image-fade-in-opacity-anim-delay: 0ms; --blur-amount: 20px } html.reduced-motion .all-access-pass--product-viewer { --label-offset-t-duration-enter: 0ms; --label-offset-t-duration-exit: 0ms; --label-offset-t-delay: 0ms; --label-offset-o-duration-enter: 0ms; --label-offset-o-duration-exit: 0ms; --label-offset-o-delay: 0ms; --content-offset-y-duration-enter: 0ms; --content-offset-y-duration-exit: 0ms; --content-offset-y-delay: 0ms; --content-offset-o-duration-enter: 0ms; --content-offset-o-duration-exit: 0ms; --content-offset-o-delay: 0ms; --blur-amount: 20px } html.no-js .all-access-pass--product-viewer { grid-area: 1/1 } .all-access-pass--product-viewer .close-button { position: absolute; top: 16px; right: 16px; border-radius: 22px; display: grid; height: 44px; width: 44px; z-index: 1 } html.no-js .all-access-pass--product-viewer .close-button { display: none } html.no-small-breakpoint .all-access-pass--product-viewer .close-button { align-content: center; justify-content: center; place-content: center; pointer-events: auto; visibility: hidden; transform: scale(0) } html.no-small-breakpoint .all-access-pass--product-viewer .close-button.visible { visibility: visible } html.small-breakpoint .all-access-pass--product-viewer .close-button { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: var(--aap-pv-beat-color); box-shadow: inset 0 0 .5px 0 rgba(0, 0, 0, .11); display: block; height: 36px; margin-bottom: calc(var(--max-card-height) + 38px); margin-left: auto; margin-top: 20px; position: sticky; right: 20px; top: calc(20px + var(--r-localnav-gn-height)); transition: visibility 0ms linear 300ms, background-color var(--app-pv-background-transition-duration) linear; visibility: hidden; width: 36px; z-index: 9999; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } @media(hover:hover) { html.small-breakpoint .all-access-pass--product-viewer .close-button:hover { background-color: var(--aap-pv-beat-color-hover) } } html.small-breakpoint .all-access-pass--product-viewer .close-button.visible { transition: visibility 0ms linear 0ms, background-color var(--app-pv-background-transition-duration) linear; visibility: visible } html.small-breakpoint .tour-engaged .all-access-pass--product-viewer .close-button { pointer-events: auto } .all-access-pass--product-viewer .close-button-wrapper { position: absolute; display: flex; top: 0 } html.no-small-breakpoint .all-access-pass--product-viewer .close-button-wrapper { left: 0; width: 100%; height: 100% } @media(max-width:734px) { .all-access-pass--product-viewer .close-button-wrapper { bottom: auto; flex-direction: column; height: 100%; justify-content: flex-start; pointer-events: none; position: absolute; width: 100% } } @media(hover:hover) { html.no-small-breakpoint .all-access-pass--product-viewer .close-button:hover .close-icon { background: var(--aap-pv-beat-color-hover) } } .all-access-pass--product-viewer .close-button .close-icon { width: 36px; height: 36px } html.no-small-breakpoint .all-access-pass--product-viewer .close-button .close-icon { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: var(--aap-pv-beat-color); transition: background-color var(--app-pv-background-transition-duration) linear; border-radius: 50%; box-shadow: inset 0 0 .5px 0 rgba(0, 0, 0, .11) } .all-access-pass--product-viewer .close-button .close-icon .icon-control { fill: var(--sk-headline-text-color); width: 100%; height: 100% } .all-access-pass--product-viewer .landing-element-accessibility-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0 } html.no-js .all-access-pass--product-viewer .landing-element-accessibility-container { z-index: -1 } .controls { position: relative; width: -moz-fit-content; width: fit-content } @media(max-width:734px) { .controls { bottom: 0; display: flex; flex-direction: column; flex-shrink: 0; height: calc(var(--max-card-height) + 96px); justify-content: flex-end; overflow: clip; margin-top: -20px; padding-bottom: 20px; pointer-events: none; position: sticky; scroll-padding: 0 6.25vw; top: auto; width: 100% } html.no-js .controls { height: auto } } html.no-small-breakpoint .controls { --ss: calc(720px - var(--global-content-max-width)/2); pointer-events: auto; margin-left: min(var(--ss), 6.25vw) } .controls::-webkit-scrollbar { display: none } .controls .paddlenav-container { display: flex; flex-direction: column; position: absolute; height: 100%; left: calc(min(100vw, 1440px)*-0.0625); top: 0; justify-content: center; width: calc(min(100vw, 1440px)*0.0625); align-items: center; grid-gap: 20px; gap: 20px; transform: scale(0); visibility: hidden; margin: 0 } .controls .paddlenav-container.visible { visibility: visible } html.small-breakpoint .controls .paddlenav-container { display: none } .controls .paddlenav-container .paddlenav-button { display: grid; align-content: center; justify-content: center; place-content: center; height: 44px; width: 44px; border-radius: 22px; pointer-events: auto; touch-action: manipulation } @media(hover:hover) { .controls .paddlenav-container .paddlenav-button:hover .paddlenav-icon { background: var(--aap-pv-beat-color-hover) } } .controls .paddlenav-container .paddlenav-button:disabled { pointer-events: none; opacity: var(--sk-link-disabled-opacity, 0.42) } .controls .paddlenav-container .paddlenav-icon { position: relative; width: 36px; height: 36px; pointer-events: none; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: var(--aap-pv-beat-color); border-radius: 50%; display: flex; align-items: center; outline: none; transition: background-color var(--app-pv-background-transition-duration) linear } .controls .paddlenav-container .paddlenav-icon svg { fill: var(--sk-headline-text-color); width: 100%; height: 100% } .controls .intro-element { --pe-scale: 0; position: absolute; width: var(--aap-contracted-height); height: var(--aap-contracted-height); border-radius: 56px; background-color: var(--app-pv-intro-beat); box-sizing: border-box; opacity: 0; top: 0; left: 0; z-index: -1; will-change: opacity, transform } html.small-breakpoint .controls .intro-element { border-radius: var(--aap-min-height); background-color: rgb(var(--aap-background-color-solid)); bottom: 20px; box-sizing: border-box; height: var(--aap-min-height); left: 50%; opacity: 0; position: absolute; top: auto; transform: translateX(-50%) scale(0.01); width: var(--aap-min-height) } .controls .intro-element::before { content: ""; width: 100%; height: 100%; position: absolute; background-color: var(--app-pv-intro-beat); border-radius: 56px; top: 0; left: 0; transform: scale(var(--pe-scale)) } html.small-breakpoint .controls .intro-element::before { display: none } .controls .control-group { --end-cap-position: 0px; display: flex; flex-direction: column; flex-wrap: nowrap; grid-gap: 12px; gap: 12px; justify-content: center; min-width: -moz-fit-content; min-width: fit-content; overflow: visible; padding: 0; margin: 0; list-style: none } @media(max-width:734px) { .controls .control-group { align-items: flex-end; flex-direction: row; height: var(--aap-contracted-height); pointer-events: none; touch-action: none } html.no-js .controls .control-group { opacity: 1; flex-direction: column; height: auto } .intro-complete .controls .control-group, html.desktop .controls .control-group { pointer-events: auto } } .controls.activated .control-group { opacity: 1 } .control-item { --image-clip: 0; --gradient-progress: 0; --ltr: 1; --alpha: 1; --scale: 1; --height: 56; --bg-color: rgba(var(--aap-background-color-solid)/calc(1 - var(--alpha)*var(--aap-background-color-alpha))); align-items: flex-start; border-radius: var(--product-viewer-ref-border-radius); display: flex; flex-shrink: 0; justify-content: flex-start; left: 0; position: relative; width: -moz-fit-content; width: fit-content; -webkit-backdrop-filter: blur(var(--blur-amount)); backdrop-filter: blur(var(--blur-amount)) } @media(max-width:734px) { .control-item { -webkit-backdrop-filter: unset; backdrop-filter: unset; min-height: 36px; min-width: 40px; pointer-events: none; position: absolute; transform: none; will-change: unset } html.no-js .control-item { position: relative } .intro-complete .control-item { pointer-events: auto } } @media(max-width:734px) { .tour-engaged .control-item { z-index: -1 } } @media(hover:hover) { .controls:not(.tour-engaged) .control-item:not(.expanded):hover .control-item-bg { background-color: var(--aap-pv-beat-color-hover) } } @media(max-width:734px) { .control-item.expanded { z-index: 1 } } html.no-small-breakpoint .control-item.expanded .control-item-open { opacity: 0; transition: opacity var(--card-button-fade-in-opacity-anim-duration) ease-in-out var(--card-button-fade-in-opacity-anim-delay) } html.no-small-breakpoint.no-js .control-item.expanded .control-item-open { opacity: 1 } html.no-small-breakpoint .control-item-open { opacity: 1; transition: opacity var(--card-button-fade-out-opacity-anim-duration) ease-in-out var(--card-button-fade-out-opacity-anim-delay) } .control-item-bg-container { pointer-events: none; position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center } .control-item-bg { position: absolute; width: 100%; height: 100%; display: block; background-color: var(--aap-pv-beat-color); border-radius: var(--product-viewer-ref-border-radius); opacity: 0; z-index: -1; transform-origin: bottom center; transition: background-color var(--app-pv-background-transition-duration) linear; box-shadow: inset 0 0 .5px 0 rgba(0, 0, 0, .11) } html.no-js .control-item-bg, html.reduced-motion .control-item-bg, html.small-breakpoint .control-item-bg { opacity: 1 } @media(max-width:734px) { .control-item-bg { --abs: max(var(--gradient-progress), -1 * var(--gradient-progress)); -webkit-backdrop-filter: blur(calc(var(--blur-amount)*(1 - var(--abs))*(2 - var(--alpha)))); backdrop-filter: blur(calc(var(--blur-amount)*(1 - var(--abs))*(2 - var(--alpha)))); background-color: rgba(0, 0, 0, 0); background-image: linear-gradient(90deg, transparent calc(33.33333% - 144px), var(--bg-color) calc(33.33333% - 36px), var(--bg-color) calc(66.66666% + 36px), transparent calc(66.66666% + 144px)); background-position: calc(50% + var(--gradient-progress)*var(--ltr)*50%) 50%; background-repeat: no-repeat; background-size: 300% 100%; height: calc(100% - var(--height)*1px); transform: scale(var(--scale)); transform-origin: center center; will-change: unset } } .control-item>button { align-items: center; display: flex; height: var(--aap-contracted-height); justify-content: center; padding: 0 32px; width: auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding-inline-start: 14px; padding-inline-end: 32px } @media(max-width:734px) { .control-item>button { opacity: 0; padding: 0 24px; will-change: unset; padding-inline-start: 16px; padding-inline-end: 32px; visibility: visible } html.no-js .control-item>button { opacity: 1 } .control-item>button.activated { opacity: 1; transition: opacity 300ms ease-in 200ms } } .control-item>button:focus-visible { border-radius: var(--product-viewer-ref-border-radius) } .control-item>button[data-focus-method=mouse]:focus-visible, .control-item>button[data-focus-method=touch]:focus-visible { outline: none } .tour-engaged .control-item>button { pointer-events: none } .control-item-label { color: var(--sk-headline-text-color); white-space: nowrap; opacity: 0; display: flex; align-items: center } .control-item-label svg { margin-inline-end: 14px } @media(max-width:734px) { .control-item-label svg { will-change: transform } } html.no-js .control-item-label, html.reduced-motion.no-small-breakpoint .control-item-label { opacity: 1 } @media(max-width:734px) { .control-item-label { opacity: 1; transform: translateY(0px) scale(1); transition: opacity var(--label-offset-o-duration-enter) ease-out var(--label-offset-o-delay), transform var(--label-offset-t-duration-enter) ease-out var(--label-offset-t-delay) } } .expanded .control-item-label { opacity: 0 } @media(max-width:734px) { .expanded .control-item-label { transform: translateY(var(--label-offset-y-distance)) scale(0.8); transition: opacity var(--label-offset-o-duration-exit) ease-out 0ms, transform var(--label-offset-t-duration-exit) ease-out 0ms } } .tour-engaged .control-item-label { opacity: 0; transition: opacity 300ms ease-out 0ms } @media(max-width:734px) { .tour-engaged .control-item-label { transform: translateY(var(--label-offset-y-distance)) scale(0.8); transition: opacity var(--label-offset-o-duration-exit) ease-out 0ms, transform var(--label-offset-t-duration-exit) ease-out 0ms } } .control-item-content-mask { border-radius: var(--product-viewer-ref-border-radius); height: 100%; overflow: hidden; width: 100% } .control-item-content-mask .inline-media-ui-button { position: absolute; top: 20px; inset-inline-end: 0; z-index: 2; --inline-media-playpause-icon-color: rgb(0 0 0/56%); --inline-media-playpause-icon-color-hover: rgb(0 0 0/64%); --inline-media-playpause-scrim-color: rgb(210 210 215/64%); --inline-media-playpause-icon-color: rgba(0, 0, 0, 0.56); --inline-media-playpause-icon-color-hover: rgba(0, 0, 0, 0.72); --inline-media-playpause-scrim-color: rgba(210, 210, 215, 0.64); --inline-media-playpause-scrim-color-hover: rgba(223, 223, 227, 0.6976); --inline-media-playpause-scrim-color-active: rgba(193, 193, 198, 0.6544) } html.no-js .control-item-content-mask .inline-media-ui-button { display: none } .control-item-content-mask .inline-media-ui-button.loading-empty .play-pause-button { opacity: 0 } .control-item-content-mask .inline-media-ui-button.loading .play-pause-button { pointer-events: none; opacity: 1 } .control-item-content-mask .inline-media-ui-button.loading .play-pause-button::after { mask: none; background: no-repeat 50%/contain rgba(0, 0, 0, 0); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyMXYyMUgweiIvPjxwYXRoIGQ9Ik0xMC41IDMuNWExIDEgMCAwMTEgMXYyYTEgMSAwIDAxLTIgMHYtMmExIDEgMCAwMTEtMXoiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xNS40NSA1LjU1YTEgMSAwIDAxMCAxLjQxTDE0IDguMzhBMSAxIDAgMTExMi42MiA3TDE0IDUuNTVhMSAxIDAgMDExLjQ1IDB6IiBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjEiLz48cGF0aCBkPSJNMTcuNSAxMC41YTEgMSAwIDAxLTEgMWgtMmExIDEgMCAwMTAtMmgyYTEgMSAwIDAxMSAxeiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTE1LjQ1IDE1LjQ1YTEgMSAwIDAxLTEuNDEgMEwxMi42MiAxNEExIDEgMCAxMTE0IDEyLjYyTDE1LjQ1IDE0YTEgMSAwIDAxMCAxLjQ1eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTEwLjUgMTcuNWExIDEgMCAwMS0xLTF2LTJhMSAxIDAgMDEyIDB2MmExIDEgMCAwMS0xIDF6IiBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJNNS41NSAxNS40NWExIDEgMCAwMTAtMS40MUw3IDEyLjYyQTEgMSAwIDExOC4zOCAxNEw3IDE1LjQ1YTEgMSAwIDAxLTEuNDUgMHoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNiIvPjxwYXRoIGQ9Ik0zLjUgMTAuNWExIDEgMCAwMTEtMWgyYTEgMSAwIDAxMCAyaC0yYTEgMSAwIDAxLTEtMXoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNyIvPjxwYXRoIGQ9Ik01LjU1IDUuNTVhMSAxIDAgMDExLjQ1IDBMOC4zOCA3QTEgMSAwIDAxNyA4LjM4TDUuNTUgN2ExIDEgMCAwMTAtMS40NXoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuOSIvPjwvc3ZnPg=="); position: absolute; top: 50%; left: 50%; translate: -50% -50%; transform-origin: center; width: 21px; height: 21px; animation: inline-media-spin .85s steps(8) infinite } .control-item-content-mask .inline-media-ui-button.loading .play-pause-button:active::after, .control-item-content-mask .inline-media-ui-button.loading .play-pause-button:hover::after { background-color: rgba(0, 0, 0, 0) } .control-item-content-mask .inline-media-ui-button.loaded.playing .play-pause-button::after { mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTIzLjUgMTIuODkzdjEwLjIxNGMwIC43NjktLjU5NyAxLjM5My0xLjMzMyAxLjM5M2gtMS4zMzRjLS43MzYgMC0xLjMzMy0uNjI0LTEuMzMzLTEuMzkzVjEyLjg5M2MwLS43Ny41OTctMS4zOTMgMS4zMzMtMS4zOTNoMS4zMzRjLjczNiAwIDEuMzMzLjYyNCAxLjMzMyAxLjM5M3pNMTUuMTY3IDExLjVoLTEuMzM0Yy0uNzM2IDAtMS4zMzMuNjI0LTEuMzMzIDEuMzkzdjEwLjIxNGMwIC43NjkuNTk3IDEuMzkzIDEuMzMzIDEuMzkzaDEuMzM0Yy43MzYgMCAxLjMzMy0uNjI0IDEuMzMzLTEuMzkzVjEyLjg5M2MwLS43Ny0uNTk3LTEuMzkzLTEuMzMzLTEuMzkzeiIvPjwvc3ZnPg==") } .control-item-content-mask .inline-media-ui-button.loaded.ended .play-pause-button::after { mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTIzLjUgMTYuNUExLjUgMS41IDAgMDAyMiAxOGMwIDIuMjA2LTEuNzk0IDQtNCA0cy00LTEuNzk0LTQtNGMwLTEuOTkgMS40NjQtMy42MyAzLjM2OS0zLjkzNmwtLjM3Ni4zNzVhMS41IDEuNSAwIDEwMi4xMjEgMi4xMjJsMi45MjktMi45M2ExLjUgMS41IDAgMDAwLTIuMTJsLTMuMDcxLTMuMDcyYTEuNSAxLjUgMCAxMC0yLjEyMSAyLjEyMmwuNDczLjQ3M0MxMy43OCAxMS4zNzUgMTEgMTQuMzY4IDExIDE4YzAgMy44NiAzLjE0IDcgNyA3czctMy4xNCA3LTdhMS41IDEuNSAwIDAwLTEuNS0xLjV6Ii8+PC9zdmc+") } .control-item-content-mask .inline-media-ui-button.loaded .play-pause-button { pointer-events: all; opacity: 1 } .control-item-content-mask .inline-media-ui-button .play-pause-button { position: relative; display: flex; justify-self: flex-end; align-self: flex-end; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin-inline-end: 20px; margin-bottom: 20px; border: none; background: none; background-color: var(--inline-media-playpause-scrim-color); background-repeat: no-repeat; opacity: 0; transition: opacity 100ms linear, transform .2s ease; cursor: pointer; pointer-events: none } .control-item-content-mask .inline-media-ui-button .play-pause-button::after { content: ""; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTE0IDIyLjU4N3YtOS4xNjhjMC0uOTM0LjU2My0xLjQyNSAxLjI2LTEuNDI1LjM4NiAwIC42MjcuMDY1Ljk2Ny4yNzNsNy40NjggNC40MDNjLjY2Mi4zOSAxLjAyLjcwNyAxLjAyIDEuMzI0IDAgLjYxOC0uMzU4LjkzNS0xLjAyIDEuMzI1bC03LjQ2OCA0LjQwM2MtLjM0LjIwOC0uNTgxLjI3My0uOTY2LjI3My0uNjk4IDAtMS4yNjEtLjQ3My0xLjI2MS0xLjQwOCIvPjwvc3ZnPg=="); mask-size: cover; display: inline-block; width: 36px; height: 36px; position: absolute; background-color: var(--inline-media-playpause-icon-color) } .control-item-content-mask .inline-media-ui-button .play-pause-button:disabled { pointer-events: none; opacity: .32 } .control-item-content-mask .inline-media-ui-button .play-pause-button:hover { background-color: var(--inline-media-playpause-scrim-color-hover) } .control-item-content-mask .inline-media-ui-button .play-pause-button:hover::after { background-color: var(--inline-media-playpause-icon-color-hover) } .control-item-content-mask .inline-media-ui-button .play-pause-button:active { background-color: var(--inline-media-playpause-scrim-color-active); transform: scale(0.95) } .control-item-content-mask .inline-media-ui-button .play-pause-button:active::after { background-color: var(--inline-media-playpause-icon-color) } .control-item-content-mask .inline-media-ui-button .play-pause-button:focus-visible { outline: none } .control-item-content-mask .inline-media-ui-button .play-pause-button:focus-visible::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: inherit; box-sizing: border-box; outline: 2px solid #0071e3; outline-offset: 3px } .control-item-content-mask .inline-media-ui-button .play-pause-button { border-radius: 50% } .control-item-content-mask .inline-media-ui-button .play-pause-button:focus-visible { box-shadow: 0 0 0 3px #000, 0 0 0 5px #0071e3 } .control-item-content-mask .inline-media-ui-button .play-pause-button:not(:focus-visible)::before { border: none } .control-item-content-mask .inline-media-ui-button.loading { --inline-media-playpause-scrim-color: rgb(0 0 0/0%) } .control-item-content-mask .inline-media-ui-button.loading .play-pause-button:hover::after { --inline-media-playpause-icon-color-hover: rgb(0 0 0/0%) } html.no-reduced-motion .control-item-content-mask .inline-media-ui-button.inline-media-ui-replay-only { opacity: 0; visibility: hidden; pointer-events: none } html.no-reduced-motion .control-item-content-mask .inline-media-ui-button.inline-media-ui-replay-only.loaded.ended { transition: opacity 400ms ease-in-out; opacity: 1; visibility: visible; pointer-events: all } .control-item-content-mask.with-media-ui-dark:not(.with-media-ui-light) .inline-media-ui-button, .theme-dark .control-item-content-mask:not(.with-media-ui-light) .inline-media-ui-button { --inline-media-playpause-icon-color: rgba(255, 255, 255, 0.8); --inline-media-playpause-icon-color-hover: rgb(255, 255, 255); --inline-media-playpause-scrim-color: rgba(66, 66, 69, 0.72); --inline-media-playpause-scrim-color-hover: rgba(73, 73, 76, 0.7256); --inline-media-playpause-scrim-color-active: rgba(57, 57, 60, 0.7424) } .control-item-content-mask.with-media-ui-dark:not(.with-media-ui-light) .inline-media-ui-button.loading, .theme-dark .control-item-content-mask:not(.with-media-ui-light) .inline-media-ui-button.loading { --inline-media-playpause-scrim-color: rgb(0 0 0/0%) } .control-item-content-mask.with-media-ui-dark:not(.with-media-ui-light) .inline-media-ui-button.loading .play-pause-button:hover::after, .theme-dark .control-item-content-mask:not(.with-media-ui-light) .inline-media-ui-button.loading .play-pause-button:hover::after { --inline-media-playpause-icon-color-hover: rgb(0 0 0/0%) } .control-item-content-mask .inline-media-ui-button { top: auto !important; bottom: 0 } .control-item-accessibility-container { position: absolute; top: 0; width: calc(100vw - var(--global-scrollbar-width)); margin-left: calc(min(var(--ss), 6.25vw)*-1); height: var(--product-viewer-height); max-width: 1440px; box-sizing: border-box; visibility: hidden } html.no-js .control-item-accessibility-container { visibility: visible; z-index: -1 } .control-item-accessibility-container .inline-media-ui-button { position: absolute; top: 20px; inset-inline-end: 0; z-index: 2; --inline-media-playpause-icon-color: rgb(0 0 0/56%); --inline-media-playpause-icon-color-hover: rgb(0 0 0/64%); --inline-media-playpause-scrim-color: rgb(210 210 215/64%); --inline-media-playpause-icon-color: rgba(0, 0, 0, 0.56); --inline-media-playpause-icon-color-hover: rgba(0, 0, 0, 0.72); --inline-media-playpause-scrim-color: rgba(210, 210, 215, 0.64); --inline-media-playpause-scrim-color-hover: rgba(223, 223, 227, 0.6976); --inline-media-playpause-scrim-color-active: rgba(193, 193, 198, 0.6544) } html.no-js .control-item-accessibility-container .inline-media-ui-button { display: none } .control-item-accessibility-container .inline-media-ui-button.loading-empty .play-pause-button { opacity: 0 } .control-item-accessibility-container .inline-media-ui-button.loading .play-pause-button { pointer-events: none; opacity: 1 } .control-item-accessibility-container .inline-media-ui-button.loading .play-pause-button::after { mask: none; background: no-repeat 50%/contain rgba(0, 0, 0, 0); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyMXYyMUgweiIvPjxwYXRoIGQ9Ik0xMC41IDMuNWExIDEgMCAwMTEgMXYyYTEgMSAwIDAxLTIgMHYtMmExIDEgMCAwMTEtMXoiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xNS40NSA1LjU1YTEgMSAwIDAxMCAxLjQxTDE0IDguMzhBMSAxIDAgMTExMi42MiA3TDE0IDUuNTVhMSAxIDAgMDExLjQ1IDB6IiBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjEiLz48cGF0aCBkPSJNMTcuNSAxMC41YTEgMSAwIDAxLTEgMWgtMmExIDEgMCAwMTAtMmgyYTEgMSAwIDAxMSAxeiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTE1LjQ1IDE1LjQ1YTEgMSAwIDAxLTEuNDEgMEwxMi42MiAxNEExIDEgMCAxMTE0IDEyLjYyTDE1LjQ1IDE0YTEgMSAwIDAxMCAxLjQ1eiIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiBmaWxsPSIjNmU2ZTczIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTEwLjUgMTcuNWExIDEgMCAwMS0xLTF2LTJhMSAxIDAgMDEyIDB2MmExIDEgMCAwMS0xIDF6IiBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiM2ZTZlNzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJNNS41NSAxNS40NWExIDEgMCAwMTAtMS40MUw3IDEyLjYyQTEgMSAwIDExOC4zOCAxNEw3IDE1LjQ1YTEgMSAwIDAxLTEuNDUgMHoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNiIvPjxwYXRoIGQ9Ik0zLjUgMTAuNWExIDEgMCAwMTEtMWgyYTEgMSAwIDAxMCAyaC0yYTEgMSAwIDAxLTEtMXoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNyIvPjxwYXRoIGQ9Ik01LjU1IDUuNTVhMSAxIDAgMDExLjQ1IDBMOC4zOCA3QTEgMSAwIDAxNyA4LjM4TDUuNTUgN2ExIDEgMCAwMTAtMS40NXoiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgZmlsbD0iIzZlNmU3MyIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuOSIvPjwvc3ZnPg=="); position: absolute; top: 50%; left: 50%; translate: -50% -50%; transform-origin: center; width: 21px; height: 21px; animation: inline-media-spin .85s steps(8) infinite } .control-item-accessibility-container .inline-media-ui-button.loading .play-pause-button:active::after, .control-item-accessibility-container .inline-media-ui-button.loading .play-pause-button:hover::after { background-color: rgba(0, 0, 0, 0) } @keyframes inline-media-spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } .control-item-accessibility-container .inline-media-ui-button.loaded.playing .play-pause-button::after { mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTIzLjUgMTIuODkzdjEwLjIxNGMwIC43NjktLjU5NyAxLjM5My0xLjMzMyAxLjM5M2gtMS4zMzRjLS43MzYgMC0xLjMzMy0uNjI0LTEuMzMzLTEuMzkzVjEyLjg5M2MwLS43Ny41OTctMS4zOTMgMS4zMzMtMS4zOTNoMS4zMzRjLjczNiAwIDEuMzMzLjYyNCAxLjMzMyAxLjM5M3pNMTUuMTY3IDExLjVoLTEuMzM0Yy0uNzM2IDAtMS4zMzMuNjI0LTEuMzMzIDEuMzkzdjEwLjIxNGMwIC43NjkuNTk3IDEuMzkzIDEuMzMzIDEuMzkzaDEuMzM0Yy43MzYgMCAxLjMzMy0uNjI0IDEuMzMzLTEuMzkzVjEyLjg5M2MwLS43Ny0uNTk3LTEuMzkzLTEuMzMzLTEuMzkzeiIvPjwvc3ZnPg==") } .control-item-accessibility-container .inline-media-ui-button.loaded.ended .play-pause-button::after { mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTIzLjUgMTYuNUExLjUgMS41IDAgMDAyMiAxOGMwIDIuMjA2LTEuNzk0IDQtNCA0cy00LTEuNzk0LTQtNGMwLTEuOTkgMS40NjQtMy42MyAzLjM2OS0zLjkzNmwtLjM3Ni4zNzVhMS41IDEuNSAwIDEwMi4xMjEgMi4xMjJsMi45MjktMi45M2ExLjUgMS41IDAgMDAwLTIuMTJsLTMuMDcxLTMuMDcyYTEuNSAxLjUgMCAxMC0yLjEyMSAyLjEyMmwuNDczLjQ3M0MxMy43OCAxMS4zNzUgMTEgMTQuMzY4IDExIDE4YzAgMy44NiAzLjE0IDcgNyA3czctMy4xNCA3LTdhMS41IDEuNSAwIDAwLTEuNS0xLjV6Ii8+PC9zdmc+") } .control-item-accessibility-container .inline-media-ui-button.loaded .play-pause-button { pointer-events: all; opacity: 1 } .control-item-accessibility-container .inline-media-ui-button .play-pause-button { position: relative; display: flex; justify-self: flex-end; align-self: flex-end; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin-inline-end: 20px; margin-bottom: 20px; border: none; background: none; background-color: var(--inline-media-playpause-scrim-color); background-repeat: no-repeat; opacity: 0; transition: opacity 100ms linear, transform .2s ease; cursor: pointer; pointer-events: none } .control-item-accessibility-container .inline-media-ui-button .play-pause-button::after { content: ""; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTE0IDIyLjU4N3YtOS4xNjhjMC0uOTM0LjU2My0xLjQyNSAxLjI2LTEuNDI1LjM4NiAwIC42MjcuMDY1Ljk2Ny4yNzNsNy40NjggNC40MDNjLjY2Mi4zOSAxLjAyLjcwNyAxLjAyIDEuMzI0IDAgLjYxOC0uMzU4LjkzNS0xLjAyIDEuMzI1bC03LjQ2OCA0LjQwM2MtLjM0LjIwOC0uNTgxLjI3My0uOTY2LjI3My0uNjk4IDAtMS4yNjEtLjQ3My0xLjI2MS0xLjQwOCIvPjwvc3ZnPg=="); mask-size: cover; display: inline-block; width: 36px; height: 36px; position: absolute; background-color: var(--inline-media-playpause-icon-color) } .control-item-accessibility-container .inline-media-ui-button .play-pause-button:disabled { pointer-events: none; opacity: .32 } .control-item-accessibility-container .inline-media-ui-button .play-pause-button:hover { background-color: var(--inline-media-playpause-scrim-color-hover) } .control-item-accessibility-container .inline-media-ui-button .play-pause-button:hover::after { background-color: var(--inline-media-playpause-icon-color-hover) } .control-item-accessibility-container .inline-media-ui-button .play-pause-button:active { background-color: var(--inline-media-playpause-scrim-color-active); transform: scale(0.95) } .control-item-accessibility-container .inline-media-ui-button .play-pause-button:active::after { background-color: var(--inline-media-playpause-icon-color) } .control-item-accessibility-container .inline-media-ui-button .play-pause-button:focus-visible { outline: none } .control-item-accessibility-container .inline-media-ui-button .play-pause-button:focus-visible::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: inherit; box-sizing: border-box; outline: 2px solid #0071e3; outline-offset: 3px } .control-item-accessibility-container .inline-media-ui-button .play-pause-button { border-radius: 50% } .control-item-accessibility-container .inline-media-ui-button .play-pause-button:focus-visible { box-shadow: 0 0 0 3px #000, 0 0 0 5px #0071e3 } .control-item-accessibility-container .inline-media-ui-button .play-pause-button:not(:focus-visible)::before { border: none } .control-item-accessibility-container .inline-media-ui-button.loading { --inline-media-playpause-scrim-color: rgb(0 0 0/0%) } .control-item-accessibility-container .inline-media-ui-button.loading .play-pause-button:hover::after { --inline-media-playpause-icon-color-hover: rgb(0 0 0/0%) } html.no-reduced-motion .control-item-accessibility-container .inline-media-ui-button.inline-media-ui-replay-only { opacity: 0; visibility: hidden; pointer-events: none } html.no-reduced-motion .control-item-accessibility-container .inline-media-ui-button.inline-media-ui-replay-only.loaded.ended { transition: opacity 400ms ease-in-out; opacity: 1; visibility: visible; pointer-events: all } .control-item-accessibility-container.with-media-ui-dark:not(.with-media-ui-light) .inline-media-ui-button, .theme-dark .control-item-accessibility-container:not(.with-media-ui-light) .inline-media-ui-button { --inline-media-playpause-icon-color: rgba(255, 255, 255, 0.8); --inline-media-playpause-icon-color-hover: rgb(255, 255, 255); --inline-media-playpause-scrim-color: rgba(66, 66, 69, 0.72); --inline-media-playpause-scrim-color-hover: rgba(73, 73, 76, 0.7256); --inline-media-playpause-scrim-color-active: rgba(57, 57, 60, 0.7424) } .control-item-accessibility-container.with-media-ui-dark:not(.with-media-ui-light) .inline-media-ui-button.loading, .theme-dark .control-item-accessibility-container:not(.with-media-ui-light) .inline-media-ui-button.loading { --inline-media-playpause-scrim-color: rgb(0 0 0/0%) } .control-item-accessibility-container.with-media-ui-dark:not(.with-media-ui-light) .inline-media-ui-button.loading .play-pause-button:hover::after, .theme-dark .control-item-accessibility-container:not(.with-media-ui-light) .inline-media-ui-button.loading .play-pause-button:hover::after { --inline-media-playpause-icon-color-hover: rgb(0 0 0/0%) } @media(max-width:734px) { .control-item-accessibility-container { bottom: -20px; height: var(--product-viewer-height); left: 50%; max-width: unset; top: auto; transform: translateX(-50%); width: calc(100vw - var(--global-scrollbar-width)) } } .control-item-accessibility-container .inline-media-ui-button { top: 72px; right: 20px; transform: scale(0); transition: transform .4s ease-in-out } @media(max-width:734px) { .control-item-accessibility-container .inline-media-ui-button { right: 6.25vw; top: 66px } html.no-reduced-motion .control-item-accessibility-container .inline-media-ui-button.inline-media-ui-replay-only.loaded.ended { opacity: 0 } } .control-item-accessibility-container .inline-media-ui-button .play-pause-button { margin: 0; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: var(--aap-pv-beat-color); transition: background-color var(--app-pv-background-transition-duration) linear } @media(hover:hover) { .control-item-accessibility-container .inline-media-ui-button .play-pause-button:hover { background-color: var(--aap-pv-beat-color-hover) } } .control-item-accessibility-container .inline-media-ui-button .play-pause-button::after { background-color: var(--sk-headline-text-color) } .expanded .control-item-accessibility-container .inline-media-ui-button { transform: scale(1) } .expanded .control-item-accessibility-container { visibility: visible } .control-item-accessibility-image, .control-item-content { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .control-item-content { box-sizing: border-box; color: var(--sk-headline-text-color); padding: 0; pointer-events: none } html.no-js .control-item-content { position: relative; pointer-events: all } @media(max-width:734px) { .control-item-content { border-radius: var(--product-viewer-ref-border-radius); max-width: 400px; opacity: 0 } html.no-js .control-item-content { opacity: 1 } } .control-item-content[data-focus-method=mouse]:focus-visible, .control-item-content[data-focus-method=touch]:focus-visible { outline: none } .control-item-content-inner { box-sizing: border-box; display: flex; flex-direction: column; max-width: var(--aap-expanded-width); opacity: 0; padding: 28px; width: max-content } html.no-js .control-item-content-inner { opacity: 1 } html.no-small-breakpoint .control-item-content-inner { visibility: hidden; transform: translateY(var(--card-content-y-anim-amount)); transition: opacity var(--card-content-fade-out-opacity-anim-duration) ease-in-out var(--card-content-fade-out-opacity-anim-delay), visibility var(--card-content-fade-out-opacity-anim-duration) ease-in-out var(--card-content-fade-out-opacity-anim-delay), transform var(--card-content-fade-out-y-anim-duration) ease-in-out var(--card-content-fade-out-y-anim-delay) } @media(max-width:734px) { .control-item-content-inner { padding: 24px; transition: transform var(--content-offset-y-duration-exit) ease-out 0ms, opacity var(--content-offset-o-duration-exit) ease-out 0ms; transform: translateY(var(--content-offset-y-distance)); will-change: unset } } .tour-engaged .control-item-content-inner { transform: translateX(0) translateY(0) } @media(max-width:734px) { .tour-engaged .control-item-content-inner { transform: translateY(var(--content-offset-y-distance-tour)) } } .control-item-content-inner .cta-button-wrapper { display: flex; justify-content: center } .expanded .control-item-content-inner { opacity: 1; pointer-events: auto } html.no-small-breakpoint .expanded .control-item-content-inner { visibility: visible; transform: translateY(0); transition: opacity var(--card-content-fade-in-opacity-anim-duration) ease-in-out var(--card-content-fade-in-opacity-anim-delay), transform var(--card-content-fade-in-y-anim-duration) ease-in-out var(--card-content-fade-in-y-anim-delay) } @media(max-width:734px) { .expanded .control-item-content-inner { opacity: 1; transition: transform var(--content-offset-y-duration-enter) ease-out 0ms, opacity var(--content-offset-o-duration-enter) ease-out 0ms; transform: translateY(0px) } } @media(max-width:734px) { .tour-opening .expanded .control-item-content-inner { transition: transform var(--content-offset-y-duration-enter) ease-out var(--content-offset-y-delay), opacity var(--content-offset-o-duration-enter) ease-out var(--content-offset-o-delay) } } .control-item-content .control-item-media { border-bottom-left-radius: var(--product-viewer-ref-border-radius); border-bottom-right-radius: var(--product-viewer-ref-border-radius); bottom: 0; position: fixed; overflow: hidden; display: flex; width: 100%; height: auto; aspect-ratio: 16/9; opacity: 0 } html.no-js .control-item-content .control-item-media, html.small-breakpoint .control-item-content .control-item-media { opacity: 1 } html.no-small-breakpoint .control-item-content .control-item-media { display: none; transition: opacity var(--card-content-image-fade-out-opacity-anim-duration) ease-in-out var(--card-content-image-fade-out-opacity-anim-delay), display var(--card-content-image-fade-in-opacity-anim-duration) ease-in-out var(--card-content-image-fade-in-opacity-anim-delay); transition-behavior: allow-discrete } html.no-small-breakpoint .expanded .control-item-content .control-item-media { opacity: 1; display: flex; transition: opacity var(--card-content-image-fade-in-opacity-anim-duration) ease-in-out var(--card-content-image-fade-in-opacity-anim-delay), display var(--card-content-image-fade-in-opacity-anim-duration) ease-in-out var(--card-content-image-fade-in-opacity-anim-delay); transition-behavior: allow-discrete } @starting-style { html.no-small-breakpoint .expanded .control-item-content .control-item-media { opacity: 0 } } .control-item-content .control-item-media.fallback video, html.no-inline-media .control-item-content .control-item-media .video-wrapper video { display: block; visibility: hidden } .control-item-content .control-item-media.with-media-ui.with-media-ui-button .play-pause-button { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: var(--aap-pv-beat-color); transition: background-color var(--app-pv-background-transition-duration) linear } @media(hover:hover) { .control-item-content .control-item-media.with-media-ui.with-media-ui-button .play-pause-button:hover { background-color: var(--aap-pv-beat-color-hover) } } .control-item-content .control-item-media.with-media-ui.with-media-ui-button .play-pause-button::after { background-color: var(--sk-headline-text-color) } html.no-js .control-item-content .control-item-media { position: relative; max-width: var(--aap-expanded-width) } .control-item-content .control-item-media picture { width: 100%; height: 100% } .control-item-content .control-item-media img, .control-item-content .control-item-media video { width: 100%; height: 100%; object-fit: cover } @media(max-width:734px) { .control-item-content .control-item-media { clip-path: inset(calc(var(--image-clip)*1%) 0 0 0) } .control-item-content .control-item-media .video-wrapper { z-index: -1 } } .control-item-nav { display: none } @media(max-width:734px) { .control-item-nav { bottom: 0; display: block; height: 88px; left: 0; position: absolute; width: 100% } } .control-item-nav .paddlenav-button { align-items: flex-end; display: flex; height: 100%; position: absolute; width: calc(50vw - var(--aap-expanded-width)*0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } @media(max-width:734px) { .expanded .control-item-nav .paddlenav-button { pointer-events: auto } } .control-item-nav .paddlenav-button:disabled { display: none } .control-item-nav .paddlenav-button.paddlenav-prev { right: 100%; justify-content: flex-end } .control-item-nav .paddlenav-button.paddlenav-prev .paddlenav-icon { margin-inline-end: 10px } .control-item-nav .paddlenav-button.paddlenav-next { left: 100%; justify-content: flex-start } .control-item-nav .paddlenav-button.paddlenav-next .paddlenav-icon { margin-inline-start: 10px } .control-item-nav .paddlenav-button .paddlenav-icon { align-items: center; display: flex; height: 56px; justify-content: center } .control-item-nav .paddlenav-button .paddlenav-icon .icon-control { fill: var(--sk-headline-text-color); height: 36px; width: 36px } .control-ar-link.expanded li button, .control-color.expanded li button { opacity: 1; transform: scale(1); transition: opacity 400ms cubic-bezier(0.3, 2, 0.5, 1) calc(var(--color-index)*var(--aap-stagger-fast)*1ms), transform 400ms cubic-bezier(0.3, 2, 0.5, 1) calc(var(--color-index)*var(--aap-stagger-fast)*1ms) } .control-ar-link .control-item-label, .control-color .control-item-label { align-items: center; display: flex } .control-ar-link-active-swatch, .control-color-active-swatch { --colornav-swatch-size: 24px; position: relative; border-radius: 50%; display: inline-block; color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none; line-height: 0; height: 24px; margin-inline-end: 14px; width: 24px } @media(max-width:734px) { .control-ar-link-active-swatch, .control-color-active-swatch { margin-inline-end: 19px } } .control-ar-link-active-swatch::after, .control-color-active-swatch::after { content: ""; display: block; position: absolute; top: 0; height: inherit; width: inherit; background-image: conic-gradient(from 270deg, rgba(0, 0, 0, 0.08) 0deg, rgba(0, 0, 0, 0.48) 64.8deg, rgba(0, 0, 0, 0.48) 115.2deg, rgba(0, 0, 0, 0.08) 180deg, rgba(0, 0, 0, 0) 208.8deg, rgba(0, 0, 0, 0) 331.2deg, rgba(0, 0, 0, 0.08) 360deg); mask-image: radial-gradient(circle at 50%, at 50%, transparent 10.5px, black 11.5px); mask-image: radial-gradient(circle at 50% 50%, transparent 10.5px, black 11.5px); mask-size: 100% 100%; mask-clip: initial; border-radius: inherit } .control-ar-link-active-swatch.Black, .control-color-active-swatch.Black { background: var(--finish-iphone-17-black) } .control-ar-link-active-swatch.Purple, .control-color-active-swatch.Purple { background: var(--finish-iphone-17-lavender) } .control-ar-link-active-swatch.Blue, .control-color-active-swatch.Blue { background: var(--finish-iphone-17-mist-blue) } .control-ar-link-active-swatch.Green, .control-color-active-swatch.Green { background: var(--finish-iphone-17-sage) } .control-ar-link-active-swatch.White, .control-color-active-swatch.White { background: var(--finish-iphone-17-white) } .control-ar-link .ar-link-fieldset, .control-ar-link .colornav, .control-color .ar-link-fieldset, .control-color .colornav { margin-top: 0; padding-top: 0 } .control-ar-link .ar-link-fieldset-title, .control-ar-link .colornav-title, .control-color .ar-link-fieldset-title, .control-color .colornav-title { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0 0 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0 } .control-ar-link .ar-link-fieldset-items, .control-ar-link .colornav-items, .control-color .ar-link-fieldset-items, .control-color .colornav-items { margin-left: 0; margin-right: 0; padding-top: 24px } .control-ar-link .ar-link-fieldset-link, .control-ar-link .colornav-link, .control-color .ar-link-fieldset-link, .control-color .colornav-link { margin-bottom: 16px } .control-ar-link .ar-link-fieldset .colornav-swatch-Black, .control-ar-link .colornav .colornav-swatch-Black, .control-color .ar-link-fieldset .colornav-swatch-Black, .control-color .colornav .colornav-swatch-Black { background: var(--finish-iphone-17-black) } .control-ar-link .ar-link-fieldset .colornav-swatch-Purple, .control-ar-link .colornav .colornav-swatch-Purple, .control-color .ar-link-fieldset .colornav-swatch-Purple, .control-color .colornav .colornav-swatch-Purple { background: var(--finish-iphone-17-lavender) } .control-ar-link .ar-link-fieldset .colornav-swatch-Blue, .control-ar-link .colornav .colornav-swatch-Blue, .control-color .ar-link-fieldset .colornav-swatch-Blue, .control-color .colornav .colornav-swatch-Blue { background: var(--finish-iphone-17-mist-blue) } .control-ar-link .ar-link-fieldset .colornav-swatch-Green, .control-ar-link .colornav .colornav-swatch-Green, .control-color .ar-link-fieldset .colornav-swatch-Green, .control-color .colornav .colornav-swatch-Green { background: var(--finish-iphone-17-sage) } .control-ar-link .ar-link-fieldset .colornav-swatch-White, .control-ar-link .colornav .colornav-swatch-White, .control-color .ar-link-fieldset .colornav-swatch-White, .control-color .colornav .colornav-swatch-White { background: var(--finish-iphone-17-white) } .control-color .colornav-items { justify-content: center; grid-row-gap: 8px; row-gap: 8px } .control-color .colornav-link { margin-bottom: 0 } .control-color .colornav-label { opacity: 0 } .control-ar-link>button { padding-inline-start: 17.5px } @media(max-width:734px) { .control-ar-link>button { padding-inline-start: 19px } } .control-ar-link>button .arql-icon { margin-inline-end: 17px } .form-dropdown { position: relative; margin-bottom: .8235294118rem } .form-dropdown .form-dropdown-select { color: #1d1d1f; border-color: #86868b; background-color: rgba(255, 255, 255, .8) } .form-dropdown .form-dropdown-select.focused, .form-dropdown .form-dropdown-select:focus { border-color: #0071e3 } .form-dropdown .form-dropdown-select.focused:not(button), .form-dropdown .form-dropdown-select:focus:not(button) { outline: none } .form-dropdown .form-dropdown-select.focused:not(button)[data-focus-method=key], .form-dropdown .form-dropdown-select:focus:not(button)[data-focus-method=key], html.as-keyboarduser .form-dropdown .form-dropdown-select.focused:not(button), html.as-keyboarduser .form-dropdown .form-dropdown-select:focus:not(button), html.form-keyboarduser .form-dropdown .form-dropdown-select.focused:not(button), html.form-keyboarduser .form-dropdown .form-dropdown-select:focus:not(button) { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: 3px } .form-dropdown .form-dropdown-select:-moz-focusring { color: rgba(0, 0, 0, 0); text-shadow: 0 0 0 #1d1d1f } .form-dropdown .form-dropdown-select option:not(:disabled) { color: #1d1d1f } .form-dropdown:disabled { color: #6e6e73; opacity: 1; border-color: rgba(134, 134, 139, .42); background-color: rgba(0, 0, 0, .01) } .form-dropdown .form-dropdown-selectnone { color: rgba(0, 0, 0, 0) } .form-dropdown .form-dropdown-selectnone:-moz-focusring { text-shadow: none } .form-dropdown .form-dropdown-chevron, .form-dropdown .form-dropdown-label, .form-dropdown .form-dropdown-selectnone~.form-dropdown-label, .form-dropdown:disabled~.form-dropdown-label { color: #6e6e73 } .form-dropdown.is-error .form-dropdown-select { border-color: #e30000; background-color: #fff2f4 } .form-dropdown.is-error .focused .form-dropdown-select, .form-dropdown.is-error .form-dropdown-select:focus { border-color: #0071e3; background-color: rgba(255, 255, 255, .8) } .form-dropdown.is-error .form-dropdown-label { color: #e30000 } .form-dropdown.is-error .is-expanded .form-dropdown-label { color: #6e6e73 } .form-dropdown-select { font-size: 17px; line-height: 1.2353641176; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; width: 100%; height: 3.2941176471rem; border-radius: 12px; border-width: 1px; border-style: solid; box-sizing: border-box; padding-top: 1.0588235294rem; padding-bottom: 0; padding-inline: .9411764706rem 2.3529411765rem; appearance: none; overflow: hidden; text-overflow: ellipsis; cursor: pointer } .form-dropdown-select:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select:lang(ko), .form-dropdown-select:lang(th), .form-dropdown-select:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .form-dropdown-select:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select.form-dropdown-selectnone~.form-dropdown-label { font-size: 17px; line-height: 1.2353641176; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; top: 1.0588235294rem } .form-dropdown-select.form-dropdown-selectnone~.form-dropdown-label:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select.form-dropdown-selectnone~.form-dropdown-label:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select.form-dropdown-selectnone~.form-dropdown-label:lang(ko) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select.form-dropdown-selectnone~.form-dropdown-label:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .form-dropdown-select.form-dropdown-selectnone~.form-dropdown-label:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select.form-dropdown-selectnone~.form-dropdown-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select.form-dropdown-selectnone~.form-dropdown-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select.form-dropdown-selectnone~.form-dropdown-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select.form-dropdown-selectnone~.form-dropdown-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-select:focus:not(button) { border-width: 2px; padding-inline-start: .8823529412rem } .form-dropdown-select:disabled { cursor: default } .form-dropdown-select:disabled+.form-dropdown-chevron { opacity: .42 } .is-error .form-dropdown-select { margin-bottom: 0 } .form-dropdown-chevron { position: absolute; pointer-events: none; top: .7058823529rem; inset-inline-end: .9411764706rem; font-size: 20px; line-height: 1.4; font-weight: 400; letter-spacing: .012em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-chevron::after, .form-dropdown-chevron::before { font-family: SF Pro Icons; color: inherit; display: inline-block; font-style: normal; font-weight: inherit; font-size: inherit; line-height: 1; text-decoration: underline; position: relative; z-index: 1; alt: ""; text-decoration: none } .form-dropdown-chevron::before { display: none } .form-dropdown-chevron::after, .form-dropdown-chevron::before { content: "" } .form-dropdown-chevron:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-chevron:lang(ja) { font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-chevron:lang(ko) { font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-chevron:lang(th) { font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-chevron:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-chevron:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-chevron:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-chevron:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .is-expanded .form-dropdown-chevron::after, .is-expanded .form-dropdown-chevron::before { font-family: SF Pro Icons; color: inherit; display: inline-block; font-style: normal; font-weight: inherit; font-size: inherit; line-height: 1; text-decoration: underline; position: relative; z-index: 1; alt: ""; text-decoration: none } .is-expanded .form-dropdown-chevron::before { display: none } .is-expanded .form-dropdown-chevron::after, .is-expanded .form-dropdown-chevron::before { content: "" } .form-dropdown-label { position: absolute; pointer-events: none; transition-timing-function: ease-in; transition-duration: .125s; top: .5882352941rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: calc(100% - 54px); inset-inline-start: 1rem; font-size: 12px; line-height: 1.3333733333; font-weight: 400; letter-spacing: -0.01em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-label:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-label:lang(ja) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-label:lang(ko) { line-height: 1.4166666667; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-label:lang(zh) { letter-spacing: 0em } .form-dropdown-label:lang(th) { line-height: 1.3333733333; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-label:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-label:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-label:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-label:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-multiline { position: relative; max-height: 3.2941176471rem } .form-dropdown-multiline.focused .form-dropdown-select, .form-dropdown-multiline .form-dropdown-select:focus { border-color: #0071e3; outline: none } .form-dropdown-multiline.focused .form-dropdown-select[data-focus-method=key], .form-dropdown-multiline .form-dropdown-select:focus[data-focus-method=key], html.as-keyboarduser .form-dropdown-multiline.focused .form-dropdown-select, html.as-keyboarduser .form-dropdown-multiline .form-dropdown-select:focus, html.form-keyboarduser .form-dropdown-multiline.focused .form-dropdown-select, html.form-keyboarduser .form-dropdown-multiline .form-dropdown-select:focus { outline: 2px solid var(--sk-focus-color, #0071e3); outline-offset: 3px } html.as-keyboarduser .form-dropdown-multiline.focused .form-dropdown-select, html.as-keyboarduser .form-dropdown-multiline .form-dropdown-select:focus, html.form-keyboarduser .form-dropdown-multiline.focused .form-dropdown-select, html.form-keyboarduser .form-dropdown-multiline .form-dropdown-select:focus { box-shadow: 0 0 0 3px #fff } .form-dropdown-multiline .form-dropdown-options { background-color: #fff } .form-dropdown-multiline .form-dropdown-option { background-color: rgba(255, 255, 255, .8); color: #1d1d1f; border-color: #86868b } .form-dropdown-multiline .form-dropdown-option-text { color: #6e6e73 } .form-dropdown-multiline .form-dropdown-option.selected, .form-dropdown-multiline .form-dropdown-option:hover { background-color: #0071e3; color: #fff } .form-dropdown-multiline .form-dropdown-option.selected .form-dropdown-option-text, .form-dropdown-multiline .form-dropdown-option:hover .form-dropdown-option-text { color: #fff } .form-dropdown-multiline.is-expanded { z-index: 2 } .form-dropdown-multiline.focused .form-dropdown-select, .form-dropdown-multiline .form-dropdown-select:focus { border-width: 2px; padding-inline-start: .8823529412rem } .form-dropdown-title { margin: 0; padding: 0; top: 1.5882352941rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: absolute; inset-inline-start: 1rem } .form-dropdown-options { font-size: 17px; line-height: 1.2353641176; font-weight: 400; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; inset-inline-start: 0; position: absolute; top: 3.2352941176rem; margin-inline-start: 2px; margin-inline-end: 2px; display: none; list-style-type: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; width: calc(100% - 4px); max-height: 23.5294117647rem; overflow: auto } .form-dropdown-options:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-options:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-options:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-options:lang(ko), .form-dropdown-options:lang(th), .form-dropdown-options:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .form-dropdown-options:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-options:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-options:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-options:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-options:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } .is-expanded .form-dropdown-options { display: block } .is-expanded .form-dropdown-options .form-dropdown-option { cursor: default } .is-expanded .form-dropdown-options .form-dropdown-option:focus { outline: none } .is-expanded .form-dropdown-options .form-dropdown-option:last-child.selected, .is-expanded .form-dropdown-options .form-dropdown-option:last-child:hover { padding-bottom: 12px } .form-dropdown-option { position: relative; border-top-width: 1px; border-top-style: solid; padding-inline-start: 16px; padding-inline-end: 16px; padding-bottom: 11px } .form-dropdown-option input:disabled+label .form-dropdown-option-text, .form-dropdown-option input:disabled+label .form-dropdown-option-title { opacity: .32 } .form-dropdown-option .icon-check { inset-inline-end: 16px; position: absolute; margin: 0; top: .6470588235rem; display: none } .form-dropdown-option.checked .icon-check { display: block } .form-dropdown-option-title { margin: 12px 0 2px; display: block } .form-dropdown-option-text { font-size: 14px; line-height: 1.4285914286; font-weight: 400; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; padding: 0; margin: 0 } .form-dropdown-option-text:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-option-text:lang(ja) { line-height: 1.4; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-option-text:lang(ko) { line-height: 1.5714285714; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-option-text:lang(zh) { line-height: 1.5; letter-spacing: 0em } .form-dropdown-option-text:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-option-text:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-option-text:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-option-text:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .form-dropdown-option-text:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } html.ar-quicklook .control-ar-link .arql-not-supported-copy, html.no-ar-quicklook .control-ar-link .arql-supported-copy { display: none } .ar-selector { display: flex; flex-direction: column; align-items: center; margin-top: 20px } .ar-selector .no-ar-ql-supported img { display: block } html.no-ar-quicklook .ar-selector { grid-gap: 24px; gap: 24px } html.no-ar-quicklook .ar-selector .ar-ql-supported { display: none } html.ar-quicklook .ar-selector { grid-gap: 34px; gap: 34px } html.ar-quicklook .ar-selector .no-ar-ql-supported { display: none } html.ar-quicklook .ar-selector .ar-ql-supported { width: -moz-fit-content; width: fit-content } .ar-selector .inline-compare-dropdown { --dropdown-padding: 18px; padding-bottom: var(--ps-spacing-32); position: relative; width: 230px } @media(max-width:1068px) { .ar-selector .inline-compare-dropdown { padding-bottom: var(--ps-spacing-24) } } @media(max-width:734px) { .ar-selector .inline-compare-dropdown { width: 218px } } .ar-selector .form-dropdown { margin: 0; width: 100% } .ar-selector .form-dropdown-wrap { display: flex; margin: 0; flex-direction: column } @media(max-width:734px) { .ar-selector .form-dropdown-wrap { flex-direction: column; align-items: start } } .ar-selector .form-dropdown-chevron { top: 50%; transform: translateY(-50%) } .ar-selector .form-dropdown-chevron::after { position: relative; font-size: 20px; top: -1px; color: #1d1d1f } .ar-selector .form-dropdown-select { height: 40px; border-radius: 10em; box-sizing: border-box; background-color: #fff; color: #1d1d1f; font-weight: 600 } .ar-selector .form-dropdown-select, .ar-selector .form-dropdown-select:focus, .ar-selector .form-dropdown-select:focus:not(button) { border-width: 1px; padding-inline-end: 34px; padding-inline-start: var(--dropdown-padding); padding-top: 0; padding-bottom: 0 } html.text-zoom .ar-selector .form-dropdown-select, html.text-zoom .ar-selector .form-dropdown-select:focus, html.text-zoom .ar-selector .form-dropdown-select:focus:not(button) { height: 2rem; padding-inline-end: 2.4rem; padding-inline-start: 1rem } .ar-selector .arqr-container .product-viewer-arqr { width: 200px; height: 200px } .ar-selector .arqr-container .product-viewer-arqr img { width: 100%; height: 100% } .ar-selector .arqr-container .product-viewer-arbutton, .ar-selector .arqr-container .product-viewer-arqr { display: none } .ar-selector .arqr-container .product-viewer-arbutton.selected, .ar-selector .arqr-container .product-viewer-arqr.selected { display: block } :root { --global-content-max-width-hero: 1680px; --global-content-max-width: 1260px } @media(max-width:734px) { :root { --global-content-max-width: 420px } } :root { --global-scrollbar-width: 0px } [class*=pin-bottom-], [class*=pin-center-], [class*=pin-left], [class*=pin-right], [class*=pin-self-bottom-], [class*=pin-self-center-], [class*=pin-self-left], [class*=pin-self-right], [class*=pin-self-top-], [class*=pin-top-] { --pin-alignment-left: start; --pin-alignment-right: end } :has(>.pin-offset) { align-items: start; align-content: start } .pin-offset { --pin-offset-default: 0; --pin-offset-block: var(--pin-offset-top, var(--pin-offset-default)) var(--pin-offset-right, var(--pin-offset-default)) var(--pin-offset-bottom, var(--pin-offset-default)) var(--pin-offset-left, var(--pin-offset-default)) } .pin-top-center, .pin-top-left, .pin-top-right { align-items: start; align-content: start } .pin-top-center>.pin-offset, .pin-top-left>.pin-offset, .pin-top-right>.pin-offset { --pin-offset-top: var(--pin-offset-y) } .pin-self-top-center, .pin-self-top-left, .pin-self-top-right { align-self: start } .pin-self-top-center.pin-offset, .pin-self-top-left.pin-offset, .pin-self-top-right.pin-offset { --pin-offset-top: var(--pin-offset-y) } .pin-bottom-center, .pin-bottom-left, .pin-bottom-right { align-items: end; align-content: end } .pin-bottom-center>.pin-offset, .pin-bottom-left>.pin-offset, .pin-bottom-right>.pin-offset { --pin-offset-bottom: var(--pin-offset-y) } .pin-self-bottom-center, .pin-self-bottom-left, .pin-self-bottom-right { align-self: end; inset-block-end: 0 } .pin-self-bottom-center.pin-offset, .pin-self-bottom-left.pin-offset, .pin-self-bottom-right.pin-offset { --pin-offset-bottom: var(--pin-offset-y) } .pin-center-left, .pin-center-right { align-items: center; align-content: center } .pin-self-center, .pin-self-center-left, .pin-self-center-right { align-self: center; inset-block-start: 50%; transform: translateY(-50%) } .pin-bottom-left, .pin-center-left, .pin-left, .pin-top-left { justify-content: var(--pin-alignment-left) } .pin-bottom-left>.pin-offset, .pin-center-left>.pin-offset, .pin-left>.pin-offset, .pin-top-left>.pin-offset { --pin-offset-left: var(--pin-offset-x) } .pin-bottom-left.pin-text-align, .pin-center-left.pin-text-align, .pin-left.pin-text-align, .pin-top-left.pin-text-align { text-align: left } .pin-bottom-right, .pin-center-right, .pin-right, .pin-top-right { justify-content: var(--pin-alignment-right) } .pin-bottom-right>.pin-offset, .pin-center-right>.pin-offset, .pin-right>.pin-offset, .pin-top-right>.pin-offset { --pin-offset-right: var(--pin-offset-x) } .pin-bottom-right.pin-text-align, .pin-center-right.pin-text-align, .pin-right.pin-text-align, .pin-top-right.pin-text-align { text-align: right } .pin-bottom-center, .pin-center, .pin-center-center, .pin-top-center { justify-content: center } .pin-bottom-center.pin-text-align, .pin-center-center.pin-text-align, .pin-center.pin-text-align, .pin-top-center.pin-text-align { text-align: center } .pin-self-bottom-left, .pin-self-center-left, .pin-self-left, .pin-self-top-left { justify-self: var(--pin-alignment-left); inset-inline-start: 0 } .pin-self-bottom-left.pin-offset, .pin-self-center-left.pin-offset, .pin-self-left.pin-offset, .pin-self-top-left.pin-offset { --pin-offset-left: var(--pin-offset-x) } .pin-self-bottom-left.pin-text-align, .pin-self-center-left.pin-text-align, .pin-self-left.pin-text-align, .pin-self-top-left.pin-text-align { text-align: left } .pin-self-bottom-right, .pin-self-center-right, .pin-self-right, .pin-self-top-right { justify-self: var(--pin-alignment-right); inset-inline-end: 0 } .pin-self-bottom-right.pin-offset, .pin-self-center-right.pin-offset, .pin-self-right.pin-offset, .pin-self-top-right.pin-offset { --pin-offset-right: var(--pin-offset-x) } .pin-self-bottom-right.pin-text-align, .pin-self-center-right.pin-text-align, .pin-self-right.pin-text-align, .pin-self-top-right.pin-text-align { text-align: right } .pin-self-bottom-center.pin-text-align, .pin-self-center-center.pin-text-align, .pin-self-center.pin-text-align, .pin-self-top-center.pin-text-align { text-align: center } .pin-self-bottom-center, .pin-self-top-center { justify-self: center; inset-inline-start: 50%; transform: translateX(-50%) } .pin-center, .pin-center-center { align-items: center; align-content: center; justify-content: center } .pin-center-center>.pin-offset, .pin-center>.pin-offset { --pin-offset-left: var(--pin-offset-x); --pin-offset-top: var(--pin-offset-y) } .pin-self-center, .pin-self-center-center { align-self: center; justify-self: center; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%) } .pin-self-center-center.pin-offset, .pin-self-center.pin-offset { --pin-offset-left: var(--pin-offset-x); --pin-offset-top: var(--pin-offset-y) } .pin-left, .pin-right { align-items: center; align-content: center } .pin-self-left, .pin-self-right { align-self: center } .large-pin-top-center, .large-pin-top-left, .large-pin-top-right { align-items: start; align-content: start } .large-pin-top-center>.pin-offset, .large-pin-top-left>.pin-offset, .large-pin-top-right>.pin-offset { --pin-offset-top: var(--pin-offset-y) } .large-pin-self-top-center, .large-pin-self-top-left, .large-pin-self-top-right { align-self: start } .large-pin-self-top-center.pin-offset, .large-pin-self-top-left.pin-offset, .large-pin-self-top-right.pin-offset { --pin-offset-top: var(--pin-offset-y) } .large-pin-bottom-center, .large-pin-bottom-left, .large-pin-bottom-right { align-items: end; align-content: end } .large-pin-bottom-center>.pin-offset, .large-pin-bottom-left>.pin-offset, .large-pin-bottom-right>.pin-offset { --pin-offset-bottom: var(--pin-offset-y) } .large-pin-self-bottom-center, .large-pin-self-bottom-left, .large-pin-self-bottom-right { align-self: end; inset-block-end: 0 } .large-pin-self-bottom-center.pin-offset, .large-pin-self-bottom-left.pin-offset, .large-pin-self-bottom-right.pin-offset { --pin-offset-bottom: var(--pin-offset-y) } .large-pin-center-left, .large-pin-center-right { align-items: center; align-content: center } .large-pin-self-center, .large-pin-self-center-left, .large-pin-self-center-right { align-self: center; inset-block-start: 50%; transform: translateY(-50%) } .large-pin-bottom-left, .large-pin-center-left, .large-pin-left, .large-pin-top-left { justify-content: var(--pin-alignment-left) } .large-pin-bottom-left>.pin-offset, .large-pin-center-left>.pin-offset, .large-pin-left>.pin-offset, .large-pin-top-left>.pin-offset { --pin-offset-left: var(--pin-offset-x) } .large-pin-bottom-left.pin-text-align, .large-pin-center-left.pin-text-align, .large-pin-left.pin-text-align, .large-pin-top-left.pin-text-align { text-align: left } .large-pin-bottom-right, .large-pin-center-right, .large-pin-right, .large-pin-top-right { justify-content: var(--pin-alignment-right) } .large-pin-bottom-right>.pin-offset, .large-pin-center-right>.pin-offset, .large-pin-right>.pin-offset, .large-pin-top-right>.pin-offset { --pin-offset-right: var(--pin-offset-x) } .large-pin-bottom-right.pin-text-align, .large-pin-center-right.pin-text-align, .large-pin-right.pin-text-align, .large-pin-top-right.pin-text-align { text-align: right } .large-pin-bottom-center, .large-pin-center, .large-pin-center-center, .large-pin-top-center { justify-content: center } .large-pin-bottom-center.pin-text-align, .large-pin-center-center.pin-text-align, .large-pin-center.pin-text-align, .large-pin-top-center.pin-text-align { text-align: center } .large-pin-self-bottom-left, .large-pin-self-center-left, .large-pin-self-left, .large-pin-self-top-left { justify-self: var(--pin-alignment-left); inset-inline-start: 0 } .large-pin-self-bottom-left.pin-offset, .large-pin-self-center-left.pin-offset, .large-pin-self-left.pin-offset, .large-pin-self-top-left.pin-offset { --pin-offset-left: var(--pin-offset-x) } .large-pin-self-bottom-left.pin-text-align, .large-pin-self-center-left.pin-text-align, .large-pin-self-left.pin-text-align, .large-pin-self-top-left.pin-text-align { text-align: left } .large-pin-self-bottom-right, .large-pin-self-center-right, .large-pin-self-right, .large-pin-self-top-right { justify-self: var(--pin-alignment-right); inset-inline-end: 0 } .large-pin-self-bottom-right.pin-offset, .large-pin-self-center-right.pin-offset, .large-pin-self-right.pin-offset, .large-pin-self-top-right.pin-offset { --pin-offset-right: var(--pin-offset-x) } .large-pin-self-bottom-right.pin-text-align, .large-pin-self-center-right.pin-text-align, .large-pin-self-right.pin-text-align, .large-pin-self-top-right.pin-text-align { text-align: right } .large-pin-self-bottom-center.pin-text-align, .large-pin-self-center-center.pin-text-align, .large-pin-self-center.pin-text-align, .large-pin-self-top-center.pin-text-align { text-align: center } .large-pin-self-bottom-center, .large-pin-self-top-center { justify-self: center; inset-inline-start: 50%; transform: translateX(-50%) } .large-pin-center, .large-pin-center-center { align-items: center; align-content: center; justify-content: center } .large-pin-center-center>.pin-offset, .large-pin-center>.pin-offset { --pin-offset-left: var(--pin-offset-x); --pin-offset-top: var(--pin-offset-y) } .large-pin-self-center, .large-pin-self-center-center { align-self: center; justify-self: center; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%) } .large-pin-self-center-center.pin-offset, .large-pin-self-center.pin-offset { --pin-offset-left: var(--pin-offset-x); --pin-offset-top: var(--pin-offset-y) } .large-pin-left, .large-pin-right { align-items: center; align-content: center } .large-pin-self-left, .large-pin-self-right { align-self: center } @media(min-width:1441px) { .xlarge-pin-top-center, .xlarge-pin-top-left, .xlarge-pin-top-right { align-items: start; align-content: start } .xlarge-pin-top-center>.pin-offset, .xlarge-pin-top-left>.pin-offset, .xlarge-pin-top-right>.pin-offset { --pin-offset-top: var(--pin-offset-y) } .xlarge-pin-self-top-center, .xlarge-pin-self-top-left, .xlarge-pin-self-top-right { align-self: start } .xlarge-pin-self-top-center.pin-offset, .xlarge-pin-self-top-left.pin-offset, .xlarge-pin-self-top-right.pin-offset { --pin-offset-top: var(--pin-offset-y) } .xlarge-pin-bottom-center, .xlarge-pin-bottom-left, .xlarge-pin-bottom-right { align-items: end; align-content: end } .xlarge-pin-bottom-center>.pin-offset, .xlarge-pin-bottom-left>.pin-offset, .xlarge-pin-bottom-right>.pin-offset { --pin-offset-bottom: var(--pin-offset-y) } .xlarge-pin-self-bottom-center, .xlarge-pin-self-bottom-left, .xlarge-pin-self-bottom-right { align-self: end; inset-block-end: 0 } .xlarge-pin-self-bottom-center.pin-offset, .xlarge-pin-self-bottom-left.pin-offset, .xlarge-pin-self-bottom-right.pin-offset { --pin-offset-bottom: var(--pin-offset-y) } .xlarge-pin-center-left, .xlarge-pin-center-right { align-items: center; align-content: center } .xlarge-pin-self-center, .xlarge-pin-self-center-left, .xlarge-pin-self-center-right { align-self: center; inset-block-start: 50%; transform: translateY(-50%) } .xlarge-pin-bottom-left, .xlarge-pin-center-left, .xlarge-pin-left, .xlarge-pin-top-left { justify-content: var(--pin-alignment-left) } .xlarge-pin-bottom-left>.pin-offset, .xlarge-pin-center-left>.pin-offset, .xlarge-pin-left>.pin-offset, .xlarge-pin-top-left>.pin-offset { --pin-offset-left: var(--pin-offset-x) } .xlarge-pin-bottom-left.pin-text-align, .xlarge-pin-center-left.pin-text-align, .xlarge-pin-left.pin-text-align, .xlarge-pin-top-left.pin-text-align { text-align: left } .xlarge-pin-bottom-right, .xlarge-pin-center-right, .xlarge-pin-right, .xlarge-pin-top-right { justify-content: var(--pin-alignment-right) } .xlarge-pin-bottom-right>.pin-offset, .xlarge-pin-center-right>.pin-offset, .xlarge-pin-right>.pin-offset, .xlarge-pin-top-right>.pin-offset { --pin-offset-right: var(--pin-offset-x) } .xlarge-pin-bottom-right.pin-text-align, .xlarge-pin-center-right.pin-text-align, .xlarge-pin-right.pin-text-align, .xlarge-pin-top-right.pin-text-align { text-align: right } .xlarge-pin-bottom-center, .xlarge-pin-center, .xlarge-pin-center-center, .xlarge-pin-top-center { justify-content: center } .xlarge-pin-bottom-center.pin-text-align, .xlarge-pin-center-center.pin-text-align, .xlarge-pin-center.pin-text-align, .xlarge-pin-top-center.pin-text-align { text-align: center } .xlarge-pin-self-bottom-left, .xlarge-pin-self-center-left, .xlarge-pin-self-left, .xlarge-pin-self-top-left { justify-self: var(--pin-alignment-left); inset-inline-start: 0 } .xlarge-pin-self-bottom-left.pin-offset, .xlarge-pin-self-center-left.pin-offset, .xlarge-pin-self-left.pin-offset, .xlarge-pin-self-top-left.pin-offset { --pin-offset-left: var(--pin-offset-x) } .xlarge-pin-self-bottom-left.pin-text-align, .xlarge-pin-self-center-left.pin-text-align, .xlarge-pin-self-left.pin-text-align, .xlarge-pin-self-top-left.pin-text-align { text-align: left } .xlarge-pin-self-bottom-right, .xlarge-pin-self-center-right, .xlarge-pin-self-right, .xlarge-pin-self-top-right { justify-self: var(--pin-alignment-right); inset-inline-end: 0 } .xlarge-pin-self-bottom-right.pin-offset, .xlarge-pin-self-center-right.pin-offset, .xlarge-pin-self-right.pin-offset, .xlarge-pin-self-top-right.pin-offset { --pin-offset-right: var(--pin-offset-x) } .xlarge-pin-self-bottom-right.pin-text-align, .xlarge-pin-self-center-right.pin-text-align, .xlarge-pin-self-right.pin-text-align, .xlarge-pin-self-top-right.pin-text-align { text-align: right } .xlarge-pin-self-bottom-center.pin-text-align, .xlarge-pin-self-center-center.pin-text-align, .xlarge-pin-self-center.pin-text-align, .xlarge-pin-self-top-center.pin-text-align { text-align: center } .xlarge-pin-self-bottom-center, .xlarge-pin-self-top-center { justify-self: center; inset-inline-start: 50%; transform: translateX(-50%) } .xlarge-pin-center, .xlarge-pin-center-center { align-items: center; align-content: center; justify-content: center } .xlarge-pin-center-center>.pin-offset, .xlarge-pin-center>.pin-offset { --pin-offset-left: var(--pin-offset-x); --pin-offset-top: var(--pin-offset-y) } .xlarge-pin-self-center, .xlarge-pin-self-center-center { align-self: center; justify-self: center; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%) } .xlarge-pin-self-center-center.pin-offset, .xlarge-pin-self-center.pin-offset { --pin-offset-left: var(--pin-offset-x); --pin-offset-top: var(--pin-offset-y) } .xlarge-pin-left, .xlarge-pin-right { align-items: center; align-content: center } .xlarge-pin-self-left, .xlarge-pin-self-right { align-self: center } } @media(max-width:1068px) { .medium-pin-top-center, .medium-pin-top-left, .medium-pin-top-right { align-items: start; align-content: start } .medium-pin-top-center>.pin-offset, .medium-pin-top-left>.pin-offset, .medium-pin-top-right>.pin-offset { --pin-offset-top: var(--pin-offset-y) } .medium-pin-self-top-center, .medium-pin-self-top-left, .medium-pin-self-top-right { align-self: start } .medium-pin-self-top-center.pin-offset, .medium-pin-self-top-left.pin-offset, .medium-pin-self-top-right.pin-offset { --pin-offset-top: var(--pin-offset-y) } .medium-pin-bottom-center, .medium-pin-bottom-left, .medium-pin-bottom-right { align-items: end; align-content: end } .medium-pin-bottom-center>.pin-offset, .medium-pin-bottom-left>.pin-offset, .medium-pin-bottom-right>.pin-offset { --pin-offset-bottom: var(--pin-offset-y) } .medium-pin-self-bottom-center, .medium-pin-self-bottom-left, .medium-pin-self-bottom-right { align-self: end; inset-block-end: 0 } .medium-pin-self-bottom-center.pin-offset, .medium-pin-self-bottom-left.pin-offset, .medium-pin-self-bottom-right.pin-offset { --pin-offset-bottom: var(--pin-offset-y) } .medium-pin-center-left, .medium-pin-center-right { align-items: center; align-content: center } .medium-pin-self-center, .medium-pin-self-center-left, .medium-pin-self-center-right { align-self: center; inset-block-start: 50%; transform: translateY(-50%) } .medium-pin-bottom-left, .medium-pin-center-left, .medium-pin-left, .medium-pin-top-left { justify-content: var(--pin-alignment-left) } .medium-pin-bottom-left>.pin-offset, .medium-pin-center-left>.pin-offset, .medium-pin-left>.pin-offset, .medium-pin-top-left>.pin-offset { --pin-offset-left: var(--pin-offset-x) } .medium-pin-bottom-left.pin-text-align, .medium-pin-center-left.pin-text-align, .medium-pin-left.pin-text-align, .medium-pin-top-left.pin-text-align { text-align: left } .medium-pin-bottom-right, .medium-pin-center-right, .medium-pin-right, .medium-pin-top-right { justify-content: var(--pin-alignment-right) } .medium-pin-bottom-right>.pin-offset, .medium-pin-center-right>.pin-offset, .medium-pin-right>.pin-offset, .medium-pin-top-right>.pin-offset { --pin-offset-right: var(--pin-offset-x) } .medium-pin-bottom-right.pin-text-align, .medium-pin-center-right.pin-text-align, .medium-pin-right.pin-text-align, .medium-pin-top-right.pin-text-align { text-align: right } .medium-pin-bottom-center, .medium-pin-center, .medium-pin-center-center, .medium-pin-top-center { justify-content: center } .medium-pin-bottom-center.pin-text-align, .medium-pin-center-center.pin-text-align, .medium-pin-center.pin-text-align, .medium-pin-top-center.pin-text-align { text-align: center } .medium-pin-self-bottom-left, .medium-pin-self-center-left, .medium-pin-self-left, .medium-pin-self-top-left { justify-self: var(--pin-alignment-left); inset-inline-start: 0 } .medium-pin-self-bottom-left.pin-offset, .medium-pin-self-center-left.pin-offset, .medium-pin-self-left.pin-offset, .medium-pin-self-top-left.pin-offset { --pin-offset-left: var(--pin-offset-x) } .medium-pin-self-bottom-left.pin-text-align, .medium-pin-self-center-left.pin-text-align, .medium-pin-self-left.pin-text-align, .medium-pin-self-top-left.pin-text-align { text-align: left } .medium-pin-self-bottom-right, .medium-pin-self-center-right, .medium-pin-self-right, .medium-pin-self-top-right { justify-self: var(--pin-alignment-right); inset-inline-end: 0 } .medium-pin-self-bottom-right.pin-offset, .medium-pin-self-center-right.pin-offset, .medium-pin-self-right.pin-offset, .medium-pin-self-top-right.pin-offset { --pin-offset-right: var(--pin-offset-x) } .medium-pin-self-bottom-right.pin-text-align, .medium-pin-self-center-right.pin-text-align, .medium-pin-self-right.pin-text-align, .medium-pin-self-top-right.pin-text-align { text-align: right } .medium-pin-self-bottom-center.pin-text-align, .medium-pin-self-center-center.pin-text-align, .medium-pin-self-center.pin-text-align, .medium-pin-self-top-center.pin-text-align { text-align: center } .medium-pin-self-bottom-center, .medium-pin-self-top-center { justify-self: center; inset-inline-start: 50%; transform: translateX(-50%) } .medium-pin-center, .medium-pin-center-center { align-items: center; align-content: center; justify-content: center } .medium-pin-center-center>.pin-offset, .medium-pin-center>.pin-offset { --pin-offset-left: var(--pin-offset-x); --pin-offset-top: var(--pin-offset-y) } .medium-pin-self-center, .medium-pin-self-center-center { align-self: center; justify-self: center; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%) } .medium-pin-self-center-center.pin-offset, .medium-pin-self-center.pin-offset { --pin-offset-left: var(--pin-offset-x); --pin-offset-top: var(--pin-offset-y) } .medium-pin-left, .medium-pin-right { align-items: center; align-content: center } .medium-pin-self-left, .medium-pin-self-right { align-self: center } } @media(max-width:734px) { .small-pin-top-center, .small-pin-top-left, .small-pin-top-right { align-items: start; align-content: start } .small-pin-top-center>.pin-offset, .small-pin-top-left>.pin-offset, .small-pin-top-right>.pin-offset { --pin-offset-top: var(--pin-offset-y) } .small-pin-self-top-center, .small-pin-self-top-left, .small-pin-self-top-right { align-self: start } .small-pin-self-top-center.pin-offset, .small-pin-self-top-left.pin-offset, .small-pin-self-top-right.pin-offset { --pin-offset-top: var(--pin-offset-y) } .small-pin-bottom-center, .small-pin-bottom-left, .small-pin-bottom-right { align-items: end; align-content: end } .small-pin-bottom-center>.pin-offset, .small-pin-bottom-left>.pin-offset, .small-pin-bottom-right>.pin-offset { --pin-offset-bottom: var(--pin-offset-y) } .small-pin-self-bottom-center, .small-pin-self-bottom-left, .small-pin-self-bottom-right { align-self: end; inset-block-end: 0 } .small-pin-self-bottom-center.pin-offset, .small-pin-self-bottom-left.pin-offset, .small-pin-self-bottom-right.pin-offset { --pin-offset-bottom: var(--pin-offset-y) } .small-pin-center-left, .small-pin-center-right { align-items: center; align-content: center } .small-pin-self-center, .small-pin-self-center-left, .small-pin-self-center-right { align-self: center; inset-block-start: 50%; transform: translateY(-50%) } .small-pin-bottom-left, .small-pin-center-left, .small-pin-left, .small-pin-top-left { justify-content: var(--pin-alignment-left) } .small-pin-bottom-left>.pin-offset, .small-pin-center-left>.pin-offset, .small-pin-left>.pin-offset, .small-pin-top-left>.pin-offset { --pin-offset-left: var(--pin-offset-x) } .small-pin-bottom-left.pin-text-align, .small-pin-center-left.pin-text-align, .small-pin-left.pin-text-align, .small-pin-top-left.pin-text-align { text-align: left } .small-pin-bottom-right, .small-pin-center-right, .small-pin-right, .small-pin-top-right { justify-content: var(--pin-alignment-right) } .small-pin-bottom-right>.pin-offset, .small-pin-center-right>.pin-offset, .small-pin-right>.pin-offset, .small-pin-top-right>.pin-offset { --pin-offset-right: var(--pin-offset-x) } .small-pin-bottom-right.pin-text-align, .small-pin-center-right.pin-text-align, .small-pin-right.pin-text-align, .small-pin-top-right.pin-text-align { text-align: right } .small-pin-bottom-center, .small-pin-center, .small-pin-center-center, .small-pin-top-center { justify-content: center } .small-pin-bottom-center.pin-text-align, .small-pin-center-center.pin-text-align, .small-pin-center.pin-text-align, .small-pin-top-center.pin-text-align { text-align: center } .small-pin-self-bottom-left, .small-pin-self-center-left, .small-pin-self-left, .small-pin-self-top-left { justify-self: var(--pin-alignment-left); inset-inline-start: 0 } .small-pin-self-bottom-left.pin-offset, .small-pin-self-center-left.pin-offset, .small-pin-self-left.pin-offset, .small-pin-self-top-left.pin-offset { --pin-offset-left: var(--pin-offset-x) } .small-pin-self-bottom-left.pin-text-align, .small-pin-self-center-left.pin-text-align, .small-pin-self-left.pin-text-align, .small-pin-self-top-left.pin-text-align { text-align: left } .small-pin-self-bottom-right, .small-pin-self-center-right, .small-pin-self-right, .small-pin-self-top-right { justify-self: var(--pin-alignment-right); inset-inline-end: 0 } .small-pin-self-bottom-right.pin-offset, .small-pin-self-center-right.pin-offset, .small-pin-self-right.pin-offset, .small-pin-self-top-right.pin-offset { --pin-offset-right: var(--pin-offset-x) } .small-pin-self-bottom-right.pin-text-align, .small-pin-self-center-right.pin-text-align, .small-pin-self-right.pin-text-align, .small-pin-self-top-right.pin-text-align { text-align: right } .small-pin-self-bottom-center.pin-text-align, .small-pin-self-center-center.pin-text-align, .small-pin-self-center.pin-text-align, .small-pin-self-top-center.pin-text-align { text-align: center } .small-pin-self-bottom-center, .small-pin-self-top-center { justify-self: center; inset-inline-start: 50%; transform: translateX(-50%) } .small-pin-center, .small-pin-center-center { align-items: center; align-content: center; justify-content: center } .small-pin-center-center>.pin-offset, .small-pin-center>.pin-offset { --pin-offset-left: var(--pin-offset-x); --pin-offset-top: var(--pin-offset-y) } .small-pin-self-center, .small-pin-self-center-center { align-self: center; justify-self: center; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%) } .small-pin-self-center-center.pin-offset, .small-pin-self-center.pin-offset { --pin-offset-left: var(--pin-offset-x); --pin-offset-top: var(--pin-offset-y) } .small-pin-left, .small-pin-right { align-items: center; align-content: center } .small-pin-self-left, .small-pin-self-right { align-self: center } } @media(max-width:480px) { .xsmall-pin-top-center, .xsmall-pin-top-left, .xsmall-pin-top-right { align-items: start; align-content: start } .xsmall-pin-top-center>.pin-offset, .xsmall-pin-top-left>.pin-offset, .xsmall-pin-top-right>.pin-offset { --pin-offset-top: var(--pin-offset-y) } .xsmall-pin-self-top-center, .xsmall-pin-self-top-left, .xsmall-pin-self-top-right { align-self: start } .xsmall-pin-self-top-center.pin-offset, .xsmall-pin-self-top-left.pin-offset, .xsmall-pin-self-top-right.pin-offset { --pin-offset-top: var(--pin-offset-y) } .xsmall-pin-bottom-center, .xsmall-pin-bottom-left, .xsmall-pin-bottom-right { align-items: end; align-content: end } .xsmall-pin-bottom-center>.pin-offset, .xsmall-pin-bottom-left>.pin-offset, .xsmall-pin-bottom-right>.pin-offset { --pin-offset-bottom: var(--pin-offset-y) } .xsmall-pin-self-bottom-center, .xsmall-pin-self-bottom-left, .xsmall-pin-self-bottom-right { align-self: end; inset-block-end: 0 } .xsmall-pin-self-bottom-center.pin-offset, .xsmall-pin-self-bottom-left.pin-offset, .xsmall-pin-self-bottom-right.pin-offset { --pin-offset-bottom: var(--pin-offset-y) } .xsmall-pin-center-left, .xsmall-pin-center-right { align-items: center; align-content: center } .xsmall-pin-self-center, .xsmall-pin-self-center-left, .xsmall-pin-self-center-right { align-self: center; inset-block-start: 50%; transform: translateY(-50%) } .xsmall-pin-bottom-left, .xsmall-pin-center-left, .xsmall-pin-left, .xsmall-pin-top-left { justify-content: var(--pin-alignment-left) } .xsmall-pin-bottom-left>.pin-offset, .xsmall-pin-center-left>.pin-offset, .xsmall-pin-left>.pin-offset, .xsmall-pin-top-left>.pin-offset { --pin-offset-left: var(--pin-offset-x) } .xsmall-pin-bottom-left.pin-text-align, .xsmall-pin-center-left.pin-text-align, .xsmall-pin-left.pin-text-align, .xsmall-pin-top-left.pin-text-align { text-align: left } .xsmall-pin-bottom-right, .xsmall-pin-center-right, .xsmall-pin-right, .xsmall-pin-top-right { justify-content: var(--pin-alignment-right) } .xsmall-pin-bottom-right>.pin-offset, .xsmall-pin-center-right>.pin-offset, .xsmall-pin-right>.pin-offset, .xsmall-pin-top-right>.pin-offset { --pin-offset-right: var(--pin-offset-x) } .xsmall-pin-bottom-right.pin-text-align, .xsmall-pin-center-right.pin-text-align, .xsmall-pin-right.pin-text-align, .xsmall-pin-top-right.pin-text-align { text-align: right } .xsmall-pin-bottom-center, .xsmall-pin-center, .xsmall-pin-center-center, .xsmall-pin-top-center { justify-content: center } .xsmall-pin-bottom-center.pin-text-align, .xsmall-pin-center-center.pin-text-align, .xsmall-pin-center.pin-text-align, .xsmall-pin-top-center.pin-text-align { text-align: center } .xsmall-pin-self-bottom-left, .xsmall-pin-self-center-left, .xsmall-pin-self-left, .xsmall-pin-self-top-left { justify-self: var(--pin-alignment-left); inset-inline-start: 0 } .xsmall-pin-self-bottom-left.pin-offset, .xsmall-pin-self-center-left.pin-offset, .xsmall-pin-self-left.pin-offset, .xsmall-pin-self-top-left.pin-offset { --pin-offset-left: var(--pin-offset-x) } .xsmall-pin-self-bottom-left.pin-text-align, .xsmall-pin-self-center-left.pin-text-align, .xsmall-pin-self-left.pin-text-align, .xsmall-pin-self-top-left.pin-text-align { text-align: left } .xsmall-pin-self-bottom-right, .xsmall-pin-self-center-right, .xsmall-pin-self-right, .xsmall-pin-self-top-right { justify-self: var(--pin-alignment-right); inset-inline-end: 0 } .xsmall-pin-self-bottom-right.pin-offset, .xsmall-pin-self-center-right.pin-offset, .xsmall-pin-self-right.pin-offset, .xsmall-pin-self-top-right.pin-offset { --pin-offset-right: var(--pin-offset-x) } .xsmall-pin-self-bottom-right.pin-text-align, .xsmall-pin-self-center-right.pin-text-align, .xsmall-pin-self-right.pin-text-align, .xsmall-pin-self-top-right.pin-text-align { text-align: right } .xsmall-pin-self-bottom-center.pin-text-align, .xsmall-pin-self-center-center.pin-text-align, .xsmall-pin-self-center.pin-text-align, .xsmall-pin-self-top-center.pin-text-align { text-align: center } .xsmall-pin-self-bottom-center, .xsmall-pin-self-top-center { justify-self: center; inset-inline-start: 50%; transform: translateX(-50%) } .xsmall-pin-center, .xsmall-pin-center-center { align-items: center; align-content: center; justify-content: center } .xsmall-pin-center-center>.pin-offset, .xsmall-pin-center>.pin-offset { --pin-offset-left: var(--pin-offset-x); --pin-offset-top: var(--pin-offset-y) } .xsmall-pin-self-center, .xsmall-pin-self-center-center { align-self: center; justify-self: center; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%) } .xsmall-pin-self-center-center.pin-offset, .xsmall-pin-self-center.pin-offset { --pin-offset-left: var(--pin-offset-x); --pin-offset-top: var(--pin-offset-y) } .xsmall-pin-left, .xsmall-pin-right { align-items: center; align-content: center } .xsmall-pin-self-left, .xsmall-pin-self-right { align-self: center } } .product-viewer-enhanced.viewer--loading .viewer-wrapper .loader { opacity: 1; transition: none; visibility: visible } .product-viewer-enhanced.viewer--loading .viewer-wrapper .loader .loader-content { opacity: 1 } .product-viewer-enhanced .viewer-wrapper { position: relative; display: grid; align-items: center; justify-items: center; width: 100%; height: var(--product-viewer-height) } .product-viewer-enhanced .viewer-wrapper .product-viewer-canvas { grid-area: 1/1; width: 100%; height: 100%; position: absolute; visibility: hidden } @media(max-width:734px) { .product-viewer-enhanced .viewer-wrapper .product-viewer-canvas { width: 120% } } .product-viewer-enhanced .viewer-wrapper .product-viewer-canvas canvas { transition: opacity .7s cubic-bezier(0.34, 2.16, 0.64, 1); transition-delay: .25s; transform: translateX(var(--product-viewer-canvas-offset)) } .product-viewer-enhanced .viewer-wrapper .product-viewer-canvas.entice canvas { opacity: 0 } html.no-small-breakpoint .product-viewer-enhanced .viewer-wrapper .product-viewer-canvas { max-width: 1728px; height: 912px; width: calc(120vw - var(--global-scrollbar-width)*1.2) } @media(max-width:1068px) { html.no-small-breakpoint .product-viewer-enhanced .viewer-wrapper .product-viewer-canvas { max-width: 1284px; height: 864px } } @media(max-width:734px) { .product-viewer-enhanced .viewer-wrapper .product-viewer-canvas { max-width: 884px; height: 768px } } .product-viewer-enhanced .viewer-wrapper .loader { grid-area: 1/1; display: grid; align-items: center; justify-content: center; opacity: 0; transition: opacity .4s ease-out .4s, visibility .4s ease-out .4s; visibility: hidden; width: 100%; height: 100%; z-index: 1; background-color: var(--product-viewer-loader-preview-background-color) } .product-viewer-enhanced .viewer-wrapper .loader .loader-background { -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); background-color: var(--product-viewer-loader-background-color); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2; grid-area: 1/1 } @media(min-width:1441px) { @supports(-moz-appearance:none) { .product-viewer-enhanced .viewer-wrapper .loader .loader-background { clip-path: inset(0 round calc(var(--product-viewer-ref-border-radius) + 1px)) } } } .product-viewer-enhanced .viewer-wrapper .loader .loader-content { align-items: center; display: flex; flex-direction: column; grid-gap: 32px; gap: 32px; justify-content: center; opacity: 1; transition: opacity .4s ease-out; z-index: 3; grid-area: 1/1 } @media(max-width:734px) { .product-viewer-enhanced .viewer-wrapper .loader .loader-content { grid-gap: 26px; gap: 26px } } .product-viewer-enhanced .viewer-wrapper .loader .loader-headline { max-width: 426px; text-align: center } @media(max-width:734px) { .product-viewer-enhanced .viewer-wrapper .loader .loader-headline { max-width: 200px } } .product-viewer-enhanced .viewer-wrapper .loader .loader-headline-touch-text, html.touch .product-viewer-enhanced .viewer-wrapper .loader .loader-headline-text { display: none } html.touch .product-viewer-enhanced .viewer-wrapper .loader .loader-headline-touch-text { display: inline-block } .product-viewer-enhanced .viewer-wrapper .loader .loader-progress { background: var(--product-viewer-loader-progress-background-color); border-radius: 4px; height: 8px; margin-top: 0; overflow: hidden; position: relative; width: 140px; z-index: 2 } .product-viewer-enhanced .viewer-wrapper .loader .loader-progress-indicator { --progress: -100%; background: var(--product-viewer-loader-progress-indicator-background-color); border-radius: 4px; height: 100%; left: 0; position: absolute; top: 0; transform: translateX(var(--progress)); transform-origin: left; width: 100% } .product-viewer-enhanced .viewer-wrapper .loader .loader-progress-indicator.animate { transition: transform .5s ease-out } .product-viewer-enhanced .viewer-wrapper .loader .preview { z-index: 1; display: flex; justify-content: center; align-items: center; grid-area: 1/1 } .product-viewer-enhanced .viewer-wrapper .loader .preview .preview-image { display: flex } .product-viewer-enhanced .viewer-wrapper .viewer-hit-area { grid-area: 1/1; width: var(--product-viewer-hit-area-width); height: var(--product-viewer-hit-area-height); margin-top: var(--product-viewer-hit-area-offset-y); margin-left: var(--product-viewer-hit-area-offset-x); box-sizing: border-box; justify-content: center; align-items: center; display: flex; -webkit-user-select: none; user-select: none; border-radius: var(--product-viewer-hit-area-border-radius); z-index: 1; touch-action: pinch-zoom; transform: translateX(var(--product-viewer-canvas-offset)) } .product-viewer-enhanced .viewer-wrapper .viewer-hit-area.debug { border: 3px solid #ff4500; color: #ff4500 } .product-viewer-enhanced .viewer-wrapper .viewer-hit-area.debug::after { content: "hit area" } .product-viewer-container { position: absolute; width: 100%; height: var(--product-viewer-height); top: 0; left: 0; display: grid } html.no-js .product-viewer-container { height: auto; grid-area: 1/1; position: relative } .product-viewer-container .product-viewer { display: grid; align-content: center; justify-content: center; place-content: center } .product-viewer-container.static-gallery-active, .product-viewer-container.static-gallery-active .product-viewer { pointer-events: none } .product-viewer.gallery .video-wrapper { align-items: center; justify-items: center } .product-viewer-media-gallery .product-viewer-media, .product-viewer.gallery .product-viewer-media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; display: grid; max-width: none } html.no-js .product-viewer-media-gallery .product-viewer-media, html.no-js .product-viewer.gallery .product-viewer-media { opacity: 1; position: relative; height: auto } @media(max-width:734px) { .product-viewer-media-gallery .product-viewer-media, .product-viewer.gallery .product-viewer-media { will-change: unset } } .product-viewer-media-gallery .product-viewer-media.should-hide, .product-viewer.gallery .product-viewer-media.should-hide { display: none } .product-viewer-media-gallery .product-viewer-media.pin-right>:first-child, .product-viewer.gallery .product-viewer-media.pin-right>:first-child { transform: translateX(8.3333333333%) } .product-viewer-media-gallery .product-viewer-media.pin-left>:first-child, .product-viewer.gallery .product-viewer-media.pin-left>:first-child { transform: translateX(-8.3333333333%) } .product-viewer-media-gallery .product-viewer-media.large-pin-right>:first-child, .product-viewer.gallery .product-viewer-media.large-pin-right>:first-child { transform: translateX(8.3333333333%) } .product-viewer-media-gallery .product-viewer-media.large-pin-center>:first-child, .product-viewer.gallery .product-viewer-media.large-pin-center>:first-child { transform: none } .product-viewer-media-gallery .product-viewer-media.large-pin-left>:first-child, .product-viewer.gallery .product-viewer-media.large-pin-left>:first-child { transform: translateX(-8.3333333333%) } @media(min-width:1441px) { .product-viewer-media-gallery .product-viewer-media.xlarge-pin-right>:first-child, .product-viewer.gallery .product-viewer-media.xlarge-pin-right>:first-child { transform: translateX(8.3333333333%) } .product-viewer-media-gallery .product-viewer-media.xlarge-pin-center>:first-child, .product-viewer.gallery .product-viewer-media.xlarge-pin-center>:first-child { transform: none } .product-viewer-media-gallery .product-viewer-media.xlarge-pin-left>:first-child, .product-viewer.gallery .product-viewer-media.xlarge-pin-left>:first-child { transform: translateX(-8.3333333333%) } } @media(max-width:1068px) { .product-viewer-media-gallery .product-viewer-media.medium-pin-right>:first-child, .product-viewer.gallery .product-viewer-media.medium-pin-right>:first-child { transform: translateX(8.3333333333%) } .product-viewer-media-gallery .product-viewer-media.medium-pin-center>:first-child, .product-viewer.gallery .product-viewer-media.medium-pin-center>:first-child { transform: none } .product-viewer-media-gallery .product-viewer-media.medium-pin-left>:first-child, .product-viewer.gallery .product-viewer-media.medium-pin-left>:first-child { transform: translateX(-8.3333333333%) } } @media(max-width:734px) { .product-viewer-media-gallery .product-viewer-media.small-pin-right>:first-child, .product-viewer.gallery .product-viewer-media.small-pin-right>:first-child { transform: translateX(8.3333333333%) } .product-viewer-media-gallery .product-viewer-media.small-pin-center>:first-child, .product-viewer.gallery .product-viewer-media.small-pin-center>:first-child { transform: none } .product-viewer-media-gallery .product-viewer-media.small-pin-left>:first-child, .product-viewer.gallery .product-viewer-media.small-pin-left>:first-child { transform: translateX(-8.3333333333%) } } @media(max-width:480px) { .product-viewer-media-gallery .product-viewer-media.xsmall-pin-right>:first-child, .product-viewer.gallery .product-viewer-media.xsmall-pin-right>:first-child { transform: translateX(8.3333333333%) } .product-viewer-media-gallery .product-viewer-media.xsmall-pin-center>:first-child, .product-viewer.gallery .product-viewer-media.xsmall-pin-center>:first-child { transform: none } .product-viewer-media-gallery .product-viewer-media.xsmall-pin-left>:first-child, .product-viewer.gallery .product-viewer-media.xsmall-pin-left>:first-child { transform: translateX(-8.3333333333%) } } html.small-breakpoint .product-viewer-media-gallery .product-viewer-media img, html.small-breakpoint .product-viewer.gallery .product-viewer-media img { height: 100% } .product-viewer-media-gallery .inline-media-component-container, .product-viewer.gallery .inline-media-component-container { display: initial; width: auto; position: static; max-width: none } .product-viewer-media-gallery .inline-media-component-container .video-wrapper picture, .product-viewer.gallery .inline-media-component-container .video-wrapper picture { pointer-events: none !important; width: 1728px; height: 912px } @media(max-width:1068px) { .product-viewer-media-gallery .inline-media-component-container .video-wrapper picture, .product-viewer.gallery .inline-media-component-container .video-wrapper picture { width: 1284px; height: 864px } } @media(max-width:734px) { .product-viewer-media-gallery .inline-media-component-container .video-wrapper picture, .product-viewer.gallery .inline-media-component-container .video-wrapper picture { width: 884px; height: 768px } } .product-viewer-media-gallery .inline-media-component-container .video-wrapper video, .product-viewer.gallery .inline-media-component-container .video-wrapper video { position: static; top: auto; width: 1728px; height: 912px } @media(max-width:1068px) { .product-viewer-media-gallery .inline-media-component-container .video-wrapper video, .product-viewer.gallery .inline-media-component-container .video-wrapper video { width: 1284px; height: 864px } } @media(max-width:734px) { .product-viewer-media-gallery .inline-media-component-container .video-wrapper video, .product-viewer.gallery .inline-media-component-container .video-wrapper video { width: 884px; height: 768px } } .product-viewer-media-gallery { position: relative; width: 100%; height: 100%; pointer-events: none; z-index: 2; grid-area: 1/1; margin: 0 auto; max-width: var(--global-content-max-width-hero); overflow: hidden } html.desktop .product-viewer-media-gallery .product-viewer-media { will-change: transform, opacity } html.js.no-reduced-motion.no-small-breakpoint .product-viewer-media-gallery .product-viewer-media { visibility: hidden; display: none } html.desktop .product-viewer.gallery { will-change: transform, opacity } .product-viewer.gallery .product-viewer-media { opacity: 1 } :root { --product-viewer-loader-background-color: rgba(255, 255, 255, .1); --product-viewer-loader-progress-background-color: rgba(134, 134, 139, .4); --product-viewer-loader-progress-indicator-background-color: #000; --product-viewer-loader-preview-background-color: #fff; --product-viewer-fallback-slide-bg-color: #fff; --product-viewer-height: 760px; --product-viewer-hit-area-width: 100%; --product-viewer-hit-area-height: 100%; --product-viewer-hit-area-border-radius: 0; --product-viewer-hit-area-offset-x: 0; --product-viewer-hit-area-offset-y: 0; --product-viewer-device-height: 510px; --product-viewer-ref-border-radius: 28px; --product-viewer-canvas-offset: 0; --product-viewer-entice-trigger-position: 80vh } @media(max-width:1068px) { :root { --product-viewer-height: 720px } } @media(max-width:734px) { :root { --product-viewer-height: 640px } } html.text-zoom:root { --product-viewer-height: 1080px } .theme-dark { --product-viewer-loader-background-color: rgba(0, 0, 0, .1); --product-viewer-loader-progress-indicator-background-color: #fff; --product-viewer-loader-preview-background-color: #000; --product-viewer-fallback-slide-bg-color: #000 } .product-viewer-component .colornav-gallery .item-container, .product-viewer-component .product-viewer-fallback .item-container { display: grid; grid-template-areas: "cng" } .product-viewer-component .colornav-gallery .gallery-item, .product-viewer-component .product-viewer-fallback .gallery-item { grid-area: cng } .product-viewer-component .colornav-gallery .gallery-item.should-hide, .product-viewer-component .product-viewer-fallback .gallery-item.should-hide { display: none } html.no-js .product-viewer-component .colornav-gallery .gallery-item, html.no-js .product-viewer-component .product-viewer-fallback .gallery-item { grid-area: unset } .product-viewer-component { --clip-path-progress: 1; width: 100%; height: var(--product-viewer-height); max-width: 1440px; margin: 0 auto; display: flex; align-items: center; position: relative; overflow: hidden; background-color: var(--global-section-background-color-alt) } .theme-dark .product-viewer-component { background-color: var(--global-section-background-color-alt-dark) } .background-alt .product-viewer-component { background-color: var(--sk-body-background-color, rgb(255, 255, 255)) } .theme-dark .background-alt .product-viewer-component { background-color: var(--sk-body-background-color, rgb(0, 0, 0)) } .product-viewer-component.keyboard-nav { overflow: visible } @media(min-width:1441px) { .product-viewer-component { border-radius: var(--product-viewer-ref-border-radius) } } html.no-js .product-viewer-component { height: auto; display: grid } .product-viewer-component img { display: block } html.small-breakpoint .product-viewer-component { --clip-path-progress: 0; border: none; clip-path: unset; overflow: unset; background-color: rgba(0, 0, 0, 0) } .product-viewer-component.debug { position: relative } .product-viewer-component.debug::after { content: ""; position: absolute; width: 1px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); background-color: #f0f; z-index: 1000 } .product-viewer-component.debug::before { content: ""; position: absolute; width: 100%; height: 1px; top: 50%; left: 0; transform: translateY(-50%); background-color: aqua; z-index: 1000 } .product-viewer-container { overflow: hidden } @media(max-width:734px) { .product-viewer-container { clip-path: inset(0 calc(var(--clip-path-progress)*6.25vw) 0 calc(var(--clip-path-progress)*6.25vw) round calc(var(--clip-path-progress)*var(--product-viewer-ref-border-radius))); background-color: var(--global-section-background-color-alt) } .theme-dark .product-viewer-container { background-color: var(--global-section-background-color-alt-dark) } .background-alt .product-viewer-container { background-color: var(--sk-body-background-color, rgb(255, 255, 255)) } .theme-dark .background-alt .product-viewer-container { background-color: var(--sk-body-background-color, rgb(0, 0, 0)) } } .product-viewer-container .product-viewer { display: grid !important; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-area: 1/1 } .product-viewer-container .product-viewer-enhanced, .product-viewer-container .product-viewer-fallback { grid-area: 1/1; align-content: center; justify-content: center; place-content: center } html.no-js .product-viewer-container .product-viewer-enhanced { display: none } .product-viewer-container .product-viewer-landing-fallback { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex } .product-viewer-container .product-viewer-landing-fallback.should-hide { display: none } .product-viewer-container .product-viewer-landing-fallback.pin-right>:first-child { transform: translateX(8.3333333333%) } .product-viewer-container .product-viewer-landing-fallback.pin-left>:first-child { transform: translateX(-8.3333333333%) } .product-viewer-container .product-viewer-landing-fallback.large-pin-right>:first-child { transform: translateX(8.3333333333%) } .product-viewer-container .product-viewer-landing-fallback.large-pin-center>:first-child { transform: none } .product-viewer-container .product-viewer-landing-fallback.large-pin-left>:first-child { transform: translateX(-8.3333333333%) } @media(min-width:1441px) { .product-viewer-container .product-viewer-landing-fallback.xlarge-pin-right>:first-child { transform: translateX(8.3333333333%) } .product-viewer-container .product-viewer-landing-fallback.xlarge-pin-center>:first-child { transform: none } .product-viewer-container .product-viewer-landing-fallback.xlarge-pin-left>:first-child { transform: translateX(-8.3333333333%) } } @media(max-width:1068px) { .product-viewer-container .product-viewer-landing-fallback.medium-pin-right>:first-child { transform: translateX(8.3333333333%) } .product-viewer-container .product-viewer-landing-fallback.medium-pin-center>:first-child { transform: none } .product-viewer-container .product-viewer-landing-fallback.medium-pin-left>:first-child { transform: translateX(-8.3333333333%) } } @media(max-width:734px) { .product-viewer-container .product-viewer-landing-fallback.small-pin-right>:first-child { transform: translateX(8.3333333333%) } .product-viewer-container .product-viewer-landing-fallback.small-pin-center>:first-child { transform: none } .product-viewer-container .product-viewer-landing-fallback.small-pin-left>:first-child { transform: translateX(-8.3333333333%) } } @media(max-width:480px) { .product-viewer-container .product-viewer-landing-fallback.xsmall-pin-right>:first-child { transform: translateX(8.3333333333%) } .product-viewer-container .product-viewer-landing-fallback.xsmall-pin-center>:first-child { transform: none } .product-viewer-container .product-viewer-landing-fallback.xsmall-pin-left>:first-child { transform: translateX(-8.3333333333%) } } .product-viewer-container .product-viewer .end-frame, .product-viewer-container .product-viewer .fallback-frame, .product-viewer-container .product-viewer .start-frame { width: 100% } html.no-enhanced-rt .product-viewer-container .product-viewer-fallback, html.no-enhanced .product-viewer-container .product-viewer-fallback { visibility: visible } html.enhanced-rt .product-viewer-container .product-viewer-landing-fallback, html.no-enhanced-rt .product-viewer-container .product-viewer-enhanced, html.no-enhanced .product-viewer-container .product-viewer-enhanced { display: none } html.enhanced-rt .product-viewer-container .product-viewer-fallback { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0 0 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; visibility: hidden } html.enhanced-rt .product-viewer-container .product-viewer-enhanced { display: block } .finish-iphone-17-black { --finish-color: var(--finish-iphone-17-black) } .finish-iphone-17-lavender { --finish-color: var(--finish-iphone-17-lavender) } .finish-iphone-17-mist-blue { --finish-color: var(--finish-iphone-17-mist-blue) } .finish-iphone-17-sage { --finish-color: var(--finish-iphone-17-sage) } .finish-iphone-17-white { --finish-color: var(--finish-iphone-17-white) } :root { --finish-iphone-17-black: #353839; --finish-iphone-17-lavender: #dfceea; --finish-iphone-17-mist-blue: #96aed1; --finish-iphone-17-sage: #a9b689; --finish-iphone-17-white: #f5f5f5 } .section-product-viewer { position: relative; --product-viewer-canvas-offset: 250px } @media(max-width:1068px) { .section-product-viewer { --product-viewer-canvas-offset: 190px } } @media(max-width:734px) { .section-product-viewer { --product-viewer-canvas-offset: 0px } } .section-product-viewer .view-in-your-space { margin-top: 28px } @media(max-width:734px) { .section-product-viewer .view-in-your-space { margin-top: 24px } } .section-product-viewer .product-viewer-component { margin-top: 64px } @media(max-width:1068px) { .section-product-viewer .product-viewer-component { margin-top: 66px } } @media(max-width:734px) { .section-product-viewer .product-viewer-component { margin-top: 52px } } .section-product-viewer .gradient-transition { position: absolute; bottom: 0; height: var(--global-section-padding); width: 100%; background: linear-gradient(180deg, var(--global-section-background-color-alt), var(--sk-body-background-color)) } .section-product-viewer .overview-product-viewer-camera-control { display: block; width: var(--p-width); height: var(--p-height); --p-width: 1728px; --p-height: 912px } @media(max-width:1068px)and (max-width:1068px) { .section-product-viewer .overview-product-viewer-camera-control { --p-width: 1283px; --p-height: 864px } } @media(max-width:734px)and (max-width:734px) { .section-product-viewer .overview-product-viewer-camera-control { --p-width: 881px; --p-height: 768px } } .section-product-viewer .overview-product-viewer-ceramic-shield { display: block; width: var(--p-width); height: var(--p-height); --p-width: 1728px; --p-height: 912px } @media(max-width:1068px)and (max-width:1068px) { .section-product-viewer .overview-product-viewer-ceramic-shield { --p-width: 1283px; --p-height: 864px } } @media(max-width:734px)and (max-width:734px) { .section-product-viewer .overview-product-viewer-ceramic-shield { --p-width: 881px; --p-height: 768px } } .section-product-viewer .overview-product-viewer-colors-lavender { display: block; width: var(--p-width); height: var(--p-height); --p-width: 1728px; --p-height: 912px } @media(max-width:1068px)and (max-width:1068px) { .section-product-viewer .overview-product-viewer-colors-lavender { --p-width: 1282px; --p-height: 864px } } @media(max-width:734px)and (max-width:734px) { .section-product-viewer .overview-product-viewer-colors-lavender { --p-width: 880px; --p-height: 768px } } .section-product-viewer .overview-product-viewer-dynamic-island { display: block; width: var(--p-width); height: var(--p-height); --p-width: 1728px; --p-height: 912px } @media(max-width:1068px)and (max-width:1068px) { .section-product-viewer .overview-product-viewer-dynamic-island { --p-width: 1282px; --p-height: 864px } } @media(max-width:734px)and (max-width:734px) { .section-product-viewer .overview-product-viewer-dynamic-island { --p-width: 880px; --p-height: 768px } } .section-product-viewer .overview-product-viewer-initial { display: block; width: var(--p-width); height: var(--p-height); --p-width: 1728px; --p-height: 912px } @media(max-width:1068px)and (max-width:1068px) { .section-product-viewer .overview-product-viewer-initial { --p-width: 1282px; --p-height: 864px } } @media(max-width:734px)and (max-width:734px) { .section-product-viewer .overview-product-viewer-initial { --p-width: 880px; --p-height: 768px } } @media(min-width:735px)and (max-width:1068px) { .section-product-viewer .overview-product-viewer-camera-control { margin-top: -2px } } html.enhanced-rt .section-product-viewer { --product-viewer-hit-area-width: 40%; --product-viewer-hit-area-height: 80%; --product-viewer-hit-area-offset-y: 0 } @media(max-width:1068px) { html.enhanced-rt .section-product-viewer { --product-viewer-hit-area-width: 30% } } @media(max-width:734px) { html.enhanced-rt .section-product-viewer { --product-viewer-hit-area-width: 60%; --product-viewer-hit-area-height: 100%; --product-viewer-hit-area-border-radius: 50%; --product-viewer-hit-area-offset-y: 0 } } .section-product-viewer .viewer-wrapper .loader { margin-left: calc(var(--product-viewer-canvas-offset)*2) } .section-product-viewer .landing-element-accessibility-container { pointer-events: none } .section-cameras .back-camera-sections .size-placeholder { position: relative; height: var(--section-height); padding-top: var(--ps-spacing-160) } .section-cameras .back-camera-sections .size-placeholder .sticky-height-container { --animation-padding: 300px; height: calc(100vh + var(--section-height) + var(--animation-padding)); will-change: transform } .section-cameras .back-camera-sections .size-placeholder .sticky-height-container .background-cover { background: #fff; position: absolute; width: 100%; height: calc(50% - var(--animation-padding)); bottom: 0 } .section-cameras .back-camera-sections .size-placeholder .sticky-height-container .sticky-scroll-container { position: sticky; top: calc(100vh - var(--section-height)) } .section-cameras .back-camera-sections.stick-top .size-placeholder .sticky-height-container .sticky-scroll-container { top: var(--ps-spacing-160) } html.no-enhanced .section-cameras .back-camera-sections .sticky-height-container { height: unset } html.no-enhanced .section-cameras .back-camera-sections .sticky-height-container .background-cover { display: none } @media(min-width:1441px) { .section-cameras .back-camera-sections .sticky-height-container { height: unset !important } .section-cameras .back-camera-sections .sticky-height-container .background-cover { display: none } } html.enhanced .scrim-overlay { display: block; position: absolute; background-color: #000; width: 100%; z-index: 99; opacity: 0; top: 0; bottom: 0; pointer-events: none } .section-cameras .back-camera-wrapper { overflow: hidden; text-align: center; width: 100%; max-width: 1444px; margin-left: auto; margin-right: auto; position: relative } @media(min-width:1441px) { .section-cameras .back-camera-wrapper { max-width: 1660px } } @media(min-width:1660px) { .section-cameras .back-camera-wrapper { background: linear-gradient(0deg, rgb(245, 245, 247), transparent); isolation: isolate; clip-path: inset(1px round var(--sk-tile-border-radius, 28px)) } } @media(max-width:734px) { .section-cameras .back-camera-wrapper { text-align: start } } .section-cameras .back-camera-wrapper .scrim-overlay { display: none } @media(max-width:734px) { .section-cameras .back-camera-wrapper .column-copy { max-width: 410px } } .section-cameras .back-camera-wrapper .ps-header-copy { margin-top: 16px } @media(max-width:734px) { .section-cameras .back-camera-wrapper .ps-header-copy { margin-top: 22px } } .section-cameras .back-camera-wrapper .image-wrapper { margin-top: 75px } @media(min-width:1069px) { .section-cameras .back-camera-wrapper .image-wrapper { max-height: 612px } } @media(max-width:1068px) { .section-cameras .back-camera-wrapper .image-wrapper { margin-top: 50px } } @media(max-width:734px) { .section-cameras .back-camera-wrapper .image-wrapper { margin-top: 40px } } .section-cameras .back-camera-wrapper .hero-image { display: block; position: relative; max-width: 1440px; display: flex } .section-cameras .back-camera-wrapper .hero-image::after { content: ""; display: block } .section-cameras .back-camera-wrapper .hero-image img { max-width: 100%; position: absolute } .section-cameras .back-camera-wrapper .hero-image::after { padding-bottom: 50.3472222222% } @media(min-width:1441px) { .section-cameras .back-camera-wrapper .hero-image { max-width: 1856px } .section-cameras .back-camera-wrapper .hero-image::after { padding-bottom: 45.7974137931% } } @media(max-width:1068px) { .section-cameras .back-camera-wrapper .hero-image { max-width: 1068px } .section-cameras .back-camera-wrapper .hero-image::after { padding-bottom: 50.0936329588% } } @media(max-width:734px) { .section-cameras .back-camera-wrapper .hero-image { max-width: 734px } .section-cameras .back-camera-wrapper .hero-image::after { padding-bottom: 47.6839237057% } } .section-cameras .back-camera-wrapper .hero-image img { position: relative } html.enhanced .section-cameras .back-camera-wrapper .image-wrapper { max-height: unset } html.enhanced .section-cameras .back-camera-wrapper .scrim-overlay { display: block; position: absolute; background-color: #000; width: 100%; height: 100%; z-index: 99; opacity: 0 } @media(max-width:420px) { .section-cameras .back-camera-wrapper .typography-ps-headline span { max-width: 195px } } .caption-tile { --frame-transition-duration: 200ms; display: flex; flex-direction: column } .caption-tile:first-child:nth-last-child(2), .caption-tile:first-child:nth-last-child(2)~.caption-tile { width: 100%; min-width: 372px } @media(max-width:1068px) { .caption-tile:first-child:nth-last-child(2), .caption-tile:first-child:nth-last-child(2)~.caption-tile { width: 100%; min-width: 344px } } @media(max-width:734px) { .caption-tile:first-child:nth-last-child(2), .caption-tile:first-child:nth-last-child(2)~.caption-tile { min-width: unset; width: 260px } } .caption-tile:first-child:nth-last-child(n+3), .caption-tile:first-child:nth-last-child(n+3)~.caption-tile { width: 100%; min-width: 372px } @media(max-width:1068px) { .caption-tile:first-child:nth-last-child(n+3), .caption-tile:first-child:nth-last-child(n+3)~.caption-tile { min-width: unset; width: 344px } } @media(max-width:734px) { .caption-tile:first-child:nth-last-child(n+3), .caption-tile:first-child:nth-last-child(n+3)~.caption-tile { min-width: unset; width: 260px } } .caption-tile .card { --card-height: 580px; --card-padding: 32px; order: 1; height: var(--card-height); background-color: var(--sk-fill-tertiary) } @media(max-width:1068px) { .caption-tile .card { --card-height: 536px; --card-padding: 28px } } @media(max-width:734px) { .caption-tile .card { --card-height: 406px; --card-padding: 24px } } .caption-tile .card .card-area-topic-container { position: absolute; padding: var(--card-padding); align-self: start; color: var(--sk-glyph-gray-alpha); z-index: 5 } .caption-tile .card .badge { font-size: 17px; line-height: 1.2353641176; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(ja) { letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(ko) { font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(ko), .caption-tile .card .badge:lang(th), .caption-tile .card .badge:lang(zh) { line-height: 1.3529611765; letter-spacing: 0em } .caption-tile .card .badge:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:734px) { .caption-tile .card .badge { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(th), .caption-tile .card .badge:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } .caption-tile .card .badge:lang(th) { font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .caption-tile .card .badge:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .caption-tile .card.theme-light { background-color: #f5f5f7 } .caption-tile .card.theme-light.background-alt { background-color: #fff } .caption-tile .card.theme-light .card-area-topic-container { color: rgba(0, 0, 0, .88) } .caption-tile .card-area-content { display: grid; height: 100% } .caption-tile .card-caption-content, .caption-tile .card-cta-content, .caption-tile .card-footnote-content { --caption-padding-sides: 15px; --caption-padding-top: 28px; --caption-link-padding: 14px } @media(max-width:1068px) { .caption-tile .card-caption-content, .caption-tile .card-cta-content, .caption-tile .card-footnote-content { --caption-padding-top: 28px; --caption-link-padding: 14px } } @media(max-width:734px) { .caption-tile .card-caption-content, .caption-tile .card-cta-content, .caption-tile .card-footnote-content { --caption-padding-top: 24px; --caption-link-padding: 12px } } .caption-tile .card-caption-content { order: 2; padding: var(--caption-padding-top) var(--caption-padding-sides) 0; color: var(--sk-glyph-gray-secondary) } .caption-tile .card-caption-heading { display: inline; color: var(--sk-glyph-gray) } .caption-tile .card-caption-heading+p { display: inline } .caption-tile .card-cta-content { order: 3; margin-top: var(--caption-link-padding); padding: 0 var(--caption-padding-sides) } .caption-tile .card-cta-content:last-child { padding-bottom: 0 } .caption-tile .card-caption-link { color: var(--sk-glyph-gray-secondary) } .caption-tile .card-footnote-content { order: 4; margin-top: var(--caption-link-padding); padding: 0 var(--caption-padding-sides) var(--caption-padding-top); color: var(--sk-glyph-gray-secondary) } .caption-tile .card-footnote-content:last-child { padding-bottom: 0 } .caption-tile-gallery .card-container { display: flex; flex-direction: column; height: 100% } .caption-tile-gallery.wide, .caption-tile-gallery .wide { --wide-column: 696px } @media(min-width:735px)and (max-width:1068px) { .caption-tile-gallery.wide, .caption-tile-gallery .wide { --wide-column: 644px } } @media(min-width:735px) { .caption-tile-gallery.wide .caption-tile-set { grid-auto-columns: var(--wide-column) } } @media(min-width:735px) { .caption-tile-gallery .card-container.wide.caption-tile, .caption-tile-gallery.wide .card-container.caption-tile { width: var(--wide-column) } } .caption-tile-gallery.background-alt .card { background-color: var(--sk-fill) } .caption-tile-gallery.short .card { --card-height: 450px } @media(max-width:1068px) { .caption-tile-gallery.short .card { --card-height: 416px } } @media(max-width:734px) { .caption-tile-gallery.short .card { --card-height: 314px } } .caption-tile-gallery.elevated .card-caption-content, .caption-tile-gallery.elevated .card-cta-content, .caption-tile-gallery.elevated .card-footnote-content { --caption-padding-top: 32px; --caption-link-padding: 17px } @media(max-width:1068px) { .caption-tile-gallery.elevated .card-caption-content, .caption-tile-gallery.elevated .card-cta-content, .caption-tile-gallery.elevated .card-footnote-content { --caption-padding-top: 32px; --caption-link-padding: 17px } } @media(max-width:734px) { .caption-tile-gallery.elevated .card-caption-content, .caption-tile-gallery.elevated .card-cta-content, .caption-tile-gallery.elevated .card-footnote-content { --caption-padding-top: 28px; --caption-link-padding: 14px } } @media(min-width:735px) { .caption-tile-gallery .caption-tile.wide .card-caption-content, .caption-tile-gallery.wide .card-caption-content { --caption-width: 480px; width: var(--caption-width) } } .caption-tile-gallery .caption-tile.wide.elevated .card-caption-content, .caption-tile-gallery.elevated.wide .card-caption-content { --caption-width: 560px } @media(min-width:735px)and (max-width:1068px) { .caption-tile-gallery .caption-tile.wide.elevated .card-caption-content, .caption-tile-gallery.elevated.wide .card-caption-content { --caption-width: 520px; width: var(--caption-width) } } .section-cameras .back-camera-gallery-wrapper { padding-top: 160px } @media(min-width:1441px) { .section-cameras .back-camera-gallery-wrapper { padding-top: 0; margin-top: 160px } } @media(max-width:1068px) { .section-cameras .back-camera-gallery-wrapper { padding-top: 120px } } @media(max-width:734px) { .section-cameras .back-camera-gallery-wrapper { padding-top: 80px } } html.enhanced .section-cameras .back-camera-gallery-wrapper.garage-container { background-color: var(--sk-fill); position: relative; z-index: 999 } .section-cameras .back-camera-gallery-wrapper .subheadline { margin-bottom: 40px } @media(max-width:1068px) { .section-cameras .back-camera-gallery-wrapper .subheadline { margin-bottom: 32px } } @media(max-width:734px) { .section-cameras .back-camera-gallery-wrapper .subheadline { margin-bottom: 20px } } .section-cameras .ncf-container .headline-container { width: 89.5%; max-width: 840px; text-align: center; margin-bottom: var(--ps-spacing-64) } @media(max-width:1068px) { .section-cameras .ncf-container .headline-container { margin-bottom: var(--ps-spacing-46) } } @media(max-width:734px) { .section-cameras .ncf-container .headline-container { margin-bottom: var(--ps-spacing-52) } } @media(max-width:1068px) { .section-cameras .ncf-container .headline-container { max-width: 600px } } .section-cameras .ncf-container .headline-container .subhead { margin-top: var(--ps-spacing-16) } .section-cameras .ncf-container .loaded.ended picture.start-frame, .section-cameras .ncf-container .loaded.playing picture.start-frame { display: none } .section-cameras .ncf-container .hw-mask { height: 660px } @media(max-width:734px) { .section-cameras .ncf-container .hw-mask { height: 490px } } .section-cameras .ncf-container .gradient-transition { width: 100%; height: var(--global-section-padding); background: linear-gradient(180deg, var(--global-section-background-color-alt), var(--sk-body-background-color)) } .section-cameras .ncf-container .gallery-item .inline-media-ui { --p-width: 294px; --p-height: 638px; top: -10px; bottom: unset; right: unset; left: calc(50% + var(--p-width)/2); margin-inline-start: 20px } @media(max-width:734px)and (max-width:734px) { .section-cameras .ncf-container .gallery-item .inline-media-ui { --p-width: 216px; --p-height: 470px } } @media(max-width:734px) { .section-cameras .ncf-container .gallery-item .inline-media-ui { top: -6px } } .section-cameras .base-new-camera-features, .section-cameras .ncf-container .gallery-item:not(.current) .inline-media-ui { display: none } .section-cameras .base-new-camera-features .content-sticky-container { display: flex; flex-direction: column; align-items: center; overflow: hidden } .section-cameras .base-new-camera-features .content-sticky-container .overview-cameras-new-camera-features-selfie-intro { display: block; width: var(--p-width); height: var(--p-height); --p-width: 894px; --p-height: 910px; display: flex; flex: 1 } @media(max-width:734px)and (max-width:734px) { .section-cameras .base-new-camera-features .content-sticky-container .overview-cameras-new-camera-features-selfie-intro { --p-width: 360px; --p-height: 366px } } .section-cameras .base-new-camera-features .content-sticky-container .overview-cameras-new-camera-features-selfie-intro img { width: 100% } html.no-enhanced .section-cameras .base-new-camera-features, html.no-ncf-intro .section-cameras .base-new-camera-features { display: block } html.no-enhanced .section-cameras .enhanced-new-camera-features, html.no-ncf-intro .section-cameras .enhanced-new-camera-features { height: unset } html.no-enhanced .section-cameras .enhanced-new-camera-features .headline-container, html.no-ncf-intro .section-cameras .enhanced-new-camera-features .headline-container { display: none } html.no-enhanced .section-cameras .enhanced-new-camera-features .sticky-height-container, html.no-ncf-intro .section-cameras .enhanced-new-camera-features .sticky-height-container { height: unset } html.no-enhanced .section-cameras .enhanced-new-camera-features .sticky-height-container .video-scrub-container, html.no-ncf-intro .section-cameras .enhanced-new-camera-features .sticky-height-container .video-scrub-container { display: none } html.no-enhanced .section-cameras .enhanced-new-camera-features .fade-gallery-container, html.no-ncf-intro .section-cameras .enhanced-new-camera-features .fade-gallery-container { position: unset; bottom: unset; height: unset; transition: unset; will-change: unset; pointer-events: unset; opacity: 1 } html.no-enhanced .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery-caption-inline, html.no-enhanced .section-cameras .enhanced-new-camera-features .fade-gallery-container .tabnav-wrapper, html.no-ncf-intro .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery-caption-inline, html.no-ncf-intro .section-cameras .enhanced-new-camera-features .fade-gallery-container .tabnav-wrapper { top: unset; transition: unset; opacity: 1 } html.no-enhanced .section-cameras .enhanced-new-camera-features .fade-gallery-container .hw-mask, html.no-enhanced .section-cameras .enhanced-new-camera-features .fade-gallery-container .item-container, html.no-ncf-intro .section-cameras .enhanced-new-camera-features .fade-gallery-container .hw-mask, html.no-ncf-intro .section-cameras .enhanced-new-camera-features .fade-gallery-container .item-container { opacity: 1 } .section-cameras .enhanced-new-camera-features { position: relative; height: 250vh } @media(max-width:734px) { .section-cameras .enhanced-new-camera-features { height: 190vh } } .section-cameras .enhanced-new-camera-features .sticky-height-container { --localnav-spacing: calc(var(--global-nav-collective-height) + 30px); --top-spacing: var(--localnav-spacing); --animation-padding: calc(var(--top-spacing) + 15px); --p-width: 920px; --p-height: 940px; display: flex; flex-direction: column; align-items: center; height: calc(100% + var(--sticky-height-offset)) } @media(max-width:734px)and (max-width:734px) { .section-cameras .enhanced-new-camera-features .sticky-height-container { --p-width: 370px; --p-height: 760px } } @media(max-width:480px) { .section-cameras .enhanced-new-camera-features .sticky-height-container { --animation-padding: var(--top-spacing) } } .section-cameras .enhanced-new-camera-features[data-animation-type=bottom-video-only] .sticky-height-container { --top-spacing: max(calc(100vh - var(--p-height)), var(--localnav-spacing)) } .section-cameras .enhanced-new-camera-features[data-animation-type=bottom-video-with-headline] .sticky-height-container { --top-spacing: max(calc(100vh - var(--headline-height-with-margin) - var(--p-height)), var(--localnav-spacing)); --animation-padding: 0 } .section-cameras .enhanced-new-camera-features .sticky-height-container .top-spacing-measure { width: var(--top-spacing); visibility: hidden } .section-cameras .enhanced-new-camera-features .sticky-height-container .content-sticky-container { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100% } .section-cameras .enhanced-new-camera-features[data-animation-type=bottom-video-with-headline] .sticky-height-container .content-sticky-container { position: sticky; height: min-content; top: var(--top-spacing) } .section-cameras .enhanced-new-camera-features .sticky-height-container .content-sticky-container .video-scrub-container { position: sticky; display: flex; justify-content: center; opacity: 1; will-change: opacity; width: 100%; height: var(--p-height); overflow: hidden } .section-cameras .enhanced-new-camera-features .sticky-height-container .content-sticky-container .video-scrub-container.hide { opacity: 0 } .section-cameras .enhanced-new-camera-features[data-animation-type=bottom-video-only] .sticky-height-container .content-sticky-container .video-scrub-container, .section-cameras .enhanced-new-camera-features[data-animation-type=top-video] .sticky-height-container .content-sticky-container .video-scrub-container { top: var(--top-spacing); height: 100vh } .section-cameras .enhanced-new-camera-features .sticky-height-container .content-sticky-container .video-scrub-container #new-camera-features-intro-video, .section-cameras .enhanced-new-camera-features .sticky-height-container .content-sticky-container .video-scrub-container .startframe-container { width: var(--p-width); height: var(--p-height) } .section-cameras .enhanced-new-camera-features .sticky-height-container .content-sticky-container .video-scrub-container .startframe-container { position: absolute } .section-cameras .enhanced-new-camera-features .sticky-height-container .content-sticky-container .video-scrub-container #new-camera-features-intro-video { position: relative; z-index: 1; clip-path: inset(1px) } .section-cameras .enhanced-new-camera-features .fade-gallery-container { position: absolute; bottom: 0; width: 100%; pointer-events: none; will-change: opacity; display: flex; justify-content: center } .section-cameras .enhanced-new-camera-features .fade-gallery-container .hw-mask { position: absolute; z-index: 2; top: -12px; opacity: .001 } @media(max-width:734px) { .section-cameras .enhanced-new-camera-features .fade-gallery-container .hw-mask { top: -10px } } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery-caption-inline, .section-cameras .enhanced-new-camera-features .fade-gallery-container .tabnav-wrapper { position: relative; top: 25px; opacity: 0; transition: all 400ms ease-out } .section-cameras .enhanced-new-camera-features .fade-gallery-container.show { pointer-events: unset; opacity: 1; transition: opacity 400ms ease-out } .section-cameras .enhanced-new-camera-features .fade-gallery-container.show .fade-gallery-caption-inline, .section-cameras .enhanced-new-camera-features .fade-gallery-container.show .tabnav-wrapper { top: 0; opacity: 1 } .section-cameras .enhanced-new-camera-features .fade-gallery-container.show .gallery-item { background: #fff } .section-cameras .enhanced-new-camera-features .fade-gallery-container.show .fade-gallery-caption-inline { transition-delay: 100ms } .section-cameras .enhanced-new-camera-features .fade-gallery-container.show .hw-mask, .section-cameras .enhanced-new-camera-features .fade-gallery-container.show .item-container { opacity: 1 !important } .section-cameras .enhanced-new-camera-features .fade-gallery-container:not(.show) { transition: opacity 400ms ease-out } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container { opacity: 0 } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .media-container { height: 638px; grid-template: unset; overflow: visible } @media(max-width:734px) { .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .media-container { height: 470px } } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .media-container img, .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .media-container video { display: block; width: var(--p-width); height: var(--p-height); --p-width: 294px; --p-height: 638px; border-radius: 45px } @media(max-width:734px)and (max-width:734px) { .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .media-container img, .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .media-container video { --p-width: 216px; --p-height: 470px } } @media(max-width:734px) { .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .media-container img, .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .media-container video { border-radius: 30px } } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption { flex-basis: 50%; max-width: 50% } @media(max-width:734px) { .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption { flex-basis: 83.3333333333%; max-width: 83.3333333333% } } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline { font-size: 21px; line-height: 1.381002381; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(ja) { line-height: 1.3334033333; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(ko) { line-height: 1.5238095238; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline { font-size: 19px; line-height: 1.4211026316; font-weight: 600; letter-spacing: .012em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(ja) { line-height: 1.3684410526; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(ko) { line-height: 1.5263157895; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(th) { line-height: 1.3684410526; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline { font-size: 17px; line-height: 1.4705882353; font-weight: 600; letter-spacing: -0.022em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(ja) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(ko) { line-height: 1.5882352941; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(zh) { letter-spacing: 0em } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(th) { line-height: 1.3529611765; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .item-container .gallery-item .gallery-caption .fade-gallery-caption-inline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .tabnav-wrapper .tabnav { --tabnav-height: 92px; --tabnav-item-padding: 20px; --tabnav-border-platter-radius: 20px; --tabnav-border-indicator-radius: 16px; --tabnav-line-height: 16px; --tabnav-font-size: 12px; --tabnav-item-color: rgb(110, 110, 115); --tabnav-item-color-active: rgb(245, 245, 247); --tabnav-platter-background: rgb(245, 245, 247); --tabnav-motion-indicator-transform-duration: 280ms; margin-top: var(--ps-spacing-42); margin-bottom: var(--ps-spacing-30); font-size: var(--tabnav-font-size) } @media(min-width:735px)and (max-width:1068px) { .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .tabnav-wrapper .tabnav { margin-block: unset; margin-top: var(--ps-spacing-36); margin-bottom: var(--ps-spacing-30) } } @media(max-width:734px) { .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .tabnav-wrapper .tabnav { margin-block: var(--ps-spacing-40) } } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .tabnav-wrapper .tabnav-platter { border-radius: var(--tabnav-border-platter-radius) } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .tabnav-wrapper .tabnav-indicator { border-radius: var(--tabnav-border-indicator-radius) } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .tabnav-wrapper .tabnav-link { will-change: opacity; flex-direction: column; justify-content: center } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .tabnav-wrapper .tabnav-icon { fill: currentcolor } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .tabnav-wrapper .tabnav-item { font-weight: 600 } .section-cameras .enhanced-new-camera-features .fade-gallery-container .fade-gallery .tabnav-wrapper .tabnav-focus-split .tabnav-item-active .tabnav-link { border-radius: var(--tabnav-border-indicator-radius) } @media(max-width:480px) { .viewport-content:has(.fade-gallery) { width: 100%; max-width: 480px } } .fade-gallery { --frame-transition-duration: 200ms; display: grid; grid-template-rows: repeat(4, auto); grid-template-columns: 100% } @media(max-width:734px) { .fade-gallery { max-width: none } } .fade-gallery.rounded picture, .fade-gallery.rounded picture img, .fade-gallery.rounded video { border-radius: 28px; overflow: hidden } @media(max-width:480px) { .fade-gallery.rounded picture, .fade-gallery.rounded picture img, .fade-gallery.rounded video { border-radius: 0 } } .fade-gallery .item-container { --caption-height: 0; position: relative; z-index: 1 } .fade-gallery .item-container, .fade-gallery .item-container>* { display: grid; grid-row: 1/-1; grid-column: 1; grid-template-rows: subgrid } html.no-js .fade-gallery .item-container, html.no-js .fade-gallery .item-container>* { display: block } .fade-gallery .gallery-item { z-index: -1; background-color: #fff } .theme-dark .fade-gallery .gallery-item { background-color: #000 } html.no-js .fade-gallery .gallery-item { display: block; margin-bottom: 24px } .fade-gallery .media-block { grid-row: 1; grid-template: 1fr/1fr; position: relative; overflow: hidden; height: auto } html.no-js .fade-gallery .media-block { display: block } html.no-js .fade-gallery .media-block img.end-frame, html.no-js .fade-gallery .media-block img.start-frame, html.no-js .fade-gallery .media-block picture.end-frame, html.no-js .fade-gallery .media-block picture.start-frame { display: none } .fade-gallery .media-block .positioned-media-element { display: flex; width: 100%; height: 100%; overflow: hidden } .fade-gallery .media-block .positioned-media-element.media, .fade-gallery .media-block picture img { object-fit: cover } .fade-gallery .fade-gallery-sosumi { grid-row: 2; margin: 8px 5px 0 } .fade-gallery .fade-gallery-sosumi, .fade-gallery .fade-gallery-sosumi a { color: var(--sk-glyph-gray-secondary) } .fade-gallery .tabnav-wrapper { z-index: 2; grid-row: 3; grid-column: 1 } @media(max-width:734px) { .fade-gallery .tabnav-wrapper { margin-inline-start: auto; margin-inline-end: auto; width: 87.5%; max-width: var(--global-content-max-width) } } html.no-js .fade-gallery .tabnav-wrapper .tabnav-platter { display: none } .fade-gallery .tabnav { margin-inline-start: auto; margin-inline-end: auto; margin-block: 28px; z-index: 1 } @media(max-width:1068px) { .fade-gallery .tabnav { margin-block: 24px } } .fade-gallery .gallery-caption { grid-row: 4; text-align: center; position: relative; min-height: var(--caption-height); margin-top: 0; display: none; align-items: center; transition: opacity 300ms cubic-bezier(0.33, 1, 0.68, 1) } html.reduced-motion .fade-gallery .gallery-caption { transition: none } .fade-gallery .gallery-caption.caption-incoming, .fade-gallery .gallery-caption.caption-outgoing { opacity: 0 } .fade-gallery .gallery-caption.caption-transition-midpoint { opacity: 1 } .fade-gallery .gallery-caption.caption-show { display: block } .fade-gallery .gallery-caption .fade-gallery-caption-inline { color: var(--sk-glyph-gray-secondary) } .fade-gallery .gallery-caption .fade-gallery-caption-inline .subhead { color: var(--sk-glyph-gray) } .fade-gallery .gallery-caption .fade-gallery-caption-inline h1, .fade-gallery .gallery-caption .fade-gallery-caption-inline h2, .fade-gallery .gallery-caption .fade-gallery-caption-inline h3, .fade-gallery .gallery-caption .fade-gallery-caption-inline h4, .fade-gallery .gallery-caption .fade-gallery-caption-inline h5, .fade-gallery .gallery-caption .fade-gallery-caption-inline h6, .fade-gallery .gallery-caption .fade-gallery-caption-inline p { display: inline; margin: 0 } .fade-gallery .gallery-caption .fade-gallery-caption-inline p+p { display: block; margin-top: var(--sk-paragraph-plus-element-margin, 0.8em) } html.no-js .fade-gallery .gallery-caption .fade-gallery-caption-inline { display: block; opacity: 1; margin-block: 24px } .section-cameras .ps-section-header { text-align: center } .section-cameras .all-access-pass__container { top: calc(var(--new-camera-features-section-height) + 26px); bottom: 0; height: unset } .section-performance .inline-media-component-container:not(.fallback, .media-unloaded) .inline-media-ui-button { top: unset; bottom: -80px } @media(max-width:1068px) { .section-performance .inline-media-component-container:not(.fallback, .media-unloaded) .inline-media-ui-button { bottom: -95px } } @media(max-width:734px) { .section-performance .inline-media-component-container:not(.fallback, .media-unloaded) .inline-media-ui-button { bottom: -70px } } .section-performance .image-wrapper { overflow: hidden; width: 100%; position: relative; margin-top: 82px; padding-bottom: 82px } @media(min-width:1441px) { .section-performance .image-wrapper { display: flex; justify-content: center } } @media(max-width:1068px) { .section-performance .image-wrapper { margin-top: 76px; padding-bottom: 76px } } @media(max-width:734px) { .section-performance .image-wrapper { margin-top: 50px; padding-bottom: 60px } } @media(min-width:1441px) { .section-performance .image-wrapper .fallback .video-wrapper { aspect-ratio: auto } } .section-performance .aap-positioning-container { position: relative; padding-bottom: var(--global-section-aap-padding); margin-bottom: 65px } @media(max-width:1068px) { .section-performance .aap-positioning-container { margin-bottom: 22px } } @media(max-width:734px) { .section-performance .aap-positioning-container { margin-bottom: unset } } .section-performance .aap-positioning-container .all-access-pass__container { top: -100px; bottom: 0; height: unset } @media(max-width:734px) { .section-performance .aap-positioning-container .all-access-pass__container { top: -76px } } .section-performance .copy-wrapper { text-align: center } @media(max-width:734px) { .section-performance .copy-wrapper { text-align: start } } html.enhanced .section-performance .performance-video { --media-max-width: 1440px; --media-aspect-ratio: 2.2784810127; max-width: var(--media-max-width) } @media(min-width:1441px) { html.enhanced .section-performance .performance-video { --media-max-width: 1700px; --media-aspect-ratio: 2.65625 } } @media(max-width:1068px) { html.enhanced .section-performance .performance-video { --media-max-width: 1068px; --media-aspect-ratio: 2.2627118644 } } @media(max-width:734px) { html.enhanced .section-performance .performance-video { --media-max-width: 734px; --media-aspect-ratio: 1.5887445887 } } html.enhanced .section-performance .performance-video .video-wrapper { max-width: var(--media-max-width); aspect-ratio: var(--media-aspect-ratio) } html.no-enhanced .section-performance .performance-video { display: grid; align-content: center; justify-content: center; place-content: center; max-width: var(--media-width); --media-width: 1440px; --media-height: 632px } html.no-enhanced .section-performance .performance-video .video-wrapper { width: var(--media-width); height: var(--media-height) } @media(min-width:1441px) { html.no-enhanced .section-performance .performance-video { --media-width: 1700px; --media-height: 640px } } @media(max-width:1068px) { html.no-enhanced .section-performance .performance-video { --media-width: 1068px; --media-height: 472px } } @media(max-width:734px) { html.no-enhanced .section-performance .performance-video { --media-width: 734px; --media-height: 462px } } @media(min-width:1441px)and (min-width:1441px) { .section-performance .performance-video { --media-width: 1700px; --media-height: 640px } } .section-performance .performance-video:not(.fallback) picture { display: flex; justify-content: center } .section-performance video { clip-path: inset(1px) } .section-shared-features .subsection-ai-alt .alt-content { --p-width: 1261px; --p-height: 420px; margin-inline-start: auto; margin-inline-end: auto; position: relative; max-width: var(--p-width); min-height: var(--p-height); background-color: #fff } @media(max-width:1068px)and (max-width:1068px) { .section-shared-features .subsection-ai-alt .alt-content { --p-width: 937px; --p-height: 420px } } @media(max-width:734px)and (max-width:734px) { .section-shared-features .subsection-ai-alt .alt-content { --p-width: 420px; --p-height: 512px } } @media(max-width:734px) { .section-shared-features .subsection-ai-alt .alt-content { display: flex; align-items: center } } .section-shared-features .subsection-ai-alt .row-alt { position: relative; z-index: 1; text-align: center; padding: 80px } @media(max-width:734px) { .section-shared-features .subsection-ai-alt .row-alt { padding: 80px 40px } } @media(max-width:734px) { .section-shared-features .subsection-ai-alt .small-width-auto { width: auto } } .section-shared-features .subsection-ai-alt .headline { margin-top: 40px } .section-shared-features .subsection-ai-alt .copy { margin-top: 28px } @media(max-width:734px) { .section-shared-features .subsection-ai-alt .copy { margin-top: 38px } } .section-shared-features .subsection-ai-alt .violator { margin-top: 18px } @media(max-width:734px) { .section-shared-features .subsection-ai-alt .violator { margin-top: 28px } } .section-shared-features .subsection-ai-alt .ai-background { display: block; position: relative; max-width: 1261px; width: 100%; position: absolute; top: 0 } .section-shared-features .subsection-ai-alt .ai-background::after { content: ""; display: block } .section-shared-features .subsection-ai-alt .ai-background img { max-width: 100%; position: absolute } .section-shared-features .subsection-ai-alt .ai-background::after { padding-bottom: 33.3068992863% } @media(max-width:1068px) { .section-shared-features .subsection-ai-alt .ai-background { max-width: 937px } .section-shared-features .subsection-ai-alt .ai-background::after { padding-bottom: 44.8239060832% } } @media(max-width:734px) { .section-shared-features .subsection-ai-alt .ai-background { max-width: 420px } .section-shared-features .subsection-ai-alt .ai-background::after { padding-bottom: 121.9047619048% } } .section-shared-features .subsection-ai-alt .ai-icon { display: block; width: var(--p-width); height: var(--p-height); --p-width: 78px; --p-height: 77px; margin-inline-start: auto; margin-inline-end: auto } .section-shared-features .subsection-ai-alt .alt-color { color: #6e6e73 } .section-shared-features .subsection-ai-gallery { scroll-margin-top: var(--localnav-total-height) } .section-shared-features .feature-gallery .section-header { padding-bottom: 40px } @media(max-width:1068px) { .section-shared-features .feature-gallery .section-header { padding-bottom: 32px } } @media(min-width:735px)and (max-width:1068px) { .section-shared-features .feature-gallery .section-header { grid-column-gap: 50px; column-gap: 50px } .section-shared-features .feature-gallery .section-header.row { flex-wrap: nowrap } html.text-zoom .section-shared-features .feature-gallery .section-header.row { flex-wrap: wrap } } @media(max-width:734px) { .section-shared-features .feature-gallery .section-header { padding-bottom: 48px } } .section-shared-features .feature-gallery .section-header .typography-section-header-headline { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(ja) { line-height: 1.21875; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(ko) { line-height: 1.21875; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh) { line-height: 1.21875 } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { .section-shared-features .feature-gallery .section-header .typography-section-header-headline { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh) { line-height: 1.25 } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { .section-shared-features .feature-gallery .section-header .typography-section-header-headline { font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(ja) { line-height: 1.25; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(ko) { line-height: 1.2916666667; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh) { line-height: 1.2916666667 } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } .section-shared-features .feature-gallery .section-header .typography-section-header-headline:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } .section-shared-features .feature-gallery .section-header .section-header-cta-list-wrapper { padding-bottom: 0 } @media(min-width:735px)and (max-width:1068px) { .section-shared-features .feature-gallery .section-header .section-header-cta-item .icon-copy { white-space: nowrap } } .section-shared-features { --device-scaling-width: var(--ric-column-width-10) } .section-shared-features .section-header-images { display: flex; justify-content: center; position: relative; padding-top: 86px; padding-bottom: 24px; margin: 0 auto; min-height: 598px } @media(max-width:480px) { .section-shared-features .section-header-images { min-height: 0 } } @media(min-width:1441px) { .section-shared-features .section-header-images { min-height: 704px } } @media(min-width:1441px)and (max-width:480px) { .section-shared-features .section-header-images { min-height: 0 } } @media(max-width:734px) { .section-shared-features .section-header-images { min-height: 360px } } @media(max-width:734px)and (max-width:480px) { .section-shared-features .section-header-images { min-height: 0 } } @media(max-width:1068px) { .section-shared-features .section-header-images { padding-bottom: 40px } } @media(min-width:735px)and (max-width:1068px) { html.enhanced .section-shared-features .section-header-images { padding-top: 55px } } @media(max-width:734px) { .section-shared-features .section-header-images { padding-top: 55px; padding-bottom: 55px } } @media(max-width:480px) { .section-shared-features .section-header-images { padding-top: 80px; padding-bottom: 80px } } .section-shared-features .hero-image { display: flex; position: absolute; width: var(--device-scaling-width); display: block; width: var(--p-width); height: var(--p-height); --p-width: 290px; --p-height: 598px } @media(min-width:1441px)and (min-width:1441px) { .section-shared-features .hero-image { --p-width: 342px; --p-height: 704px } } @media(max-width:734px)and (max-width:734px) { .section-shared-features .hero-image { --p-width: 176px; --p-height: 360px } } @supports(mask-image:url("")) { .section-shared-features .hero-image { mask-size: contain; mask-position: center; mask-repeat: no-repeat; mask-image: url(/v/iphone-17/d/images/overview/shared-features/hero_features_center_mask__ci6nooqvu2s2_large.png) } @media(min-resolution:1.5dppx), (min-resolution:144dpi) { .section-shared-features .hero-image { mask-image: url(/v/iphone-17/d/images/overview/shared-features/hero_features_center_mask__ci6nooqvu2s2_large_2x.png) } } @media(min-width:1441px) { .section-shared-features .hero-image { mask-repeat: no-repeat; mask-image: url(/v/iphone-17/d/images/overview/shared-features/hero_features_center_mask__ci6nooqvu2s2_xlarge.png) } } @media(min-width:1441px)and (min-resolution:1.5dppx), (min-width:1441px)and (min-resolution:144dpi) { .section-shared-features .hero-image { mask-image: url(/v/iphone-17/d/images/overview/shared-features/hero_features_center_mask__ci6nooqvu2s2_xlarge_2x.png) } } @media(max-width:734px) { .section-shared-features .hero-image { mask-repeat: no-repeat; mask-image: url(/v/iphone-17/d/images/overview/shared-features/hero_features_center_mask__ci6nooqvu2s2_small.png) } } @media(max-width:734px)and (min-resolution:1.5dppx), (max-width:734px)and (min-resolution:144dpi) { .section-shared-features .hero-image { mask-image: url(/v/iphone-17/d/images/overview/shared-features/hero_features_center_mask__ci6nooqvu2s2_small_2x.png) } } } @media(max-width:480px) { .section-shared-features .hero-image { position: relative; width: var(--ric-column-width-12); height: auto } } .section-shared-features .hero-image img { width: 100%; height: 100%; object-fit: cover } @media(max-width:480px) { .section-shared-features .hero-image img { object-fit: contain } } .section-shared-features .hero-image-center { z-index: 99 } @media(min-width:1441px) { .section-shared-features .hero-image-left { transform: translateX(-223px) translateY(5px) scale(0.889) } .section-shared-features .hero-image-right { transform: translateX(223px) translateY(5px) scale(0.889) } } @media(max-width:1440px) { .section-shared-features .hero-image-left { transform: translateX(-190px) translateY(3px) scale(0.885) } .section-shared-features .hero-image-right { transform: translateX(190px) translateY(3px) scale(0.885) } } @media(max-width:734px) { .section-shared-features .hero-image-left { transform: translateX(-127px) translateY(1px) scale(0.98) } .section-shared-features .hero-image-center { transform: scale(1.11) translateY(0) } .section-shared-features .hero-image-right { transform: translateX(127px) translateY(1px) scale(0.98) } } @media(max-width:480px) { .section-shared-features .hero-image-left { transform: translateX(13px) translateY(1px) scale(1.23) } .section-shared-features .hero-image-center { transform: scale(1.385) } .section-shared-features .hero-image-right { transform: translateX(-13px) translateY(1px) scale(1.23) } } @media(max-width:734px) { .section-shared-features .typography-ps-body { margin-top: 0 } } html.enhanced .section-shared-features .hero-image { transition-duration: 1.5s } @media(min-width:735px) { html.enhanced .section-shared-features .hero-image { transform: translateY(60px) scale(1.3) } } @media(max-width:734px) { html.enhanced .section-shared-features .hero-image { transform: translateY(35px) scale(1.3) } } @media(max-width:480px) { html.enhanced .section-shared-features .hero-image { transform: translateY(-5px) scale(1.5) } html.enhanced .section-shared-features .hero-image.hero-image-left { left: 33% } html.enhanced .section-shared-features .hero-image.hero-image-right { right: 33% } } html.enhanced .section-shared-features .phone-show.hero-image-center { transform: scale(1) translateY(0) } @media(min-width:1441px) { html.enhanced .section-shared-features .phone-show.hero-image-left { transform: translateX(-223px) translateY(5px) scale(0.889) } html.enhanced .section-shared-features .phone-show.hero-image-right { transform: translateX(223px) translateY(5px) scale(0.889) } } @media(max-width:1440px) { html.enhanced .section-shared-features .phone-show.hero-image-left { transform: translateX(-190px) translateY(3px) scale(0.885) } html.enhanced .section-shared-features .phone-show.hero-image-right { transform: translateX(190px) translateY(3px) scale(0.885) } } @media(max-width:734px) { html.enhanced .section-shared-features .phone-show.hero-image-left { transform: translateX(-127px) translateY(1px) scale(0.98) } html.enhanced .section-shared-features .phone-show.hero-image-center { transform: scale(1.11) translateY(0) } html.enhanced .section-shared-features .phone-show.hero-image-right { transform: translateX(127px) translateY(1px) scale(0.98) } } @media(max-width:480px) { html.enhanced .section-shared-features .phone-show.hero-image-left { left: 0; transform: translateX(13px) scale(1.23) } html.enhanced .section-shared-features .phone-show.hero-image-center { transform: scale(1.385) } html.enhanced .section-shared-features .phone-show.hero-image-right { right: 0; transform: translateX(-13px) scale(1.23) } } html.enhanced .section-shared-features .typography-ps-body { opacity: 0; transform: translateY(20px); transition-duration: 1s; transition-delay: .2s } @media(max-width:480px) { html.enhanced .section-shared-features .typography-ps-body { transform: translateY(40px) } } html.enhanced .section-shared-features .typography-ps-body.copy-show { opacity: 1; transform: translateY(0) } .section-accessories .overview-accessories-strap { display: block; position: relative; max-width: 408px } .section-accessories .overview-accessories-strap::after { content: ""; display: block } .section-accessories .overview-accessories-strap img { max-width: 100%; position: absolute } .section-accessories .overview-accessories-strap::after { padding-bottom: 127.4509803922% } @media(max-width:1068px) { .section-accessories .overview-accessories-strap { max-width: 298px } .section-accessories .overview-accessories-strap::after { padding-bottom: 127.5167785235% } } @media(max-width:734px) { .section-accessories .overview-accessories-strap { max-width: 343px } .section-accessories .overview-accessories-strap::after { padding-bottom: 110.7871720117% } } .section-accessories .overview-accessories-case-silicone { display: block; position: relative; max-width: 408px } .section-accessories .overview-accessories-case-silicone::after { content: ""; display: block } .section-accessories .overview-accessories-case-silicone img { max-width: 100%; position: absolute } .section-accessories .overview-accessories-case-silicone::after { padding-bottom: 127.4509803922% } @media(max-width:1068px) { .section-accessories .overview-accessories-case-silicone { max-width: 298px } .section-accessories .overview-accessories-case-silicone::after { padding-bottom: 127.5167785235% } } @media(max-width:734px) { .section-accessories .overview-accessories-case-silicone { max-width: 343px } .section-accessories .overview-accessories-case-silicone::after { padding-bottom: 110.7871720117% } } .section-accessories .overview-accessories-case { display: block; position: relative; max-width: 408px } .section-accessories .overview-accessories-case::after { content: ""; display: block } .section-accessories .overview-accessories-case img { max-width: 100%; position: absolute } .section-accessories .overview-accessories-case::after { padding-bottom: 127.4509803922% } @media(max-width:1068px) { .section-accessories .overview-accessories-case { max-width: 298px } .section-accessories .overview-accessories-case::after { padding-bottom: 127.5167785235% } } @media(max-width:734px) { .section-accessories .overview-accessories-case { max-width: 343px } .section-accessories .overview-accessories-case::after { padding-bottom: 110.7871720117% } } .section-accessories .section-header-headline { max-width: none } @media(max-width:734px) { .section-accessories .image-center-small { margin-left: auto; margin-right: auto } } .section-accessories .image-right-center-small { margin-left: auto; margin-right: 0 } @media(max-width:734px) { .section-accessories .image-right-center-small { margin-left: auto; margin-right: auto } } .section-accessories .ps-section-header .section-header { margin-top: 0 } @media(max-width:734px) { .section-accessories .ps-section-header { text-align: center } } @media(max-width:734px) { .section-accessories .section-header-cta-list { align-items: center } } .section-accessories .section-header-cta-list .accessories-link { padding-bottom: 6px } @media(max-width:1068px) { .section-accessories .section-header-cta-list .accessories-link { padding-bottom: 4px } } @media(max-width:734px) { .section-accessories .section-header-cta-list .accessories-link { padding-bottom: 0; width: 100% } } .section-accessories .accessories-grid { display: grid; grid-template-columns: 33% 33% 33%; grid-gap: 20px; margin-inline-start: 0; margin-inline-end: 0; list-style-type: none } @media(max-width:734px) { .section-accessories .accessories-grid { grid-template-columns: 100%; grid-gap: 56px } } .section-accessories .accessories-item { display: block } .section-accessories .accessories-card { overflow: hidden; width: 100%; background-color: #f5f5f7; border-radius: var(--sk-tile-border-radius, 28px) } .section-accessories .accessories-copy { margin-top: 28px } @media(max-width:1068px) { .section-accessories .accessories-copy { margin-top: 28px } } @media(max-width:734px) { .section-accessories .accessories-copy { margin-top: 20px; padding-left: 20px; padding-right: 20px } } .section-accessories .accessories-copy .tile-header { display: inline-block; color: var(--sk-glyph-gray) } .section-accessories .accessories-copy .tile-copy { display: inline } .section-incentive-alt .paddlenav-arrow, .section-incentive .paddlenav-arrow { z-index: 1 } .section-incentive { display: block } html.android .section-incentive { display: none } .ric-modal-overlay-container .overview-incentive-boc-qr-code { display: block; position: relative; max-width: 816px } .ric-modal-overlay-container .overview-incentive-boc-qr-code::after { content: ""; display: block } .ric-modal-overlay-container .overview-incentive-boc-qr-code img { max-width: 100%; position: absolute } .ric-modal-overlay-container .overview-incentive-boc-qr-code::after { padding-bottom: 59.3137254902% } @media(max-width:1068px) { .ric-modal-overlay-container .overview-incentive-boc-qr-code { max-width: 692px } .ric-modal-overlay-container .overview-incentive-boc-qr-code::after { padding-bottom: 63.8728323699% } } .section-incentive-alt, html.desktop .ric-modal-overlay-container .utility-modal-block-download, html.no-desktop .ric-modal-overlay-container .utility-modal-block-scan-qr { display: none } html.android .section-incentive-alt { display: block } .finish-17-black { --finish-color: var(--finish-17-black) } .finish-17-lavender { --finish-color: var(--finish-17-lavender) } .finish-17-mist-blue { --finish-color: var(--finish-17-mist-blue) } .finish-17-sage { --finish-color: var(--finish-17-sage) } .finish-17-white { --finish-color: var(--finish-17-white) } .finish-air-space-black { --finish-color: var(--finish-air-space-black) } .finish-air-cloud-white { --finish-color: var(--finish-air-cloud-white) } .finish-air-light-gold { --finish-color: var(--finish-air-light-gold) } .finish-air-sky-blue { --finish-color: var(--finish-air-sky-blue) } :root { --finish-17-black: #353839; --finish-17-lavender: #e6d5f1; --finish-17-mist-blue: #a2b9dc; --finish-17-sage: #b4c294; --finish-17-white: #fcfcfc; --finish-air-space-black: #000; --finish-air-cloud-white: #fcfcfc; --finish-air-light-gold: #faf2e3; --finish-air-sky-blue: #e3f1fa } .section-contrast { position: relative } @media(min-width:1069px) { .section-contrast .overview-contrast-iphone-17 { display: block; width: var(--p-width); height: var(--p-height); --p-width: 271px; --p-height: 334px } } @media(min-width:735px)and (max-width:1068px) { .section-contrast .overview-contrast-iphone-17 { display: block; width: var(--p-width); height: var(--p-height) } } @media(min-width:735px)and (max-width:1068px)and (max-width:1068px) { .section-contrast .overview-contrast-iphone-17 { --p-width: 250px; --p-height: 308px } } @media(max-width:734px) { .section-contrast .overview-contrast-iphone-17 { display: block; position: relative; max-width: 174px } .section-contrast .overview-contrast-iphone-17::after { content: ""; display: block } .section-contrast .overview-contrast-iphone-17 img { max-width: 100%; position: absolute } .section-contrast .overview-contrast-iphone-17::after { padding-bottom: 112.6436781609% } } @media(min-width:1069px) { .section-contrast .overview-contrast-iphone-air { display: block; width: var(--p-width); height: var(--p-height); --p-width: 271px; --p-height: 334px } } @media(min-width:735px)and (max-width:1068px) { .section-contrast .overview-contrast-iphone-air { display: block; width: var(--p-width); height: var(--p-height) } } @media(min-width:735px)and (max-width:1068px)and (max-width:1068px) { .section-contrast .overview-contrast-iphone-air { --p-width: 250px; --p-height: 308px } } @media(max-width:734px) { .section-contrast .overview-contrast-iphone-air { display: block; position: relative; max-width: 174px } .section-contrast .overview-contrast-iphone-air::after { content: ""; display: block } .section-contrast .overview-contrast-iphone-air img { max-width: 100%; position: absolute } .section-contrast .overview-contrast-iphone-air::after { padding-bottom: 112.6436781609% } } .section-contrast .product-tile-set { grid-template-rows: [image] auto [colorindicator] auto [product-id-start badge] auto [headline] auto [positioning product-id-end] auto [price] auto [ctas-start ctas-inline] auto [ctas-stacked] auto [ctas-end tout-group-start tout-1] auto [tout-2] auto [tout-3] auto [tout-4] auto [tout-5] auto [tout-6] auto [tout-group-end] } .section-contrast .tout-group .tout:nth-child(1) { grid-row: tout-1 } .section-contrast .tout-group .tout:nth-child(2) { grid-row: tout-2 } .section-contrast .tout-group .tout:nth-child(3) { grid-row: tout-3 } .section-contrast .tout-group .tout:nth-child(4) { grid-row: tout-4 } .section-contrast .tout-group .tout:nth-child(5) { grid-row: tout-5 } .section-contrast .tout-group .tout:nth-child(6) { grid-row: tout-6 } .section-contrast .overview-contrast-icon-iphone-17-camera, .section-contrast .overview-contrast-icon-iphone-air-camera { display: block; width: var(--p-width); height: var(--p-height); --p-width: 46px; --p-height: 56px } .section-contrast .overview-contrast-icon-chip-a19, .section-contrast .overview-contrast-icon-chip-a19pro { display: block; width: var(--p-width); height: var(--p-height); --p-width: 36px; --p-height: 56px } .section-contrast .overview-contrast-icon-apple-intelligence { display: block; width: var(--p-width); height: var(--p-height); --p-width: 42px; --p-height: 56px } .section-contrast .overview-contrast-icon-battery { display: block; width: var(--p-width); height: var(--p-height); --p-width: 46px; --p-height: 56px } .section-contrast .all-access-pass__container { top: var(--global-section-aap-padding); height: calc(100% - var(--global-section-aap-padding)) } @media(min-width:1069px) { .section-contrast .product-tile-container { padding-bottom: 0 } } .section-environment { padding-top: 60px } @media(max-width:1068px) { .section-environment { padding-top: 30px } } @media(max-width:734px) { .section-environment { padding-top: 0 } } .section-environment .overview-environment-icon-electricity { display: block; width: var(--p-width); height: var(--p-height); --p-width: 31px; --p-height: 56px } .section-environment .overview-environment-icon-package { display: block; width: var(--p-width); height: var(--p-height); --p-width: 36px; --p-height: 56px } .section-environment .overview-environment-icon-recycling { display: block; width: var(--p-width); height: var(--p-height); --p-width: 42px; --p-height: 56px } .section-values .overview-values-icon-accessibility { display: block; width: var(--p-width); height: var(--p-height); --p-width: 40px; --p-height: 56px } .section-values .overview-values-icon-environment { display: block; width: var(--p-width); height: var(--p-height); --p-width: 42px; --p-height: 56px } .section-values .overview-values-icon-privacy { display: block; width: var(--p-width); height: var(--p-height); --p-width: 32px; --p-height: 56px } section.section.section-upgrade { padding-bottom: 0 } @media(max-width:734px) { section.section.section-upgrade { background: #f5f5f7; padding-top: 0; max-width: 100%; overflow-x: hidden } } section.section.section-upgrade .inline-compare-wrap { box-sizing: border-box; border-radius: 28px; background: #f5f5f7; padding-bottom: var(--ps-spacing-120); padding-top: var(--ps-spacing-72) } @media(max-width:1068px) { section.section.section-upgrade .inline-compare-wrap { padding-bottom: var(--ps-spacing-80); padding-top: var(--ps-spacing-56) } } @media(max-width:734px) { section.section.section-upgrade .inline-compare-wrap { border-radius: 0; padding-top: 0; padding-bottom: var(--ps-spacing-96) } } section.section.section-upgrade .inline-compare-wrap .compare-gallery { padding-inline: var(--ric-column-width-1) } @media(max-width:734px) { section.section.section-upgrade .inline-compare-wrap .compare-gallery { padding-inline: 0 } } section.section.section-upgrade .copy-headline { margin-top: 8px; margin-bottom: var(--ps-spacing-46) } @media(max-width:1068px) { section.section.section-upgrade .copy-headline { margin-bottom: var(--ps-spacing-40) } } @media(max-width:734px) { section.section.section-upgrade .copy-headline { margin-inline-start: var(--ps-spacing-20); margin-bottom: var(--ps-spacing-32) } } section.section.section-upgrade .copy-eyebrow { color: #6e6e73 } @media(max-width:1068px) { section.section.section-upgrade .copy-eyebrow { margin-top: var(--ps-spacing-32) } } @media(max-width:734px) { section.section.section-upgrade .copy-eyebrow { margin-inline-start: var(--ps-spacing-20) } } section.section.section-upgrade .copy-eyebrow strong { color: #1d1d1f } section.section.section-upgrade .tab-wrap { display: flex; justify-content: flex-end } @media(max-width:1068px) { section.section.section-upgrade .tab-wrap { justify-content: flex-start; margin-inline-start: 0; margin-top: 0 } } @media(max-width:734px) { section.section.section-upgrade .tab-wrap { margin-inline-start: 0 } } section.section.section-upgrade .trade-in-content { text-align: center; margin-top: var(--ps-spacing-80) } @media(max-width:1068px) { section.section.section-upgrade .trade-in-content { margin-top: var(--ps-spacing-64) } } @media(max-width:734px) { section.section.section-upgrade .trade-in-content { text-align: start } } section.section.section-upgrade .trade-in-content .copy-eyebrow { margin-bottom: var(--ps-spacing-24); margin-top: var(--ps-spacing-24) } @media(max-width:1068px) { section.section.section-upgrade .trade-in-content .copy-eyebrow { margin-bottom: var(--ps-spacing-12); margin-top: var(--ps-spacing-6) } } @media(max-width:734px) { section.section.section-upgrade .trade-in-content .copy-eyebrow { margin-inline-start: 0; margin-bottom: 17px; margin-top: 14px } } section.section.section-upgrade .logo-trade-in { display: inline-block } section.section.section-upgrade .inline-wrap { display: flex; flex-wrap: wrap; margin: 0 } section.section.section-upgrade .form-dropdown { margin: 0 } @media(max-width:734px) { section.section.section-upgrade .form-dropdown { max-width: 100% } } @media(max-width:480px) { section.section.section-upgrade .form-dropdown { text-align: center } } section.section.section-upgrade .form-dropdown-wrap { display: flex; margin: 0 } @media(max-width:480px) { section.section.section-upgrade .form-dropdown-wrap { flex-direction: column; align-items: start } } @media(max-width:734px) { section.section.section-upgrade .form-dropdown-select { height: 36px; max-width: 100% } } @media(min-width:481px) { html.firefox section.section.section-upgrade .form-dropdown-select { width: 102% } } section.section.section-upgrade .form-dropdown-select:focus { border-color: #0071e3 } section.section.section-upgrade .form-dropdown-select, section.section.section-upgrade .form-dropdown-select:focus, section.section.section-upgrade .form-dropdown-select:focus:not(button) { border-width: 1px; padding: 0 42px 0 22px } @media(min-width:481px) { html.firefox section.section.section-upgrade .form-dropdown-select, html.firefox section.section.section-upgrade .form-dropdown-select:focus, html.firefox section.section.section-upgrade .form-dropdown-select:focus:not(button) { padding-inline-end: 44px } } html.text-zoom section.section.section-upgrade .form-dropdown-select, html.text-zoom section.section.section-upgrade .form-dropdown-select:focus, html.text-zoom section.section.section-upgrade .form-dropdown-select:focus:not(button) { height: 2rem; padding: 0 2.4rem 0 1rem } section.section.section-upgrade .inline-compare-upgrade-select-label { color: #6e6e73; margin-inline-start: var(--ps-spacing-20); margin-bottom: var(--ps-spacing-12) } @media(max-width:734px) { section.section.section-upgrade .inline-compare-upgrade-select-label { margin-bottom: var(--ps-spacing-16) } } section.section.section-upgrade .inline-compare-upgrade-select-label .line-break { display: block } @media(max-width:734px) { section.section.section-upgrade .inline-compare-upgrade-select-label .line-break { display: inline } } section.section.section-upgrade .inline-compare-upgrade-dropdown { flex-direction: column; max-width: 306px; width: 100% } @media(max-width:734px) { section.section.section-upgrade .inline-compare-upgrade-dropdown { max-width: 100% } } section.section.section-upgrade .inline-compare-option { display: none; flex-wrap: wrap; margin-top: 0; grid-row-gap: var(--ps-spacing-32); row-gap: var(--ps-spacing-32); grid-column-gap: min(14.5833333333vw - var(--global-scrollbar-width)/12*2, 14.5833333333%); column-gap: min(14.5833333333vw - var(--global-scrollbar-width)/12*2, 14.5833333333%) } @media(min-width:1441px) { section.section.section-upgrade .inline-compare-option { grid-column-gap: min(7.2916666667vw - var(--global-scrollbar-width)/12*1, 7.2916666667%); column-gap: min(7.2916666667vw - var(--global-scrollbar-width)/12*1, 7.2916666667%) } } @media(max-width:1068px) { section.section.section-upgrade .inline-compare-option { grid-row-gap: var(--ps-spacing-48); row-gap: var(--ps-spacing-48) } } section.section.section-upgrade .inline-compare-option-wrap { margin-top: var(--ps-spacing-32) } @media(max-width:1068px) { section.section.section-upgrade .inline-compare-option-wrap { margin-top: var(--ps-spacing-24) } } @media(max-width:376px) { section.section.section-upgrade .inline-compare-option-wrap { margin-left: calc(-6.25% + 8px); margin-right: calc(-6.25% + 8px); width: 112.5% } } section.section.section-upgrade .inline-compare-option.show { display: flex; align-items: baseline } section.section.section-upgrade .inline-compare-option .ps-stat { display: block; width: 100% } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy { font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(zh) { line-height: 1.3334033333 } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:first-child { margin-bottom: var(--ps-spacing-12) } @media(max-width:1068px) { section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:first-child { margin-bottom: 8px } } @media(max-width:734px) { section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:first-child { margin-bottom: var(--ps-spacing-4) } } section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:last-child { margin-top: var(--ps-spacing-12) } @media(max-width:1068px) { section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:last-child { margin-top: 8px } } @media(max-width:734px) { section.section.section-upgrade .inline-compare-option .ps-stat .ps-stat-copy:last-child { margin-top: var(--ps-spacing-4) } } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper { font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(ja) { line-height: 1.1459933333; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(ko) { line-height: 1.1875; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh) { letter-spacing: 0em } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(th) { line-height: 1.3334933333; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(ja) { line-height: 1.21875; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(ko) { line-height: 1.21875; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(th) { line-height: 1.375; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh) { line-height: 1.21875 } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:734px) { section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper { font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(ja) { line-height: 1.1786114286; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(ko) { line-height: 1.25; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(th) { line-height: 1.3928571429; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh) { line-height: 1.25 } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-compare-option .ps-stat .gradient-wrapper:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } section.section.section-upgrade .compare-gallery.toggle-fade .inline-compare-option { opacity: 0; transition: opacity var(--fade-duration) linear; will-change: opacity } section.section.section-upgrade .compare-gallery.toggle-fade.fade-init .show { opacity: 1; transition: none } section.section.section-upgrade .compare-gallery.toggle-fade.fade-in .inline-compare-option { opacity: 1 } section.section.section-upgrade .compare-gallery.toggle-fade.fade-out .inline-compare-option { opacity: 0 } section.section.section-upgrade .compare-tile-wrap { --tile-columns: 3; grid-template-columns: repeat(var(--tile-columns), 1fr); width: 100% } html.text-zoom section.section.section-upgrade .compare-tile-wrap { --tile-columns: 1 } @media(max-width:734px) { section.section.section-upgrade .compare-tile-wrap { --tile-columns: 2 } } @media(max-width:480px) { section.section.section-upgrade .compare-tile-wrap { grid-gap: 8px; gap: 8px } } section.section.section-upgrade .inline-wrap .compare-tile { --tile-padding: 16px; --tile-padding-alt: 8px; background: #fff; height: 300px; border-radius: 28px; padding-top: var(--tile-padding); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; grid-gap: 24px; gap: 24px; overflow: clip } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile { border-radius: 12px; grid-gap: 16px; gap: 16px; height: 220px } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile { height: 192px } } html.text-zoom section.section.section-upgrade .inline-wrap .compare-tile { height: auto } section.section.section-upgrade .inline-wrap .compare-tile.compare-tile-battery, section.section.section-upgrade .inline-wrap .compare-tile.compare-tile-graphics { justify-content: center; padding-top: 0 } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy { color: #6e6e73; padding-left: var(--tile-padding); padding-right: var(--tile-padding); padding-top: var(--tile-padding); font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em; font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(ja) { line-height: 1.2380952381; font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(ko) { line-height: 1.2858042857; font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(th) { line-height: 1.381002381; font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(zh) { line-height: 1.3334033333 } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(ar) { font-family: SF Pro AR, SF Pro AR Display, SF Pro Display, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile .tile-copy { font-size: 14px; line-height: 1.2857742857; font-weight: 600; letter-spacing: -0.016em; font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(ar) { letter-spacing: 0em; font-family: SF Pro AR, SF Pro AR Text, SF Pro Text, SF Pro Gulf, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(ja) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(ko) { line-height: 1.4285914286; letter-spacing: 0em; font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(zh) { line-height: 1.3571828571; letter-spacing: 0em } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(th) { line-height: 1.3571828571; letter-spacing: 0em; font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(zh-CN) { font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(zh-HK) { font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(zh-MO) { font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif } section.section.section-upgrade .inline-wrap .compare-tile .tile-copy:lang(zh-TW) { font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif } } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile .tile-copy { padding-top: var(--ps-spacing-12) } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile .tile-copy { padding-left: var(--ps-spacing-16); padding-right: var(--ps-spacing-16); padding-top: 4px } } section.section.section-upgrade .inline-wrap .compare-tile .upgrade-picture-wrap { position: relative; width: 100%; flex-grow: 1; margin: 0; display: grid; justify-content: center; min-height: 60px } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile .upgrade-picture-wrap { min-height: 40px } } section.section.section-upgrade .inline-wrap .compare-tile-camera .upgrade-picture-wrap { margin-top: 4px } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-camera .upgrade-picture-wrap { margin-top: 0 } } section.section.section-upgrade .inline-wrap .compare-tile-camera .bg-upgrade-image { --tile-image-width: 337px; --tile-image-height: 230px; width: var(--tile-image-width); height: var(--tile-image-height) } section.section.section-upgrade .inline-wrap .compare-tile-camera .bg-upgrade-image.ready-to-load { background-size: 337px 230px; background-repeat: no-repeat; background-image: url(/v/iphone-17/d/images/overview/upgrade/camera__f389jji00bee_large.jpg) } @media(min-resolution:1.5dppx), (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-camera .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/camera__f389jji00bee_large_2x.jpg) } } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-camera .bg-upgrade-image.ready-to-load { background-size: 246px 164px; background-repeat: no-repeat; background-image: url(/v/iphone-17/d/images/overview/upgrade/camera__f389jji00bee_medium.jpg) } } @media(max-width:1068px)and (min-resolution:1.5dppx), (max-width:1068px)and (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-camera .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/camera__f389jji00bee_medium_2x.jpg) } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-camera .bg-upgrade-image.ready-to-load { background-size: 200px 140px; background-repeat: no-repeat; background-image: url(/v/iphone-17/d/images/overview/upgrade/camera__f389jji00bee_small.jpg) } } @media(max-width:734px)and (min-resolution:1.5dppx), (max-width:734px)and (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-camera .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/camera__f389jji00bee_small_2x.jpg) } } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-camera .bg-upgrade-image { --tile-image-width: 246px; --tile-image-height: 164px; width: var(--tile-image-width); height: var(--tile-image-height) } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-camera .bg-upgrade-image { --tile-image-width: 200px; --tile-image-height: 140px; width: var(--tile-image-width); height: var(--tile-image-height) } } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-center-stage { grid-gap: 20px; gap: 20px } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-center-stage { grid-gap: 13px; gap: 13px } } section.section.section-upgrade .inline-wrap .compare-tile-center-stage .bg-upgrade-image { --tile-image-width: 127px; --tile-image-height: 195px; width: var(--tile-image-width); height: var(--tile-image-height) } section.section.section-upgrade .inline-wrap .compare-tile-center-stage .bg-upgrade-image.ready-to-load { background-size: 127px 195px; background-repeat: no-repeat; background-image: url(/v/iphone-17/d/images/overview/upgrade/center_stage__gbg09axlfiuu_large.jpg) } @media(min-resolution:1.5dppx), (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-center-stage .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/center_stage__gbg09axlfiuu_large_2x.jpg) } } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-center-stage .bg-upgrade-image.ready-to-load { background-size: 90px 183px; background-repeat: no-repeat; background-image: url(/v/iphone-17/d/images/overview/upgrade/center_stage__gbg09axlfiuu_medium.jpg) } } @media(max-width:1068px)and (min-resolution:1.5dppx), (max-width:1068px)and (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-center-stage .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/center_stage__gbg09axlfiuu_medium_2x.jpg) } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-center-stage .bg-upgrade-image.ready-to-load { background-size: 82px 166px; background-repeat: no-repeat; background-image: url(/v/iphone-17/d/images/overview/upgrade/center_stage__gbg09axlfiuu_small.jpg) } } @media(max-width:734px)and (min-resolution:1.5dppx), (max-width:734px)and (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-center-stage .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/center_stage__gbg09axlfiuu_small_2x.jpg) } } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-center-stage .bg-upgrade-image { --tile-image-width: 90px; --tile-image-height: 183px; width: var(--tile-image-width); height: var(--tile-image-height) } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-center-stage .bg-upgrade-image { --tile-image-width: 82px; --tile-image-height: 166px; width: var(--tile-image-width); height: var(--tile-image-height) } } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-display { grid-gap: 20px; gap: 20px } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-display { grid-gap: 13px; gap: 13px } } section.section.section-upgrade .inline-wrap .compare-tile-display .bg-upgrade-image { --tile-image-width: 127px; --tile-image-height: 260px; width: var(--tile-image-width); height: var(--tile-image-height) } section.section.section-upgrade .inline-wrap .compare-tile-display .bg-upgrade-image.ready-to-load { background-size: 127px 260px; background-repeat: no-repeat; background-image: url(/v/iphone-17/d/images/overview/upgrade/display__byzcm0i4kxaq_large.jpg) } @media(min-resolution:1.5dppx), (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-display .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/display__byzcm0i4kxaq_large_2x.jpg) } } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-display .bg-upgrade-image.ready-to-load { background-size: 90px 183px; background-repeat: no-repeat; background-image: url(/v/iphone-17/d/images/overview/upgrade/display__byzcm0i4kxaq_medium.jpg) } } @media(max-width:1068px)and (min-resolution:1.5dppx), (max-width:1068px)and (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-display .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/display__byzcm0i4kxaq_medium_2x.jpg) } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-display .bg-upgrade-image.ready-to-load { background-size: 81px 166px; background-repeat: no-repeat; background-image: url(/v/iphone-17/d/images/overview/upgrade/display__byzcm0i4kxaq_small.jpg) } } @media(max-width:734px)and (min-resolution:1.5dppx), (max-width:734px)and (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-display .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/display__byzcm0i4kxaq_small_2x.jpg) } } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-display .bg-upgrade-image { --tile-image-width: 90px; --tile-image-height: 183px; width: var(--tile-image-width); height: var(--tile-image-height) } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-display .bg-upgrade-image { --tile-image-width: 81px; --tile-image-height: 166px; width: var(--tile-image-width); height: var(--tile-image-height) } } section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield { grid-gap: 30px; gap: 30px } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield { grid-gap: 20px; gap: 20px } } section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield .upgrade-picture-wrap { align-items: center; height: 100% } section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield .bg-upgrade-image { --tile-image-width: 332px; --tile-image-height: 170px; width: var(--tile-image-width); width: 100%; height: var(--tile-image-height); position: relative } section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield .bg-upgrade-image.ready-to-load { background-size: 332px 170px; background-image: url(/v/iphone-17/d/images/overview/upgrade/ceramic_shield__c4gtvcdg83ma_large.jpg) } @media(min-resolution:1.5dppx), (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/ceramic_shield__c4gtvcdg83ma_large_2x.jpg) } } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield .bg-upgrade-image.ready-to-load { background-size: 242px 125px; background-repeat: no-repeat; background-image: url(/v/iphone-17/d/images/overview/upgrade/ceramic_shield__c4gtvcdg83ma_medium.jpg) } } @media(max-width:1068px)and (min-resolution:1.5dppx), (max-width:1068px)and (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/ceramic_shield__c4gtvcdg83ma_medium_2x.jpg) } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield .bg-upgrade-image.ready-to-load { background-size: 200px 102px; background-repeat: no-repeat; background-image: url(/v/iphone-17/d/images/overview/upgrade/ceramic_shield__c4gtvcdg83ma_small.jpg) } } @media(max-width:734px)and (min-resolution:1.5dppx), (max-width:734px)and (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/ceramic_shield__c4gtvcdg83ma_small_2x.jpg) } } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield .bg-upgrade-image { --tile-image-width: 242px; --tile-image-height: 125px; width: var(--tile-image-width); height: var(--tile-image-height) } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield .bg-upgrade-image { --tile-image-width: 200px; --tile-image-height: 102px; width: var(--tile-image-width); height: var(--tile-image-height) } } section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield .bg-upgrade-image.ready-to-load { background-size: cover; background-position: 0 100%; background-repeat: no-repeat; position: absolute; top: 0; left: 0; width: 100%; height: 100% } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield .bg-upgrade-image.ready-to-load { background-size: contain; background-position: 100% 100% } } @media(max-width:480px) { section.section.section-upgrade .inline-wrap .compare-tile-ceramic-shield .bg-upgrade-image.ready-to-load { background-position: 50% } } section.section.section-upgrade .inline-wrap .compare-tile-battery .ps-stat .battery-icon-wrap { --battery-padding-multiplier: 1; --battery-padding-offset: 11px; --battery-padding: calc(var(--battery-padding-offset)*var(--battery-padding-multiplier)); --tile-image-width: 64px; --tile-image-height: 32px; margin-inline-end: calc(var(--tile-image-width) + var(--battery-padding)); position: relative; display: inline-block } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-battery .ps-stat .battery-icon-wrap { --tile-image-width: 49px; --tile-image-height: 24px } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-battery .ps-stat .battery-icon-wrap { --tile-image-width: 30px; --tile-image-height: 16px } } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-battery .ps-stat .battery-icon-wrap { --battery-padding-offset: 7px } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-battery .ps-stat .battery-icon-wrap { --battery-padding-offset: 4px } } section.section.section-upgrade .inline-wrap .compare-tile-battery .ps-stat .battery-icon-wrap .bg-upgrade-image { position: absolute; transform: translate(var(--battery-padding)); width: var(--tile-image-width); height: var(--tile-image-height); bottom: 6px } section.section.section-upgrade .inline-wrap .compare-tile-battery .ps-stat .battery-icon-wrap .bg-upgrade-image.ready-to-load { background-size: 64px 32px; background-repeat: no-repeat; background-image: url(/v/iphone-17/d/images/overview/upgrade/battery__fu148cq4wzu6_large.png) } @media(min-resolution:1.5dppx), (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-battery .ps-stat .battery-icon-wrap .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/battery__fu148cq4wzu6_large_2x.png) } } @media(max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-battery .ps-stat .battery-icon-wrap .bg-upgrade-image.ready-to-load { background-size: 49px 24px; background-repeat: no-repeat; background-image: url(/v/iphone-17/d/images/overview/upgrade/battery__fu148cq4wzu6_medium.png) } } @media(max-width:1068px)and (min-resolution:1.5dppx), (max-width:1068px)and (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-battery .ps-stat .battery-icon-wrap .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/battery__fu148cq4wzu6_medium_2x.png) } } @media(max-width:734px) { section.section.section-upgrade .inline-wrap .compare-tile-battery .ps-stat .battery-icon-wrap .bg-upgrade-image.ready-to-load { background-size: 30px 16px; background-repeat: no-repeat; background-image: url(/v/iphone-17/d/images/overview/upgrade/battery__fu148cq4wzu6_small.png) } } @media(max-width:734px)and (min-resolution:1.5dppx), (max-width:734px)and (min-resolution:144dpi) { section.section.section-upgrade .inline-wrap .compare-tile-battery .ps-stat .battery-icon-wrap .bg-upgrade-image.ready-to-load { background-image: url(/v/iphone-17/d/images/overview/upgrade/battery__fu148cq4wzu6_small_2x.png) } } @media(min-width:735px)and (max-width:1068px) { section.section.section-upgrade .inline-wrap .compare-tile-battery .ps-stat .battery-icon-wrap .bg-upgrade-image { bottom: 4px } } .section-upgrade-banner { display: none } html.android .section-upgrade-banner { display: block } @media(max-width:734px) { .section-upgrade-banner { padding-top: 64px !important } } @media(max-width:1068px) { .section-upgrade-banner .card-container { --ctas-margin-top: 20px !important } } .section-upgrade-banner .card-container .card { --min-height: 480px; max-height: var(--min-height) } @media(min-width:735px)and (max-width:1068px) { .section-upgrade-banner .card-container .card { --min-height: 624px } } @media(max-width:734px) { .section-upgrade-banner .card-container .card { --min-height: 386px } } @media(max-width:1068px) { .section-upgrade-banner .card-container .card .banner-card-image { display: flex } } .android-show, html.android .android-hide { display: none } html.android .android-show { display: initial } html.no-android [data-toggle=android] { display: none } html.no-android #ac-globalfooter .ac-gf-sosumi [data-toggle-footnote=android] { visibility: hidden; overflow: hidden; height: 0; padding: 0; margin: 0 } html.no-android #ac-globalfooter .ac-gf-sosumi li [data-toggle-footnote=android] { display: none }