@charset "UTF-8";

:root {
    -webkit-tap-highlight-color: transparent;
}

html {
    --nav-h-padding: 20px;
    --scrolled-nav-height: 75px;
    scroll-padding-top: calc(var(--scrolled-nav-height) - 1px);
    width: 100vw;
    height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(128, 128, 128, .7);
}

*,
::after,
::before {
    box-sizing: border-box;
}

input {
    border: 0;
    outline: 0;
    border-radius: 0;
}

textarea:focus,
input:focus {
    box-shadow: none !important;
    border-bottom: 1px #FFF solid;
    outline: none !important;
}

input[type="submit"] {
    -webkit-appearance: none;
    cursor: pointer;
}

a {
    text-decoration: none;
}

body {
    background: var(--theme-color) linear-gradient(112deg, #391BFD 0%, #942FA7 70%, #5D2C9B 100%) 0% 0% no-repeat padding-box;
    background-size: cover;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: overlay;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable force;
    --font-family: Barlow, "MHeiHK", "PingFang", "蘋方", "Noto Sans HK", "Noto Sans CJK HK", "Noto Sans CJK TC", "Noto Sans TC", "JhengHei", "微軟正黑體", sans-serif;
    font-family: var(--font-family);
}

body.showing-tutorial[data-hash="#looplive-tutorial"],
body.showing-tutorial[data-hash="#kol-tutorial"] {
    /* height: 100vh; */
    height: 100%;
    overflow: hidden;
}

#hidden-h1 {
    display: none;
}

.col {
    color: #FFFFFF;
    text-align: center;
}

.row {
    display: flex;
}

.row.no-wrap {
    flex-wrap: nowrap;
}

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
}

body>div {
    overflow-x: hidden;
    /* content-visibility: auto;
    contain-intrinsic-size: auto; */
}

body:not(.init)>div {
    display: none !important;
}

#nav {
    position: fixed;
    top: 0;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--nav-h-padding);
    background-color: rgba(0, 0, 0, 0);
    width: 100vw;
    height: 120px;
    transition: all .25s ease-in-out;
}

body.showing-tutorial[data-hash="#looplive-tutorial"] #nav,
body.showing-tutorial[data-hash="#kol-tutorial"] #nav,
html.scrolled #nav {
    height: var(--scrolled-nav-height);
    background-color: #3D0C5D;
}

#logo {
    height: calc(100% - 10px);
    transition: all .25s ease-in-out;
}

#app-link {
    text-decoration: none;
    /* background-color: #391BFD; */
    background: transparent linear-gradient(130deg, #391BFD 0%, #942FA7 70%, #5D2C9B 100%) 0% 0% no-repeat padding-box;
    color: #FFF;
    padding: 0 .75rem;
    border-radius: 1rem;
    line-height: 200%;
    font-weight: 700;
    margin-left: auto;
    margin-right: var(--nav-h-padding);
}

body:not(.ios):not(.android) #app-link {
    display: none;
}

@media screen and (max-height:600px) and (orientation:landscape),
screen and (max-width: 600px) and (orientation: portrait) {
    #app-link {
        display: block;
    }
}


/* nav { */
#nav-link-close,
#nav-link-logo-container,
#header-menu,
#header-menu-checkbox {
    display: none;
}

#nav-link-container {
    display: flex;
    align-items: center;
}

.navbar-nav {
    flex-direction: row;
}

.nav-link {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    margin: 0px 20px;
}

@media (max-width: 790px) {
    body.viewing-nav-link-container {
        overflow: hidden;
    }

    body.init #header-menu {
        display: block;
        cursor: pointer;
        /* margin-right: 20px; */
    }

    #nav-link-container {
        /* display: none; */
        position: fixed;
        top: 0;
        right: -100vw;
        transition: all .3s ease-in-out;
        /* display: flex; */
        flex-direction: column;
        text-align: left;
        width: 92vw;
        height: 100vh;
        overflow: auto;
        /* background: #FFF; */
        box-shadow: -8px 3px 6px #00000029;
        /* content-visibility: auto;
        contain-intrinsic-size: 100vh; */
    }

    #header-menu-checkbox:checked~#nav-link-container {
        right: 0;
        background: #FFF;
    }

    #nav-link-close {
        cursor: pointer;
        display: block;
        align-self: flex-end;
        margin: .75rem;
    }

    #nav-link-logo-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        margin: 0 auto 1rem auto;
        padding-bottom: 2rem;
        border-bottom: 1px #D5D5D5 solid;
    }

    #nav-link-logo {
        width: 65px;
    }

    .nav-link {
        color: #000;
        margin: 1rem 20px;
        font-size: 1rem;
        align-self: normal;
    }
}

/* nav } */

/* .video-page { */
.video-page {
    --video-height: 436px;
    position: relative;
}

.video-row {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.video-cell {
    cursor: pointer;
    background: transparent url('looplive/group_88c3_crop.png') 0 0 no-repeat;
    background-size: contain;
    width: var(--video-cell-width);
    height: var(--video-cell-height);
    order: var(--order);
    font-size: 40px;
    transition: all .5s ease-in-out;
}

.video-cell[data-origin] {
    transform: scale(.85);
}

.video-cell[data-origin="left"] {
    transform-origin: left center;
}

.video-cell[data-origin="right"] {
    transform-origin: right center;
}

.video-cell:nth-child(1) {
    border-color: red;
}

.video-cell:nth-child(2) {
    border-color: orange;
}

.video-cell:nth-child(3) {
    border-color: yellow;
}

.video-cell:nth-child(4) {
    border-color: green;
}

.video-cell:nth-child(5) {
    border-color: greenyellow;
}

body:not(.init) .video-row {
    display: none;
}

.video-cell>video {
    width: 192px;
    border-radius: 24px;
    margin-left: var(--video-margin-left);
    margin-top: var(--video-margin-top);
}

/* .video-row>.video-row-text {
    text-align: left;
    margin-left: 3rem;
    color: #FFFFFF;
} */

.image-row {
    height: var(--image-row-height);
    background: transparent linear-gradient(104deg, #391BFD 0%, #6026AA 100%) 0% 0% no-repeat padding-box;
    /* mix-blend-mode: multiply; */
    opacity: 0.55;
    margin: 0;
    display: flex;
}

.image-row>.col {
    flex: 1;
    height: 100%;
    background-size: cover;
    background-position: center 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    flex-flow: column wrap;
}

.join-as-row {
    width: 100%;
    max-width: 1162px;
    margin: 0 auto;
    flex-wrap: wrap;
    text-align: center;
    flex-direction: row;
    justify-content: center;
}

.join-as-row>.col {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* flex: unset; */
    width: auto;
    margin: 60px 1rem 0 1rem;
}

.join-as-row>.col:last-child {
    /* min-width: 430px; */
    min-width: fit-content;
}

@media (max-width: 1161px) {
    .join-as-row {
        flex-direction: column;
    }

    .join-as-row>.col {
        margin: 60px auto 0 auto;
    }
}


.join-as-row>.col>.title {
    margin: 13px 0;
    font-weight: 500;
    font-size: 37px;
    letter-spacing: 1.89px;
}

.join-as-row>.col>.sub-title {
    margin: 13px 0 19px 0;
    font-weight: 300;
    font-size: 15px;
    letter-spacing: 0.77px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.join-as-row>.col>.dl-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.join-as-row>.col>.dl-row>a {
    margin: 0 5px;
}

.join-as-row>.col>.dl-row>a>.qr-code {
    width: 90px;
    margin-bottom: 1rem;
}

.join-as-row>.col>.dl-row>a>.store {
    height: 43px;
}

.start-now {
    display: flex;
    align-items: center;
    justify-content: space-between;
    --color: #FFF;
    color: var(--color);
    width: 264px;
    height: 48px;
    line-height: 44px;
    border: 3px solid var(--color);
    text-align: left;
    /* background-image: url(looplive/Group%20215.svg); */
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    font-size: 19px;
    font-weight: medium;
    /* font-family: Barlow; */
    letter-spacing: 0.97px;
    transition: all .25s ease-out;
    padding-left: 15px;
    padding-right: 1rem;
}

.start-now>.line-with-arrow {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

.start-now>.line-with-arrow>.line {
    height: 1px;
    background-color: var(--color);
    width: 36.22px;
    transition: all .25s ease-out;
    margin-right: -2px;
}

.start-now>.line-with-arrow>.arrow {
    border: solid var(--color);
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 8px;
    transform: rotate(-45deg);
    position: absolute;
    transition: all .25s ease-out;
}

.start-now:hover {
    background-color: #FFF;
    border-color: #FFF;
    --color: #210C33;
}

.start-now:hover>.line-with-arrow>.line {
    width: 65px;
}

/* .video-page } */


/* #home-page { */
#home-page {
    --video-row-scale: 1;
    /* min-height: 1080px; */
    /* padding-bottom: 60px; */
    padding-bottom: 100px;
    background: transparent linear-gradient(112deg, #391BFD 0%, #942FA7 70%, #5D2C9B 100%) 0% 0% no-repeat padding-box;
    color: #FFF;
    --video-margin-top: 8px;
    --video-margin-left: 11px;
    --video-cell-width: 213px;
    --video-cell-height: 431px;
    --video-row-height: 694px;
    --image-row-height: var(--video-row-height);
}

#home-page-video-row {
    top: 285px;
}

/* #home-page-video-row>.video-row-text {
    font-weight: 600;
    font-size: 48px;
    padding-top: 180px;
    letter-spacing: 2.45px;
}

#home-page-video-row>.video-row-text>div:nth-child(2) {
    font-weight: 900;
    letter-spacing: 4.8px;
} */

@media (max-width: 600px) {
    /* .video-row {
        transform: translateX(-50%) scale(var(--video-row-scale));
        transform-origin: top center;
    } */

    .image-row>.col:not(:first-child) {
        display: none;
    }
}

#home-page-col-bg-0 {
    background-image: url('looplive/home-page-0.jpg');
}

#home-page-col-bg-1 {
    background-image: url('looplive/home-page-1.jpg');
}

#home-page-col-bg-2 {
    background-image: url('looplive/home-page-2.jpg');
}

