.typography-eyebrow-super {
    font-size: 32px;
    line-height: 1.125;
    font-weight: 600;
    letter-spacing: .004em;
}

.typography-music-headline {
    font-size: 64px;
    line-height: 1.0625;
    font-weight: 600;
    color: #222;
}

.violator {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    display: inline-block;
    border: 1px solid;
    background: transparent;
    border-color: #bf4800;
    color: #bf4800;
    font-size: 17px;
    line-height: 1.17648;
    font-weight: 400;
    letter-spacing: -.022em;
    border-radius: 18px;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 7px;
    padding-bottom: 7px
}
.music-violator {
    position: absolute;
    color: white;
    border-color: white;
    font-size: 12px;
    padding: 5px 10px
}

.section-cards {
    position: relative;
    z-index: 5;
    background: #fff
}

html.reduced-motion .section-cards {
    padding-bottom: 200px
}

@media only screen and (max-width: 1068px) {
    html.reduced-motion .section-cards {
        padding-bottom: 125px
    }
}

@media only screen and (max-width: 735px) {
    html.reduced-motion .section-cards {
        padding-bottom: 135
    }
}

.section-cards .headline {
    position: -webkit-sticky;
    position: sticky;
    top: calc(50vh - 391px + 52px);
    top: calc(50vh + 52px - 265px - 138px);
    margin-bottom: 800px;
}

@media only screen and (min-width: 1800px) {
    .section-cards .headline {
        top: calc(50vh + 52px - 285px - 153px)
    }
}

@media only screen and (max-width: 1068px) {
    .section-cards .headline {
        top: calc(50vh + 52px - 210px - 197px)
    }
}

.section-cards .headline.flow {
    position: relative;
    top: 0
}

html.reduced-motion .section-cards .headline {
    position: relative;
    top: 0
}

html.no-js .section-cards .cards-wrapper {
    position: relative;
    top: 210px
}

@media only screen and (max-width: 735px) {
    html.no-js .section-cards .cards-wrapper {
        top: 0px
    }
}

.section-cards .section-content {
    padding-top: 140px;
    text-align: center
}

@media only screen and (min-width: 1800px) {
    .section-cards .section-content {
        padding-bottom: 22px
    }
}

