.main {height:calc(100% - 106px); overflow-y:scroll; padding:0px 40px 0px 45px;}
.main::-webkit-scrollbar {display: none;}
.main:after {content:''; clear:both; display: table;}

.main .cont {position: relative;}
.main .cont:after {content:''; clear:both; display: table}
.main .cont .banner {position: relative; padding-top:45px; float:left; width:calc(100% - 400px);}
.main .cont .banner p {font-size:25px; color:#222; font-weight:700;}
.main .cont .banner h2 {font-size:55px; color:#111; margin-top:11px; font-weight:800;}
.main .cont .banner span {display: inline-block; width:100%; font-size:16px; color:#a2a8b0; line-height:1.45em; margin-top:12px; padding-left:2px; font-weight:200;}
.main .cont .banner button {border-radius:50px; border:none; height:50px; color:#fff; background:#000080; font-size:15px; font-weight:500; margin-top:26px; width:210px; font-weight:400; letter-spacing: .2px;}
.main .cont .banner button img {margin:-3px 0 0 10px;}
.main .cont .banner .img {position: absolute; right:35px; top:-95px; z-index: -1;}



.main .cont .produced {position: relative; overflow: hidden; margin-top:80px; float:left; width:calc(100% - 400px);}
.main .cont .produced h3 {font-size:15px; color:#a2a8b0; font-weight:300; }
.main .cont .produced h2 {font-size:25px; color:#222; margin-top:3px; font-weight:800; }
.main .cont .produced h2:after {content:''; clear:both; display: table;}
.main .cont .produced h2 button {float:right; border:none; background:none; margin-right:2px; margin-top:10px; font-size:14px; color:#cbced2}
.main .cont .produced h2 button img {margin:-2px 0 0 5px; opacity: .4;}
.main .cont .produced .swiper { margin-top:15px; overflow:visible; }
.main .cont .produced .swiper .swiper-slide {width:180px !important; overflow:visible;}
.main .cont .produced .swiper .swiper-slide button {border:none; background:none; width:100%; text-align: left;}
.main .cont .produced .swiper .swiper-slide .img {width:100%; padding-top:100%; border-radius:5px; box-shadow:4px 4px 20px rgb(118 141 149 / 27%); position: relative;}
.main .cont .produced .swiper .swiper-slide .img.watermark::after {content:''; position: absolute; left:0; top:0; width:100%; height:100%; background:url('../img/watermark.svg')no-repeat center; background-size:75%; z-index: 1;}
.main .cont .produced .swiper .swiper-slide p {font-size:15px; color:#616469; font-weight:600; margin-top:12px;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.main .cont .produced .swiper .swiper-slide span {display: inline-block; width:100%; margin-top:4px; color:#A2A8B0; font-size:13px; font-weight:300;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.main .cont .produced .swiper .swiper-slide .right_bt {position: absolute; right:0; bottom:3px;}
.main .cont .produced .swiper .swiper-slide .right_bt .list_more {display:none; position: absolute; right:0px; bottom:16px; width:145px; border-radius:10px; background:#fff; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 4px 4px 40px rgb(118 141 149 / 10%); padding:10px; z-index: 3; height:auto;}
.main .cont .produced .swiper .swiper-slide .right_bt .list_more.on {display:block;}
.main .cont .produced .swiper .swiper-slide .right_bt .list_more li {display: inline-block; width:100%; font-size:12px; color:#cbced2;}
.main .cont .produced .swiper .swiper-slide .right_bt .list_more li a {display: inline-block; width:100%; font-size:13px; color:#77797b; padding:3px 3px; font-weight:500; cursor: pointer;}
.main .cont .produced .swiper .swiper-slide .right_bt .list_more li a img {margin:-2px 5px 0 0;}
/*.main .cont .produced .swiper .swiper-slide .right_bt .list_more li:first-child {padding:1px 0 5px 0;}*/
/*.main .cont .produced .swiper .swiper-slide .right_bt .list_more li:last-child {padding:8px 0 0 0; margin-top:10px;border-top:1px solid #f2f2f2;}*/


.main .cont .new_release {position: relative; overflow: hidden; margin-top:50px; float:left; width:calc(100% - 400px);}
.main .cont .new_release h3 {font-size:15px; color:#a2a8b0; font-weight:300; }
.main .cont .new_release h2 {font-size:25px; color:#222; margin-top:3px; font-weight:800; }
.main .cont .new_release h2:after {content:''; clear:both; display: table;}
.main .cont .new_release h2 button {float:right; border:none; background:none; margin-right:2px; margin-top:10px; font-size:14px; color:#cbced2}
.main .cont .new_release h2 button img {margin:-2px 0 0 5px; opacity: .4;}
.main .cont .new_release .swiper { margin-top:15px; overflow:visible; }
.main .cont .new_release .swiper .swiper-slide {width:180px !important;}
.main .cont .new_release .swiper .swiper-slide button {border:none; background:none; width:100%; text-align: left;}
.main .cont .new_release .swiper .swiper-slide .img {width:100%; padding-top:100%; border-radius:5px; box-shadow:4px 4px 20px rgb(118 141 149 / 27%);}
.main .cont .new_release .swiper .swiper-slide p {font-size:15px; color:#616469; font-weight:600; margin-top:12px;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.main .cont .new_release .swiper .swiper-slide span {display: inline-block; width:100%; margin-top:4px; color:#A2A8B0; font-size:13px; font-weight:300;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.main .cont .new_release .swiper .swiper-slide .right_bt {position: absolute; right:0; bottom:3px;}
.main .cont .new_release .swiper .swiper-slide .right_bt .list_more {display:none; position: absolute; right:0px; bottom:16px; width:145px; border-radius:10px; background:#fff; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 4px 4px 40px rgb(118 141 149 / 10%); padding:10px; z-index: 3; height:auto;}
.main .cont .new_release .swiper .swiper-slide .right_bt .list_more.on {display:block;}
.main .cont .new_release .swiper .swiper-slide .right_bt .list_more li {display: inline-block; width:100%; font-size:12px; color:#cbced2;}
.main .cont .new_release .swiper .swiper-slide .right_bt .list_more li a {display: inline-block; width:100%; font-size:13px; color:#77797b; padding:3px 3px; font-weight:500; cursor: pointer;}
.main .cont .new_release .swiper .swiper-slide .right_bt .list_more li a img {margin:-2px 5px 0 0;}



.main .cont .myplay {margin-top:40px; overflow: hidden; float:left; width:calc(100% - 400px);}
.main .cont .myplay h2 {font-size:25px; color:#222; margin-top:3px; font-weight:800;}
.main .cont .myplay h2:after {content:''; clear:both ;display: table;}
.main .cont .myplay h2 button {border:none; background:none; float:right; font-size:14px; color:#cbced2; font-weight:500; letter-spacing: .2px; padding-right:2px;margin-top:10px; font-size:14px; color:#cbced2}
.main .cont .myplay h2 button img {margin:-2px 0 0 5px; opacity: .4;}
.main .cont .myplay .swiper { margin-top:15px; overflow:visible;}
.main .cont .myplay .swiper .swiper-slide {width:180px !important;}
.main .cont .myplay .swiper .swiper-slide button {border:none; background:none; width:100%; text-align: left;}
.main .cont .myplay .swiper .swiper-slide .img {width:100%; padding-top:100%; border-radius:5px; box-shadow:4px 4px 20px rgb(118 141 149 / 27%);}
.main .cont .myplay .swiper .swiper-slide p {font-size:15px; color:#616469; font-weight:600; margin-top:12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.main .cont .myplay .swiper .swiper-slide span {display: inline-block; width:100%; margin-top:4px; color:#A2A8B0; font-size:13px; font-weight:300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.main .cont .myplay .swiper .swiper-slide .right_bt {position: absolute; right:0; bottom:3px;}
.main .cont .myplay .swiper .swiper-slide .right_bt .list_more {display:none; position: absolute; right:0px; bottom:16px; width:145px; border-radius:10px; background:#fff; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 4px 4px 40px rgb(118 141 149 / 10%); padding:10px; z-index: 3; height:auto;}
.main .cont .myplay .swiper .swiper-slide .right_bt .list_more.on {display:block;}
.main .cont .myplay .swiper .swiper-slide .right_bt .list_more li {display: inline-block; width:100%; font-size:12px; color:#cbced2;}
.main .cont .myplay .swiper .swiper-slide .right_bt .list_more li a {display: inline-block; width:100%; font-size:13px; color:#77797b; padding:3px 3px; font-weight:500; cursor: pointer;}
.main .cont .myplay .swiper .swiper-slide .right_bt .list_more li a img {margin:-2px 5px 0 0;}
.main .cont .myplay .swiper .swiper-slide .right_bt .list_more li:first-child {padding:1px 0 5px 0;}
.main .cont .myplay .swiper .swiper-slide .right_bt .list_more li:last-child {padding:8px 0 0 0; margin-top:10px;border-top:1px solid #f2f2f2;}




.main .cont .category {position: relative; overflow: hidden; margin-top:40px; float:left; width:calc(100% - 400px);}
.main .cont .category.cate_wid {width:100%;}
.main .cont .category h2 {font-size:25px; color:#222; margin-top:3px; font-weight:800;}
.main .cont .category h3 {font-size:15px; color:#a2a8b0; font-weight:300; }
.main .cont .category h2:after {content:''; clear:both ;display: table;}
.main .cont .category h2 button {border:none; background:none; float:right; font-size:14px; color:#cbced2; font-weight:500;  margin-top:10px; letter-spacing: .2px; padding-right:2px;}
.main .cont .category h2 button img {margin:-2px 0 0 5px; opacity: .4;}
.main .cont .category .swiper { margin-top:15px; overflow: visible;}
.main .cont .category .swiper .swiper-slide {width:290px !important; text-align: center;}
.main .cont .category .swiper .swiper-slide button {border:none; background:none; width:100%; position: relative; overflow: hidden; border-radius:5px;}
.main .cont .category .swiper .swiper-slide button:after {content:''; position: absolute; left:0; bottom:0; width:100%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5)); height:68px}
.main .cont .category .swiper .swiper-slide .img {user-select:none; width:100%; padding-top:53%; border-radius:5px; box-shadow:4px 4px 20px rgb(118 141 149 / 27%);}
.main .cont .category .swiper .swiper-slide p {font-size:18px; color:#fff; position: absolute; left:25px; bottom:21px; letter-spacing: .3px; text-shadow: 1px 1px 2px rgba(0,0,0,.3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 1;}

.main .cont .category .swiper .swiper-slide .right_bt {position: absolute; right:0; bottom:3px;}
.main .cont .category .swiper .swiper-slide .right_bt .list_more {display:none; position: absolute; right:0px; bottom:16px; width:145px; border-radius:10px; background:#fff; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 4px 4px 40px rgb(118 141 149 / 10%); padding:10px; z-index: 3; height:auto;}
.main .cont .category .swiper .swiper-slide .right_bt .list_more.on {display:block;}
.main .cont .category .swiper .swiper-slide .right_bt .list_more li {display: inline-block; width:100%; font-size:12px; color:#cbced2;}
.main .cont .category .swiper .swiper-slide .right_bt .list_more li a {display: inline-block; width:100%; font-size:13px; color:#77797b; padding:3px 3px; font-weight:500; cursor: pointer;}
.main .cont .category .swiper .swiper-slide .right_bt .list_more li a img {margin:-2px 5px 0 0;}
.main .cont .category .swiper .swiper-slide .right_bt .list_more li:first-child {padding:1px 0 5px 0;}
.main .cont .category .swiper .swiper-slide .right_bt .list_more li:last-child {padding:8px 0 0 0; margin-top:10px;border-top:1px solid #f2f2f2;}
.main .cont .usecase .swiper .swiper-slide .div_box {position: relative;
	cursor: pointer; border-radius:5px; overflow: hidden;}
.main .cont .usecase .swiper .swiper-slide .div_box:after {content:''; position: absolute; left:0; bottom:0; width:100%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5)); height:68px}
.main .cont .usecase .swiper .swiper-slide p {font-size:16px;  text-align: left; left:23px; bottom:21px; z-index: 1;}


.main .play_1 {margin-top:40px; overflow: hidden;}
.main .play_1 h2 {font-size:25px; color:#222; margin-top:3px; font-weight:800;}
.main .play_1 h2:after {content:''; clear:both ;display: table;}
.main .play_1 h2 button {border:none; background:none; float:right; font-size:14px; color:#cbced2; font-weight:500;  margin-top:10px; letter-spacing: .2px; padding-right:2px;}
.main .play_1 h2 button img {margin:-2px 0 0 5px; opacity: .4;}
.main .play_1 .swiper { margin-top:15px; overflow: visible;}
.main .play_1 .swiper .swiper-slide {width:180px !important;}
.main .play_1 .swiper .swiper-slide button {border:none; background:none; width:100%; text-align: left;}
.main .play_1 .swiper .swiper-slide .img {width:100%; padding-top:100%; border-radius:5px; box-shadow:4px 4px 20px rgb(118 141 149 / 27%);}
.main .play_1 .swiper .swiper-slide p {font-size:15px; color:#616469; font-weight:600; margin-top:12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.main .play_1 .swiper .swiper-slide span {display: inline-block; width:100%; margin-top:4px; color:#A2A8B0; font-size:13px; font-weight:300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.main .play_1 .swiper .swiper-slide .right_bt {position: absolute; right:0; bottom:3px;}
.main .play_1 .swiper .swiper-slide .right_bt .list_more {display:none; position: absolute; right:0px; bottom:16px; width:145px; border-radius:10px; background:#fff; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 4px 4px 40px rgb(118 141 149 / 10%); padding:10px; z-index: 3; height:auto;}
.main .play_1 .swiper .swiper-slide .right_bt .list_more.on {display:block;}
.main .play_1 .swiper .swiper-slide .right_bt .list_more li {display: inline-block; width:100%; font-size:12px; color:#cbced2;}
.main .play_1 .swiper .swiper-slide .right_bt .list_more li a {display: inline-block; width:100%; font-size:13px; color:#77797b; padding:3px 3px; font-weight:500; cursor: pointer;}
.main .play_1 .swiper .swiper-slide .right_bt .list_more li a img {margin:-2px 5px 0 0;}
.main .play_1 .swiper .swiper-slide .right_bt .list_more li:first-child {padding:1px 0 5px 0;}
.main .play_1 .swiper .swiper-slide .right_bt .list_more li:last-child {padding:8px 0 0 0; margin-top:10px;border-top:1px solid #f2f2f2;}





.main .cont .trand {right:0; top:65px; width:350PX; float:right; margin-top:-310px; position: sticky;}
.main .cont .trand h2 {font-size:25px; color:#222; margin-top:3px; font-weight:800; padding-left:8px;}
.main .cont .trand h2:after {content:''; clear:both ;display: table;}
.main .cont .trand h2 button {border:none; background:none; float:right; font-size:14px; color:#cbced2; font-weight:500;  margin-top:10px; letter-spacing: .2px; padding-right:2px;}
.main .cont .trand ul {margin-top:15px; height:860px; overflow-y: scroll}
.main .cont .trand ul::-webkit-scrollbar {display: none;}
.main .cont .trand h2 button img {margin:-2px 0 0 5px; opacity: .4;}
.main .cont .trand ul li {margin-bottom:4.5px; padding:8px; cursor: pointer; border-radius:5px; transition: .3s; background:rgba(2255,255,255,0); position: relative;}
.main .cont .trand ul li:last-child {margin-bottom:0;}
.main .cont .trand ul li:hover {background:#fff; box-shadow: 4px 4px 15px rgb(118 141 149 / 10%);}
.main .cont .trand ul li:after {content:''; clear:both; display: table;}
.main .cont .trand ul li .img {width:75px; height:75px; border-radius:4px; float:left; box-shadow:4px 4px 20px rgb(118 141 149 / 27%); position: relative}
.main .cont .trand ul li .img.watermark::after {content:''; position: absolute; left:0; top:0; width:100%; height:100%; background:url('../img/watermark.svg')no-repeat center; background-size:75%; z-index: 1;}
.main .cont .trand ul li .txt {float:right; width:calc(100% - 92px); padding:5px 72px 0 0;}
.main .cont .trand ul li h3 {font-size:15px; color:#616469; font-weight:600; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
.main .cont .trand ul li p {margin-top:3px; font-size:13px; color:#a2a8b0; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
.main .cont .trand ul li span { display:inline-block; margin-right:15px; font-size:12px; color:#cbced2; margin-top:14px;}
.main .cont .trand ul li span img {height:9px; margin:-2px 5px 0 0; filter:grayscale(1); }
.main .cont .trand ul li span.heart img {opacity: .5;}
.main .cont .trand ul li span.heart.on img {opacity: 1; filter:initial;}
.main .cont .trand ul li .bt {position: absolute; right:20px; top:50%; transform: translate(0,-50%);}
.main .cont .trand ul li .bt button {border:none; background:none; margin-left:5px; filter: grayscale(1);}
.main .cont .trand ul li .bt button.heart {opacity: .5;}
.main .cont .trand ul li .bt button.heart.on {opacity: 1; filter:initial;}
.main .cont .trand ul li .bt button.play.on {filter:initial;}
.main .cont .trand ul li .bt button img {width:20px;}
.main .cont .trand ul li .bt button.heart img {width:19px;}
.main .cont .trand ul li .bt button.playlist {opacity: .4;}







.content .music_info_detail {position: fixed; right:-390px; top:0; width:360px; height:calc(100% - 90px); background:rgb(249 251 253); box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 3px 3px 50px rgba(118, 141, 149, 0.05); border-left:1px solid #fff; border-right:1px solid #fff; transition: .3s; z-index: 100002}
.content .music_info_detail.on {right:0;}
.content .music_info_detail .scroll {padding:25px; overflow-y: scroll; height:100%; position: relative;}
.content .music_info_detail .scroll::-webkit-scrollbar {display: none;}
.content .music_info_detail .img {width:100%; padding-top:100%; border-radius:10px; }
.content .music_info_detail iframe {width:100%; height:468px; border-radius:10px;}
.content .music_info_detail .txt {margin-top:20px; position: relative;}
.content .music_info_detail .txt .user:after {content:''; clear:both; display: table;}
.content .music_info_detail .txt .user .profile_img {width:25px; height:25px; border-radius:50%; float:left; margin:-5px 0 0 0;}
.content .music_info_detail .txt .user span {font-size:13px; color:#a2a8b0; float:left; margin-left:8px; font-weight:300;}
.content .music_info_detail .txt h3 {font-size:16px; color:#616469; margin-top:10px; font-weight:600;}
.content .music_info_detail .txt .tag {margin-top:10px;}
.content .music_info_detail .txt .tag span {display:inline-block;color:#ADD8E6; border:1px solid #ADD8E6; border-radius:4px; font-size:13px; padding:3px 7px; background:none; margin:2px 0;}

.content .music_info_detail .txt .name_box {margin-top:15px;}
.content .music_info_detail .txt .name_box p {font-size:14px; color:#616469; margin-bottom:2px;}
.content .music_info_detail .txt .name_box span {display:inline-block;color:#B8B8B8; border:1px solid #B8B8B8; border-radius:4px; font-size:13px; padding:3px 6px; background:none; margin:5px 1px 0px 0;}

.content .music_info_detail .txt .more {margin-top:15px;}
.content .music_info_detail .txt .more:after {content:''; clear:both; display: table;}
.content .music_info_detail .txt .more button {border:none; background:none; width:30px; height:46px;}
.content .music_info_detail .txt .more .play {border-radius:10px; background:rgba(255,255,255,.3); border:1px solid #fff;  float:left; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 1px 1px 20px rgb(118 141 149 / 15%); border-radius:50%; padding-left:3px; width:46px; margin-right:8px;}
.content .music_info_detail .txt .more .play img  {}
.content .music_info_detail .txt .more .play .play2 {display: none;}
.content .music_info_detail .txt .more .play.on {padding-left:0;}
.content .music_info_detail .txt .more .play.on .play1 {display: none;}
.content .music_info_detail .txt .more .play.on .play2 {display: inline-block;}
.content .music_info_detail .txt .right {float:right;}
.content .music_info_detail .txt .right .info {display: inline-block; margin-top:20px; color:#caced2; font-size:11px; margin-left:10px;}
.content .music_info_detail .txt .right .info img {margin:-2px 3px 0 0;}
.content .music_info_detail .lyrics {border-top:1px solid #ecedef; margin-top:22px; padding-top:20px;}
.content .music_info_detail .lyrics h3 {font-size:16px; color:#616469; font-weight:600;}
.content .music_info_detail .lyrics p {margin-top:15px; line-height:1.5em; color:#A2A8B0; font-size:14px; font-weight:300;}
.content .music_info_detail .txt .prom_txt {font-size:14px; color:#A2A8B0; line-height:1.3em; margin-top:10px;}

.content .music_info_detail .music_info_close {position: absolute; left:-27px; top:50%; transform: translate(0,-50%); width:27px; height:55px; border-radius:8px 0 0 8px ; background:rgb(249 251 253); border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0; z-index: 10;}
.content .music_info_detail .music_info_close img {transform:rotate(90deg); width:12px;}
.content .music_info_detail.on .music_info_close img {transform:rotate(-90deg);}








.video {position: fixed; left:50%; top:-150%; width:760px; height:calc(100vh - 198px); background:#f9fbfd; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; border-radius:10px; z-index:100004; overflow: hidden; transition: 1s; transform: translate(-50%,0); max-height:760px;}
.video.on {top:100px;}

.video .view .cc_editor {position: absolute; left:20px; top:20px; border:none; background:rgba(0,0,0,.4); width:127px; height:40px; z-index: 2; opacity: 1; transition: .3s;}
.video .view .cc_editor button {border:none; background:none; font-size:14px; color:#fff; height:40px; float:left; padding:0 0 0 15px}
.video .view .cc_editor button.cc_hide {padding:0 10px 3px 13px;}
.video .view .cc_editor button.cc_hide img {transform:rotate(90deg); transition: .5s; filter:invert(1) brightness(100); width:12px;}
.video .view .cc_editor.on button.cc_hide img {transform:rotate(-90deg); }
.video .view .cc_editor.on {left:-92px; opacity:0;}
.video .view:hover .cc_editor.on {opacity: 1;}

.video .view .video_close {position: absolute; right:20px; top:20px; border:none; background:rgba(0,0,0,.4); width:40px; height:40px; z-index: 2;
	opacity: 0; transition: .3s;}
.video .view .video_close img {width:11px;}
.video .view {width:100%; height:100%;  position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);}
.video .play_box {width:100%; position: relative; text-align: center; height:100%; display:flex; align-items: center;}
.video .play_box img {max-width:100%; max-height:100%; width:auto; height:auto; margin:0 auto;}
.video .play_box video {width: 100%; height: 100%; object-fit: fill; position: absolute; top: 0; left: 0;}

.video .control_box {position: absolute; left:0px; width:100%; bottom:0px; background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.7)); padding:30px 30px; opacity:0; transition: .3s; z-index: 1;}
.video .control_box button {float:left; border:none; background:none; margin:0 10px;}
.video .control_box button.play {margin-top:3px;}
.video .control_box button.play .play2 {display: none;}
.video .control_box button.play.on .play2 {display: block;}
.video .control_box button.play.on .play1 {display: none;}

.video .control_box .time {float:left; margin:0 15px 0 25px; position: relative; width:calc(100% - 157px); padding-right:112px; margin-top:10px;}

.video .control_box .time span {font-size:12px; color:#fff; font-weight:200; position: absolute; right:20px; top:-4px;}
.video .control_box .time span p {display:inline-block;}

.video .control_box .volume {float:left; position: relative;}
.video .control_box .volume .volume_he {height:90px; position: absolute; bottom:-150px; right:16px; transition: .5s;}
.video .control_box .volume .volume_he.on {bottom:39px}
.video .control_box .volume .gauge_bar {width:14px;}

.video .control_box button.cog {margin-top:4px;}
.video .control_box button.big {margin-top:4px; margin-left:12px;}

.video.hover .view .control_box {opacity: 1;}
.video.hover .view .video_close {opacity: 1;}

@media screen and (max-width:1200px) {
	.video.on {top:50%;}
	.video { left:50%; width:600px; height:600px; transform: translate(-50%,-50%)}

	.content .music_info_detail {height:calc(100% - 155px)}
}

@media screen and (max-width:767px) {
	.video {width:calc(100% - 40px); padding-top:calc(100% - 40px); height:auto}
	.content .music_info_detail {height:calc(100% - 135px)}
}





@media screen and (max-width:1600px) {

	.main {padding-left:0px;}
	/*.main .cont {overflow: hidden;}*/
	.main .cont .trand {width:300px;}
	.main .cont .trand ul li {margin-bottom:15px;}
	.main .cont .trand ul li .img {width:70px; height:70px;}
	.main .cont .trand ul li .txt {width:calc(100% - 85px); padding-right:50px}
	.main .cont .trand ul li h3 {font-size:14px;}
	.main .cont .trand ul li p {font-size:12px;}
	.main .cont .trand ul li .bt {right:10px;}
	.main .cont .trand ul li .bt button {margin-left:3px;}
	.main .cont .trand ul li .bt button img {width:18px;}

	.main .cont .banner, .main .cont .produced, .main .cont .new_release, .main .cont .myplay, .main .cont .category {width:calc(100% - 350px);}
}

@media screen and (max-width:1500px) {

	.main {padding-right:0;}
	.main .cont {overflow: hidden;}
	.main .cont {padding-right:0px;}
	.main .cont .trand {width:100%; position: relative; top:0; margin-top:45px;}
	.main .cont .trand h2 {padding-left:0;}
	.main .cont .trand ul {margin-top:10px;}
	.main .cont .trand ul:after {content:''; clear:both; display: table;}
	.main .cont .trand ul li {float:left; width:calc((100% - 40px) / 3); margin-right:20px; margin-bottom:5px;}
	.main .cont .trand ul li:nth-child(3n) {margin-right:0;}
	.main .cont .trand ul li:nth-child(11), .main .cont .trand ul li:nth-child(10) {display: none;}

	.main .cont .produced .swiper .swiper-slide {width:161.5px !important}
	.main .cont .myplay .swiper .swiper-slide {width:166px !important;}
	.main .play_1 .swiper .swiper-slide {width:162px !important;}

	.main .cont .produced, .main .cont .trand, .main .cont .myplay, .main .cont .category, .main .play_1 {padding-right:30px; padding-left:30px;}

	.main .cont .banner {padding-left:30px;}

	.main .cont .banner, .main .cont .produced, .main .cont .new_release, .main .cont .myplay, .main .cont .category {width:100%;}
	.main .cont .trand ul {height:auto; overflow: visible;}
	.main .cont .new_release {padding:0 30px;}
}

@media screen and (max-width:1200px) {
	.video .control_box {padding: 20px;}
}

@media screen and (max-width:1024px) {
	.main .cont .trand ul li {width:calc((100% - 30px) / 2); margin-right:30px;}
	.main .cont .trand ul li:nth-child(3n) {margin-right:30px;}
	.main .cont .trand ul li:nth-child(2n) {margin-right:0;}
	.main .cont .trand ul li:nth-child(10) {display: inline-block;}

}

@media screen and (max-width:767px) {
	.main .cont .banner {padding-top:35px; padding-left:20px;}
	.main .cont .banner p {font-size:20px;}
	.main .cont .banner h2 {font-size:36px; margin-top:5px;}
	.main .cont .banner span {font-size:13px; width:235px;}
	.main .cont .banner span br {display: none;}
	.main .cont .banner button {height:45px; width:210px; font-size:14px;}
	.main .cont .banner .img {width:340px; top:60px
		; right:-45px;}


	.main .cont .trand ul li {margin-right:0; width:100%;}
	.main .cont .produced, .main .cont .trand, .main .cont .myplay, .main .cont .category, .main .play_1 {padding-right:20px; padding-left:20px;}

	.main .cont .produced h2 {font-size:20px;}
	.main .cont .produced h3 {font-size:13px;}
	.main .cont .produced .swiper .swiper-slide {width:130px !important}
	.main .cont .produced .swiper .swiper-slide p {font-size:14px;}

	.main .cont .trand {margin-top:35px;}
	.main .cont .trand h2 {font-size:20px;}
	.main .cont .trand h2 button {font-size:13px; margin-top:6px; margin-right:0;}
	.main .cont .trand ul {margin-top:15px;}
	.main .cont .trand ul li {padding:0; margin-bottom:15px;}
	.main .cont .trand ul li:hover {background:none; box-shadow:initial;}
	.main .cont .trand ul li .txt {padding-right:40px; width:calc(100% - 75px); padding-top:1px;}
	.main .cont .trand ul li span {margin-top:10px;}
	.main .cont .trand ul li .img {width:60px; height:60px;}
	.main .cont .trand ul li .bt {right:0;}
	.main .cont .trand ul li .bt button img {width:16px;}

	.main .cont .new_release {padding:0 20px;}
	.main .cont .new_release h2 {font-size:20px;}
	.main .cont .new_release h2 button {font-size:13px; margin-top:6px; margin-right:0;}
	.main .cont .new_release .swiper .swiper-slide {width:130px !important}
	.main .cont .new_release .swiper .swiper-slide p {font-size:14px;}

	.main .cont .myplay {margin-top:30px;}
	.main .cont .myplay h2 {font-size:20px;}
	.main .cont .myplay h2 button {font-size:13px; margin-top:6px; margin-right:0;}
	.main .cont .myplay .swiper .swiper-slide {width:130px !important}
	.main .cont .myplay .swiper .swiper-slide p {font-size:14px;}
	

	.main .cont .category {margin-top:30px;}
	.main .cont .category h2 {font-size:20px;}
	.main .cont .category h2 button {font-size:13px; margin-top:6px; margin-right:0;}
	.main .cont .category .swiper .swiper-slide {width:250px !important}
	.main .cont .category .swiper .swiper-slide p {font-size:16px; bottom:18px; left:20px;}


	.main .cont .produced h2 {font-size:20px;}
	.main .cont .produced h2 button {font-size:13px; margin-top:6px; margin-right:0;}
	.main .cont .produced .swiper .swiper-slide {width:130px !important}

	.main .play_1 {margin-top:30px;}
	.main .play_1 h2 {font-size:20px;}
	.main .play_1 h2 button {font-size:13px; margin-top:6px; margin-right:0;}
	.main .play_1 .swiper .swiper-slide {width:130px !important}
	.main .play_1 .swiper .swiper-slide p {font-size:14px;}


}