#home-page-col-bg-3 {
    background-image: url('looplive/home-page-3.jpg');
}

#home-page-col-bg-4 {
    background-image: url('looplive/home-page-4.jpg');
}

#home-page-col-bg-5 {
    background-image: url('looplive/home-page-5.jpg');
}

/* #home-page } */

/* #about-us { */
#about-us {
    --page-padding-bottom: 65px;
    padding-bottom: var(--page-padding-bottom);
    /* background: transparent linear-gradient(270deg, #432A52 0%, #160122 78%, #000000 100%) 0% 0% no-repeat padding-box; */
    background-color: #0F399D;
    background-image: url(looplive/about-us-bg.png);
    background-position: right 0;
    background-repeat: no-repeat;
    background-size: 2323px auto;
    --header-padding-top: 86px;
    --header-padding-bottom: 31px;
    --header-padding-left-right: 1rem;
    --header-font-size: 56px;
    --header-scale: 1;
    --content-text-column-scale: 1;
}

#about-us>div {
    /* min-width: 1422px; */
    /* width: 1422px; */
    margin: 0 auto;
}

#about-us-header {
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: var(--header-font-size);
    letter-spacing: 0px;
    --color: #FFF;
    color: var(--color);
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: var(--header-padding-top) var(--header-padding-left-right) var(--header-padding-bottom) var(--header-padding-left-right);
}

#about-us-header>div {
    border-bottom: 2px var(--color) solid;
}

/* #about-us-header>.space {
    display: block;
} */

@media (max-width: 670px) {
    #about-us {
        padding-bottom: calc(var(--page-padding-bottom) * var(--header-scale));
    }

    #about-us-header {
        font-size: calc(var(--header-font-size) * var(--header-scale));
        padding-top: calc(var(--header-padding-top) * var(--header-scale));
        padding-bottom: calc(var(--header-padding-bottom) * var(--header-scale));
    }

    /* 
    #about-us-header>.space {
        display: none;
    } */
}

/* @media (max-width: 559px) {
    #about-us {
        padding-bottom: 0;
    }
} */

#about-us-content {
    width: 1024px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    padding: 0 1rem;
    --content-img-margin-right: 30px;
    --content-text-column-margin-top: 32px;
}

#about-us>#about-us-content {
    /* margin-left: 10.42%; */
    margin: 0 auto;
}

@media (max-width: 1055px) {
    #about-us-content {
        width: 100%;
    }
}

@media (max-width: 1249px) {
    #about-us>#about-us-content {
        margin-left: auto;
    }
}

#about-us-content>img {
    margin-right: var(--content-img-margin-right);
    max-width: calc(100vw - 2rem);
}

#about-us-content>.text-column {
    margin-top: var(--content-text-column-margin-top);
    width: 100%;
}

#about-us-content>.text-column>div {
    --padding-h: 1rem;
    padding-left: var(--padding-h);
    padding-right: var(--padding-h);
}

#about-us-content-title {
    display: flex;
    padding-bottom: 12px;
    border-bottom: 8px #D0197A solid;
    /* width: 334px; */
    width: fit-content;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: var(--padding-h);
    margin-right: var(--padding-h);
    /* padding-right: 24px; */
    font-weight: bold;
    font-size: 45px;
    letter-spacing: 0px;
}

#about-us-content-sub-title {
    margin-top: 15px;
    font-size: 30px;
    font-weight: medium;
}

/* 
#about-us-what-we-do>div:last-child {
    color: #D0197A;
} */

#about-us-we-do {
    display: flex;
    color: #FFF;
    margin-top: 61px;
    font-weight: 500;
    font-size: 20px;
    width: 1050px;
}

#about-us-we-do>div:not(:last-child) {
    padding-right: 60px;
}

#about-us-we-do>div:last-child>div {
    min-width: 150px;
    width: 100%;
}

#about-us-we-do>div>img {
    border-bottom: 3px #D0197A solid;
    padding-bottom: 20px;
    margin-bottom: 12px;
    height: 95px;
}

/* @media (max-width: 1230px) {
    #about-us-content {
        flex-direction: column;
        width: 100%;
        --content-img-margin-right: 0px;
        --content-text-column-margin-top: 40px;
    }

    #about-us-content>.text-column {
        transform: scale(var(--content-text-column-scale));
        margin-top: calc(var(--content-text-column-margin-top) * var(--content-text-column-scale));
    }
} */

@media (max-width: 1419px) {
    #about-us {
        background-size: auto 100%;
    }

    #about-us-we-do {
        width: 100%;
        flex-wrap: wrap;
    }

    #about-us-we-do>div {
        width: 25%;
        margin-bottom: 60px;
        padding-right: 1rem !important;
    }
}

@media (max-width: 719px) {
    #about-us-we-do>div {
        width: calc(100% / 3);
    }
}

@media (max-width: 553px) {
    #about-us-we-do>div {
        width: 50%;
    }
}

@media (max-width: 389px) {
    #about-us-we-do>div {
        width: 100%;
        display: flex;
        align-items: center;
    }

    #about-us-we-do>div>img {
        margin-right: 1rem;
        width: 72px;
    }
}

/* #about-us } */

/* #intro { */
#intro {
    background: transparent linear-gradient(160deg, #21273E 0%, #1C2858 100%) 0% 0% no-repeat padding-box;
    color: #FFF;
    font-weight: medium;
    font-size: 22px;
}

#intro-cells {
    display: flex;
    /* justify-content: space-between; */
    width: 100%;
    max-width: 1264px;
    margin: 0 auto;
}

#intro-cells>.intro-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    flex: 1;
    --margin-right: 0;
    margin: 56px 0;
    --cell-width: 388px;
    width: var(--cell-width);
}

#intro-cells>.intro-cell:not(:last-child) {
    margin-right: 50px;
}

#intro-cells>.intro-cell:nth-child(2n) {
    flex-direction: column-reverse;
}

#intro-cells>.intro-cell:not(:nth-child(2n))>.intro-text {
    padding-bottom: 10px;
}

#intro-cells>.intro-cell:nth-child(2n)>.intro-text {
    padding-top: 10px;
}