@media only screen and (max-width: 1068px) {
    .section-cards .section-content {
        padding-bottom: 70px
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content {
        padding-top: 100px;
        padding-bottom: 40px
    }
}

html.no-js .section-cards .section-content {
    padding-bottom: 210px
}

@media only screen and (max-width: 735px) {
    html.no-js .section-cards .section-content {
        padding-bottom: 0p
    }
}

@media only screen and (max-width: 735px) and (max-width: 735px) {
    .section-cards .section-content .typography-headline-elevated {
        font-size: 88px;
        line-height: 1.09091;
        font-weight: 600;
        letter-spacing: -.002em;
    }   
    .section-cards .section-content .typography-headline-elevated:lang(ko) {
        letter-spacing: 0em;
    }    
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content .typography-intro {
        font-size: 17px;
        line-height: 1.47059;
        font-weight: 400;
        letter-spacing: -.022em;
    }    
    .section-cards .section-content .typography-intro:lang(ko) {
        line-height: 1.58824;
        letter-spacing: 0em;
    }    
}

.section-cards .section-content ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.section-cards .section-content li {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform, opacity;
    height: 800px;
    position: sticky;
    position: -webkit-sticky;
    top: calc(50vh + 52px - 215px - 40px)
}

@media only screen and (max-width: 1068px) {
    .section-cards .section-content li {
        height: 600px
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content li {
        height: 620px
    }
}

@media only screen and (max-width: 1068px) {
    .section-cards .section-content li {
        top: calc(50vh + 52px - 212.5px - 65px)
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content li {
        top: calc(50vh + 52px - 228px - 100px)
    }
}

@media only screen and (max-width: 320px) {
    .section-cards .section-content li {
        top: calc(50vh + 52px - 228px - 60px)
    }
}

.section-cards .section-content li.only-card {
    top: calc( 50vh + 52px - 265px - 80px)
}

@media only screen and (max-width: 1068px) {
    .section-cards .section-content li.only-card {
        top: calc( 50vh + 52px - 210px - 100px)
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content li.only-card {
        top: calc( 50vh + 52px - 228px - 75px - 30px)
    }
}

.section-cards .section-content li.flow {
    position: relative;
    top: 0;
    opacity: 1 !important;
    -webkit-transform: translate(0px, 0px) scale(1) !important;
    transform: translate(0px, 0px) scale(1) !important;
    height: 600px
}

@media only screen and (max-width: 1068px) {
    .section-cards .section-content li.flow {
        height: 500px
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content li.flow {
        height: 520px
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content li.flow:nth-child(1) {
        z-index: 6
    }
    .section-cards .section-content li.flow:nth-child(2) {
        z-index: 5
    }
    .section-cards .section-content li.flow:nth-child(3) {
        z-index: 4
    }
    .section-cards .section-content li.flow:nth-child(4) {
        z-index: 3
    }
    .section-cards .section-content li.flow:nth-child(5) {
        z-index: 2
    }
    .section-cards .section-content li.flow:nth-child(6) {
        z-index: 1
    }
    .section-cards .section-content li.flow:nth-child(7) {
        z-index: 0
    }
}

html.reduced-motion .section-cards .section-content li {
    position: relative;
    top: 0;
    opacity: 1 !important;
    -webkit-transform: translate(0px, 0px) scale(1) !important;
    transform: translate(0px, 0px) scale(1) !important;
    height: 600px
}

@media only screen and (max-width: 1068px) {
    html.reduced-motion .section-cards .section-content li {
        height: 500px
    }
}

@media only screen and (max-width: 735px) {
    html.reduced-motion .section-cards .section-content li {
        height: 520px
    }
}

@media only screen and (max-width: 735px) {
    html.reduced-motion .section-cards .section-content li:nth-child(1) {
        z-index: 6
    }
    html.reduced-motion .section-cards .section-content li:nth-child(2) {
        z-index: 5
    }
    html.reduced-motion .section-cards .section-content li:nth-child(3) {
        z-index: 4
    }
    html.reduced-motion .section-cards .section-content li:nth-child(4) {
        z-index: 3
    }
    html.reduced-motion .section-cards .section-content li:nth-child(5) {
        z-index: 2
    }
    html.reduced-motion .section-cards .section-content li:nth-child(6) {
        z-index: 1
    }
    html.reduced-motion .section-cards .section-content li:nth-child(7) {
        z-index: 0
    }
}

.section-cards .section-content li .card-container {
    position: absolute;
    top: 50px;
    left: 50%;
    width: 750px;
    height: 530px;
    margin-left: -375px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content li .card-container {
        top: 42px
    }
}

@media only screen and (min-width: 1800px) {
    .section-cards .section-content li .card-container {
        width: 825px;
        height: 570px;
        margin-left: -412.5px
    }
}

@media only screen and (max-width: 1068px) {
    .section-cards .section-content li .card-container {
        width: 625px;
        height: 420px;
        margin-left: -312.5px
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content li .card-container {
        width: 320px;
        height: 456px;
        margin-left: -160px
    }
}

@media only screen and (max-width: 320px) {
    .section-cards .section-content li .card-container {
        width: 290px;
        height: 456px;
        margin-left: -145px
    }
}

.section-cards .section-content li .bg,
.section-cards .section-content li .card {
    position: absolute;
    left: 0;
    width: 750px;
    height: 480px;
    border-radius: 11px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

@media only screen and (min-width: 1800px) {
    .section-cards .section-content li .bg,
    .section-cards .section-content li .card {
        width: 825px;
        height: 570px
    }
}

@media only screen and (max-width: 1068px) {
    .section-cards .section-content li .bg,
    .section-cards .section-content li .card {
        width: 625px;
        height: 420px
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content li .bg,
    .section-cards .section-content li .card {
        width: 320px;
        height: 456px
    }
}

@media only screen and (max-width: 320px) {
    .section-cards .section-content li .bg,
    .section-cards .section-content li .card {
        width: 290px;
        height: 456px
    }
}

.section-cards .section-content li .card {
    overflow: hidden;
    z-index: 2;
    background-repeat: no-repeat;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    background-position: center center;
    -webkit-box-shadow: 4px 12px 40px 6px rgba(0, 0, 0, 0.09);
    box-shadow: 4px 12px 40px 6px rgba(0, 0, 0, 0.09);
    padding-top: 15px
}

html.no-js .section-cards .section-content li .card {
    -webkit-box-shadow: none;
    box-shadow: none
}

.section-cards .section-content li .bg {
    z-index: 1;
    background-color: #fff
}

.section-cards .section-content li .card .card-headline,
.section-cards .section-content li .card .card-headline-container {
    color: #fff;
    margin-top: 30px;
    margin-bottom: 26px
}

@media only screen and (min-width: 1800px) {
    .section-cards .section-content li .card .card-headline,
    .section-cards .section-content li .card .card-headline-container {
        margin-top: 30px;
        margin-bottom: 38px
    }
}

@media only screen and (max-width: 1068px) {
    .section-cards .section-content li .card .card-headline,
    .section-cards .section-content li .card .card-headline-container {
        margin-top: 37px;
        margin-bottom: 18px
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content li .card .card-headline,
    .section-cards .section-content li .card .card-headline-container {
        margin-top: 33px
    }
}

.section-cards .section-content li .card .music-violator {
    -webkit-transform: translate(-50%, -123%);
    transform: translate(-50%, -123%)
}

@media only screen and (max-width: 1068px) {
    .section-cards .section-content li .card .music-violator {
        -webkit-transform: translateY(-50%, -120%);
        transform: translateY(-50%, -120%)
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content li .card .music-violator {
        -webkit-transform: translateY(-50%, -120%);
        transform: translateY(-50%, -120%)
    }
}

.section-cards .section-content li .card .card-new-headline {
    color: #fff
}

.section-cards .section-content li.card-01 .card {
    background: -webkit-linear-gradient(130deg, #d754ad 0%, #f96785 67%, #fe7333 100%);
    background: linear-gradient(-40deg, #d754ad 0%, #f96785 67%, #fe7333 100%);
    background-image: url(../../assets/images/am/am-card-1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-cards .section-content li.card-02 .card {
    background: -webkit-linear-gradient(130deg, #af4fec 0%, #d753ad 70%, #eb6078 100%);
    background: linear-gradient(-40deg, #af4fec 0%, #d753ad 70%, #eb6078 100%);
    background-image: url(../../assets/images/am/am-card-1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-cards .section-content li.card-03 .card {
    background: -webkit-linear-gradient(130deg, #d152b8 0%, #d152b8 60%, #d152b8 100%);
    background: linear-gradient(-40deg, #d152b8 0%, #d152b8 60%, #d152b8 100%);
    background-image: url(../../assets/images/am/am-card-2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-cards .section-content li.card-04 .card {
    background: -webkit-linear-gradient(130deg, #6c6ff0 0%, #a354e4 58%, #c65cae 100%);
    background: linear-gradient(-40deg, #6c6ff0 0%, #a354e4 58%, #c65cae 100%);
    background-image: url(../../assets/images/am/am-card-2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-cards .section-content li.card-05 .card {
    background: -webkit-linear-gradient(130deg, #56acef 0%, #6c6ff0 50%, #9755e7 100%);
    background: linear-gradient(-40deg, #56acef 0%, #6c6ff0 50%, #9755e7 100%);
    background-image: url(../../assets/images/am/am-card-3.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-cards .section-content li.card-06 .card {
    background: -webkit-linear-gradient(130deg, #9adee6 0%, #00a9ff 25%, #3663cc 100%);
    background: linear-gradient(-40deg, #9adee6 0%, #00a9ff 25%, #3663cc 100%);
    background-image: url(../../assets/images/am/am-card-3.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-cards .section-content li.card-07 .card {
    background: -webkit-linear-gradient(130deg, #69e7e3 0%, #14bcf3 60%, #1eb4e5 100%);
    background: linear-gradient(-40deg, #69e7e3 0%, #14bcf3 60%, #1eb4e5 100%);
    background-image: url(../../assets/images/am/am-card-4.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-cards .section-content li.card-08 .card {
    background: -webkit-linear-gradient(130deg, #69e7e3 0%, #14bcf3 60%, #1eb4e5 100%);
    background: linear-gradient(-40deg, #69e7e3 0%, #14bcf3 60%, #1eb4e5 100%);
    background-image: url(../../assets/images/am/am-card-4.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-cards .section-content li.card-09 .card {
    background: -webkit-linear-gradient(130deg, #69e7e3 0%, #14bcf3 60%, #1eb4e5 100%);
    background: linear-gradient(-40deg, #69e7e3 0%, #14bcf3 60%, #1eb4e5 100%);
    background-image: url(../../assets/images/am/am-card-5.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-cards .section-content li.card-010 .card {
    background: -webkit-linear-gradient(130deg, #69e7e3 0%, #14bcf3 60%, #1eb4e5 100%);
    background: linear-gradient(-40deg, #69e7e3 0%, #14bcf3 60%, #1eb4e5 100%);
    background-image: url(../../assets/images/am/am-card-5.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-cards .section-content li.last-card {
    position: relative;
    top: -40px;
    height: 830px;
    margin-bottom: -40px
}

html.no-js .section-cards .section-content li.last-card {
    position: relative;
    top: 0px;
    height: 0px;
    margin-bottom: 0px;
    height: 830px
}

@media only screen and (max-width: 1068px) {
    html.no-js .section-cards .section-content li.last-card {
        height: 650px
    }
}

@media only screen and (max-width: 1068px) {
    .section-cards .section-content li.last-card {
        height: 640px
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content li.last-card {
        height: 670px
    }
}

.section-cards .section-content li.last-card.flow {
    top: -45px
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content li.last-card.flow {
        margin-bottom: -71px
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content li.last-card.only-card {
        height: 660px;
        margin-bottom: -61px
    }
}

.section-cards .section-content li.last-card .card-container {
    -webkit-transform: translate3d(0px, 46px, 0px);
    transform: translate3d(0px, 46px, 0px)
}

.section-cards .section-content .card-01 .card-headline {
    width: 98%
}

@media only screen and (max-width: 1068px) {
    .section-cards .section-content .card-01 .card-headline {
        margin-bottom: 20px !important
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content .card-01 .card-headline {
        margin-bottom: 6px !important;
        width: 100%
    }
}

.section-cards .section-content .card-01 .device-lockup {
    position: relative;
    width: 100%;
    height: 100%
}

.section-cards .section-content .card-02 .card-headline {
    margin-bottom: 29px !important
}

@media only screen and (min-width: 1800px) {
    .section-cards .section-content .card-02 .card-headline {
        margin-bottom: 37px !important
    }
    .section-cards .section-content .card-02 .card-headline.large-8 {
        width: 75%
    }
}

@media only screen and (max-width: 1068px) {
    .section-cards .section-content .card-02 .card-headline {
        margin-bottom: 35px !important
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content .card-02 .card-headline {
        margin-bottom: 6px !important
    }
}

.section-cards .section-content .card-02 .device-lockup {
    position: relative;
    width: 100%;
    height: 100%
}


.section-cards .section-content .card-03 .card-headline {
    margin-bottom: 35px !important
}

@media only screen and (max-width: 1068px) {
    .section-cards .section-content .card-03 .card-headline {
        max-width: 70%;
        margin-bottom: 31px !important
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content .card-03 .card-headline {
        max-width: 90%;
        margin-bottom: 43px !important
    }
}

.section-cards .section-content .card-03 .device-lockup {
    position: relative;
    width: 100%;
    height: 100%
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content .card-03 .card {
        overflow: visible
    }
}

.section-cards .section-content .card-04 .device-lockup {
    position: relative;
    width: 100%;
    height: 100%
}

.section-cards .section-content .card-05 .device-lockup {
    position: relative;
    width: 100%;
    height: 100%
}

.section-cards .section-content .card-06 .device-lockup {
    position: relative;
    width: 100%;
    height: 100%
}

@media only screen and (min-width: 1800px) {
    .section-cards .section-content .card-07 .card-headline {
        margin-bottom: 10px !important
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content .card-07 .card-headline {
        margin-bottom: 26px !important
    }
}

.section-cards .section-content .card-07 .device-lockup {
    position: relative;
    width: 100%;
    height: 100%
}

.section-cards .section-content .card-07 .card-container .card .card-headline {
    margin-bottom: 2px
}

.section-cards .section-content .cta-wrapper {
    position: relative;
    margin: 0 10px;
    top: -160px
}

@media only screen and (min-width: 1800px) {
    .section-cards .section-content .cta-wrapper {
        top: -120px
    }
}

@media only screen and (max-width: 1068px) {
    .section-cards .section-content .cta-wrapper {
        top: -75px
    }
}

@media only screen and (max-width: 735px) {
    .section-cards .section-content .cta-wrapper {
        top: -65px
    }
}

html.no-js .section-cards .section-content .cta-wrapper {
    top: 125px
}

@media only screen and (max-width: 1068px) {
    html.no-js .section-cards .section-content .cta-wrapper {
        top: 175px
    }
}

@media only screen and (max-width: 735px) {
    html.no-js .section-cards .section-content .cta-wrapper {
        top: -55px
    }
}

html.reduced-motion .section-cards .section-content .cta-wrapper {
    top: 110px
}

@media only screen and (max-width: 1068px) {
    html.reduced-motion .section-cards .section-content .cta-wrapper {
        top: 95px
    }
}

@media only screen and (max-width: 735px) {
    html.reduced-motion .section-cards .section-content .cta-wrapper {
        top: 90px
    }
}