body{position: relative;background:#78cf4c;}
html,body{ height: 100%; scroll-behavior: smooth; }
.clearfix:after{content:".";display:block;height:0;clear: both;visibility:hidden;}
.clearfix{*zoom:1;}

.top-header{ width: 100%;padding:0 ; position: relative; display: table; }
.top-header img{ width: 100%;  display: block;} 
.back{position: absolute;left:1rem;top:1rem;display:block; width: 2.6rem; height: 2.6rem; background: url(../images/back.png) no-repeat center; background-size: contain;}

.header{position: relative;z-index:10;overflow: hidden;height:3.425em;margin-bottom: 10px; background: #78b5ff;}
.header h1 {font-size:1.225rem;font-weight:200;padding:0 ;color:#fff;line-height:150%; text-align:center;}
.header h1 .go-back{position: absolute;left:10px;top:20%;display:block;font-size:2rem;font-weight:200;color:#fff;}
.header h1 img{display:block; width:60%;}
.wrapper{clear: both;   margin: 0 auto;}
/*轮换图*/
.g-scroll { width: calc(100% - 40px); height: auto; margin: 0 auto; }
.g-wrap{clear: both;  width:100%;  margin:0 auto; background: url(../images/main02.jpg) top no-repeat; background-size: cover;  }


/*最新推荐*/
.g-ad{clear: both;  width:100%;  margin:0 auto ; padding-bottom: 2rem; }
.g-ad img{display: block; width: 100%;height:auto; }
.g-ad .con{clear: both;  height:auto;overflow: hidden;padding: 20px ;}

 /*一键生成海报*/
.g-poster{clear: both;  width:100%;  margin:0 auto; padding-bottom: 2rem; }
.g-poster .btn{display: block; width: 40%;height:5rem; margin: 0 auto; background: url(../images/btn.png) center no-repeat; background-size: contain;}

.pop-wrap{width:100%;height: 100%;  background: rgba(0,0,0,0.8); position: fixed; right:0; top: 0;  z-index: 99999; display: none; }
.pop-wrap .close{ display: block; width: 2.6rem; height: 2.6rem; background: url(../images/close.png) no-repeat ; background-size: contain; position: absolute; right: 3%; top: 2%;}
.pop{width:90%; margin: 0 auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.pop img{width:100%; height: auto; margin: 0 auto; }

/*自选云厅*/
.g-block{clear: both;  width:100%;  margin:0 auto;  }
.g-block h2{ position: relative;clear: both; height: 2rem;  padding: 0 20px; font-size: 1.6rem;color: #000; line-height: 2rem; text-indent: 15px;}
.g-block h2 a{float: right; padding-right: 20px; font-size: 1.2rem; font-weight: normal;color: #e30083; line-height: 2rem; background: url(../images/ico01.png) right center no-repeat; background-size: 30%;}
.g-block h2::before{ position: absolute; left:20px; top:2px; content: " ";display: inline-block; width: 7px; height: 1.5rem;  border-radius: 3px;background: #e30083; }
.g-block h3{ position: relative;clear: both; height: 1.8rem; margin: 3px 0 10px 0px;  background: url(../images/lTit.png) center no-repeat; background-size: contain;}
.g-block img{display: block; width: 100%;height:auto;}
.g-block .con{clear: both;  height:auto;overflow-x: auto; white-space: nowrap;padding: 20px ;}
.g-block .con li {position: relative; display: inline-block; box-sizing: border-box; width: 43vw;   overflow: hidden;margin-right: 3vw;   text-align: left; }
.g-block .con li p {height: 2.8rem; overflow: hidden; padding: 10px 5px 0 5px;font-size: 1.2rem;line-height:1.4rem;color: #000;white-space:normal; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;}
.g-block .con p { position: relative; z-index: 1; overflow: hidden; padding: 20px 0 10px 0 ;font-size: 1.2rem;line-height:1.4rem;color: #000;white-space:normal; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;}
.g-block .item {  margin: 0 1rem; padding: 10px ;  border: 3px solid #000; background: #deff84;  position: relative;}
.g-block .vid {width:100%; height:100%;  box-sizing:border-box; border: 3px solid #000; position: relative; z-index: 1; }
.g-block .item::before {content: ""; display: block; width: 5rem; height: 5rem; background: #b7e33d; position: absolute; right: 0px; top: 2.5rem; z-index: 0;}
.g-block .item::after {content: ""; display: block; width: 5rem; height: 5rem; background: #b7e33d; position: absolute; left: 0px; bottom:0; z-index: 0;}
/* .g-block .item p { position: absolute; left: 20px; right: 20px; top: 5px; z-index: 1; font-size: 1.2rem;line-height:1.4rem;color: #fff; text-align: center;} */

 .visitor{clear: both;  width:100%;  margin:0 auto;  padding-bottom: 10rem; }
 .visitor .con{display: block; width: 40%; margin: 0 auto; padding: 5px 10px 5px 1rem; font-size: 1rem; font-weight: bold; color: #fff; text-align: center; border-radius: 1rem; background: #5fad38 url(../images/eye.png) 8px 50% no-repeat; background-size: 10%; }

 /*投票*/
.g-vote{clear: both;  width:100%;  margin:0 auto;  }
.g-vote img{ width: 97%; height: auto;  margin: 0 auto;}
.g-vote h2{ clear: both; height: auto;  margin:1rem 40px 0 40px;}
.g-vote .tro{ clear: both; height: auto;  margin:20px 20px; padding: 10px; border-radius: 1rem; background: #5ca836;}
.g-vote .tro h3{ font-size: 1.4rem; color: #fff; text-align: center; }
.g-vote .tro p{ margin-top: 6px; font-size: 1.0rem; color: #fff; line-height: 1.6rem; text-align: justify;}
.g-vote .tro p b{ color: #f5ea71;}
.g-vote .wrap{ clear: both; height: auto;   padding:0 20px; }
.g-vote .wrap ul{ display: flex; justify-content: space-between; flex-wrap: wrap; }
.g-vote .wrap li{ width: 47%; height: auto; margin:1rem 0 0 0;  text-align: center; }
.g-vote .wrap li .item{ padding:10px; border: 2px solid #000;  border-radius: 10px; background: #d2fabe; position: relative; }
.g-vote .wrap li:nth-child(1) .item,.g-vote .wrap li:nth-child(1) .btn,.g-vote .wrap li:nth-child(1) .rank{  background: #ffd966; }
.g-vote .wrap li:nth-child(2) .item,.g-vote .wrap li:nth-child(2) .btn,.g-vote .wrap li:nth-child(2) .rank{  background: #ace0e8; }
.g-vote .wrap li:nth-child(3) .item,.g-vote .wrap li:nth-child(3) .btn,.g-vote .wrap li:nth-child(3) .rank{  background: #f8c296; }
.g-vote .wrap li .item img{ border: 2px solid #000; border-radius: 10px; }
.g-vote .wrap li .item .name{ margin: 5px 0; padding-bottom:5px; font-size: 1rem; color: #000; line-height: 1.2rem; border-bottom: 1px dotted #000; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; } 
.g-vote .wrap li .item .num{ font-size: 1rem; color: #000; } 
.g-vote .wrap li .btn{display: flex; align-items: center; justify-content: center; width:100%; height: 2.3rem; margin: 5px auto; font-size: 1.2rem; font-weight: bold; color: #000;  box-sizing: border-box;  border: 2px solid #000; border-radius: 1rem; background: #d2fabe; }
.g-vote .wrap li .btn::before{ content: ""; display: inline-block; width:20%; height: 1.5rem; background:url(../images/zan.png) center no-repeat; background-size: contain;  }
.g-vote .wrap li .rank{position: absolute; left: -0.4rem; top: -0.4rem; width:1.5rem; height: 1.5rem; font-size: 1.2rem; font-weight: bold; color: #000; line-height: 1.5rem; border: 2px solid #000; border-radius: 50%; background: #d2fabe; }
.g-vote .load-more{display: block; width: 6rem; height: 2.5rem; overflow: hidden; margin: 1rem auto; text-indent: -10rem; background: url(../images/more.png) center no-repeat; background-size: contain}

.g-user{position: fixed; left: 0; bottom: 0;  width:100%; padding-bottom: 1.5rem;  border-top-left-radius: 1rem; border-top-right-radius: 1rem; background: #faa404; z-index: 9999; display: none;}
.g-user .account{ margin: 0 20px; height: 3rem; font-size: 1.2rem; color: #fff; line-height: 3rem; display: flex; justify-content: space-between;  }
.g-user .seeMv{  margin: 0 20px;  height: 2rem; padding:10px; font-size: 1.2rem; color: #333; line-height: 2rem; display: flex; justify-content: space-between; border-radius: 10px; background: #fff;  }
.g-user .seeMv .goWatch{ width: 6rem; height: 2rem; font-size: 1.2rem; color: #fff; line-height: 2rem; text-align: center; border-radius: 1rem; background: #78cf4c;  }
.g-user .seeMv .goVote{ width: 6rem; height: 2rem; font-size: 1.2rem; color: #fff; line-height: 2rem; text-align: center; border-radius: 1rem; background: #78cf4c;  }

.g-video { position: fixed;  top: 0; left: 0;  width: 100%; height: 100%;  background: rgba(0,0,0,1); z-index: 6666; display: none;}
.g-video .tip{ position: absolute;  bottom: 15vh; right: 3vw; padding:.5rem 1rem; border-radius: 1rem; background: rgba(0,0,0,1); z-index: 7777;}
.g-video .tip p{  font-size: 1rem; color: #fff; line-height: 1.6rem; text-align: center;}
.g-video .progress{margin-top: 5px; width: 100%; height: 3px; background:#333; border-radius: 2px; overflow: hidden;}
.g-video .progress-bar{width: 0; height: 100%; background: linear-gradient(90deg, #78cf4c, #4caf50); transition: width 0.3s linear;}
.g-video .close-video{ position: absolute; top: 2rem; right: 2rem; width: 2.5rem; height: 2.5rem; font-size: 2rem; color: #fff; line-height: 2.5rem; text-align: center; z-index: 7778;}
.g-video .watchAll{ position: absolute;  bottom: 15vh; left: 3vw; padding:.5rem 1rem; border-radius: 1.5rem; background: rgba(255,255,255,.5); z-index: 7777;}
.g-video .watchAll p{  font-size: 1rem; color: #333; line-height: 1.6rem; text-align: center;}
.g-video .watchAll p a{  font-size: 1rem; color: #333;}


 /*投票*/
.g-uRank{clear: both;  width:calc(100% - 40px);  margin:0 auto; display: block; border: 2px solid #000; border-radius: 1rem;  background: #c6ff94; }
.g-uRank .con{padding: 20px 10px; border-radius: 1rem; background: #d2fabe;  }
.g-uRank  h3{ font-size: 1.2rem; font-weight: normal; line-height: 1.6rem; text-align: center; padding: 10px 20px; display: flex;  border-bottom: 2px solid #000; }
.g-uRank .con li{ font-size: 1.2rem; line-height: 1.6rem; color: #262626;  text-align: center; margin-bottom: 10px; padding-bottom: 10px; display: flex;  border-bottom: 2px dotted #627559; }
.g-uRank .con li:nth-child(1) .rank-item{ text-indent: -10rem; background: url(../images/n1.png) center no-repeat; background-size: contain; }
.g-uRank .con li:nth-child(2) .rank-item{ text-indent: -10rem; background: url(../images/n2.png) center no-repeat; background-size: contain; }
.g-uRank .con li:nth-child(3) .rank-item{ text-indent: -10rem; background: url(../images/n3.png) center no-repeat; background-size: contain; }
.g-uRank .rank-item{ width: 15%; overflow: hidden; font-size: 1.2rem; }
.g-uRank .name{ width: 50%;  }
.g-uRank .count{  text-align: left; }
.g-uRank .count span{  color: #19a7fe; }
.g-uRank .load-more {margin: 1rem auto; width: 2rem; height: 1.6rem; background: url(../images/loadMore.png) center no-repeat; background-size: contain;  }

/*瀑布流结束*/
.clear{clear: both; height: 30px;}
.overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
}
.guide-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    z-index: 1000;
}
.steps {
    margin: 20px 0;
}
.step {
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.step span {
    background: #07C160;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-right: 10px;
}


.footer{  width: 100%; overflow: hidden; margin: 0 auto;}
.footer img{ width: 100%;  display: block;}