#intro-cells>.intro-cell>.intro-wrapper {
    width: 100%;
}

#intro-cells>.intro-cell>.intro-wrapper>video {
    width: 100%;
}

@media (max-width: 1295px) {
    #intro-cells {
        flex-direction: column;
        padding: 0 1rem;
    }

    #intro-cells>.intro-cell:not(:last-child),
    #intro-cells>.intro-cell {
        --cell-width: 100%;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    #intro-cells>.intro-cell:not(:last-child) {
        margin-bottom: 0;
    }

    #intro-cells>.intro-cell:nth-child(2n) {
        flex-direction: column;
    }

    #intro-cells>.intro-cell:nth-child(2n)>.intro-text {
        padding-top: unset;
        padding-bottom: 10px;
    }
}

/* #intro { */

/* #kol-merchant { */
#kol-merchant {
    background-color: #FFF;
    font-size: 30px;
    /* letter-spacing: 1.75px; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #7B7B7B;
    /* --margin-h: 3.5rem; */
    /* --margin-v: 1.875rem; */

    background-image: url(looplive/kol-merchant-bg-left.jpg);

    /* background-image: url(looplive/kol-merchant-bg-left.jpg), url(looplive/kol-merchant-bg-right.jpg);
    background-position: left 0, right 0;
    background-size: 50% 100%, 50% 100%;
    background-repeat: repeat, repeat; */

    --text-width: 770px;
    --img-width: 962px;
    --img-height: 280px;
}

#kol-merchant-bg {
    /* max-width: var(--img-width);
    width: calc(100% - var(--text-width)); */
    height: var(--img-height);
    background-image: url(looplive/kol-merchant-bg.jpg);
    background-size: var(--img-width) var(--img-height);
    background-repeat: no-repeat;
    /* background-position: top left; */

    min-width: var(--img-width);
    flex: 1;
    background-position: top right;

}

#kol-merchant-puzzle-with-text-container {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #FFF;
    min-width: var(--text-width);
    height: var(--img-height);
}

@media (max-width: 1679px) {
    #kol-merchant {
        background-image: none;
    }
    #kol-merchant-bg {
        min-width: unset;
        flex: unset;
        max-width: var(--img-width);
        width: calc(100% - var(--text-width));
    }
    #kol-merchant-puzzle-with-text-container {
        flex: unset;
    }
}


#kol-merchant-puzzle-with-text-container>div {
    --margin-h: 54px;
    margin: 0 0 0 var(--margin-h);
}

#kol-merchant-puzzle-with-text-container>div:last-child {
    margin-right: var(--margin-h);
    max-width: 400px;
}

@media (min-width: 1963px) {
    #kol-merchant-puzzle-with-text-container>div:last-child {
        max-width: unset;
    }
}

/* #kol-merchant-puzzle-with-text-container>div:not(:last-child) {
    margin-right: var(--margin-h);
}

#kol-merchant-puzzle-with-text-container>div:not(:first-child) {
    margin-left: var(--margin-h);
} */

/* @media (max-width: 1009px) {
    #kol-merchant {
        flex-direction: column;
        --margin-h: 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #kol-merchant-puzzle-with-text-container>div:last-child {
        text-align: center;
    }
} */

#kol-merchant-puzzle-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #1A1A1A;
    line-height: 2.875rem;
    white-space: nowrap;
}

#kol-merchant-puzzle-container>div:first-child {
    margin-top: var(--margin-v);
}

#kol-merchant-puzzle-container>div:last-child {
    margin-bottom: var(--margin-v);
}

#kol-merchant-puzzle {
    color: #FFF;
    position: relative;
    --width: 246px;
    width: var(--width);
}

#kol-merchant-puzzle>img {
    width: var(--width);
}

#kol-merchant-puzzle-internal-text {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

#kol-merchant-puzzle-internal-text>div {
    flex: 1;
}

#kol-merchant-puzzle-internal-text-merchant {
    letter-spacing: -1px;
    font-size: 75%;
}

#kol-merchant-puzzle-internal-text-merchant>div {
    margin-left: 23px;
}

@media (max-width: 1199px) {
    #kol-merchant {
        flex-direction: column;
    }

    #kol-merchant-bg {
        max-width: unset;
        width: 100%;
        background-size: 100% auto;
    }

    /* #kol-merchant-bg > img {
        width: 100%;
    } */
    #kol-merchant-puzzle-with-text-container {
        /* margin-top: calc(var(--img-height) * -.5); */
        height: unset;
        margin-top: -100px;
        background-color: unset;
        flex-direction: column;
        text-align: center;
        min-width: unset;
    }

    #kol-merchant-puzzle-with-text-container>div {
        margin: 0 var(--margin-h);
    }

    #kol-merchant-puzzle-with-text-container>div:last-child {
        max-width: unset;
        margin-bottom: 36px;
    }
}

@media (max-width: 949px) {
    #kol-merchant-bg {
        background-size: auto 100%;
    }
}

/* #kol-merchant } */


/* #loopliver { */

#loopliver {
    --pink: #D0197A;
    background: transparent linear-gradient(157deg, #21273E 0%, #1C2858 100%) 0% 0% no-repeat padding-box;
    --line-margin-v: 2.25rem;
    --line-width: 524px;
}


#loopliver-first-row {
    margin: 155px auto 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
}

#loopliver-first-row-img {
    width: 100%;
    max-width: 1130px;
}

@media (max-width: 1129px) {
    #loopliver-first-row {
        margin: 2.25rem auto 0 auto;
    }
}

/* @media (max-width: 1140px) {
    #loopliver-first-row {
        transform: scale(var(--scale));
    }
} */

/* #loopliver-first-row {
    width: 1125px;
    height: 537px;
    margin: 155px auto;
    position: relative;
    font-weight: bold;
} */

/* #loopliver-first-row > * {
    position: absolute;
}

#loopliver-first-row > .frame {
    --color: #EF8874;
    color: var(--color);
    border: 4px var(--color) solid;
    font-size: 26px;
    padding: 0 17px;
    width: 260px;
    line-height: 36px;
}

#loopliver-first-row > .big-text {
    font-weight: normal;
    font-size: 74px;
}

#loopliver-first-row-like-sharing-life {
    top: 100px;
}

#loopliver-first-row-know-shooting-editing-video {
    top: 444px;
    left: 130px;
}

#loopliver-first-row-show-off-your-desire-to-perform {
    top: 175px;
    right: 0;
}

#loopliver-first-row-kol-dreams-come-true {
    top: 160px;
    right: 735px;
    color: #FFF;
}

#loopliver-first-row-amateur-becomes-kol {
    bottom: 419px;
    left: 545px;
    color: #D0197A;
}

#loopliver-first-row-img {
    width: 825px;
    left: 255px;
} */


#loopliver-to-be-our-loopliver-btn {
    --bg-color: #E50995;
    --color: #FFF;
    background-color: var(--bg-color);
    color: var(--color);
    border-radius: 5px;
    font-size: 32px;
    padding: 22px 32px;
    margin: 98px auto;
    transition: all .25s ease-out;
}

#loopliver-to-be-our-loopliver-btn:hover,
#loopliver-to-be-our-loopliver-btn:active,
#loopliver-to-be-our-loopliver-btn:focus {
    background-color: var(--color);
    color: var(--bg-color);
}

@media (max-width: 599px) {
    #loopliver-to-be-our-loopliver-btn {
        font-size: 22px;
        margin: 32px auto;
    }
}

#loopliver .line {
    max-width: 100%;
    width: var(--line-width);
    height: 9px;
    background: var(--pink);
    margin: var(--line-margin-v) 0;
}

#loopliver-second-row {
    color: #FFF;
    font-size: 35px;
    font-weight: bold;
    max-width: 1297px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#loopliver-second-row-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

#loopliver-second-row-content>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

#loopliver-second-row-content>div>img {
    height: 97px;
    width: 64px;
}

@media (max-width: 1328px) {
    #loopliver-second-row {
        --line-width: 100%;
    }
}

