/* ---------------------------------------與子頁共用 -------------------------------*/
.Quantity {
}

    .Quantity li {
        list-style: none;
        display: inline-block;
        width: calc( (100% - 10px * 2 - 4px * 5) / 5);
        margin: 12px 4px;
        overflow: hidden;
        border: 5px solid rgba(117, 117, 117, 0);
    }

        .Quantity li .block_File {
            position: relative;
            overflow: hidden;
            padding-top: 56.275%;
            background-image: linear-gradient( to right, #dedede 0%, #ffffff 50%, #dedede 100%);
            background-size: 200% auto;
            animation: 4s moveBackground infinite linear;
        }

            .Quantity li .block_File .File {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transition: .5s;
                -o-transition: .5s;
                -moz-transition: .5s;
                -webkit-transition: .5s;
                /* display: block;
                background-image: url(../image/loading.gif);
                background-repeat: no-repeat;
                background-size: 35%;
                background-position: center;*/
                /*outline: 1px solid #ff000000;*/
                /*-webkit-backface-visibility: visible;
                backface-visibility: visible;*/
            }


@media screen and (max-width:1170px) {
    .Quantity li {
        width: calc( (100% - 16px * 2 - 0px * 4) / 4);
    }
}

.file_hover {
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.55);
    text-align: center;
    padding: 13px 0;
    opacity: 0;
    -o-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    /*-webkit-backface-visibility: visible;
    backface-visibility: visible;*/
    display: flex;
    align-items: center;
}


.block_File:hover .File {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    /*-webkit-backface-visibility: hidden;
    backface-visibility: hidden;*/
}

.block_File:hover .file_hover {
    opacity: 1;
    /*transform: scale(1.08);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;*/
}


.free-scene {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 15pt;
    padding: 3px;
    color: #2d303a;
}

.play {
    border-radius: 50%;
    border: 1px solid #fff;
    width: 22%; /* 橫式後再打開*/
    /* width: 35%; */
    margin: auto;
    /* padding: 4% 4% 4% 6%; */
    background: rgba(0, 0, 0, 0.53);
}

    .play img {
        width: 100%;
    }

.free-scene span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 550;
    font-size: 1em;
    color: #2d303a;
}

.free-scene p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .84rem;
    color: #404040;
}


/*---------------------- 以上與子頁共用 ---------END-----------*/



/* -----------------------------子頁區----------------------------- */
.breadcrumb {
    border-bottom: 1px solid #c1c1c1;
}

    .breadcrumb .adjust {
        max-width: 1400px;
        margin: auto;
        display: flex;
        align-items: center;
        font-size: 0.7em;
        /* border-bottom: 1px solid #c1c1c1; */
        padding: 0 3px;
        height: 27px;
    }


    .breadcrumb span a {
        padding: 0 11px;
        display: block;
        color: #322f2f;
    }

        .breadcrumb span a:hover, .breadcrumb p a:hover {
            text-decoration: underline;
        }

.rightArrow {
    background-color: #c1c1c1;
    width: 19px;
    height: 1px;
    transform: rotateZ(45deg);
    /* transform: rotateZ(47deg); */
    position: relative;
    top: -7px;
}

    .rightArrow:before {
        content: "";
        display: block;
        width: 19px;
        height: 1px;
        transform: rotateZ(-90deg);
        /* transform: rotateZ(-97deg); */
        background-color: #c1c1c1;
        position: absolute;
        top: 10px;
        left: 9px;
    }

.breadcrumb p {
    padding: 7px 10px;
    display: block;
    font-weight: 600;
    color: #000;
}


.vod-clip-end {
    display: flex;
    position: relative;
    margin: 0 auto;
    background: url(../image/laptop-computer.jpg) no-repeat;
    background-size: cover;
    padding: 0 20% 0 16%;
    box-shadow: 0 0px 156px 493px rgba(0,0,0,0.66) inset;
    background-attachment: fixed;
    background-position: top center;
    padding: 0 29px
}

    .vod-clip-end::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        background-image: linear-gradient(rgba(152,152,152,0),rgba(19,0,0,0.32),rgba(0,0,0,0.9))
    }

