.header,
.menu-btn-wrp,
.pagetop {
    transform: translateZ(2px);
}

.toggle-menu-wrp.on {
    transform: translateY(0) translateZ(2px);
}

/*common*/
main {
    background-color: #fff;
}

.min {
    font-family: serif !important;
}

.enserif {
    font-family: 'Times New Roman', Times, serif !important;
}

.dash {
    display: inline-block;
    width: 3em;
    height: 0;
    border-bottom: 1px solid;
    margin-right: .5em;
    transform: translateY(-.4em);
}

.spacer {
    position: relative;
    height: 0;
    height: 100vh;
}

.sclstart.sczoom {
    opacity: 0;
    transform: translateX(-1em) scale(.9) !important;
    transition: all 1s ease-out;
}

.sczoomstart {
    opacity: 0;
    transform: scale(1.2) !important;
    transition: all 3s ease-out !important;
}

.sclup.sczoom {
    opacity: 0;
    transform: scale(1.25);
    transition: all 1s;
}

.sclstart.sczoom.on,
.sclup.sczoom.on {
    transform: translateX(0) scale(1) !important;
    opacity: 1;
}

.sclup.scdelay {
    transition: all 1s 1s;
}

.inner {
    padding: 6em 1.5em;
}

.inner880 {
    max-width: 880px;
    margin: 0 auto;
    padding: 6em 1.5em;
}

@media screen and (max-width:767px) {

    .inner,
    .inner880 {
        padding: 3em 1.5em;
    }
}

.en-contents-title {
    font-size: min(2em, 6.5vw)
}


/* shoulder logo */
.shoulder-livingbathroom {
    position: fixed;
    top: 20px;
    left: 1em;
    display: block;
    width: 20%;
    max-width: 300px;
    padding: 1em;
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}

@media screen and (max-width:767px) {
    .shoulder-livingbathroom {
        width: 50%;
        max-width: 300px;
        top: 60px;
        padding-left: 0;
    }
}

.shoulder-livingbathroom.on {
    opacity: 1;
    visibility: visible;
}

/* main bg movie */
.main-bgimg {
    width: 100%;
    height: 100vh;

    position: sticky;
    top: 0;

    opacity: 0;
    overflow: clip;
    z-index: 0;
    transition: opacity 1s ease-out;
}

.main-bgimg.on {
    opacity: 1;
}

.main-bgimg video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*main*/
.scrContents-wrp {
    position: sticky;
    top: 0;
    /* scroll contents height */
    height: 600vh;
}

/* intoroduction contents */
.scrContents {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;

    overflow: clip;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    transition: all 1.5s ease-out;

}

.scrContents-gap {
    height: 15vh;
}

.scrContents.on {
    opacity: 1;
    visibility: visible;
}

/* main1 */
.main-title-wrp {
    padding-top: 5em;
}

.main-title-wrp .title {
    display: inline-block;
    font-family: serif !important;
    font-size: min(3.5em, 6.5vw);
    line-height: 1.8;
    font-weight: 500;
    font-feature-settings: "palt";
    margin-bottom: 1.5em;
    letter-spacing: .05em;
    position: relative;
    z-index: 2;
}

.main-title-wrp .title .block {
    display: block;
}

.main-title-wrp .title .sml {
    display: inline-block;
    font-size: .75em !important;
}

.main-title-wrp .title .sclstart {
    filter: blur(10px);

    will-change: transform;
}

.main-title-wrp .title .sclstart.on {
    filter: blur(.5px);
}

.main-title-wrp .title .title-letter {
    letter-spacing: .2em;
    font-size: 1.05em;
}

/* main2 */
.subtitle-wrp {
    display: flex;
    justify-content: center;
    align-items: center;
}

.subtitle-wrp .subtitle.title-2 {
    width: 100%;
    display: block;

    font-family: serif !important;
    font-size: min(3.2em, 6.5vw);
    font-weight: 500;
    text-align: center;
    font-feature-settings: "palt";
    letter-spacing: .05em;
    margin: .75em 0;
}

