/* CSS reset */
.fl{ float: left;}
.fr{ float: right;}
.clear{ clear: both}
/*html,body{font-size: 62.5%; font-family: Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}*/
html,body{font-size: 62.5%; font-family: lato, Arial, Helvetica, sans-serif;}
.flex{ display: flex;}
ol,ul{ list-style:none; padding: 0; margin: 0;}
html,body,h1,h2,h3,h4,h5,h6,p{ margin: 0; padding: 0;}
a{ color: #333333;}
a:hover{ text-decoration: none;}
.left{ text-align: left;}
.center{ text-align: center;}
.img-fluid { max-width: 100%; height: auto;}
@keyframes shake {
    0%,to {
        transform: rotate(0deg)
    }

    2% {
        transform: rotate(-1deg)
    }

    4% {
        transform: rotate(.5deg)
    }

    6% {
        transform: rotate(-.5deg)
    }

    8% {
        transform: rotate(1deg)
    }

    10% {
        transform: rotate(-1deg)
    }

    12% {
        transform: rotate(.5deg)
    }

    14% {
        transform: rotate(-.5deg)
    }

    16% {
        transform: rotate(.75deg)
    }

    18% {
        transform: rotate(-.75deg)
    }

    20% {
        transform: rotate(.5deg)
    }

    22% {
        transform: rotate(-.5deg)
    }

    24% {
        transform: rotate(0deg)
    }

    to {
        transform: none
    }
}
.shake-animation { animation: shake 4.5s ease-in-out infinite;}
/*---------header  style----------*/
.warp{  max-width: 676px; margin: 0 auto;}
.logo img{ width: 96px; height: 96px; border-radius: 50%;}
.logo{ margin: 80px auto 20px; text-align: center;}
.logo h1{ font-size: 2rem; margin-bottom: 8px;}
.logo p{ font-size: 1.5rem; color: #2E302C;}
.desc { background: #000; border-radius: 20px; padding: 10px 30px;} 
.desc p{ font-size: 3.2rem; color: #FFF; text-align: center; margin-bottom: 10px;}
.desc .red{ color: #c76245;}
.desc .yellow{ color: #f7e478;}
.line{border-bottom:1px solid #000;width:100%; margin: 30px 0;}
.enter{width: 100%; display: flex; justify-content: center;}
.enter-con{ z-index: 1000; overflow: hidden; width: 100%; max-width: 676px; min-height: 52px;
 margin-bottom: 20px; text-align: center; cursor: pointer; position: relative;}
.theme-vlink{ border-radius: 6px; background: #585B56; color: #fff; border: 2px solid #585B56;}
.enter-con img{width: 38px; height: 38px; border-radius: 6px; position: absolute; top: 50%;
     transform: translateY(-50%); left: 8px; object-fit: cover;}
.VLink_item-title{padding: 0 55px; font-size: 1.6rem; }
.enter .VLink_item-title{line-height:3;}
.VLink_right-icon{position: absolute; top: 50%; transform: translateY(-50%); right: 1%; line-height: 0;}
.line2{border-bottom:1px dashed #000;width:66%; margin: 30px auto;}
.VLink_vlink-container{width: 100%; display: flex; justify-content: center;}
.VLink_vlink-item{z-index: 1000; overflow: hidden; width: 93%;max-width: 676px;  
    min-height: 50px;padding: 5px 0; margin-bottom: 2rem; text-align: center; cursor: pointer; font-weight: 500; position: relative;}
 .VLink_item-title a{ color: #FFF; text-decoration: none;}
 .VLink_item-title a:hover{ color: #FFF; text-decoration: none;}
.VLink_icon-img{width: 38px; height: 38px; border-radius: 6px; position: absolute;
 top: 50%; transform: translateY(-50%); left: 8px; object-fit: cover;}
 .iconfont.VLink_icon{width: 40px;height: 40px; padding: 10px; border-radius: 100%; font-size: 2.2rem;}
.VLink_vlink-item .VLink_item-title a{ line-height: 1.5;}
.copy_text.VLink_vlink-item:hover { transform: scale(1.035);}

.VLink_vlink-img-container { z-index: 0; overflow: hidden; position: relative; width: 93%; max-width: 676px;
 cursor: pointer; margin: 0 auto;margin-bottom: 0.8rem; }
.container-title{  margin-bottom: 1rem;}
.VLink_vlink-img-container .title{font-size: 5rem; color: #FFF; text-align: center; padding: 40px 0;}
.container-title .VLink_vlink-img-container{background: #000; border-radius: 24px;}
.VLink_icon-img{width: 38px; height: 38px; border-radius: 6px; position: absolute; top: 50%;
 transform: translateY(-50%); left: 8px; object-fit: cover;}
.show .VLink_playlist-close{ position: absolute; bottom: 0; width: 100%; left: 50%; transform: translateX(-50%);
 display: flex; align-items: center; justify-content: center; height: 36px;}
 .VLink_loading{ top: 20px; z-index: 0;}
.cssload-spin-box { position: absolute; margin: auto; left: 0; top: 0; bottom: 0; right: 0; width: 13px;
 height: 13px; border-radius: 100%; box-shadow: 13px 13px #4f4d49, -13px 13px #dfdfdf, -13px -13px #4f4d49, 13px -13px #dfdfdf;
    -o-box-shadow: 13px 13px #4f4d49, -13px 13px #dfdfdf, -13px -13px #4f4d49, 13px -13px #dfdfdf;
    -ms-box-shadow: 13px 13px #4f4d49, -13px 13px #dfdfdf, -13px -13px #4f4d49, 13px -13px #dfdfdf;
    -webkit-box-shadow: 13px 13px #4f4d49, -13px 13px #dfdfdf, -13px -13px #4f4d49, 13px -13px #dfdfdf;
    -moz-box-shadow: 13px 13px #4f4d49, -13px 13px #dfdfdf, -13px -13px #4f4d49, 13px -13px #dfdfdf;
    animation: cssload-spin 4.6s ease infinite; -o-animation: cssload-spin 4.6s ease infinite;
    -ms-animation: cssload-spin 4.6s ease infinite; -webkit-animation: cssload-spin 4.6s ease infinite;
    -moz-animation: cssload-spin 4.6s ease infinite;
}
.show-box{ display: none; padding: 20px 0; }
.play-box { padding-top: 20px;}
.show-box iframe{ width: 100%;}
.show .VLink_right-icon{ top: 30px; animation: VLink_rotate90 .2s linear;
    transform: rotate(90deg);}
    @keyframes VLink_rotate90 {
        0% {
            transform: rotate(0)
        }
    
        50% {
            transform: rotate(45deg)
        }
    
        to {
            transform: rotate(90deg)
        }
    }
.show .VLink_icon-img{ display: none;}    

@media screen and (max-width: 767px) {
    .VLink_vlink-img-container .title,.desc p{ font-size: 2rem;}
    .line2{ margin: 0 auto 20px;}
    
}