@CHARSET "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, fieldset, form, label, input, button, select, textarea, img, table, th, td, article, aside, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video, p{padding:0;margin:0;border: 0 none;color: rgba(255,255,255,1);letter-spacing: 3px;font-family: cejk;color: #FFDF6E;list-style:none;}
input, textarea, a{outline: none;resize: none;}
a{text-decoration: none;
  -moz-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, transform 0.4s ease-in-out, border-radius 0.4s ease-in-out;
  -webkit-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, transform 0.4s ease-in-out, border-radius 0.4s ease-in-out;
  -o-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, transform 0.4s ease-in-out, border-radius 0.4s ease-in-out;
  -ms-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, transform 0.4s ease-in-out, border-radius 0.4s ease-in-out;
  transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out，transform 0.4s ease-in-out, border-radius 0.4s ease-in-out;}
.clr{clear: both;}
*{margin: 0; padding: 0;box-sizing: border-box;}
a{-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;}
@font-face{font-family: cejk;src:url(../fonts/仓耳今楷.ttf);}
@font-face{font-family: apcy;src:url(../fonts/AppleChancery.ttf);}
video::-webkit-media-controls{ display:none !important; }

/* 01-image */
.carousel {position: relative;width: 100%;margin: 0 auto;overflow: hidden;}

/* 02-head */
.btn_ia{width: 100%;position: absolute;top: 2400px;padding: 0 200px;}
.btn_ia a{width: 840px;height: 410px;display: block;}
.btn_ia a.intro{float: left;}
.btn_ia a.album{float: right;}
.btn_ia a img{width: 820px;height: 410px;display: block;}

/* 03-introduction */
.introduction{width: 2160px;height: 3840px;}
.introduction img{width: 2160px;height: 3840px;}
.introduction img.int{width: 2160px;height: 3840px;display: block;}
.layer{position: absolute;top: 906px;left: 696px;z-index: 99;}
.layer .head video{border-radius: 768px;}
.layer .box{position: absolute;top: 700px;right: -300px;z-index: 99;}
.layer .box .play a img{width: 180px;height: 180px;}

