﻿.playlogobox {
    position: relative;
    width: 100%;
    height: auto;
    padding: 20px 0;
    margin: 0 auto;
    background: #35aedd;
    text-align: center;
}

.player-content {
    position: relative;
    background: url(../img/playbg.jpg) no-repeat top center;
    margin: 0 auto;
    text-align: center;
}

    .player-content .titlebox {
        position: relative;
        max-width: 1150px;
        height: auto;
        margin: 0 auto;
        padding: 100px 0 10px 0;
        text-align: left;
        color: #000000;
        font-size: 2.4rem;
    }

    .player-content .playbox {
        position: relative;
        width: 100%;
        max-width: 1150px;
        height: auto;
        margin: 0 auto;
        display: table;        
    }

        .player-content .playbox div.leftbox, .player-content .playbox div.rightbox {
            display: table-cell;
            width: 66%;
        }

        .player-content .playbox .leftbox {
            position: relative;
            height: 0;
        }

            .player-content .playbox .leftbox[data-ratio="16:9"] {
                padding-top: calc(66% * 0.5625);
            }

            .player-content .playbox .leftbox[data-ratio="4:3"] {
                padding-top: calc(66% * 0.75);
            }

            .player-content .playbox .leftbox > * {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }

            .player-content .playbox .leftbox .wrap {
                width: 100%;
                height: 100%;
            }

                .player-content .playbox .leftbox .wrap .player {
                    width: 100%;
                    height: 100%;
                }

                    .player-content .playbox .leftbox .wrap .player .isView {
                        width: 100%;
                        height: 100%;
                        color: white;
                        font-size: 2.4rem;
                        display: none;
                        align-items: center;
                        justify-content: center;
                        background: #333;
                    }

        .player-content .playbox .rightbox {
            position: relative;
            height: auto;            
        }

            .player-content .playbox .rightbox > * {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }

            .player-content .playbox .rightbox .titlebox2 {
                display:none;
            }

            .player-content .playbox .rightbox .infobox {
                width: 100%;
                height: 100%;
                display: flex;
                flex-flow: column;
                padding-left: 30px;
                padding-right: 20px;
            }

                .player-content .playbox .rightbox .infobox .infotitle {
                    width: 100%;
                    height: auto;
                    background: #ff9600;
                    border-radius: 15px;
                    padding: 5px 30px;
                    text-align: left;
                    font-size: 2.4rem;
                    color: #fff;
                    font-weight: 600;
                }

                .player-content .playbox .rightbox .infobox .info {
                    width: 100%;
                    height: auto;
                    margin-top: 20px;
                    background: #ff9600;
                    border-radius: 15px;
                    padding: 30px;
                    text-align: justify;
                    font-size: 1.6rem;
                    color: #fff;
                    letter-spacing: 1px;
                    line-height: 2;
                    flex: 1;
                }

                    .player-content .playbox .rightbox .infobox .info .content {
                        text-indent: 2em;
                        margin-bottom: 30px;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 10;
                        line-clamp: 10;
                        -webkit-box-orient: vertical;
                    }

                    .player-content .playbox .rightbox .infobox .info .otherinfo {
                    }