@media (max-width: 1296px) {
    #loopliver-second-row-content {
        justify-content: start;
    }

    #loopliver-second-row-content>div {
        --col-per-row: 6;
        width: calc(100% / var(--col-per-row));
    }
}

@media (max-width: 1039px) {
    #loopliver-second-row-content>div {
        --col-per-row: 5;
    }
}

@media (max-width: 915px) {
    #loopliver-second-row-content>div {
        --col-per-row: 4;
    }
}

@media (max-width: 819px) {
    #loopliver-second-row-content>div {
        --col-per-row: 3;
    }
}

@media (max-width: 599px) {
    #loopliver-second-row {
        font-size: 28px;
    }

    #loopliver-second-row-content>div>img {
        height: 77px;
    }
}

@media (max-width: 495px) {
    #loopliver-second-row-content>div {
        --col-per-row: 2;
    }
}

@media (max-width: 345px) {
    #loopliver-second-row-content>div {
        --col-per-row: 1;
    }
}

#loopliver-third-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #FFF;
    font-weight: bold;
    padding: 0 1rem;
}

#loopliver-third-row-after-created-channel-successfully {
    font-size: 35px;
    text-align: center;
}


#loopliver-third-row-you-will-get {
    font-size: 50px;
    color: var(--pink);
}

#loopliver-third-row>.line {
    background-color: #FFF;
    width: 176px;
    height: 7px;
    margin: 20px 0;
}

#loopliver-third-row-content {
    font-size: 25px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1265px;
    flex-wrap: wrap;
    margin-top: 36px;
    /* margin: 60px auto; */
}

#loopliver-third-row-content>div {
    /* width: 184px; */
    width: 192px;
    margin: 12px 0;
    /* margin-top: 61px; */
}

#loopliver-third-row-content>div>div {
    padding-right: 1rem;
}

#loopliver-third-row-content img {
    /* border: 3px #D60084 solid;
    border-radius: 10px; */
    width: 180px;
    margin-bottom: 28px;
}

@media (max-width: 1264px) {
    #loopliver-third-row-content {
        justify-content: left;
    }

    #loopliver-third-row-content>div {
        --width: 20%;
        width: var(--width);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #loopliver-third-row-content>div>div {
        padding: 0 6px;
        text-align: center;
    }
}

@media (max-width: 1019px) {
    #loopliver-third-row-content>div {
        --width: 25%;
    }
}

@media (max-width: 839px) {
    #loopliver-third-row-content>div {
        --width: calc(100% / 3);
    }
}

@media (max-width: 649px) {
    #loopliver-third-row-content>div {
        --width: 50%;
    }
}

@media (max-width: 427px) {
    #loopliver-third-row-content>div {
        --width: 100%;
    }
}

#loopliver-forth-row {
    /* flex-direction: column; */
    /* align-items: center; */
    color: #FFF;
    font-size: 27px;
    font-weight: medium;
    padding: 0 1rem;
    width: 1300px;
    margin: 68px auto;
}

#loopliver-forth-row-title {
    font-weight: bold;
    font-size: 45px;
    margin-bottom: var(--line-margin-v);
}

#loopliver-forth-row-content {
    display: flex;
}

#loopliver-forth-row-left>.line {
    margin-top: 0;
}

#loopliver-forth-row-left-content>div {
    display: flex;
    align-items: center;
    margin-bottom: 34px;
    /* --width: 100%; */
}

#loopliver-forth-row-left-content>div>img {
    width: 96px;
    margin-right: 22px;
}

#loopliver-forth-row-left-content>div>div {
    flex: 1;
}

#loopliver-forth-row-right {
    margin-left: 185px;
}

#loopliver-forth-row-right-crop-img {
    display: none;
}

@media (max-width: 1267px) {
    #loopliver-forth-row {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #loopliver-forth-row-title {
        width: var(--line-width);
    }

    #loopliver-forth-row-content {
        flex-direction: column;
        align-items: center;
    }

    #loopliver-forth-row-right {
        margin-left: 270px;
    }
}

/* 
@media (max-width: 824px) {
    #loopliver-forth-row-right {
        margin-left: 0;
    }
} */

@media (max-width: 559px) {
    #loopliver-forth-row {
        --line-width: 100%;
    }
}

@media (max-width: 555px) {
    #loopliver-forth-row-content {
        width: 100%;
    }

    #loopliver-forth-row-right-ori-img {
        display: none;
    }

    #loopliver-forth-row-right {
        margin-left: auto;
    }

    #loopliver-forth-row-right-crop-img {
        display: unset;
        width: 100%;
    }
}

/* #loopliver } */

#lets-get-start {
    /* top: 2438px; */
    /* height: 371px; */
    background: transparent linear-gradient(160deg, #21273E 0%, #1C2858 100%) 0% 0% no-repeat padding-box;
    /* background: transparent linear-gradient(111deg, #391BFD 0%, #942FA7 70%, #5D2C9B 100%) 0% 0% no-repeat padding-box; */
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #FFF;
    --scale: 1;
    --first-row-font-size: 72px;
    --second-row-font-size: 48px;
    transition: background .3s ease-in-out;
}

#lets-get-start>div:nth-child(1) {
    padding-top: 87px;
    font-weight: bold;
    font-size: var(--first-row-font-size);
}

#lets-get-start>div:nth-child(2) {
    margin-top: 25px;
    font-weight: 400;
    font-size: var(--second-row-font-size);
    font-family: Sabon;
    margin-bottom: 95px;
}

@media (max-width: 580px) {
    #lets-get-start>div:nth-child(1) {
        padding-top: 0px;
        font-size: calc(var(--first-row-font-size) * var(--scale));
    }

    #lets-get-start>div:nth-child(2) {
        font-size: calc(var(--second-row-font-size) * var(--scale));
    }
}

#recruitment {
    /* height: 1319px; */
    width: 100%;
    background: transparent linear-gradient(91deg, #21273E 0%, #1C2858 100%) 0% 0% no-repeat padding-box;
    --content-max-width: 1320px;
    color: #FFF;
    padding-bottom: 85px;
}

#recruitment>div {
    width: 100%;
    max-width: var(--content-max-width);
    padding: 0 1rem;
}

#recruitment>div {
    display: flex;
}

#recruitment-reg-row {
    justify-content: space-between;
    margin: -85px auto 0 auto;
}

#recruitment-reg-row>a {
    display: flex;
    flex-direction: column;
    flex: 1;
    --col-img-width: 364px
}

#recruitment-reg-row .col-img {
    /* height: 537px;
    width: var(--col-img-width); */
    max-width: var(--col-img-width);
    position: relative;
    /* width: 100%; */
}

#recruitment-reg-row .col-img>img {
    width: 100%;
}

#recruitment-reg-row .col-img>.overlay {
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#recruitment-reg-row .col-img>.overlay,
#recruitment-reg-row .col-img>.overlay-text-container {
    transition: all .25s ease-out;
    background: transparent;
    position: absolute;
    color: #FFF;
}

#recruitment-reg-row>a:hover .overlay {
    background: linear-gradient(180deg, #5E26AF 0%, #3A1BFD 100%);
    /* opacity: .85; */
}

#recruitment-reg-row .col-img>.overlay-text-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* left: 50%; */
    top: 0;
    width: 100%;
    height: 100%;
    font-weight: bold;
    font-size: 24px;
    font-family: 'Helvetica Neue';
    /* margin-left: 3.5px; */
    /* display: none; */
    /* don't do this first!!!!!!!!!!!!!!!!!!!! */
}

#recruitment-reg-row .col-img>.overlay-text-container>.overlay-text {
    transform: scale(var(--scale));
    transform-origin: center;
    height: 53px;
    width: 227px;
    border: 2px #FFF solid;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .25s ease-out;
    /* bottom: calc(276.96px * var(--scale)); */

}

/* #recruitment-reg-row>a:active .overlay-text-container>.overlay-text, */
#recruitment-reg-row>a:hover .overlay-text-container>.overlay-text {
    border-width: 6px;
}