.subtitle-wrp .subtitle.title-2 {
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.9);

    will-change: transform;
    transition: all 1.5s ease-out;
}

.subtitle-wrp.on .subtitle.title-2 {
    opacity: 1;
    filter: blur(.5px);
    transform: scale(1);
}

/* main3 living batroom */
.debut-wrp .debut-inner {
    width: 100%;
}

.debut-wrp .lead {
    display: block;
    width: 100%;
    padding: .25em 0;
    font-size: min(1.6em, 4vw);
    font-weight: 300;
    text-align: center;
    filter: blur(10px);
    transform: scale(0.96);

    will-change: transform;
    transition: all 1s ease-out;
}

.debut-wrp .lead.bold {
    font-size: min(2em, 4vw);
    font-weight: 400;
    padding-bottom: 0;
}

.debut-wrp .lead.date {
    font-size: min(2.5em, 4vw);
    padding-bottom: 0;
    letter-spacing: .1em;
}

.debut-wrp .lead.lead-sml {
    font-size: min(1.4em, 3.7vw);
}

.debut-wrp .livingbathroom {
    width: 100%;
    max-width: 1100px;
    margin: 3em auto;
    padding: 1em;

    filter: blur(10px);

    transform: scale(.96);
    transition: all 1s ease-out;
}

.debut-wrp .livingbathroom img {
    width: 100%;
}

.debut-wrp.on .livingbathroom,
.debut-wrp.on .lead {
    filter: blur(0);
    transform: scale(1);
}

.debut-wrp .lead.scroll {
    font-size: min(.8em, 3vw);
    margin-top: 3em;
    position: relative;
    transition: all 1s 1s ease-out;
}

.debut-wrp .lead.scroll::after {
    content: '';
    display: block;
    width: 0;
    height: 2.5em;
    border-left: 1px solid;
    position: absolute;
    bottom: -3em;
    left: 50%;
}

.debut-wrp .lead.scroll::before {
    content: '';
    display: block;
    width: 0;
    height: 1em;
    border-left: 1px solid;
    position: absolute;
    bottom: -3em;
    left: 50%;
    transform: rotate(25deg);
    transform-origin: bottom left;
}

/* intoroduction */
.intoroduction-wrp {
    position: relative;
    z-index: 3;
    width: 100%;
    padding-top: 290vh;
}

.intoroduction-wrp .lead-wrp {
    position: relative;
}

@media screen and (max-width:767px) {

    .intoroduction-wrp,
    .intoroduction-wrp .lead-wrp {
        display: none;
    }
}

.debut-img .lead-wrp-sp {
    display: none;
}

@media screen and (max-width:767px) {
    .debut-img .lead-wrp-sp {
        display: block;
        width: 100%;
        min-height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        padding-top: 90vh;
        will-change: transform;
    }

    .debut-img .lead-wrp-sp .lead {
        display: block;
        width: 100%;
        color: #fff;

        font-family: serif !important;
        font-size: min(1.8em, 5vw);
        font-feature-settings: "palt";
        letter-spacing: .1em;
        line-height: 2.3;
        text-align: center;
        padding-bottom: 4em;
        will-change: transform;
    }
}

.intoroduction-wrp .lead {
    display: block;
    width: 100%;
    color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, .3);

    font-family: serif !important;
    font-size: min(1.8em, 5vw);
    font-feature-settings: "palt";
    letter-spacing: .1em;
    line-height: 2.3;
    text-align: center;
    padding-bottom: 5em;

    will-change: transform;
}

.intoroduction-wrp .lead-gap-sp {
    height: 15vh;
}

.intoroduction-wrp .lead-gap {
    height: 25vh;
}

.debut-img .lead.black {
    color: #121212;
}

.debut-img .lead .logo-white {
    width: 80%;
    max-width: 800px;
    padding: 0;
    margin: 1em auto;
}

.debut-img .keyvisual {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.debut-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width:767px) {

    .debut-img.keyvisual2 {
        display: none;
    }

    .debut-img.keyvisual1 .keyvisual {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow: clip;
    }

    .debut-img .keyvisual img {
        display: block;
        width: auto;
        height: 100%;
        object-fit: unset;
        will-change: transform;
    }
}