/* 04-player */
.content{width: 2160px;height: 3840px;background: url(../images/bg.jpg) center center no-repeat;background-size: 100% 100%;position: relative;}
.content .return{position: absolute;width: 770px;height: 362px;background: url(../images/bg_return.png) center center no-repeat;z-index: 99;right: 80px;top: 144px;}
.content .return a{width: 240px;height: 120px;font-size: 72px;color: #FFF09E;position: absolute;top: 92px;}
.content .return a.ho{background: url(../images/icon_home.png) left 14px no-repeat;left: 200px;padding: 0 0 0 72px;}
.content .return a.re{background: url(../images/icon_retrun.png) left 20px no-repeat;left: 490px;padding: 0 0 0 90px;}

.content .album_title{padding: 180px 0 0 144px;}
.content .album_title .song{width: 1160px;font-size: 54px;margin: 0 0 60px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.content .album_title .compose{font-size: 54px;}
.content .music_player{margin: auto;}
.content .music_player .cd{margin: 250px auto 0;position: relative;}
.content .music_player .cd .round{width: 810px;height: 810px;margin: auto;position: relative;}
.content .music_player .cd .round .rotate{box-shadow: 36px 36px 24px rgba(0,0,0,0.5);border-radius: 810px;}
.content .music_player .cd .round img.he{width: 420px;height: 420px;position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;}
.content .music_player .cd .round .rotate img.ro{width: 810px;height: 810px;}
.content .music_player .cd .control{position: absolute;top: -140px;right: 420px;}
.content .music_player .cd .control img{width: 500px;height: 600px;}
.content .music_player .progress-container {width: 80%;height: 30px;background: #5F4D0C;border-radius: 25px;position: relative;margin: 100px auto 50px;cursor: pointer;border: 6px solid #EBD5B3;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);}
.content .music_player .progress-bar {height: 100%;width: 0;background-color: #5F4D0C;border-radius: 5px;transition: width 0.3s ease-in-out;border-radius: 50%;}
.content .music_player .progress-thumb {width: 106px;height: 108px;background: url(../images/icon_round.png) center center no-repeat;border-radius: 50%;position: absolute;top: 50%;left: 0;transform: translate(-50%, -50%);cursor: grab;}
.content .music_player .time{width: 100%;padding: 20px 10px;overflow: auto;height: 100px;}
.content .music_player .time span.s{float: left;font-size: 48px;}
.content .music_player .time span.a{float: right;font-size: 48px;}
.content .music_player .console{width: 800px;margin: 100px auto 0;position: relative;height: 270px;}
.content .music_player .console a{display: block;}
.content .music_player .console a.pre{width: 104px;height: 116px;background: url(../images/btn_previous.png) center center no-repeat;float: left;margin: 68px 0 0;position: absolute;left: 0;}
.content .music_player .console a.pla{width: 264px;height: 270px;background: url(../images/btn_play.png) center center no-repeat;float: left;margin: auto;position: absolute;left: 0;right: 0;}
.content .music_player .console a.nex{width: 104px;height: 116px;background: url(../images/btn_next.png) center center no-repeat;float: left;margin: 68px 0 0;position: absolute;right: 0;}

.content .music_player .album_list{width: 2000px;margin: 100px auto 0;height: 1724px;background: rgba(0,0,0,0.25);overflow: scroll;padding: 0 0 80px;}
.content .music_player .album_list .album{width: 1872px;margin: auto;}
.content .music_player .album_list .album .out{padding: 72px 0 0;}
.content .music_player .album_list .album .out .ico{width: 128px;height: 128px;float: left;display: block;}
.content .music_player .album_list .album .out .ico img{width: 128px;height: 128px;}
.content .music_player .album_list .album .out .nam{width: 1696px;margin: 0 0 0 48px;float: left;}
.content .music_player .album_list .album .out .nam .work{font-size: 48px;}
.content .music_player .album_list .album .out .composer{font-size: 48px;margin: 10px 0 0;}
.content .music_player .album_list .album ul.in{margin: 36px 0 0 176px;box-shadow: inset 0 0 36px rgba(0,0,0,0.6);background: rgba(0,0,0,0.25);width: 1696px;border-radius: 10px;}
.content .music_player .album_list .album ul.in li{width: 100%;margin: 0 48px;overflow: auto;}
.content .music_player .album_list .album ul.in li.la_c{width: calc(100% - 96px);border-top: 1px solid rgba(255,233,110,0.5);}
.content .music_player .album_list .album ul.in li .text{display: flex; justify-content: center;align-items: center;width: 1600px;}
.content .music_player .album_list .album ul.in li .text p{font-size: 48px;padding: 40px 0;width: 1440px;padding-left: 76px;text-indent: -76px;}
.content .music_player .album_list .album ul.in li .text a.btn_p{width: 140px;height: 140px;}
.content .music_player .album_list .album ul.in li .text a.btn_p img{padding: 20px;width: 140px;height: 140px;display: block;}

.ctl{animation: rotateAnimation 1s ease-in-out forwards;}
.noctl{animation: rotateAnimationAlt 1s ease-in-out forwards;}
.roundplay{animation:turn 18s linear infinite;}
@keyframes turn{
   0%{
  transform: translate(0%,0%) rotateZ(0deg);
   }
   100%{
  transform: translate(0%,0%) rotateZ(360deg);
   }
}

@keyframes rotateAnimation {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(35deg);
    }
}
@keyframes rotateAnimationAlt {
    0% {
    transform: rotate(35deg);
    }
    100% {
    transform: rotate(0deg);
    }
}


@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes slideOutLeft {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
 
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}


@media screen and (max-width: 1080px){
/* 02-head */
.btn_ia{width: 100%;top: 1200px;padding: 0 100px;}
.btn_ia a{width: 420px;height: 205px;}
.btn_ia a img{width: 420px;height: 205px;display: block;}


/* 03-introduction */
.introduction{width: 1080px;height: 1920px;}
.introduction img{width: 1080px;height: 1920px;}
.introduction img.int{width: 1080px;height: 1920px;}
.layer{top: 453px;left: 348px;}
.layer .head video{border-radius: 384px;width: 384px;height: 384px;}
.layer .box{top: 350px;right: -150px;}
.layer .box .play a img{width: 90px;height: 90px;}

  

/* 04-player */
.content{width: 1080px;height: 1920px;background: url(../images/bg.jpg) center center no-repeat;}
.content .return{width: 385px;height: 181px;right: 40px;top: 72px;background: url(../images/bg_return.png) center center no-repeat;background-size: 100% 100%;}
.content .return a{width: 124px;height: 60px;font-size: 36px;top: 46px;}
.content .return a.ho{background: url(../images/icon_home.png) left 7px no-repeat;left: 100px;padding: 0 0 0 36px;background-size: 29px 29px;}
.content .return a.re{background: url(../images/icon_retrun.png) left 10px no-repeat;left: 245px;padding: 0 0 0 45px;background-size: 43px 25px;}

.content .album_title{padding: 90px 0 0 72px;}
.content .album_title .song{width: 580px;font-size: 27px;margin: 0 0 30px;}
.content .album_title .compose{font-size: 27px;}
.content .music_player .cd{margin: 125px auto 0;}
.content .music_player .cd .round{width: 405px;height: 405px;}
.content .music_player .cd .round .rotate{box-shadow: 18px 18px 12px rgba(0,0,0,0.5);border-radius: 405px;}
.content .music_player .cd .round img.he{width: 210px;height: 210px;}
.content .music_player .cd .round .rotate img.ro{width: 405px;height: 405px;}
.content .music_player .cd .control{top: -70px;right: 210px;}
.content .music_player .cd .control img{width: 250px;height: 300px;}
.content .music_player .progress-container {width: 80%;height: 15px;border-radius: 12px;margin: 50px auto 25px;border: 3px solid #EBD5B3;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);}
.content .music_player .progress-bar {height: 100%;border-radius: 3px;border-radius: 50%;}
.content .music_player .progress-thumb {width: 53px;height: 54px;background: url(../images/icon_round.png) center center no-repeat;background-size: 53px 54px;}
.content .music_player .time{width: 100%;padding: 10px 5px;height: 50px;}
.content .music_player .time span.s{font-size: 24px;}
.content .music_player .time span.a{font-size: 24px;}
.content .music_player .console{width: 400px;margin: 50px auto 0;height: 135px;}
.content .music_player .console a.pre{width: 52px;height: 58px;margin: 34px 0 0;background-size: 100% 100%;}
.content .music_player .console a.pla{width: 132px;height: 135px;background-size: 100% 100%;}
.content .music_player .console a.nex{width: 52px;height: 58px;margin: 34px 0 0;background-size: 100% 100%;}

.content .music_player .album_list{width: 1000px;margin: 50px auto 0;height: 862px;padding: 0 0 40px;}
.content .music_player .album_list .album{width: 936px;}
.content .music_player .album_list .album .out{padding: 36px 0 0;}
.content .music_player .album_list .album .out .ico{width: 64px;height: 64px;}
.content .music_player .album_list .album .out .ico img{width: 64px;height: 64px;}
.content .music_player .album_list .album .out .nam{width: 848px;margin: 0 0 0 24px;}
.content .music_player .album_list .album .out .nam .work{font-size: 24px;}
.content .music_player .album_list .album .out .composer{font-size: 24px;margin: 5px 0 0;}
.content .music_player .album_list .album ul.in{margin: 18px 0 0 88px;box-shadow: inset 0 0 18px rgba(0,0,0,0.6);background: rgba(0,0,0,0.25);width: 848px;border-radius: 5px;}
.content .music_player .album_list .album ul.in li{margin: 0 24px;}
.content .music_player .album_list .album ul.in li.la_c{width: calc(100% - 48px);}
.content .music_player .album_list .album ul.in li .text{width: 800px;}
.content .music_player .album_list .album ul.in li .text p{font-size: 24px;padding: 20px 0;width: 720px;padding-left: 38px;text-indent: -38px;}
.content .music_player .album_list .album ul.in li .text a.btn_p{width: 70px;height: 70px;}
.content .music_player .album_list .album ul.in li .text a.btn_p img{padding: 10px;width: 70px;height: 70px;}


}