/*
#recruitment-reg-row .col-img:before {
    content: '';
    display: block;
    position: relative;
    height: 100%;
    width: var(--col-img-width);
    transition: all 0.5s ease-out;
    background: linear-gradient(180deg, #5E26AF 0%, #3A1BFD 100%);
    opacity: 0;
    mix-blend-mode: multiply;
}

#recruitment-reg-row>a:hover .col-img:before {
    opacity: 1;
}
*/

#recruitment-reg-row>a.kol {
    text-align: left;
}

/* #recruitment-reg-row>a.kol>.col-img {
    background: url('looplive/Component%201%20–%201.jpg') 0 0 no-repeat;
} */

#recruitment-reg-row>a.merchant {
    text-align: right;
    align-items: flex-end;
}

/* #recruitment-reg-row>a.merchant>.col-img {
    background: url('looplive/Component%202%20–%201.jpg') right 0 no-repeat;
    align-self: flex-end;
} */

#recruitment-reg-row .col-text {
    --top: 40px;
    margin-top: var(--top);
    padding-top: var(--top);
    border-top: 2px #FFF solid;
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0px;
    color: #E8E8E8;
}

#recruitment-live-in-loop-container {
    margin-top: 172px;
    display: flex;
    justify-content: center;
    --scale: 1;
    transform: scale(var(--scale));
}

#recruitment-live-in-loop {
    --size: 274px;
    width: var(--size);
    height: var(--size);
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-weight: 100;
    font-size: 47px;
    letter-spacing: 9.4px;
    align-items: center;
}

#recruitment-live-in-loop>div {
    flex: 1;
    display: flex;
    align-items: center;
}

@media (max-width: 1087px) {
    body {
        --lets-get-start-padding-top: 38.49px;
    }

    #lets-get-start {
        background: transparent linear-gradient(91deg, #21273E 0%, #1C2858 100%) 0% 0% no-repeat padding-box;
        height: unset;
        padding-top: var(--lets-get-start-padding-top);
    }

    #lets-get-start>div:nth-child(2) {
        margin-bottom: 0;
    }

    #recruitment-reg-row {
        /* flex-direction: column; */
        flex-wrap: wrap;
        /* align-items: center; */
        margin-top: 0;
    }

    /* #recruitment-reg-row>* {
        margin-bottom: var(--lets-get-start-padding-top);
    } */

    #recruitment-live-in-loop-container {
        order: -1;
        margin: var(--lets-get-start-padding-top) 0;
        width: 100%;
        /* flex: 1; */
    }

    #recruitment-reg-row>a {
        flex: unset;
        width: 48%;
    }

    #recruitment-reg-row .col-text {
        --top: 25px;
    }
}

@media (max-width: 470px) {
    #recruitment-live-in-loop-container {
        margin: 0;
    }
}

#recruitment-offer-to-kol-row {
    text-align: center;
    font-style: italic;
    font-weight: normal;
    font-size: 43px;
    font-family: Sabon;
    letter-spacing: 2.19px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 63px auto;
}

@media (max-width: 363px) {
    #recruitment-offer-to-kol-row {
        font-size: 32px;
    }
}

#recruitment-offer-to-kol-content-container {
    margin: 0 auto;
}

#recruitment-offer-to-kol-content-row {
    margin: 0 auto;
    text-align: center;
}

.recruitment-offer-to-kol-content-col {
    /* flex: 1; */
    /* display: flex!important; */
    height: 425px !important;
}

.recruitment-offer-to-kol-content-col-data {
    --top: 51px;
    margin-top: var(--top);
    border: 1px solid #FFFFFF;
    border-top: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

@media (max-width: 1319px) {
    #recruitment-offer-to-kol-content-row {
        max-width: unset !important;
        width: 236px !important;

    }
}

@media (min-width: 1320px) {
    #recruitment-offer-to-kol-content-row {
        pointer-events: none;
    }

    #recruitment-offer-to-kol-content-row>.slick-list {
        overflow: unset;
        width: calc(var(--content-max-width) - 2rem) !important;
    }

    .recruitment-offer-to-kol-content-col.slick-cloned,
    #recruitment-offer-to-kol-content-row>.slick-dots,
    #recruitment-offer-to-kol-content-row>.slick-arrow {
        display: none !important;
    }

    #recruitment-offer-to-kol-content-row>.slick-list>.slick-track {
        display: flex !important;
        justify-content: center !important;
        transform: unset !important;
        width: 100% !important;
    }

    .recruitment-offer-to-kol-content-col:not(:nth-child(6)) {
        margin-right: 19.68px;
    }
}

.recruitment-offer-to-kol-content-col-data>.head {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: calc(var(--top) * -1);
    margin-bottom: 23.66px;
}

.recruitment-offer-to-kol-content-col-data>.head>img {
    margin: 0 20px;
    height: 103px;
}

.recruitment-offer-to-kol-content-col-data>.head>div:not(:nth-child(2)) {
    height: 1px;
    background-color: #FFF;
    flex: 1;
}

.recruitment-offer-to-kol-content-col-data>.num {
    font-style: italic;
    font-weight: 400;
    font-size: 43px;
    font-family: Sabon;
    letter-spacing: 2.19px;
    border-bottom: 2px #FFF solid;
    margin: 15.14px auto;
    padding-bottom: 15.14px;
}

.recruitment-offer-to-kol-content-col-data>.desc {
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 0.92px;
}

.recruitment-offer-to-kol-content-col-data>.desc>.bold {
    font-size: 20px;
    letter-spacing: 1.02px;
    font-weight: bold;
}


#to-be-a-live-streamer {
    background: #F5F5F5;
    --color: #1F325C;
    color: var(--color);
    --pink: #E50695;
    /* --width: 800px; */
    --width: 1256px;
    --margin-v: 88.66px;
}

#to-be-a-live-streamer-first-row {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 38px;
    width: var(--width);
    /* margin-top: var(--margin-v); */
    margin: var(--margin-v) auto;
    color: #626262;
    --welcome-height: 60px;
    --first-row-div-width: 50%;
}

#to-be-a-live-streamer-first-row>div {
    width: var(--first-row-div-width);
}

#to-be-a-live-streamer-welcome {
    font-size: 58px;
    color: var(--pink);
    height: var(--welcome-height);
    line-height: 100%;
}

#to-be-a-live-streamer-professional-or-amateur {
    font-size: 57px;
    color: #15172D;
    display: flex;
    flex-wrap: wrap;
}

#to-be-a-live-streamer-welcome-or {
    color: #85879A;
}

#to-be-a-live-streamer-use-your-strengths {
    margin-top: 1.5rem;
}

#to-be-a-live-streamer-register-column {
    margin-top: var(--welcome-height);
    display: flex;
    justify-content: end;
    /* display: flex;
    flex-direction: column;
    align-items: end;; */
}

#to-be-a-live-streamer-register-column-content {
    text-align: center;
}

#to-be-a-live-streamer-register-now {
    background-color: var(--pink);
    --alt-color: #FFF;
    color: var(--alt-color);
    text-align: center;
    font-size: 43px;
    width: 100%;
    max-width: 440px;
    line-height: 4.875rem;
    display: block;
    transition: all .3s ease-in-out;
}

#to-be-a-live-streamer-register-now:hover {
    background-color: var(--alt-color);
    color: var(--pink);
}

#to-be-a-live-streamer-register-now:active {
    opacity: .85;
}

#to-be-a-live-streamer-to-be-our-loopliver {
    margin-top: 1.25rem;
}

@media (max-width: 1279px) {
    #to-be-a-live-streamer {
        --width: 100%;
        --margin-h: 1rem;
        padding: 0 var(--margin-h);
    }

    #to-be-a-live-streamer-first-row {
        flex-wrap: wrap;
        --first-row-div-width: 100%;
    }

    #to-be-a-live-streamer-register-column {
        justify-content: unset;
        margin-top: 1.5rem;
    }

    #to-be-a-live-streamer-register-column-content {
        display: flex;
        align-items: center;
        width: 100%;
    }

    #to-be-a-live-streamer-to-be-our-loopliver {
        margin-top: 0;
        margin-left: var(--margin-h);
    }
}

