@charset "utf-8";

/* 初始化CSS */
* { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: bold; }
fieldset, img { border: none; vertical-align: middle; }
address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal; }
ul, ol { list-style: none; }
li { list-style-type: none; }
input { padding-top: 0; padding-bottom: 0; font-family: "Microsoft Yahei", Arial, sans-serif; }
select, input { vertical-align: middle; }
select, input, textarea { margin: 0; font-size: 12px; }
input[type="text"], input[type="password"], textarea { outline-style: none; }
textarea { font-family: "Microsoft Yahei", Arial, sans-serif; resize: none; }
body { font: 12px "Microsoft Yahei", Arial, sans-serif; color: #333; background: #fff; }
a { text-decoration: none; color: inherit; background: transparent; -webkit-tap-highlight-color: transparent; }
i, em { font-style: normal; }
.clearfix:after { display: block; visibility: hidden; clear: both; height: 0; content: ""; }
.clearfix { zoom: 1; }
.fl { float: left; }
.fr { float: right; }
.auto { margin-left: auto; margin-right: auto; }

/*文字截断*/
.TXTovehid { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body { background: #000; }


.imgbox{ position: relative; width: 100%; }
.imgbox .h5ctimg { width: 100%; }
.imgbox .sprinkle { position: absolute; z-index: 2; top: 300px; right: 0; width: 40%; overflow: hidden; }
.imgbox .sprinkle img { width: 100%; }
.imgbox .sprinkle1{ right: 3%; }
.imgbox .sprinkle2{ top: 24px; left: 28%; height: 78px; right: auto; }
.imgbox .sprinkle3{ top: 1132px; left: 28%; height: 54px; right: auto; }
.imgbox .sprinkle4{ top: 2114px; left: 4%; width: 45%; height: 220px; right: auto; }
.imgbox .sprinkle5{ top: 2114px; right: 4%; width: 45%; height: 220px; }
.imgbox .sprinkle6{ top: 3213px; left: 4%; width: 45%; height: 98px; right: auto; }
.imgbox .sprinkle7{ top: 3213px; right: 4%; width: 45%; height: 98px; }

.txtbox { border-radius: 10px; border: 1px solid #a88a64; margin: 10px auto; width: 96%; padding: 2px 0; box-sizing: border-box; }
.txtbox .title{ width: 100%; background: #b18955; padding: 6px 0; letter-spacing: 6px; font-size: 26px; color: #fff; text-align: center; margin-top: 6px; }

.txtbox .history { padding: 10px 2% 0; }
.txtbox .history li { margin-top: 4px; }
.txtbox .history li:first-child { margin-top: 0; }
.txtbox .history li .date { font-size: 0.54rem; color: #b18955; }
.txtbox .history li .desc { font-size: 0.4rem; color: #fff; line-height: 24px; text-align: justify; }
.txtbox .textarea { margin-top: 0.54rem; font-size: 0.4rem; color: #fff; line-height: 24px; }

.button-group {
    display: flex; align-items: center; justify-content: center;
    margin: 10px auto -30px;
}
.button-group .button{ position: relative; z-index: 4; width: 60px; height: 60px; display: block; margin: 0 0.16rem; text-align: center; line-height: 18px; box-sizing: border-box; padding-top: 12px; border-radius: 50%; font-size: 16px; color: #fff; background: #4eb3e7; }


.text{ font-size: 0.40rem; color: #f8f8f8; letter-spacing: 0.01rem; text-align: justify; padding: 0.2rem 1%; box-sizing: border-box; }

.music{ position: fixed; z-index:999; top:3%; right:5%; width:1.2rem; height:1.2rem; }
.music .control{ width:1.2rem; height:1.2rem; background:url(../images/music_c0fda01.gif) no-repeat center center; background-size: contain;}
.music .control .control-after{ position:absolute; top:50%; left:50%; margin:-0.5rem 0 0 -0.5rem; width:1rem; height:1rem; background:url(../images/music_off_8d94020.png) no-repeat center center; background-size:100% 100%; animation: pulsate 3s linear infinite; -webkit-animation: pulsate 3s linear infinite;}

.music .control.pause{ width:1.2rem; height:1.2rem; background:none;}
.music .control.pause .control-after{ animation:none; -webkit-animation:none;}

@keyframes pulsate {
    0% {transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    100% {transform: rotate(360deg); -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes pulsate {
    0% {transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    100% {transform: rotate(360deg); -webkit-transform: rotate(360deg); }
}

.main-text { text-align: center; line-height:1.2; padding: 0.7rem 0 0.3rem; background: url(../images/main-text-bg.jpg) no-repeat center top; background-size: 100% auto; }
.main-title { font-size: 0.76rem; color: #b18955; }
.main-desc { font-size: 0.6rem; color: #b18955; }