/* feature */
.feature-wrp {
    background-color: #f9f9f9;
    position: relative;
    z-index: 3;
}

.feature-wrp .img-box {
    width: 50%;
}

@media screen and (max-width:767px) {
    .feature-wrp .img-box {
        width: 100%;
        order: 2;
    }
}

.feature-wrp .img-box figure {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
}

@media screen and (max-width:767px) {
    .feature-wrp .img-box figure {
        order: 0;
    }
}

.feature-wrp .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.feature-wrp .text-box {
    width: 50%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 5%;
    box-sizing: border-box;
    background-color: #f9f9f9;
}

@media screen and (max-width:767px) {
    .feature-wrp .text-box {
        width: 100%;
        order: 0;
        padding: 10% 5%;
    }
}

.feature-wrp .text-box .title {
    display: block;
    width: 100%;
    font-size: min(2em, 6vw);
    font-weight: 300;
    font-feature-settings: "palt";
    letter-spacing: .1em;
    margin-bottom: 1em;
}

.feature-wrp .text-box .title span {
    display: block;
    letter-spacing: 0;
}

.feature-wrp .text-box .title .en {
    display: block;
    font-size: .6em;
    font-weight: 500;
    margin-bottom: 1em;
    color: var(--main_red);
}

.feature-wrp .text-box .title .min {
    display: block;
    letter-spacing: .05em;
}

.feature-wrp .text-box .feature-thumb-wrp {
    width: 100%;
}

.feature-wrp .text-box .feature-thumb-wrp .img {
    width: 48%;
}

.feature-end-wrp .img-box {
    width: 100%;
}

/* living bathroom with heart */
.livingbathroom-heart-wrp {
    padding-bottom: 5em;
    position: relative;
    z-index: 3;
}

.livingbathroom-heart-wrp .lead {
    font-size: min(1.6em, 5vw);
    margin: 2em auto;
    font-feature-settings: "palt";
    letter-spacing: .1em;
}

.livingbathroom-heart-wrp .title {
    font-size: min(1.3em, 4vw);
    font-weight: 500;
    text-indent: .5em;
}

.livingbathroom-heart {
    width: 70%;
    max-width: 400px;
    margin: 1em auto;
}

/* belief */
.belief-wrp {
    background-color: #f9f9f9;
    position: relative;
    z-index: 3;
}

.belief-wrp .inner {
    max-width: 1440px;
    padding-bottom: 1em;
}

.belief-wrp .text-box {
    width: 55%;
    padding: 2em;
}

.belief-wrp .en-contents-title.our-belief {
    margin-top: 3em;
}

@media screen and (max-width:767px) {
    .belief-wrp .inner {
        text-align: center;
        justify-content: center;
    }

    .belief-wrp .en-contents-title {
        text-align: center;
    }

    .belief-wrp .text-box {
        display: contents;
    }
}

.belief-wrp .tagline {
    font-size: min(1.8em, 5.5vw);
    font-weight: 300;
    margin: 3em auto 1.5em;
    white-space: nowrap;
}

@media screen and (max-width:767px) {
    .belief-wrp .tagline {
        margin: 2em auto 1em;
        white-space: unset;
    }
}

.belief-wrp .tagline .living {
    font-size: 1.15em;
    letter-spacing: .1em;
    font-weight: 400;
    transform: translateX(.5em);
}

.belief-wrp .tagline .iblock {
    opacity: 0;
    transform: translateX(-25%);
    transition: all 1s;
}

.belief-wrp.on .tagline .iblock {
    opacity: 1;
    transform: translateX(0);
}

@media screen and (max-width:767px) {
    .belief-wrp .tagline {
        width: 100%;
        text-align: center;
        margin: 1em auto 2em;
    }
}

.belief-wrp .lead {
    font-size: min(1.1em, 4vw);
    line-height: 2;
    padding-bottom: 1em;
    opacity: 0;
    transform: translateX(-10%);
    transition: all 1s .5s;
}