.show-layout {
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: self-end;
    position: relative;
    width: 100%;
    z-index: 1;
    max-width: 1400px
}

.vod-block-left {
    width: calc(100% - 300px - 30px)
}


    .vod-block-left .name-player {
        display: flex;
        align-items: center;
        height: 40px;
    }

        .vod-block-left .name-player .LikeShare {
            margin-left: auto;
        }

    .vod-block-left .main-player {
        padding-top: 56.25%;
        position: relative;
        /* background: #000;  */
    }


.info {
    display: flex;
    color: #322f2f;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    margin: 9px 6px;
    font-size: 1.2rem;
    color: #e4e4e4
}

    .info .info_tit {
        overflow: hidden;
        white-space: nowrap;
        display: flex;
        flex: 7
    }

        .info .info_tit h2 {
            /*border-right: 1px solid #322f2f;*/
            padding-right: 15px;
            margin-right: 15px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis
        }

        /*.info .info_tit p {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis
        }*/


.Share {
    display: flex
}

    .Share .LikeShare {
        margin-left: 8px
    }

.share-fb, .fb-img {
    width: 32px;
    height: 32px;
    margin-left: auto;
    cursor: pointer;
    background: url(../image/facebook-symbol.svg);
    background-size: cover;
    float: left;
    margin-right: 7px
}

.fb-img {
    background-position: -96px 0
}

.share-fb:hover {
    background-position: 0 -96px
}

.fb-img:hover {
    background-position: -96px -96px;
    width: 32px;
    height: 32px;
    background: url(../image/facebook-symbol-hover.svg);
    background-size: cover
}

.share-Line, .Line-img {
    width: 33px;
    height: 33px;
    margin-left: auto;
    cursor: pointer;
    background: url(../image/LINE-symbol.svg);
    background-size: cover;
    float: right
}

.Line-img {
    background-position: -99px 0
}

.share-Line:hover {
    background-position: 0 -99px
}

.Line-img:hover {
    background-position: -99px -99px;
    width: 33px;
    height: 33px;
    background: url(../image/LINE-symbol-hover.svg);
    background-size: cover
}



.dsc_wrap {
    margin: 9px 6px;
    color: #a0a0a0
}

.dsc_box {
    position: relative;
    overflow: hidden;
    max-height: 63px
}

    .dsc_box.open {
        max-height: none
    }

.meta-01 {
    display: flex;
    align-items: center;
    height: 39px;
    display:none;
}

    .meta-01 #vendor img {
        width: 60px;
        margin-right: 10px
    }

    .meta-01 span {
        margin-right: 6px;
        /*padding-right: 6px;*/
        /*border-right: 1px solid*/
    }

.meta-02 {
    display: flex
}

    .meta-02 span {
        display: block;
        width: 72px
    }

    .meta-02 p, .meta-02 .personnel-Name {
        width: calc(100% - 72px)
    }

.personnel-Name a {
    cursor: pointer;
    margin-right: 8px;
    color: #d8d8d8
}

/*.dsc-02 a:hover {
    text-decoration: underline
}*/

.meta-03, .meta-05, .meta-06, .meta-07 {
    display: flex
}

    .meta-03 span {
        display: block;
        width: 50px
    }

    .meta-03 p {
        width: calc(100% - 50px)
    }

    .meta-05 span {
        display: block;
        width: 80px;
    }

    .meta-05 p {
        width: calc(100% - 80px);
    }

    .meta-06 span, .meta-07 span {
        display: block;
        width: 115px;
    }

    .meta-06 a, .meta-07 a {
        width: calc(100% - 115px);
        color: #a0a0a0;
    }

.personnel-Name {
    width: calc(100% - 50px);
}
/*.meta-04{
    display: flex;
    margin-bottom: 20px;   
}*/