.rvideo {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 1150px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom:50px;
}

    .rvideo .titlebox {
        border-bottom: 0;
        border-left: 0;
        margin: 0;
        height: auto;
        align-items: center;
    }

        .rvideo .titlebox .title {
            color: #ff9600;
            font-size: 1.8rem;
            padding-left: 0;
            letter-spacing: 1px;
            font-weight: 600;
        }

            .rvideo .titlebox .title:before {
                border-left: 0;
            }

    .rvideo .changevideo a {
        color: #ff9600;
        padding-right:20px;
    }

    .rvideo ul {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

        .rvideo ul li {
            padding: 0;
        }

            .rvideo ul li .rbox {
                width: 80%;
            }

        .rvideo ul .liLast {
            display: block;
        }

        .rvideo ul li a {
            text-decoration: none;
        }

            .rvideo ul li a:hover .title2 {
                color: #188eee;
            }

            .rvideo ul li a:hover img {
                box-shadow: 0px 6px 10px rgba(205, 225, 244, 1);
                -webkit-transform: translateY(-5px);
                -moz-transform: translateY(-5px);
                -ms-transform: translateY(-5px);
                -o-transform: translateY(-5px);
                transform: translateY(-5px);
                transition: 0.1s;
                transition-duration: 0.1s;
            }

        .rvideo ul li img {
            border-radius: 10px;
            -moz-box-shadow: 0px 5px 10px rgba(205, 225, 244, 1);
            -webkit-box-shadow: 0px 5px 10px rgba(205, 225, 244, 1);
            box-shadow: 0px 5px 10px rgba(205, 225, 244, 1);
        }

        .rvideo ul li .lcbox {
            display:none;
        }

        .rvideo ul li .title2 {
            position: relative;
            color: #006595;
            font-size: 1.4rem;
            font-weight: 500;
            text-align: left;
            text-shadow: none;
            margin-top: 10px;
            padding-bottom: 0;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
        }

        .rvideo ul li .desc {
            position: relative;
            font-size: 1.2rem;
            text-align: left;
            color: #a7a9ac;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }


@media only screen and (max-width: 1280px) {
    .playlogobox {
        padding: 10px 0;
    }

    .playlogobox img {
        height:80px;
        width:auto;
    }

    .player-content {
        background-size: auto 200px;
    }

    .player-content .titlebox {
        padding: 30px 0 10px 0;
    }

    .player-content .titlebox {
        max-width: 1024px;
    }

    .player-content .playbox {
        max-width: 1024px;
    }

        .player-content .playbox .rightbox .infobox .info .content {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 8;
            line-clamp: 8;
            -webkit-box-orient: vertical;
        }

    .rvideo {
        max-width: 1024px;
    }
}


@media only screen and (min-width: 1023px) {
    .header {
        display:none;
    }
}

@media only screen and (max-width: 430px) {
    .playlogobox {
        display:none;
    }

    .player-content {
        background:none;
    }

    .player-content .titlebox {
        display: none;
    }

        .player-content .playbox {
            display: flex;
            flex-direction: column;
        }

            .player-content .playbox .leftbox[data-ratio="4:3"] {
                width: 100%;
                padding:0;
            }

            .player-content .playbox .leftbox .wrap {
                width: 100%;
                height: 100%;
            }

            .player-content .playbox .leftbox > * {
                position:relative;
            }

            .player-content .playbox .leftbox .wrap .player .isView {
                min-height: 240px;
                font-size:2rem;
            }

            .player-content .playbox div.leftbox, .player-content .playbox div.rightbox {
                width: 100%;
                display: contents;
            }

            .player-content .playbox .rightbox > * {
                position: relative;
            }

            .player-content .playbox .rightbox .titlebox2 {
                display: block;
                color: #3987c5;
                font-size: 1.6rem;
                font-weight: 600;
                padding: 15px 0;
            }

            .player-content .playbox .rightbox .infobox {
                padding:0;
            }

                .player-content .playbox .rightbox .infobox .infotitle {
                    display:none;
                }

                .player-content .playbox .rightbox .infobox .info {
                    margin: 0;
                    background: #e9f4fe;
                    color: #666;
                    border-radius: 0;
                    font-size: 1.4rem;
                    line-height:1.5;
                }

                    .player-content .playbox .rightbox .infobox .info .otherinfo {
                        padding-left: 30px;
                    }

    .rvideo {
        margin-top: 0;
        padding: 10px 15px;
    }

        .rvideo .changevideo a {
            padding-right:0;
        }

        .rvideo ul li .rbox {
            width: 100%;
        }

        .rvideo ul li a {
            display:flex;
        }    

    .rvideo ul li {
        padding: 25px 8px 8px 8px;
    }

    .am-gallery-default .am-gallery-item img {
        width: 35%;
        height: auto;
        max-width: 115px;
        max-height: 154px;
    }

    .rvideo ul li .lcbox {
        display: flex;
        color: #767676;
    }

        .rvideo ul li .lcbox .desc2 {
            padding-left:20px;
        }

    .rvideo ul li .title2 {
        padding: 0 10px 0 20px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .rvideo ul li .desc {
        padding: 0 10px 0 20px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}