@import url('reset.css');
/*横版*/
@-webkit-keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.player {
    height: 6vh;
    margin: 0;
    cursor: pointer;
}

.player:hover {
    height: 6.5vh;
    margin: 0.5vh 0;
}

.player:active {
    height: 5vh;
    margin: 0.5vh 0;
}


.music-start:hover {
    background: url("/assets/images/common/music-over.png") no-repeat;
    background-size: 100% 100%;
}

@media (orientation:landscape){
    @media only screen and (max-width:1920px){
        .music-box {
            position: absolute;
            top: 5vh;
            left: 30vh;
            z-index: 5;
        }
        .music-start {
            width: 6vh;
            height: 3.8vh;
            background: url("/assets/images/common/music.png") no-repeat;
            background-size: 100% 100%;
            outline: none;
            border-width: 0px;
            border-radius: 1vh;
        }

        .music-stop {
            width: 6vh;
            height: 3.8vh;
            background-image: url("/assets/images/common/bgm-stop.png");
            border-radius: 1vh;
            outline: none;
            border-width: 0px;
            background-color: Transparent;
            cursor: pointer;
        }
        body{
            width: 100%;
            height: 100%;
            background-image: url("/assets/images/media/background.png");
            overflow: auto;
        }
        #phone{
            display: none;
        }
        #header{
            width: 100%;
            height: 120px;
            padding-top: 44px;
            padding-left: 44px;
        }
        #header .back{
            position: absolute;
            top: 33px;
            left: 65px;
            width: 175px;
            height: 48px;
            background-color: #c8ff4c;
            border: none;
            border-radius: 8px;
            font-size: 20px;
            color: #000;
            font-weight: bold;
        }
        #header img{
            width: 260px;
            position: absolute;
            top: 25px;
            right: 50px;
        }
        #content{
            width: 100%;
            height: auto;
        }
        #content>div{
            width: 1300px;
            height: 100%;
            margin-right: auto;
            margin-left: auto;
        }
        #content .title{
            height: auto;
            text-align: center;
            margin-bottom: 3vh;
            padding:10px;
        }
        #content .main{
            height: auto;
            display: flex;
            flex-wrap: wrap;
            position: relative;
        }
        #content .music{
            background: rgba(0,0,0,0.4);
            height: 52vh;
            width: 85vh;
            top: 3vh;
            position: absolute;
            right: 0;
            z-index: 1;
            padding-left: 18vh;
            display: flex;
            flex-direction: column;
        }
        #content .music>.music-title{
            color: white;
            font-size: 4vh;
            margin-bottom: 0.5vh;
            margin-top: 3vh;
            width: 80%;
            height: auto;
            display: flex;
        }
        #content .music>.music-title>.height{
            width: auto;
            display: flex;
            align-items: flex-end;
            padding-bottom: 2vh;
        }
        #content .music>.music-title>.height>.item{
            width: 0.4vh;margin: 0 0.5vh;
            background-color: white;
        }
        #content .music>.span{
            height: auto;
        }
        #content .music>.control{
            margin: 5vh 0;
            height: 8vh;
            width: 90%;
            display: flex;
            flex-direction: column;
        }
        #content .music>.control>.time{
            height: auto;
            display: flex;
            justify-content: space-between;
            color: white;font-size:1vh
        }
        #content .music>.control>.schedule{
            height: 2vh;
            margin-top: 1vh;
            width: 100%;
        }
        #content .music>.control>.schedule>.back{
            background-color: white;
            margin-top: 0.75vh;
            height: 0.3vh;
        }
        #content .music>.control>.schedule>.back>.bar {
            height: 100%;
            background-color: #32b16c;
            width: 10%;
            text-align: right;
            position: relative;
            z-index: 2;
        }
        #content .music>.control>.schedule>.back>.bar>.point{
            position: absolute;
            background-color: #32b16c;
            border-radius: 50%;
            height: 1.5vh;
            width: 1.5vh;
            z-index: 5;
            margin-top: -0.5vh;
        }
        #content .music>.music-list{
            height: 21vh;
            margin-right: 3vh;
            position:relative;
            overflow: auto;
        }
        #content .music>.music-list::-webkit-scrollbar{
            width: 0.3vh;
            margin-left: 2vh;
        }
        #content .music>.music-list::-webkit-scrollbar-track{
            -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
            border-radius: 1vh;
            background-color: black;
        }
        #content .music>.music-list::-webkit-scrollbar-thumb{
            border-radius: 1vh;
            -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
            border: none;
            background-color: #81cc2d;
        }
        #content .music>.music-list>.music-item{
            position: relative;
            height: 4vh;
            color: white;
            width: 95%;
            padding: 1vh 2vh 1vh 1vh;
            display: flex;
            border-bottom: 1px solid #7c8f55;
        }
        #content .music>.music-list>.music-item>.tag{
            height: 100%;
            width: 2vh;
        }
        #content .music>.span >.line{
            width: 6vh;
            height: 0.5vh;
            background-color: white;
        }
        #content .record{
            width: 64vh;
            height: 64vh;
            margin-top: -2vh;
            position:relative;
            z-index: 2;
        }
        #content .record>img{
            width: 100%;
        }
        #content .record>.block-range{
            position: absolute;
            top: 22.5vh;
            left: 22.5vh;
            width: 19vh;
            height: 19vh;
            background: rgba(0,0,0,0.4);
            border-radius: 50%;
        }
        #content .record>.singer{
            position: absolute;
            right: 0;
            bottom: -2vh;
            width: 20vh;
        }
        .record-img{
            width:100%;height:100%;
            border-radius: 50%;
            transition: all 0.36s ease;
            display: inline;
            animation: spin 46s infinite linear;
            -webkit-animation: spin 46s infinite linear;
            animation-play-state: paused;
            -webkit-animation-play-state: paused
        }
        #content .main-image{
            height: auto;
            display: flex;
            flex-wrap: wrap;
        }
        #content .main-image>img{
            width: 48%;
            margin-right: 2%;
            margin-bottom: 1vh;
        }
        #video .left{
            height: auto;
            width: 569px;
            margin-top: 30px;
        }
        #video .right{
            width: 714px;
            height: 416px;
            margin-left: 15px;
            margin-bottom: 15px;
        }
        #audio .left{
            height: auto;
            flex: 1;
            margin-top: 30px;
        }
        #audio .right{
            flex: 1;
            height: 416px;
            margin-left: 15px;
            margin-bottom: 15px;
        }
        #audio>.left> img{
            width: 100%;
            margin: 10px;
            cursor: pointer;
        }
        #audio>.right> img{
            width: 100%;
            margin: 10px;
            cursor: pointer;
        }
        .left-item{
            position: relative;
            background-size: 100% 100%;
            width: 48%;
            height: 350px;
            margin-right: 15px;
            margin-bottom: 20px;
            z-index: 1;
            border-radius: 1vh;
        }
        .left-item video{
            width: 100%;
            height: 100%;
        }
        .cover{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            position: absolute;
            border-radius: 1vh;
            padding: 20px;
            -webkit-transition: all 0.3s ease;
            z-index: -1;
        }
        .cover>div{
            width: 100%;
            height: 100%;
            border:2px solid #00CC00;
            padding-top: 15%;
            color: #00FF00;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .cover>div>img{
            cursor: pointer;
        }
        .cover>div>a{
            font-size: 25px;
            color: #00FF00;
            font-weight: bold;
        }
        .left-item:hover .cover{
            z-index:3;
        }
        .right-item{
            background-size: 100% 100%;
            width: 714px;
            height: auto;
            margin-bottom: 20px;
            position:relative;
        }
        .right-item video{
            width: 100%;
            height: 100%;
        }
        .right-item video{
            width: 100%;
            height: auto;
        }
        .right-item:hover .cover{
            z-index: 3;
        }
        .sunflower {
            margin-top: 71px;
            text-align: center;
            background: url('/assets/images/image/sun.png') no-repeat;
            background-position-x: center;
            /* background-size: 100%; */
            width: 100%;
            height: 150px;
            margin-bottom: -48px;
        }
        .more{
            width: 100%;
            height: auto;
            text-align:center;
            margin-top: 70px;
            margin-bottom:40px;
        }
        .more a{
            font-size:1.5vh;
        }
        .more .span{
            width: 75px;height: 10px;background-color:white;margin: 20px auto 20px auto
        }
        .change-btn{
            width: 100%;
            text-align: center;
            margin-bottom: 10px;
        }
        .change-btn button{
            font-weight: bold;
            font-size: 17px;
            /*margin-right: 40px;*/
            /* margin-left: 10px; */
            background-color:transparent;
            border-style:none;
            width: 190px;
        }
        .video-bottom{
            background-color: #0a0a0a;
            height: 57px;
            width: 100%;
            opacity: 0.5;
            position:absolute;
            bottom:0;
            left:0;
            color: white;
            padding: 15px 10px 12px 36px;
            font-size:20px;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }
        .video-bottom img{
            width: 17px;
            height: 20px;
            margin-top: 5px;
        }
        .btn-active{
            background-image: url("/assets/images/media/button.png");
            height: 54px;
            width: 190px;
        }
        #footer {
            width: 100%;
            height: 200px;
            background-color: #000;
            color: #a9bc8c;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 15%;
        }
        #footer>div {
            width: 70vh;
            margin: 0 auto;
            font-size: 1vh;
        }
        #footer>img{
            height: 10vh;
        }
    }
    @media only screen and (min-width:1921px){
        .music-box {
            position: absolute;
            top: 5.5vh;
            left: 20vh;
            z-index: 5;
        }
        .music-start {
            width: 4.5vh;
            height: 3vh;
            background: url("/assets/images/common/music.png") no-repeat;
            background-size: 100% 100%;
            outline: none;
            border-width: 0px;
            border-radius: 1vh;
        }

        .music-stop {
            width: 4.5vh;
            height: 3vh;
            background-image: url("/assets/images/common/bgm-stop.png");
            border-radius: 1vh;
            outline: none;
            border-width: 0px;
            background-color: Transparent;
            cursor: pointer;
        }
            body{
                width: 100%;
                height: 100%;
                background-image: url("/assets/images/media/background.png");
                overflow: auto;
            }
            #phone{
                display: none;
            }
            #header{
                width: 100%;
                height: 10vh;
                padding-top: 4vh;
                padding-left: 4vh;
                display: flex;
                align-items: center;
            }
            #header img{
                width: 260px;
                position: absolute;
                top: 25px;
                right: 50px;
            }
            #header .back{
                width: 12vh;
                height: 3vh;
                background-color: #c8ff4c;
                border: none;
                border-radius: 1vh;
                font-size: 1.5vh;
                color: #000;
                font-weight: 500;
            }
            #content{
                width: 100%;
                height: auto;
                min-height: 70vh;
            }
            #content>div{
                /* width: 90vh; */
                height: 100%;
                margin-right: auto;
                margin-left: auto;
            }
            #content .main-image{
                height: auto;
                display: flex;
                flex-wrap: wrap;
            }
            #content .main-image>img{
                width: 48%;
                margin-right: 2%;
                margin-bottom: 1vh;
            }
            #content .title{
                height: auto;
                text-align: center;
                padding:10px;
                margin-bottom: 2vh;
            }
            #content .title>img{
                height: 10vh;
            }
            #content .main{
                height: auto;
                display: flex;
                flex-wrap: wrap;
                position:relative;
            }
            #content .music{
                background: rgba(0,0,0,0.4);
                height: 33vh;
                width: 60vh;
                top: 3vh;
                position: absolute;
                right: 0;
                z-index: 1;
                padding-left: 12vh;
                display: flex;
                flex-direction: column;
            }
            #content .music>.music-title{
                color: white;
                font-size: 4vh;
                margin-top: 1vh;
                height: auto;
                display: flex;
            }
            #content .music>.music-title>.name{
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            #content .music>.music-title>.height{
                width: auto;
                margin-right: 5vh;
                display: flex;
                align-items: flex-end;
                padding-bottom: 2vh;
            }
            #content .music>.music-title>.height>.item{
                width: 0.3vh;margin: 0 0.5vh;
                background-color: white;
            }
            #content .music>.name{
                color: white;
                font-size: 4vh;
                height: auto;
            }
            #content .music>.span{
                height: auto;
            }
            #content .music>.control{
                margin: 2vh 5vh 1vh 0;
                height: 7vh;
                display: flex;
                flex-direction: column;
            }
            #content .music>.control>.time{
                height: auto;
                display: flex;
                justify-content: space-between;
                color: white;font-size:1vh
            }
            #content .music>.control>.schedule{
                height: 2vh;
                margin-top: 1vh;
                width: 100%;
            }
            #content .music>.control>.schedule>.back{
                background-color: white;
                margin-top: 0.75vh;
                height: 0.2vh;
            }
            #content .music>.control>.schedule>.back>.bar {
                height: 100%;
                background-color: #32b16c;
                width: 10%;
                text-align: right;
                position: relative;
                z-index: 2;
            }
            #content .music>.control>.schedule>.back>.bar>.point{
                position: absolute;
                background-color: #32b16c;
                border-radius: 50%;
                height: 1.5vh;
                width: 1.5vh;
                z-index: 5;
                margin-top: -0.5vh;
            }
            #content .music>.music-list{
                height: 13vh;
                margin-right: 3vh;
                position:relative;
                overflow: auto;
            }
            #content .music>.music-list::-webkit-scrollbar{
                width: 0.2vh;
            }
            #content .music>.music-list::-webkit-scrollbar-track{
                -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
                border-radius: 1vh;
                background-color: black;
            }
            #content .music>.music-list::-webkit-scrollbar-thumb{
                border-radius: 1vh;
                -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
                border: none;
                background-color: #81cc2d;
            }
            #content .music>.music-list>.music-item{
                position: relative;
                color: white;
                height: 4vh;
                width: 100%;
                padding: 1vh 0;
                display: flex;
                border-bottom: 2px solid #7c8f55;
                font-size: 2vh;
            }
            #content .music>.music-list>.music-item>.tag{
                height: 100%;
                width: 2vh;
            }
            #content .music>.span >.line{
                width: 10vh;
                height: 0.5vh;
                background-color: white;
            }
            #content .record{
                width: 40vh;
                height: 40vh;
                margin-top: -2vh;
                position:relative;
                z-index: 2;
            }
            #content .record>img{
                width: 100%;
            }
            #content .record>.block-range{
                position: absolute;
                top: 14vh;
                left: 14vh;
                width: 12vh;
                height: 12vh;
                background: rgba(0,0,0,0.4);
                border-radius: 50%;
            }
            #content .record>.singer{
                position: absolute;
                right: 0;
                bottom: -2vh;
                width: 15vh;
            }
            #content .record>.record-img{
                transition: all 0.36s ease;
                display: inline;
                border-radius: 50%;
                animation: spin 46s infinite linear;
                -webkit-animation: spin 46s infinite linear;
                animation-play-state: paused;
                -webkit-animation-play-state: paused;
            }
            #video .left{
                height: auto;
                width: 569px;
                margin-top: 30px;
            }
            #video .right{
                width: 714px;
                height: 416px;
                margin-left: 15px;
                margin-bottom: 15px;
            }
            #audio .left{
                height: auto;
                flex: 1;
                margin-top: 2vh;
            }
            #audio .right{
                flex: 1;
                height: 416px;
                margin-left: 15px;
                margin-bottom: 15px;
            }
            #audio>.left> img{
                width: 100%;
                margin: 10px;
                cursor: pointer;
            }
            #audio>.right> img{
                width: 100%;
                margin: 10px;
                cursor: pointer;
            }
            .left-item{
                position: relative;
                background-size: 100% 100%;
                width: 48%;
                height: 24vh;
                margin-right: 1vh;
                margin-bottom: 1.5vh;
                z-index: 1;
                border-radius: 1vh;
            }
            .left-item video{
                width: 100%;
                height: 100%;
            }
            .cover{
                width: 100%;
                height: 100%;
                position: absolute;
                border-radius: 1vh;
                z-index: 2;
            }
            .cover>div{
                width: 100%;
                height: 100%;
                border: 2px solid #00CC00;
                color: #00FF00;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
            .cover>div>img{
                width: 15vh;
                cursor: pointer;
            }
            .cover>div>a{
                display: none;
                font-size: 2vh;
                color: #00FF00;
                font-weight: bold;
            }
            .left-item:hover .cover{
                z-index:3;
            }
            .right-item{
                background-size: 100% 100%;
                width: 714px;
                height: auto;
                margin-bottom: 20px;
                position:relative;
            }
            .right-item video{
                width: 100%;
                height: 100%;
            }
            .right-item video{
                width: 100%;
                height: auto;
            }
            .right-item:hover .cover{
                z-index: 3;
            }
            .sunflower {
                margin-top: 5vh;
                text-align: center;
                background: url('/assets/images/image/sun.png') no-repeat;
                background-position-x: center;
                background-size: 50% 100%;
                width: 100%;
                height: 10vh;
                margin-bottom: -3vh;
            }
            .more{
                width: 100%;
                height: auto;
                text-align: center;
                margin-top: 5vh;
                margin-bottom: 3vh;
            }
            .more a{
                font-size:2vh;
            }
            .more .span{
                width: 5vh;
                height: 1vh;
                background-color:white;
                margin: 1vh auto 1vh auto
            }
            .more .code{
                width: 10vh;
            }
            .change-btn{
                width: 100%;
                text-align: center;
                margin-bottom: 1vh;
                font-size: 1.5vh;
            }
            .change-btn button{
                font-weight: bold;
                font-size: 1.5vh;
                margin-right: 2vh;
                margin-left: 2vh;
                background-color: transparent;
                border-style: none;
                width: 16vh;
                height: 5vh;
            }
            .video-bottom{
                background-color: #0a0a0a;
                height: 57px;
                width: 100%;
                opacity: 0.5;
                position:absolute;
                bottom:0;
                left:0;
                color: white;
                padding: 15px 10px 12px 36px;
                font-size:20px;
                display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            }
            .video-bottom img{
                width: 17px;
                height: 20px;
                margin-top: 5px;
            }
            .btn-active{
                background-image: url("/assets/images/media/button.png");
                background-size: 100% 100%;
                height: 5vh;
                width: 15vh;
            }
            #footer{
                width: 100%;
                height: 15vh;
                background-color: #000;
                color: #a9bc8c;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 15%;
            }
            #footer>img {
                width: 10vh;
            }
            #footer>div {
                width: 70vh;
                margin: 0 auto;
                font-size: 1.5vh;
            }
            #footer div div {
                /*padding-top: 27px;*/
                /*padding-bottom: 16px;*/
            }
        }
}
/*竖版*/
@media (orientation:portrait){
    @media only screen and (min-width:1081px){
        body{
            width: 100%;
            height: 100%;
            background-image: url("/assets/images/media/background.png");
            overflow: auto;
        }
        #phone{
            display: none;
        }
        #header{
            width: 100%;
            height: 120px;
            padding-top: 44px;
            padding-left: 44px;
        }
        #content{
            width: 100%;
            height: auto;
            min-height: 1000px;
        }
        #content>div{
            width: 1300px;
            height: 100%;
            margin-right: auto;
            margin-left: auto;
        }
        #content .title{
            height: auto;
            text-align: center;
            padding:10px;
        }
        #content .main{
            height: auto;
            display: flex;
            flex-wrap: wrap;
        }
        #video .left{
            height: auto;
            width: 569px;
            margin-top: 30px;
        }
        #video .right{
            width: 714px;
            height: 416px;
            margin-left: 15px;
            margin-bottom: 15px;
        }
        #audio .left{
            height: auto;
            flex: 1;
            margin-top: 30px;
        }
        #audio .right{
            flex: 1;
            height: 416px;
            margin-left: 15px;
            margin-bottom: 15px;
        }
        #audio>.left> img{
            width: 100%;
            margin: 10px;
            cursor: pointer;
        }
        #audio>.right> img{
            width: 100%;
            margin: 10px;
            cursor: pointer;
        }
        .left-item{
            position: relative;
            background-size: 100% 100%;
            width: 48%;
            height: 350px;
            margin-right: 15px;
            margin-bottom: 20px;
            z-index: 1;
            border-radius: 1vh;
        }
        .left-item video{
            width: 100%;
            height: 100%;
        }
        #content .music{
            background: rgba(0,0,0,0.7);
            height: 52vh;
            width: 85vh;
            top: 3vh;
            position: absolute;
            right: 0;
            z-index: 1;
            padding-left: 20vh;
            display: flex;
            flex-direction: column;
        }
        #content .music>.name{
            color: white;
            font-size: 5vh;
            margin-top: 4vh;
            height: auto;
        }
        #content .music>.span{
            height: auto;
        }
        #content .music>.control{
            margin: 4vh 5vh 5vh  0;
            height: 8vh;
            display: flex;
            flex-direction: column;
        }
        #content .music>.control>.time{
            height: auto;
            display: flex;
            justify-content: space-between;
            color: white;font-size:1vh
        }
        #content .music>.control>.schedule{
            height: 2vh;
            margin-top: 1vh;
            width: 100%;
        }
        #content .music>.control>.schedule>.back{
            background-color: white;
            margin-top: 0.75vh;
            height: 0.5vh;
        }
        #content .music>.music-list{
            height: 18vh;
            margin-right: 3vh;
            position:relative;
            overflow: auto;
        }
        #content .music>.music-list::-webkit-scrollbar{
            width: 1vh;
        }
        #content .music>.music-list::-webkit-scrollbar-track{
            -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
            border-radius: 1vh;
            background-color: white;
        }
        #content .music>.music-list::-webkit-scrollbar-thumb{
            border-radius: 1vh;
            -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
            border: none;
            background-color: #81cc2d;
        }
        #content .music>.music-list>.music-item{
            position: relative;
            height: 4vh;
            width: 100%;
            background-color: #00F7DE;
            padding: 1vh 2vh;
            display: flex;
        }
        #content .music>.music-list>.music-item>.tag{
            height: 100%;
            width: 2vh;
        }
        #content .music>.span >.line{
            width: 10vh;
            height: 1vh;
            background-color: white;
        }
        #content .record{
            width: 64vh;
            height: 64vh;
            margin-top: -2vh;
            position:relative;
            z-index: 2;
        }
        #content .record>img{
            width: 100%;
        }
        #content .record>.block-range{
            position: absolute;
            top: 22.5vh;
            left: 22.5vh;
            width: 19vh;
            height: 19vh;
            background-color: #0a0a0a;
            border-radius: 50%;
        }
        #content .record>.singer{
            position: absolute;
            right: 0;
            bottom: -2vh;
            width: 20vh;
        }
        #content .record>.record-img{
            transition: all 0.36s ease;
            display: inline;
            animation: spin 46s infinite linear;
            -webkit-animation: spin 46s infinite linear;
            animation-play-state: paused;
            -webkit-animation-play-state: paused;
        }
        #content .main-image{
            height: auto;
            display: flex;
            flex-wrap: wrap;
        }
        #content .main-image>img{
            width: 48%;
            margin-right: 2%;
            margin-bottom: 1vh;
        }
        .cover{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            position: absolute;
            border-radius: 1vh;
            padding: 20px;
            -webkit-transition: all 0.3s ease;
            z-index: -1;
        }
        .cover>div{
            width: 100%;
            height: 100%;
            border:2px solid #00CC00;
            padding-top: 15%;
            color: #00FF00;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .cover>div>img{
            cursor: pointer;
        }
        .cover>div>a{
            font-size: 25px;
            color: #00FF00;
            font-weight: bold;
        }
        .left-item:hover .cover{
            z-index:3;
        }
        .right-item{
            background-size: 100% 100%;
            width: 714px;
            height: auto;
            margin-bottom: 20px;
            position:relative;
        }
        .right-item video{
            width: 100%;
            height: 100%;
        }
        .right-item video{
            width: 100%;
            height: auto;
        }
        .right-item:hover .cover{
            z-index: 3;
        }
        .sunflower {
            margin-top: 71px;
            text-align: center;
            background: url('/assets/images/image/sun.png') no-repeat;
            background-position-x: center;
            /* background-size: 100%; */
            width: 100%;
            height: 150px;
            margin-bottom: -48px;
        }
        .more{
            width: 100%;
            height: auto;
            text-align:center;
            margin-top: 70px;
            margin-bottom:40px;
        }
        .more a{
            font-size:1.5vh;
        }
        .more .span{
            width: 75px;height: 10px;background-color:white;margin: 20px auto 20px auto
        }
        .change-btn{
            width: 100%;
            text-align: right;
            margin-bottom: 10px;
        }
        .change-btn button{
            font-weight: bold;
            font-size: 17px;
            margin-right: 40px;
            margin-left: 40px;
            background-color:transparent;
            border-style:none;
            width: 190px;
        }
        .video-bottom{
            background-color: #0a0a0a;
            height: 57px;
            width: 100%;
            opacity: 0.5;
            position:absolute;
            bottom:0;
            left:0;
            color: white;
            padding: 15px 10px 12px 36px;
            font-size:20px;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }
        .video-bottom img{
            width: 17px;
            height: 20px;
            margin-top: 5px;
        }
        .btn-active{
            background-image: url("/assets/images/media/button.png");
            height: 54px;
            width: 190px;
        }
        #footer {
            width: 100%;
            height: 340px;
            background-color: #000;
            color: #a9bc8c;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 15%;
        }
        #footer>div {
            width: 70vh;
            margin: 0 auto;
            font-size: 1vh;
        }
        #footer>img{
            height: 5vh;
        }
    }
    @media only screen and (max-width:1080px) {
        body{
            height: 100%;
        }
        #pc{
            display: none;
        }
        #phone{

        }
        #nav{
            position:fixed;
            width: 100%;
            background-color: #a2ea4f;
            font-size:1.5vh;
            font-weight: bold;
            z-index: 5;
        }
        section{
            background: url("/assets/images/image/mb-book-background.png") no-repeat;
            background-size: 100% auto;
            background-position: bottom;
        }
        #nav> div{
            display: flex;
            height: 100%;
            justify-content: center;
            align-items:center;
        }
        #nav> div .icon{
            width: 4vh;
            height: 4vh;
            margin-left: 1vh;
            margin-top: 1vh;
        }
        #nav> div img{
            width: 10vh;
            margin: 10px;
        }
        #nav> div a{
            width: 10vh;
            padding: 10px;
            margin: 10px;
            color: #0a0a0a;
            text-align: center;
            font-weight: bold;
        }
        header{
            padding-top: 5.5vh;
            position: relative;
        }
        header .back{
            /*display: none;*/
            position: absolute;
            top: 30%;
            left: 4%;
            width: 20%;
        }
        .music-stop{
            width: 4.5vh;
            height: 3vh;
            background: url("/assets/images/common/bgm-stop.png") no-repeat;
            background-size: 100% 100%;
            border-radius: 15px;
            outline: none;
            border-width: 0px;
            cursor:pointer;
        }
        .music-start{
            width: 4.5vh;
            height: 3vh;
            background: url("../images/common/music-over.png") no-repeat;
            background-size: 100% 100%;
            outline: none;
            border-width: 0px;
            cursor: pointer;
        }
        header .logo{
            position: absolute;
            width: 21vh;
            top: 30%;
            right:2vh;
        }
        header .bg{
            width: 100%;
        }
        /* header:after{
            content: '';
            display: block;
            height: 9px;
            width: 100%;
            background: #b4d202;
        } */
        .content{
            position: relative;
            width: 90%;
            margin: 0 auto;
            min-height: 76vh;
            margin-bottom: 2vh;
        }
        .book-header-logo{
            position: relative;
            /* top: -76px; */
            display: flex;
            justify-content: center;
            margin-top:3vh;
            margin-bottom: 2vh;
        }
        .book-header-logo img{
            width: 50%;
        }
        .type-list{
            margin-top: -1vh;
        }
        .type-list ul{
            display: flex;
            justify-content: space-between;
            font-size: 1.5vh;
        }
        .more{
            width: 100%;
            height: auto;
            text-align:center;
            margin-top: 70px;
            margin-bottom:40px;
        }
        .type-list ul li{
            width: 28%;
            height: 4vh;
            line-height: 4vh;
            text-align: center;
            /* background: url('/assets/images/image/title-no.png') no-repeat; */
            background-color:darkseagreen;
            background-size: 100% 100%;
            color: #fff;
            /* border-radius: 1vh; */
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content:center;
        }
        .type-list ul .active{
            width: 28%;
            height: 4vh;
            line-height: 4vh;
            text-align: center;
            /* background: url('/assets/images/image/title-active.png') no-repeat; */
            background: url('/assets/images/media/button.png') no-repeat;
            background-size: 100% 100%;
        }
        .content .music-box{
            height: 325px;
            margin: 5vh -5%;
            background: url('/assets/images/media/p-music-back.png') no-repeat;
            background-size: 100%;
            padding: 2vh 4vh;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
        }
        .content .music-box .top{
            width: 100%;
            height: 26vw;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }
        .content .music-box .top .control{
            padding: 2vh 4vh;
            color: white;
            font-size: 2vh;
            width: 60vw;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
        }
        .content .music-box .top .record{
            padding: 0.5vh;
            width: 28vw;
        }
        .content .music-box .top .record img{
            height: 100%;
            object-fit: contain;
            width: 100%;
            border-radius: 50%;
            border: 0.5vh solid #a8c53b;
            transition: all 0.36s ease;
            animation: spin 46s infinite linear;
            -webkit-animation: spin 46s infinite linear;
            animation-play-state: paused;
            -webkit-animation-play-state: paused;
        }
        @-webkit-keyframes spin {
            0% {
                transform: rotate( 0deg);
            }
            100% {
                transform: rotate( 360deg);
            }
        }
        .content .music-box .line{
            width: 100%;
            height: 5vh;
            font-size: 1.5vh;
            text-align: right;
            color: white;
        }
        .content .music-box .line .back{
            height: 0.5vh;
            margin-top:0.5vh;
            background: #dcdcdc;
            width: 100%;
            position: relative;
        }
        .content .music-box .line .back .bar{
            height: 100%;
            background-color: #32b16c;
            width: 10%;
            text-align: right;
            position: relative;
            z-index: 2;
        }
        .content .music-box .line .back .bar .point{
            position: absolute;
            background-color: #32b16c;
            border-radius: 50%;
            height: 1.5vh;
            width: 1.5vh;
            z-index: 5;
            margin-top: -0.5vh;
        }
        .book-list .list{
            display: flex;
            flex-wrap: wrap;
        }
        .book-list .list li{
            font-size: 1.5vh;
            width: 50%;
            padding: 1vh;
            position: relative;
        }
        .book-list .list li .active{
            background-color: #32b16c;
            width: 14vw;
            margin-left: -7vw;
            position: absolute;
            z-index: 1;
            top: 1vh;
            bottom: 1vh;
        }
        .book-list .list li video{
            position:relative;
            z-index: 1;
            width: 100%;
            height: 100%;
        }
        .book-list .list li .name{
            position: absolute;
            bottom: 1vh;
            padding: 1vh 0 1vh 5%;
            border-radius: 0 0 1vh 1vh;
            color: white;
            left: 1vh;
            background: rgb(0,0,0,0.5);
            right: 1vh;
            z-index: 2;
        }
        .book-list .list li .name img{
            width: 5vw;
            margin-right: 1vw;
        }
        .book-list .list li img{
            width: 100%;
            height: 100%;
        }
        .book-list .list li .start-btn{
            position: absolute;
            width: 20%;
            left:40%;
            top: 30%;
            height: auto;
            z-index: 5;
        }
        .book-pic-info .show{
            width: 48%;
            /*height: 30vh;*/
        }
        footer.mb-footer{
            background-color: #0a0a0a;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        footer.mb-footer >div{
            height: auto;
            width: 80%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            font-size: 1.5vh;
            justify-content: center;
        }
        footer.mb-footer .link{
            display: flex;
            justify-content: space-between;
        }
    }
}