.meta-04 span {
}

.meta-04-1, .meta-04-2 {
    display: flex;
    margin-right: 9px;
}

    .meta-04-1 #lstType a {
        margin-right: 8px;
        /*color: #d8d8d8;*/
    }

#lstType {
    display: flex;
}

.meta-04 p {
    padding-right: 5px;
}

.meta-04 i {
    padding-right: 4px;
}

.meta-04 .country {
    margin-left: 11px;
}

.meta-text {
    line-height: 26px;
}

.dsc-02 {
    line-height: 1.8;
    margin-top: 14px;
}


.btn_area {
    padding: 15px 0 6px 0;
    line-height: 0;
    text-align: center
}

    .btn_area a {
        display: inline-block;
        color: #a0a0a0;
        vertical-align: middle
    }

#detail_btn:hover {
    color: #dc3632;
}

    #detail_btn:hover i {
        border: solid #dc3632;
        border-width: 0 2px 2px 0;
    }


.btn_area i {
    border: solid #a0a0a0;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 5px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    cursor: pointer;
    margin-bottom: 3px;
    margin-left: 4px;
}


.vod-block-right {
    width: 300px;
    position: absolute;
    right: 0;
    height: 100%;
    margin-left: 30px
}

    .vod-block-right .showData {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        display: flex;
        flex-direction: column
    }

.vod-tit {
    margin-top: 9px
}

    .vod-tit .area-text {
        width: 100%
    }

        .vod-tit .area-text h2 {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: .95rem;
            font-weight: 550;
            color: #e4e4e4;
            text-align: center;
            padding: 8px 0
        }

        .vod-tit .area-text p {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #666;
            font-size: 0.9em;
        }

    .vod-tit .repeat, .vod-tit .repeat-img {
        width: 30px;
        height: 30px;
        margin-left: auto;
        cursor: pointer;
        background: url(../image/repeat.svg);
        background-size: cover;
    }

    .vod-tit .repeat-img {
        background-position: -90px 0;
    }

        .vod-tit .repeat-img.open {
            background-position: -90px -90px;
            width: 30px;
            height: 30px;
            background: url(../image/repeat-hover.svg);
            background-size: cover;
        }


.vod-select {
    position: relative;
}

    .vod-select .select-tit {
        background: #dc3632;
        text-align: center;
        color: #fff;
        padding: 12px 0;
        cursor: pointer
    }

        .vod-select .select-tit:after {
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 8px 8px 0 8px;
            border-color: #ffffff transparent transparent transparent;
            position: absolute;
            bottom: 16px;
            right: 25px
        }

    .vod-select .select-set {
        background: rgb(208,208,208);
        position: absolute;
        width: 100%;
        text-align: center;
        max-height: 400px;
        overflow: auto;
        display: none;
        z-index: 1
    }

        .vod-select .select-set.open {
            display: block;
        }

        .vod-select .select-set ul li {
            list-style: none;
            padding: 17px 0;
            border-bottom: 1px solid #efefef;
            cursor: pointer;
            color: #666;
            font-size: 1.1em;
        }

            .vod-select .select-set ul li.focus {
                background: #fff;
                color: #dc3632;
            }