@media (max-width: 869px) {
    #to-be-a-live-streamer-welcome {
        font-size: 43px;
    }

    #to-be-a-live-streamer-professional-or-amateur {
        font-size: 40px;
    }

    #to-be-a-live-streamer-first-row {
        font-size: 24px;
    }

    #to-be-a-live-streamer-register-column-content {
        flex-direction: column;
    }

    #to-be-a-live-streamer-to-be-our-loopliver {
        margin-top: 1.5rem;
        margin-left: 0;
    }

    /* #to-be-a-live-streamer-register-column-content {
        text-align: left;
    } */
}

#to-be-a-live-streamer-center-or-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: var(--width);
    margin: 0 auto;
    font-weight: bold;
    font-size: 30px;
    --color: #909090;
    color: var(--color);
    text-transform: uppercase;
}

#to-be-a-live-streamer-center-or-row>div:not(:nth-child(2)) {
    height: 1px;
    flex: 1;
    background-color: var(--color);
}

#to-be-a-live-streamer-center-or-row>div:nth-child(2) {
    padding: 0 3.5rem;
}

#to-be-a-live-streamer-form {
    width: var(--width);
    margin: 0 auto;
    --font-family: Sabon;
    /* font-family: var(--font-family); */
}

#to-be-a-live-streamer-title {
    /* text-align: center; */
    /* font-weight: 600; */
    font-size: 50px;
    margin: 5rem 0;
    /* min-height: 275px; */
    /* font-family: var(--font-family); */
    letter-spacing: 2.55px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    color: #231815;
}

#to-be-a-live-streamer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* font-family: var(--font-family); */
}


#to-be-a-live-streamer-content>.cell {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--margin-v);
    width: calc(50% - 68.39px);
}

#to-be-a-live-streamer-content>.cell:last-child,
#to-be-a-live-streamer-content>#streamer-tell-us-cell {
    width: 100%;
}

@media (max-width: 839px) {
    #to-be-a-live-streamer-title {
        font-size: 40px;
        /* font-size: 30px; */
        font-weight: bold;
        margin: 4rem 0;
        /* min-height: 97px; */
    }

    #to-be-a-live-streamer-form {
        width: 100%;
    }

    #to-be-a-live-streamer-content {
        justify-content: center;
        align-items: center;
    }

    #to-be-a-live-streamer-content>.cell:last-child,
    #to-be-a-live-streamer-content>#streamer-tell-us-cell,
    #to-be-a-live-streamer-content>.cell {
        /* width: calc(100% - 3rem); */
        width: 100%;
        margin-bottom: 30px;
    }
}

@media (max-width: 374px) {
    #to-be-a-live-streamer-title {
        font-size: 27px;
    }
}

#to-be-a-live-streamer-content>.cell:last-child {
    align-items: center;
}

#to-be-a-live-streamer-content label {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.36px;
    /* font-family: var(--font-family); */
}

#to-be-a-live-streamer-content input:not([type="submit"]) {
    border-bottom: 1px var(--color) solid;
    margin: 1rem 0;
    padding-bottom: .5rem;
    width: 100%;
    font-family: var(--font-family);
    background-color: transparent;
}

#to-be-a-live-streamer-content input[type="submit"] {
    --color: #3A0C4E;
    --alt-color: #FFF;
    border: 1px solid var(--color);
    color: var(--color);
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    font-family: var(--font-family);
    padding: 3px 18px;
    letter-spacing: 0.92px;
    background-color: var(--alt-color);
    border-radius: 0;
    transition: all .3s ease-in-out;
}

#to-be-a-live-streamer-content input[type="submit"]:hover {
    background-color: var(--color);
    color: var(--alt-color);
}

#to-be-a-live-streamer-content input[type="submit"]:active {
    opacity: .85;
}



#merchant {
    /* margin-top: 23px; */
    /* font-family: Barlow; */
    --header-padding-bottom: 128px;
}

#merchant-header {
    --item-margin-top: 56px;
    width: 100%;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    text-transform: capitalize;
    padding-bottom: var(--header-padding-bottom);
}

#merchant-header-main {
    --img-margin-left-subtract: 100px;
    /* margin-left: calc(var(--img-margin-left-subtract) / 2); */
    --header-margin-top: 59px;
    --header-title-margin-top: 64px;
    margin-top: var(--header-margin-top);
    padding: 0 1rem;
    width: 100%;
    max-width: 1534px;
    /* max-width: 1483px;
    min-width: 1320px;
    width: 100%; */
    /* display: flex;
    --highlight-color: #D0197A; */

    /* align-items: center; */
}

#merchant-header-text {
    width: 100%;
    --scale: 1;
}

#merchant-header-title {
    margin-top: var(--header-title-margin-top);
    text-align: left;
    line-height: 60px;
    font-size: 58px;
    font-weight: normal;
    letter-spacing: 0px;
    color: #E50695;
    margin-bottom: 38px;
}

#merchant-header-sub-title {
    font-size: 50px;
    color: #848484;
    margin-bottom: 48px;
    max-width: 1100px;
}


@media (max-width: 599px) {
    #merchant-header-main {
        --header-margin-top: 24px;
        --header-title-margin-top: 0;
    }

    #merchant-header-title {
        font-weight: bold;
        font-size: 42px;
        margin-bottom: 6px;
    }

    #merchant-header-sub-title {
        font-size: 30px;
        font-weight: bold;
    }
}

#merchant-header-img-container {
    display: flex;
}


#merchant-header-img-right {
    margin-top: -168px;
    --margin-left: -252px;
    margin-left: var(--margin-left);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#merchant-header-img-right-crop-img {
    display: none;
}

#merchant-header-img-right>a {
    --bg-color: #E40994;
    --color: #FFF;
    background-color: var(--bg-color);
    color: var(--color);
    box-shadow: 3px 3px 8px #00000069;
    border: 1px solid #E40995;
    padding: 15px 68px;
    font-size: 30px;
    transition: all .25s ease-out;
    margin-left: 300px;
    margin-top: -50px;
}


#merchant-header-img-right>a:hover,
#merchant-header-img-right>a:active,
#merchant-header-img-right>a:focus {
    background-color: var(--color);
    color: var(--bg-color);
}

@media (max-width: 1534px) {
    #merchant-header-img-container {
        justify-content: center;
        flex-direction: column;
    }

    #merchant-header-img-left {
        display: flex;
        justify-content: center;
    }

    #merchant-header-img-right {
        margin-top: 50px;
    }
}

@media (max-width: 831px) {

    #merchant-header-img-left,
    #merchant-header-img-left>img {
        width: 100%;
    }
}

@media (max-width: 744px) {
    #merchant-header-img-right {
        --margin-left: 0;
    }

    #merchant-header-img-right-ori-img {
        display: none;
    }

    #merchant-header-img-right-crop-img {
        display: unset;
        width: 100%;
    }

    #merchant-header-img-right>a {
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
    }
}

/* 
@media (max-width: 1534px) {
    #merchant-header-sub-title {
        max-width: unset;
    }
    #merchant-header-img-container {
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
    }
    #merchant-header-img-container > div {
        margin: 0 auto;
    }
    #merchant-header-img-left >img:first-child  {
        margin-left: -162px;
    }
    #merchant-header-img-container > div#merchant-header-img-right {
        margin-top: 50px;
    }
    #merchant-header-img-right > img {
        margin-left: -258px;
    }
    #merchant-header-img-right > a {
        margin-left: auto;
        margin-right: auto;
    }
} */

/* @media (max-width: 824px) {
    #merchant-header-img-left {
        transform: scale(var(--scale));
        transform-origin: center top;
    }
}

@media (max-width: 717px) {
    #merchant-header-img-right > img {
        transform: scale(var(--scale));
        transform-origin: center top;
    }
} */

/* 
@media (min-width: 1533px) {
    #merchant-header-main {
        margin-bottom: var(--header-margin-top);
    }
} */

/* @media (max-width: 1532px) {
    #merchant-header-main {
        margin-top: 0;
        flex-direction: column;
        align-items: center;
        margin-left: 0;
    }

    #merchant-header-title-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #merchant-header-img-container {
        margin-top: var(--header-margin-top);
        margin-bottom: var(--header-margin-top);
    }
} */