.belief-wrp.on .lead {
    transform: translateX(0%);
    opacity: 1;
}

@media screen and (max-width:767px) {
    .belief-wrp .lead {
        width: 100%;
        text-align: center;
    }

    .belief-wrp .lead.sp-order {
        width: 100%;
        text-align: center;
        order: 2;
    }
}

.belief-wrp .img-box {
    width: 45%;
    position: relative;
}

.belief-wrp .img-box .img-box-inner {
    width: 100%;
    height: 100vh;
    max-height: 500px;
    position: relative;
}


@media screen and (max-width:767px) {
    .belief-wrp .img-box {
        width: 100%;
        height: 60vw;
        margin-bottom: 2em;
        order: 1;
    }

    .belief-wrp .img-box .img-box-inner {
        width: 100%;
        height: 60vw;
        max-height: auto;
        position: relative;
    }
}


.belief-wrp .circle {
    position: absolute;
    opacity: 0;
    transition: all 1s;
}

.belief-wrp .circle.on {
    opacity: 1;
}


.belief-wrp .circle-red {
    height: 0;
    border-radius: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 20%, rgba(252, 70, 70, 0.4) 100%);
}


.belief-wrp .circle.kitchen {
    width: 30%;
    padding-bottom: 30%;
    top: 5%;
    left: 5%;
    transform: translate(-50%, -50%);
}

.belief-wrp .circle.kitchen.on {
    transform: translate(0%, 0%);
}


.belief-wrp .circle.bath {
    width: 20%;
    padding-bottom: 20%;
    bottom: -1%;
    left: 52%;
    transform: translate(50%, 50%);
}

.belief-wrp .circle.bath.on {
    transform: translate(0%, 0%);
}


.belief-wrp .circle.wash {
    width: 20%;
    padding-bottom: 20%;
    bottom: 15%;
    left: 65%;
    transform: translate(50%, 50%);
}

.belief-wrp .circle.wash.on {
    transform: translate(0%, 0%);
}

.belief-wrp .circle-center {
    width: 55%;
    height: 0;
    padding-bottom: 55%;
    border-radius: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 20%, rgba(191, 185, 204, 0.42) 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.1);
}

.belief-wrp .circle-center.on {
    transform: translate(-50%, -50%) scale(1);
}

.belief-wrp .circle .name {
    font-size: min(1em, 3.5vw);
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}

.belief-wrp .circle .name.living {
    font-size: min(1.3em, 4vw);
}

.belief-wrp .circle .name.dining {
    top: 70%;
    text-align: right;
    transform: translate(-5%, -50%);
}

.history-title-wrp .en-contents-title {
    font-size: min(3em, 7vw);
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: 1em;
}

.history-title-wrp .en-contents-title .year {
    /* display: block; */
    font-size: min(1.5em, 10vw);
}

.history-title-wrp .en-contents-title .year .large {
    letter-spacing: -.1em;
}

/* history */
.history-wrp {
    background-color: #f9f9f9;
    position: relative;
    z-index: 3;
    overflow: hidden;
}

.history-wrp .inner {
    padding-top: 0;
    padding-bottom: 2em;
}


.history-wrp .slide {
    display: inline-block;
    width: 300px;
}

.history-wrp .slick-prev,
.history-wrp .slick-next {
    top: 60px;
}

.history-wrp .slick-prev {
    left: -60px;
}

.history-wrp .slick-next {
    right: -60px;
}

@media screen and (max-width:767px) {

    .history-wrp .slick-prev,
    .history-wrp .slick-next {
        top: 40px;
    }

    .history-wrp .slick-prev {
        left: -40px;
    }

    .history-wrp .slick-next {
        right: -40px;
    }
}


.history-wrp .history-img {
    aspect-ratio: 16/9;
    padding: 1em 1.5em 1.5em;
    transition: all 1s;
}

