@charset "UTF-8";
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
.box__video .box__container {
    /* --main-side2: 2.5%; */
    --main-side2: 5%;
    width: 100%;
    max-width: initial;
    height: 100%;
    padding: 0 0;
    justify-content: center;
}

.box__video .box__container .box__body {
    width: var(--main-width);
    max-width: min(175vmin, calc(var(--main-max-width) * 1.2));
    padding: 0 calc(var(--main-side2));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.box__video .box__container .box__body .body__title {
    position: relative;
    width: 100%;
    display: flex;
    margin: 3vw 0 3vw 0;
}

.box__video .box__container .box__body .body__main {
    position: relative;
    width: 85%;
    max-width: 1440px;

    /* -webkit-transition: height .1s ease-out;
    -o-transition: height .1s ease-out;
    -moz-transition: height .1s ease-out;
    transition: height .1s ease-out; */
}

/* 720:405 16:9 */
.box__video .box__container .box__body .body__main .main__video {
    position: relative;
    width: 100%;
    margin: 0 auto;

    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

.box__video .box__container .box__body .body__main .main__controls {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 2vmin;
}

.box__video .box__container .box__body .body__main .main__controls .splide__arrows {
    --arrow-size: 34px;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);

    border-radius: 30px;
    overflow: hidden;
}

.box__video .box__container .box__body .body__main .main__controls .splide__arrows .splide__arrow--prev,
.box__video .box__container .box__body .body__main .main__controls .splide__arrows .splide__arrow--next {
    right: initial;
    left: initial;
}

.box__video .box__container .box__body .body__main .main__controls .splide__arrows > button > img {
    width: var(--arrow-size);
}

.box__video .box__container .box__body .body__main .main__controls .splide__arrows .splide__status {
    position: relative;
    width: 100%;
    margin: 0 calc(var(--arrow-size) * 0.25);
    font-size: var(--btn-size);
    font-weight: 500;
}

.box__video .box__container .box__body .body__main .main__controls .splide__arrows .splide__status::before {
    content: "";
    position: absolute;
    width: 100%;
    height: var(--arrow-size);
    background-color: var(--color-orange);
    display: flex;
    padding: 0 calc(var(--arrow-size) * 1);

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* body__btns 可要做兩組 ipad 是要做跟 caption 一起 */
.box__video .box__container .box__body {
    --btn-size: min(2vmin, 18px);
}

.box__video .box__container .box__body .body__btns {
    --tape-w: min(8vmin, 50px);
    --tape-h: calc(var(--tape-w) * var(--tape-ratio));
    --tape-ratio: 50/223;

    /* --btn-size: min(2vmin, 18px); */
    margin-top: 5vmin;
    position: relative;
    width: 85%;
    max-width: 1440px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.box__video .box__container .box__body .body__btns .btns__tips {
    position: relative;
    display: flex;
    justify-content: center;
    margin-right: calc(var(--btn-size) * 0.5);
}

.box__video .box__container .box__body .body__btns .btns__tips .tips__con {
    position: relative;
    display: flex;
    flex-direction: row;
    
    color: var(--color-brown-dark2);
    font-size: var(--btn-size);
    font-weight: 500;
}

.box__video .box__container .box__body .body__btns .btns__tips .tips__con > img {
    margin-left: calc(var(--btn-size) * 0.25);
    width: calc(var(--btn-size) * 1);
}

.box__video .box__container .box__body .body__btns .btns__btn {
    position: relative;
    width: min(15vmin, 140px);
    aspect-ratio: 128/75;
    margin: 0 max(1vmin, 5px);
}

.box__video .box__container .box__body .body__btns .btns__btn::after {
    content: "";
    position: absolute;
    width: var(--tape-w);
    height: var(--tape-h);
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../images/common/icon-btn-tape.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 1;
    opacity: 0.6;
}

.box__video .box__container .box__body .body__btns .btns__btn > a {
    position: relative;
    width: 100%;
    height: 100%;

    border: 1px solid var(--color-brown-dark2);
    border-radius: 3px;
    background-color: #fff;
    text-align: center;

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


    color: var(--color-brown-dark2);
    font-size: var(--btn-size);
    font-weight: 500;
    line-height: calc(var(--btn-size)* 1.3);
}

.box__video.box__suggest .box__container .box__body .body__btns .btns__btn.is-max > a {
    display: flex;
    flex-direction: column;
}

/* .box__video.box__suggest .box__container .box__body .body__btns .btns__btn.is-max > a span.is-sup {
    margin-right: 0.5em;
} */

.box__video.box__suggest .box__container .box__body .body__btns .btns__btn.is-max > a sup {
    position: absolute;
    font-size: calc(var(--btn-size) * 0.5);
    display: inline;
    bottom: 2em;
}

.box__video .box__container .box__body .body__btns .btns__btn > a:hover {
    background-color: var(--color-orange);
    color: #fff;

    -webkit-transition: all .15s ease-in-out 0s;
    -o-transition: all .15s ease-in-out 0s;
    -moz-transition: all .15s ease-in-out 0s;
    transition: all .15s ease-in-out 0s;
}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
@media only screen and (min-width: 320px) {
    .box__video .box__container .box__body {
        --btn-size: min(5vw, 18px);
        max-width: min(175vmin, calc(var(--main-max-width) * 1.2));
        padding: 0 0 50px 0;
        justify-content: flex-start;
        overflow: auto;
    }

    .box__video .box__container .box__body .body__title {
        margin: 5vw 0 5vw 0;
        order: 1;
        display: flex;
    }

    .box__video .box__container .box__body .body__main {
        order: 2;
        position: relative;
        width: 100%;
    }

    .box__video .box__container .box__body .body__main .main__video {
        border-radius: 0px;
        box-shadow: initial;
    }


    .box__video.box__about .box__container .box__body .body__main {
        flex: 1;
        display: flex;
    }

    .box__video.box__about .box__container .box__body .body__main .main__video {
        align-self: center;
        margin-bottom: 20dvh;
    }

    .box__video .box__container .box__body .body__btns {
        flex: initial;
        flex-wrap: wrap;
        order: 3;
        /* --btn-size: min(5vw, 18px); */
        --tape-w: 60%;
        width: 100%;
        aspect-ratio: initial;
        margin-top: 8dvh;
    }

    .box__video .box__container .box__body .body__btns .btns__tips {
        width: 100%;
        margin-right: 0;
        align-self: flex-end;
        margin-bottom: 8vmin;
    }

    .box__video .box__container .box__body .body__btns .btns__btn {
        position: relative;
        margin: 0 0;
        width: 40vmin;
        aspect-ratio: 115/60;
        align-self: flex-start;
        margin: 0 8px;
    }

    .box__video .box__container .box__body .body__btns .btns__btn:last-child {
        margin-top: 0;
    }

    .box__video.box__track .box__container .box__body .body__btns .btns__btn:last-child {
        margin-top: calc(var(--btn-size) * 1.5);
    }

    .box__video .box__container .box__body .body__btns .btns__btn.is-max {
        aspect-ratio: 115/60;
        width: 40vmin;
    }

    .box__video .box__container .box__body .body__btns .btns__btn.is-max > a {
        --btn-size2: calc(var(--btn-size) * 0.85);
        font-size: var(--btn-size2);
        font-weight: 500;
        line-height: calc(var(--btn-size2) * 1.3);
    }

    .box__video .box__container .box__body .body__btns .btns__tips .tips__con > p {
        position: relative;
        margin: 0 calc(var(--btn-size) * 0.25);
    }
    
    .box__video .box__container .box__body .body__btns .btns__tips .tips__con > img {
        margin-left: 0;
        width: calc(var(--btn-size) * 0.9);
        transform: rotate(90deg);
    }

    .box__video .box__container .box__body .body__btns.is-four .btns__btn:nth-last-child(-n+2) {
        margin-top: calc(var(--btn-size) * 1.5);
    }

    .box__video .box__container .box__body .body__main .main__controls {
        margin-top: 5vmin;
    }
}

@media only screen and (min-width: 320px) and (min-height: 600px) {
    .box__video .box__container .box__body .body__btns {
        margin-top: 8dvh;
    }

    .box__video .box__container .box__body .body__btns.is-four {
        /* margin-top: 4dvh; */
        margin-top: 5dvh;
    }
}

@media only screen and (min-width: 320px) and (min-height: 900px) {
    .box__video .box__container .box__body .body__btns {
        margin-top: 12dvh;
    }

    .box__video .box__container .box__body .body__btns.is-four {
        margin-top: 6dvh;
    }
}


@media screen and (min-width: 360px) {}
@media screen and (min-width: 390px) {}
@media screen and (min-width: 414px) {}
@media screen and (min-width: 500px) {}
@media screen and (min-width: 600px) {
    .box__video .box__container .box__body {
        /* --btn-size: clamp(0.938rem, 0.804rem + 0.36vw, 1.125rem); */
        --btn-size: min(2.2vmin, 17px);

        max-width: min(175vmin, calc(var(--main-max-width) * 1.2));
        padding: 0 calc(var(--main-side2));
        justify-content: center;
        overflow: initial;
    }


    .box__video .box__container .box__body .body__title {
        margin: 0vw 0 3vw 0;
        order: 1;
        width: 85%;
    }

    .box__video .box__container .box__body .body__main {
        margin-top: 0;
        order: 2;
        position: relative;
        width: 90%;
        padding: 0 0;
    }

    .box__video .box__container .box__body .body__main .main__video {
        border-radius: 5px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    }

    .box__video.box__about .box__container .box__body .body__main {
        flex: initial;
        display: initial;
    }

    .box__video.box__about .box__container .box__body .body__main .main__video {
        align-self: initial;
        margin-bottom: 0;
    }

    .box__video .box__container .box__body .body__btns {
        flex: initial;
        flex-wrap: initial;
        order: 3;
        /* --btn-size: min(1.8vmin, 17px); */
        /* 600:15 - 1440:18 */
        /* --btn-size: clamp(0.938rem, 0.804rem + 0.36vw, 1.125rem); */
        --tape-w: min(8vmin, 50px);
        width: 85%;
        justify-content: center;
        /* margin-top: 3vmin; */
        margin-top: 4dvh;
        padding-bottom: 0;
    }

    .box__video .box__container .box__body .body__btns .btns__tips {
        width: initial;
        margin-right: calc(var(--btn-size) * 0.5);
        align-self: initial;
        margin-bottom: 0;
    }

    .box__video .box__container .box__body .body__btns .btns__btn {
        position: relative;
        margin: 0 max(1vmin, 5px);
        width: min(16vmin, 140px);
        aspect-ratio: 128/75;
        align-self: initial;
    }
    

    .box__video .box__container .box__body .body__btns .btns__btn:last-child {
        margin-top: 0;
    }

    .box__video.box__track .box__container .box__body .body__btns .btns__btn:last-child {
        margin-top: 0;
    }

    .box__video .box__container .box__body .body__btns .btns__btn.is-max {
        aspect-ratio: 128/75;
        width: min(22vmin, 165px);
    }

    .box__video .box__container .box__body .body__btns .btns__btn.is-max > a {
        --btn-size2: calc(var(--btn-size) * 1);
    }

    .box__video .box__container .box__body .body__btns .btns__tips .tips__con > img {
        margin-left: calc(var(--btn-size) * 0.25);
        width: calc(var(--btn-size) * 1);
        transform: rotate(0deg);
    }

    .box__video .box__container .box__body .body__btns .btns__tips .tips__con > img:first-child {
        display: none;
    }

    .box__video .box__container .box__body .body__main.is-two {
        /* width: 95%; */
        width: 100%;
    }

    .box__video .box__container .box__body .body__btns.is-four {
        /* width: 95%; */
        width: 100%;
    }

    .box__video .box__container .box__body .body__btns.is-four .btns__btn {
        margin: 0 3px;
    }

    .box__video .box__container .box__body .body__btns.is-four .btns__btn:nth-last-child(-n+2) {
        margin-top: 0;
    }

    .box__video .box__container .box__body .body__main .main__controls {
        margin-top: 2vmin;
    }
}

@media screen and (min-width: 768px) {}
@media screen and (min-width: 1024px) {
    .box__video .box__container .box__body .body__title {
        display: none;
    }

    .box__video .box__container .box__body .body__main {
        width: 85%;
    }

    .box__video .box__container .box__body .body__main.is-two {
        width: 85%;
    }

    .box__video .box__container .box__body .body__btns.is-four .btns__btn {
        margin: 0 max(1vmin, 5px);
    }
}
@media screen and (min-width: 1200px) {
    .box__video.box__detect .box__container .box__body {
        /* max-width: min(175vmin, calc(var(--main-max-width) * 1.2)); */
        max-width: min(220vmin, calc(var(--main-max-width) * 1.2));
    }

    .box__video .box__container .box__body .body__main {
        width: 75%;
    }

    .box__video .box__container .box__body .body__main.is-two .main__video {
        border-radius: 0px;
        box-shadow: initial;
        overflow: initial;
    }

    .box__video .box__container .box__body .body__main.is-two {
        /* box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3); */
        box-shadow: initial;
        overflow: initial;
        width: 95%;
    }

    .box__video .box__container .box__body .body__main.is-two .main__video .splide .splide__track {
        overflow: initial;
    }

    .box__video .box__container .box__body .body__main.is-two .main__video .splide .splide__list {
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(2, minmax(48%, 100%));
        grid-auto-rows: auto;
        grid-gap: 20px;
    }

    .box__video .box__container .box__body .body__main.is-two .main__video .splide .splide__list .splide__slide {
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    }

    .box__video .box__container .box__body .body__main.is-two .main__video .splide .splide__list .splide__slide .embed-responsive-item {
        position: relative;
        border-radius: 5px;
        overflow: hidden;
    }

    .box__video .box__container .box__body .body__main.is-two .main__controls {
        display: none;
    }

}
@media screen and (min-width: 1366px) {}
@media screen and (min-width: 1400px) {}
@media screen and (min-width: 1900px) {
    .box__video .box__container .box__body .body__main {
        width: 80%;
    }
}
@media screen and (min-width: 2200px) {
    .box__video.box__about .box__container .box__body {
        padding: 0 calc(var(--main-side2) * 0);
    }

    .box__video .box__container .box__body {
        padding: 0 calc(var(--main-side2) * 0.5);
    }
}

/* ================================================== */