.vod-buttom {
    overflow: auto;
    height: 100%;
    margin-bottom: 7px
}

    .vod-buttom .buttom-set ul {
        flex-wrap: wrap;
        text-align: center;
        margin: 0 6px;
        display: none
    }

        .vod-buttom .buttom-set ul.show {
            display: flex;
        }

        .vod-buttom .buttom-set ul li {
            list-style: none;
            cursor: pointer;
            align-items: center;
            width: 100%;
            margin: 5px 0;
            height: 67px;
            overflow: hidden;
        }

            .vod-buttom .buttom-set ul li a {
                display: flex;
                height: 100%;
                width: 100%;
            }

            .vod-buttom .buttom-set ul li .set-img {
                background-image: linear-gradient( to right, #dedede 0%, #ffffff 50%, #dedede 100%);
                background-size: 200% auto;
                animation: 4s moveBackground infinite linear;
                width: 123px;
                position: relative
            }

                .vod-buttom .buttom-set ul li .set-img img {
                    width: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                }

            .vod-buttom .buttom-set ul li .set-eq {
                position: absolute;
                z-index: 1;
                bottom: 2px;
                color: #fff;
                background: rgba(0, 0, 0, 0.6);
                font-size: .7em;
                left: 3px;
                border-radius: 100px;
                padding: 3px 8px;
                display:none;
            }

            .vod-buttom .buttom-set ul li .set-text-time {
                text-align: left;
                margin: 4px 0 4px 10px;
                width: calc(100% - 123px);
                display: flex;
                flex-direction: column
            }

                .vod-buttom .buttom-set ul li .set-text-time p {
                    font-size: 0.7em;
                    color: #c3c3c3;
                }



            .vod-buttom .buttom-set ul li .set-text {
                line-height: 1.4;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                word-break: break-all;
                color: #e2e2e2;
                margin-bottom: 6px;
                height: 45px;
            }

            .vod-buttom .buttom-set ul li a.active {
                background: rgba(255,255,255,0.18)
            }

                .vod-buttom .buttom-set ul li a.active .set-text {
                    color: #fff
                }

            .vod-buttom .buttom-set ul li .set-text:hover {
                text-decoration: underline
            }

.setForm {
    font-weight: 550;
}


.Related-and-Message-Area {
    max-width: 1400px;
    margin: auto;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    padding: 0 9px;
}

.Related-left {
    overflow: hidden;
    width: calc(100% - 300px - 12px);
    margin-right: 12px;
}

.Related-right {
    margin-top: 26px
}


.Related-tit, .Message-tit {
    border-top: 1px solid #e3e3e3;
    padding: 21px 12px;
    font-size: 1.5em;
    color: #322f2f;
    margin: 26px 0 0 0;
}

.Related-Area {
    margin: 0 10px;
    /*overflow: hidden;*/
}



.All-img-169 {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    background-image: linear-gradient( to right, #dedede 0%, #ffffff 50%, #dedede 100%);
    background-size: 200% auto;
    animation: 4s moveBackground infinite linear;
}

    .All-img-169 .File {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: .5s;
        -o-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
    }


    .All-img-169 .file_hover {
        overflow: hidden;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.55);
        text-align: center;
        padding: 13px 0;
        opacity: 0;
        -o-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -webkit-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
        display: flex;
        align-items: center;
        /* z-index: 12; */
    }

    .All-img-169:hover .File {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
    }

    .All-img-169:hover .file_hover {
        opacity: 1;
    }


    .All-img-169 .file_hover .play-img {
        border-radius: 50%;
        border: 1px solid #fff;
        width: 22%;
        margin: auto;
        background: rgba(0, 0, 0, 0.53);
    }


.Lord-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 3px;
    line-height: 15pt;
    padding: 3px;
    color: #2d303a;
}

    .Lord-title span {
        font-weight: 550;
        font-size: 14pt;
    }

    .Lord-title p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: .9em;
    }


.fb_like {
    margin: 11px;
}



.fb-comments, .fb-comments span, .fb-comments iframe {
    width: 100% !important;
}


/*-------------------------子頁------END--------------------------*/

/*@media screen and (max-width:1366px) {
    .Quantity li {
        width: calc( (100% - 4px *2 * 5) / 5);
    }
}*/


/*@media screen and (max-width:1280px) {
    .vod-block-right {
        width: 400px;
    }

    .vod-block-left {
        width: calc(100% - 400px);
    }
}*/

/*@media screen and (max-width:1170px) {
    .Content_vod .Quantity li {
        width: calc( (100% - 12px * 5) / 5);
    }
}*/



@-webkit-keyframes moveBackground {
    0% {
        background-position: 100%;
    }

    100% {
        background-position: -100%;
    }
}