/*
@media (max-width: 891px) {
    #merchant-header-title {
        width: 100%;
    }
}

@media (max-width: 525px) {
    #merchant-header-title {
        transform: scale(var(--scale));
        transform-origin: left center;
        margin-top: calc(var(--header-title-margin-top) * var(--scale));
    }
}
*/

/* #trend { */
#trend {
    background-color: #F5F5F5;
    width: 100%;
    font-weight: bold;
}

#trend-content {
    width: 100%;
    max-width: 1272px;
    margin: 0 auto;
}

#trend-title {
    font-size: 50px;
    color: #2A005F;
    margin-top: 114px;
}

#trend-sub-title {
    font-size: 40px;
    color: #484848;
    margin-top: 12px;
    margin-bottom: 130px;
}

#trend-cells {
    display: flex;
    justify-content: space-between;
}

.trend-cell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 38px;
}

.trend-cell-title {
    font-size: 30px;
    color: #E50695;
    margin-top: 38px;
}

.trend-cell-content>div {
    font-size: 20px;
    color: #9A9A9A;
    margin-top: 48px;
}

/* #trend-cell-2 .trend-cell-content > div {
    margin-top: 36px;
} */

#trend-cells>.trend-cell:not(#trend-cell-2) {
    margin-right: 72px;
}

#trend-cell-0 {
    width: 220px;
}

#trend-cell-1 {
    width: 423px;
}

#trend-cell-2>.trend-cell-body>.trend-cell-content>div::first-line {
    color: #000;
}

#trend-cell-2>.trend-cell-body>.trend-cell-content {
    display: flex;
    flex-wrap: wrap;
}

#trend-cell-2>.trend-cell-body>.trend-cell-content>div {
    width: 189px;
    margin-right: 82px;
}

#trend-cells>.trend-cell:not(#trend-cell-2)>img {
    width: 220px;
    height: 440px;
    margin-bottom: 87px;
}

#trend-cell-2>img {
    width: 658px;
}

@media (max-width: 1303px) {
    #trend-content {
        width: 820px;
    }

    #trend-cells {
        flex-wrap: wrap;
    }

    #trend-cells>.trend-cell {
        width: 100%;
        margin-left: auto;
        margin-right: auto !important;
    }

    #trend-cells>.trend-cell:not(#trend-cell-2) {
        flex-direction: unset;
    }

    #trend-cell-2 {
        align-items: center;
    }

    #trend-cells>.trend-cell:not(#trend-cell-2)>.trend-cell-body {
        width: 50%;
    }

    #trend-cell-2>.trend-cell-body>.trend-cell-content>div {
        width: calc(50% - 41px);
    }

    #trend-cell-2>.trend-cell-body>.trend-cell-content>div:nth-child(2n) {
        margin-right: unset;
    }
}

@media (max-width: 851px) {
    #trend-content {
        width: 100%;
        padding: 0 1rem;
    }

    #trend-cell-2>img {
        margin-top: .5rem;
        width: 100%;
    }
}

@media (max-width: 599px) {
    #trend-title {
        margin-top: 38px;
        font-size: 29px;
    }

    #trend-sub-title {
        margin-top: 38px;
        font-size: 23px;
        margin-top: 7px;
        margin-bottom: 0;
    }

    #trend-cells>.trend-cell:not(#trend-cell-2)>.trend-cell-body {
        padding-right: 1rem;
    }

    #trend-cells>.trend-cell:not(#trend-cell-2)>img {
        margin-bottom: 1rem;
    }

    #trend .trend-cell-body>img {
        width: 75px;
    }

    .trend-cell-content>div {
        margin-top: 24px;
    }

    .trend-cell-title {
        font-size: 24px;
        margin-top: 30px;
    }
}

@media (max-width: 429px) {
    #trend-cells>.trend-cell {
        flex-direction: column !important;
        align-items: center;
        margin-top: 1rem;
    }

    #trend-cells>.trend-cell:not(#trend-cell-2)>.trend-cell-body {
        padding-right: unset;
        margin-bottom: 2rem;
    }

    #trend-cells>.trend-cell>.trend-cell-body {
        width: 100% !important;
    }

    #trend-cells>.trend-cell:not(#trend-cell-2)>img {
        margin-bottom: 0;
    }
}

/* #trend } */

/* #brand-promotion { */
#brand-promotion {
    background-color: #FFF;
    box-shadow: 0px -13px 15px #00000029;
    width: 100%;
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
}

#brand-promotion-content {
    width: 100%;
    max-width: 1272px;
    margin: 0 auto;
}

#brand-promotion-title {
    font-size: 43px;
    font-weight: normal;
    color: #E50995;
    margin: 95px auto 0 auto;
}

#brand-promotion-sub-title {
    font-size: 30px;
    font-weight: medium;
    color: #707070;
    margin: 24px auto;
}

#brand-promotion-desc {
    background-image: url(looplive/brand-promotion-desc.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 1272px;
    height: 420px;
}

#brand-promotion-desc-img {
    display: none;
}

#brand-promotion-desc-text-bg {
    background: transparent linear-gradient(90deg, #E5099500 0%, #E50995 47%, #E50995 100%) 0% 0% no-repeat padding-box;
    width: 932px;
    height: 100%;
    float: right;
}

#brand-promotion-desc-text {
    width: 518px;
    color: #FFF;
    font-weight: bold;
    font-size: 25px;
    line-height: 45px;
    margin-top: 74px;
    margin-right: 54px;
    float: right;
}

#brand-promotion-cells {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    justify-content: space-evenly;
    width: 100%;
    margin-bottom: 122px;
}

.brand-promotion-cell {
    width: 380px;
    margin-top: 50px;
}

.brand-promotion-cell>div {
    margin-top: 18px;
    font-size: 30px;
    font-weight: bold;
    color: #848484;
}

@media (max-width: 1303px) {
    #brand-promotion-content {
        width: calc(100% - 2rem);
    }

    #brand-promotion-title {
        margin-top: 50px;
        font-size: 25px;
    }

    #brand-promotion-sub-title {
        margin: 14px auto;
        font-size: 18px;
    }

    #brand-promotion-desc {
        width: 100%;
        height: unset;
        background: unset;
    }

    #brand-promotion-desc-img {
        display: unset;
        width: 100%;
    }

    #brand-promotion-desc-text,
    #brand-promotion-desc-text-bg {
        float: unset;
        width: 100%;
        background: transparent;
        height: unset;
    }

    #brand-promotion-desc-text {
        font-size: 20px;
        font-weight: bold;
        color: #7B7B7B;
        margin-top: 26px;
    }

    #brand-promotion-cells {
        margin-bottom: 40px;
    }
}

@media (max-width: 1204px) {
    .brand-promotion-cell {
        width: calc(50% - .5rem);
    }

    .brand-promotion-cell>img {
        width: 100%;
    }
}

@media (max-width: 599px) {
    .brand-promotion-cell {
        width: 100%;
    }
}

/* #brand-promotion } */

#apps {
    /* top: 4527px; */
    /* height: 801px; */
    background: #D0197A;
    /* background: #D0197A 0% 0% no-repeat padding-box; */
    box-shadow: 0px -13px 15px #00000029;
    /* width:100vw; */
}

#apps-video-row {
    margin-top: calc(var(--video-height) / -2 * var(--video-row-scale));

}

#apps-video-row:after {
    content: '';
    position: absolute;
    bottom: -51px;
    height: 10px;
    width: calc(100% * var(--video-row-scale));
    max-width: 80vw;
    background-color: #FFF;
    border-radius: 14px;
    left: 50%;
    transform: translateX(-50%);
}

#apps-video-row>.video-row-text {
    font-weight: 900;
    font-size: 50px;
    padding-top: calc(var(--video-height) / 2 + 40px);
    letter-spacing: 5px;
}

#apps-video-row>.video-row-text>div:nth-child(2) {
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.92px;
}

#apps-join-as-row {
    /* padding-top: calc(var(--video-height) / 2 * var(--video-row-scale)); */
    padding-top: calc((var(--video-height) / 2 + 66.65px) * var(--video-row-scale));
    padding-bottom: 127.86px;
}