.history-wrp .history-img .caption {
    display: block;
    padding: 0 .5em .5em;
    font-size: min(.64em, 2.4vw);
    line-height: 1.5;
    /* opacity: 0; */
    text-align: center;
    transition: all .3s .5s;
}

.history-wrp .history-img img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
}


.historybtn-wrp {
    width: 100%;
    max-width: 650px;
    margin: 1em auto;
}

.historybtn-list {
    display: flex;
    justify-content: center;
    padding: 2em 0 5em;
}

@media screen and (max-width:767px) {
    .historybtn-list {
        padding: 1em 0 3em;
        width: 75vw;
        margin: 0 auto;
    }
}

.historybtn {
    display: inline-block;
    font-size: min(1em, 3.5vw);
    padding: 2em 0;
    position: relative;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.historybtn .year {
    display: inline-block;
    opacity: .7;
    transition: all 1s;
}

.historybtn:not(.first)::before {
    content: '';
    display: block;
    width: .5em;
    height: .5em;
    border-radius: 100%;
    background-color: #121212;
    opacity: .5;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 3;
    transition: all 1s;
}

.historybtn.same_year::before {
    display: none;
}

.historybtn::after {
    content: '';
    width: 100%;
    height: 0;
    border-bottom: 1px solid #ccc;
    position: absolute;
    top: .2em;
    left: 0;
    z-index: 2;
    transform: translate(0, -50%);
}

.slick-slider div {
    transition: none;
    margin-top: .5em;
}

.history-wrp .slide.slick-current .history-img {
    transform: scale(1.2);
    opacity: 1;
}

.history-wrp .slide.slick-current .history-img .caption {
    /* opacity: 1; */
    font-weight: bold;
}

.historybtn.addCurrent .year,
.historybtn.slick-current .year {
    transform: scale(1.2);
    opacity: 1;
    color: var(--main_red);
    transform-origin: center;
}

.historybtn.addCurrent::before,
.historybtn.slick-current::before {
    color: var(--main_red);
    opacity: 1;
    transform: translate(-50%, -20%);
}


/* products */
.newproduct-wrp {
    position: relative;
    z-index: 3;
}

.newproduct-wrp .title-wrp {
    margin-bottom: 5em;
}

@media screen and (max-width:767px) {
    .newproduct-wrp .title-wrp {
        margin-bottom: 0;
        text-align: center;
    }
}

.newproduct-wrp .inner {
    max-width: 1440px;
}

.newproduct-wrp .border {
    border-bottom: 1px solid #ccc;
    padding-bottom: 3em;
    margin-bottom: 5em;
}

@media screen and (max-width:767px) {
    .newproduct-wrp .border {
        padding-top: 0;
        padding-bottom: 2em;
        margin-bottom: 2em;
    }
}

.newproduct-wrp .brand-type {
    width: 18%;
    margin-bottom: 2em;
}

@media screen and (max-width:767px) {
    .newproduct-wrp .brand-type {
        width: 100%;
    }
}

.newproduct-wrp .brand-type .type {
    font-size: min(1.7em, 5vw);
    font-weight: 200;

}

@media screen and (max-width:767px) {
    .newproduct-wrp .brand-type .type {
        text-align: center;
    }
}

.newproduct-wrp .brand {
    width: 36%;
    margin-bottom: 2em;
}

@media screen and (max-width:767px) {
    .newproduct-wrp .brand {
        width: 100%;
    }
}

.newproduct-wrp .brand .thumb-wrp {
    /* width: 48%; */
}

.newproduct-wrp .brand .thumb {
    aspect-ratio: 16/9;
    margin-bottom: 2em;
}

.newproduct-wrp .brand .brand-logo {
    height: 3em;
    margin-bottom: 1em;
}

.newproduct-wrp .brand .brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 0;
}


.newproduct-wrp .brand .text-box p {
    font-size: min(.8em, 3.5vw);
    line-height: 1.8;
}

/* news */
.news-wrp {
    background-color: #f9f9f9;
    position: relative;
    z-index: 3;
}