#get-in-touch {
    padding-bottom: 100px;
    --font-family: Sabon;
    font-family: var(--font-family);
    --bg-color: #252741;
    --color: #FFF;
    background: var(--bg-color);
    color: var(--color);
}

#get-in-touch-header {
    text-align: center;
    font-weight: normal;
    font-family: var(--font-family);
    --font-size: 50px;
    --line-height: 198px;
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: 2.55px;
}

#get-in-touch label {
    font-weight: bold;
    font-size: 18px;
    margin-top: 30px;
    font-weight: bold;
    font-size: 22px;
    font-family: var(--font-family);
    letter-spacing: 0.44px;
    line-height: 48px;
}

#get-in-touch-form {
    /* width: 850px; */
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

#get-in-touch-content,
#get-in-touch-content>div {
    display: flex;
}

#get-in-touch-content {
    justify-content: space-between;
}

#get-in-touch-content>div {
    flex-direction: column;
    width: 100%;
    /* flex: 1; */
    /* --margin: 112.5px; */
}

#get-in-touch-content>div:first-child {
    max-width: 246px;
    /* max-width: 242px; */
    /* margin-right: calc(var(--margin) * var(--scale)); */
}

#get-in-touch-content>div:last-child {
    max-width: 327.48px;
    /* max-width: 331.48px; */
    /* margin-left: calc(var(--margin) * var(--scale)); */
}

#get-in-touch-content>div:first-child>textarea {
    height: auto;
    overflow: hidden;
}

#get-in-touch-content .title {
    font-weight: bold;
    font-size: 22px;
    font-family: var(--font-family);
    letter-spacing: 0.44px;
    border-bottom: 1px solid var(--color);
}

#get-in-touch-contact-us {
    width: 224px;
}

#get-in-touch-leave-your-message {
    width: 250px;
}

#get-in-touch-content input:not([type="submit"]) {
    border-bottom: 1px var(--color) solid;
}

#get-in-touch-content textarea,
#get-in-touch-content input:not([type="submit"]) {
    padding-bottom: .5rem;
    background-color: transparent !important;
    color: var(--color);
    border-radius: 0;
    resize: none;
    font-weight: normal;
    font-size: 16px;
    font-family: var(--font-family);
    letter-spacing: 0.32px;
    /* color: #8E8B90; */
    color: var(--color);
}

#get-in-touch-content textarea {
    height: 150px;
    outline: 0;
    border-width: 0 0 1px;
    padding: 0px;
    background-color: transparent !important;
    color: var(--color);
    border-color: var(--color);
    resize: none;
    border-radius: 0;
}

#get-in-touch-content textarea::-webkit-scrollbar-thumb {
    background-color: var(--color);
}

#get-in-touch-content textarea[readonly],
#get-in-touch-content input[disabled] {
    color: #D3D3D3;
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    font-family: var(--font-family);
    border-width: 0;
    padding: 0px;
    letter-spacing: 0.36px;
    outline: 0;
}

#get-in-touch-content input[type="submit"] {
    padding: 3px 18px;
    --bg-color: #D0197A;
    --border-color: var(--bg-color);
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    font-family: var(--font-family);
    letter-spacing: 0.92px;
    color: var(--color);
    border-radius: 0;
    margin: 25px auto;
    transition: all .3s ease-in-out;
}

#get-in-touch-content input[type="submit"]:hover {
    background-color: var(--color);
    border-color: var(--color);
    color: var(--bg-color);
}

@media (max-width: 889px) {
    #get-in-touch-content {
        flex-direction: column;
        align-items: center;
    }

    #get-in-touch-content>div {
        width: calc(100% - 4rem);
        max-width: unset !important;
    }

    #get-in-touch-content textarea[readonly] {
        height: auto;
        min-height: 68px;
    }
}

@media (max-width: 599px) {
    #get-in-touch-header {
        font-size: calc(var(--font-size) * var(--scale));
        line-height: calc(var(--line-height) * var(--scale));
    }

    #get-in-touch-contact-us {
        margin-top: 0 !important;
    }
}

.tutorial {
    display: none;
    --margin-v: 1rem;
    --margin-h: var(--nav-h-padding);
    --font-size: 18px;
    font-size: var(--font-size);
    font-weight: bold;
    user-select: none;
}

.tutorial-name-text {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px#FFF solid;
    justify-content: space-between;
    flex: 1;
    border-radius: 10px;
    padding: 0 1rem;
    margin-right: var(--nav-h-padding);
}

.tutorial-name-text:after {
    content: '▼';
    color: var(--color);
    --font-size: 14px;
    font-size: var(--font-size);
    margin-left: var(--font-size);
}

body.showing-tutorial[data-hash="#looplive-tutorial"] #looplive-tutorial:target,
body.showing-tutorial[data-hash="#kol-tutorial"] #kol-tutorial:target {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 3;
    left: 0;
    top: var(--scrolled-nav-height);
    width: 100vw;
    height: calc(100vh - var(--scrolled-nav-height));
    --bg-color: #000;
    background-color: var(--bg-color);
    color: #FFF;
    overflow: hidden;
}

.tutorial-name-and-close {
    display: flex;
    justify-content: space-between;
    /* padding-right: var(--margin-v) var(--margin-h); */
    padding: var(--margin-v) var(--margin-h);
    background-color: #252741;
    position: relative;
    /* paddin */
}

.tutorial-close {
    cursor: pointer;
}

/* 
.tutorial-name-container {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
    padding-bottom: var(--margin-v);
} */

.tutorial input[type="checkbox"],
.tutorial-name-checkbox:not(:checked)+.tutorial-name-list {
    /* #tutorial-name > input[type="radio"]:not(:checked) + label { */
    display: none;
}

.tutorial-name-list {
    position: absolute;
    top: calc(100% - 1rem);
    width: calc(100% - 106px);
    z-index: 2;
    background-color: #111;
    --border-color: #555;
    border: 1px var(--border-color) solid;
    border-radius: 10px;
    --margin-v: .75rem;
    --margin-h: 1rem;
}

.tutorial-name {
    padding: var(--margin-v) var(--margin-h);
    cursor: pointer;
    display: flex;
    border-bottom: 1px var(--border-color) solid;
}

.tutorial-name:active,
.tutorial-name:focus,
.tutorial-name:hover {
    background-color: #333;
}

.tutorial-name:last-child {
    border-bottom: none;
}

/* .tutorial-name:not(:last-child) {
    padding-bottom: 0;
} */

.tutorial-name-check {
    margin-right: var(--margin-h);
}

.tutorial-name:not(.active) .tutorial-name-check {
    visibility: hidden;
}

/* 
@media (min-width: 470px) {
    #tutorial-name-container {
        justify-content: center;
    }
}

@media (min-width: 530px) {
    #tutorial-name-container {
        padding-left: 48px;
    }
}

#tutorial-name-container>.tutorial-name {
    margin: var(--margin-v) 0 0 var(--margin-h);
}

@media (min-width: 600px) {
    #tutorial-name-container>.tutorial-name {
        flex: 1;
        text-align: center;
    }
}

#tutorial-name-container>.tutorial-name.active {
    font-weight: bold;
} */

.tutorial-video-container {
    flex: 1;
    margin: var(--margin-v) auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.tutorial-video {
    background-color: var(--bg-color);
    /* flex: 1; */
    width: 100vw;
    height: calc(100% - var(--margin-v) * 3);
    top: 50%;
    position: absolute;
    transform: translate(0, -50%);
    /* max-width: 420px;
    max-height: 65vh; */
}

.tutorial-video-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: -50vw;
    top: 0;
    width: 100vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.tutorial.playing .tutorial-video-overlay {
    display: none;
}

.tutorial-video-play-icon {
    width: 96px;
}

/* #tutorial-video-play-icon {
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .75);
    padding: 10px;
} */

/* .tutorial-video-container {
    position: relative;
    width: 50%;
}

.tutorial-video-container>video {
    width: 100%;
}

.tutorial-desc {
    position: absolute;
    background-color: rgba(0, 0, 0, .75);
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
} */


html:not(.scrolled) #back-to-top {
    bottom: -100vh;
}