@media screen and (max-width:767px) {
    .news-wrp .img-box {
        width: 40%;
        overflow: hidden;
    }

    .news-wrp .img-box .thumb1-5 {
        padding: 50% !important;
    }
}

/* concept movie */

.concept-movie-wrp {
    background-color: #fff;
    position: relative;
    z-index: 3;
}

.concept-movie-wrp .inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.concept-movie-wrp .title-wrp {
    margin-bottom: 5em;
}

@media screen and (max-width:767px) {
    .concept-movie-wrp .title-wrp {
        margin-bottom: 0;
        text-align: center;
    }
}

.concept-movie-wrp .text-area {
    width: 18%;
}

@media screen and (max-width:767px) {
    .concept-movie-wrp .text-area {
        width: 100%;
        text-align: center;
    }
}

.concept-movie-wrp .text-area .title {
    font-size: min(1.7em, 5vw);
    font-weight: 200;
    margin-bottom: 1em;
}

@media screen and (max-width:767px) {
    .concept-movie-wrp .text-area .title {
        margin-top: 2em;
        margin-bottom: .5em;
    }

    .concept-movie-wrp .text-area .fw300.mbtm-1 {
        margin-bottom: 2em !important;
    }
}

.concept-movie-wrp .text-area .brand-logo {
    width: 70%;
    max-width: 400px;
}

@media screen and (max-width:767px) {
    .concept-movie-wrp .text-area .brand-logo {
        max-width: 150px;
        margin: 0 auto 1.5em;
    }
}

.concept-movie-wrp .border {
    border-top: 1px solid #ccc;
    padding-top: 5em;
    margin-top: 5em;
}

@media screen and (max-width:767px) {
    .concept-movie-wrp .border {
        padding-top: 2em;
        margin-top: 2em;
        border-top: none;
    }
}

.concept-movie,
.feature-movie {
    width: 78%;
    position: relative;
    z-index: 3;
}

@media screen and (max-width:767px) {

    .concept-movie,
    .feature-movie {
        width: 100%;
    }
}

.concept-movie video,
.concept-movie iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

.feature-movie {
    position: relative;
    z-index: 3;
}

.feature-movie .movie-thumb {
    display: block;
    width: 31%;
    margin-bottom: 2em;
    position: relative;
    text-decoration: none;
}

@media screen and (max-width:767px) {
    .feature-movie .movie-thumb {
        width: 48%;
        margin-bottom: 1em;
    }
}

.feature-movie .caption {
    color: #121212;
    display: block;
    margin: 1em 0 2em;
    padding: 0;
    font-size: min(.9em, 3vw);
}

.feature-movie .movie-thumb .thumb {
    position: relative;
}

.feature-movie .movie-thumb .thumb::before {
    content: '';
    display: block;
    width: min(3em, 7vw);
    height: min(3em, 7vw);
    background-color: rgba(10, 10, 10, 0.8) !important;
    border-radius: 100%;
    position: absolute;
    top: unset;
    bottom: 3% !important;
    left: 2% !important;
    cursor: pointer;
    z-index: 2;
    opacity: 1;
}

.feature-movie .movie-thumb .thumb::after {
    content: '';
    width: min(.8em, 2.5vw);
    height: min(.75em, 2.2vw);
    background-color: #fff;
    clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
    position: absolute;
    bottom: calc(min(1.5em, 3.5vw) + 3% - min(.4em, 1.25vw));
    left: calc(2% + min(1.25em, 2.7vw));
    z-index: 3;
}

#lBox {
    display: flex;
    align-items: center;
}

#lBoxWrp {
    transform: translateZ(2px);
}

#lBoxWrp #lBoxInner {
    background-color: transparent;
    max-width: 1000px;
}

#lBoxWrp .ytmovie-wrp {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

#lBoxBk {
    background-color: rgba(18, 18, 18, .94);
}

@media screen and (max-width:767px) {
    #lBox {
        padding: 0;
    }

    #lBoxInner.on {
        height: auto;
    }

    #lBoxInner.on .thumb.thumb16-9 {
        height: 0 !important;
        padding-bottom: 56.3% !important;
    }
}