﻿body{position: relative;background:#b2d1a8;}
html,body{ height: 100%; scroll-behavior: smooth; }
.clearfix:after{content:".";display:block;height:0;clear: both;visibility:hidden;}
.clearfix{*zoom:1;}

@keyframes arr {
	0% {
		 opacity: 1;
        transform: translateX(0);
    }
    100% {
		 opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes bigSmall {
	0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

.audio_ctr{ position:fixed;right:3%;top: 4%; z-index:1000;display: block; width: 3rem;height: 3rem;background: url(../images/audio.png) no-repeat; background-size: contain;cursor: pointer;transition: all linear .25s;}
.audio_ctr.muted{background: url(../images/muted.png) no-repeat;background-size: contain; }

.top-header{ width: 100%;padding:0 ; position: relative; display: table; }
.top-header h3{ font-size: 1.6em; padding: 1em; margin: 0 30%;   white-space: nowrap; text-align: center; overflow: hidden; text-overflow: ellipsis; display: block; color: #fff; font-weight: normal; display: table-cell;}
.top-header a:first-child{width: 14%; display: table-cell;  padding:0 4%;vertical-align: middle;}
.top-header a:last-child{ width: 14%; display:table-cell;padding:0 4%; vertical-align: middle;}
.top-header img{ width: 100%;  display: block;} 

.header{position: relative;z-index:10;overflow: hidden;height:3.425em;margin-bottom: 10px; background: #2f936f;}
.header h1 {font-size:1.525rem;font-weight:200;padding:0 ;color:#fff;line-height:100%; text-align:center;}
.header h1 .go-back{position: absolute;left:10px;top:20%;display:block;font-size:2em;font-weight:200;color:#fff;}
.header h1 img{display:block; width:60%;}
.wrapper{clear: both;   margin: 0 auto;}

.nav { clear: both; width:100%;height: auto; margin:0 auto ;position: absolute;left: 0;top: 0;}
.nav ul { display: flex;flex-flow: wrap; justify-content:center;}
.nav ul li { width: 45%;height:4rem;    _zoom: 1;text-align: center;}
.nav ul li img {display: block; width: 100%;height:auto;}

.vol{ position: absolute;  display: block; width: 11vw;height:11vw;background: url(../images/vol.png) no-repeat; background-size: contain;}
.vol::before{ position: absolute;right: -1vw;  bottom: 2vw; content: " ";  width: 2vw; height: 8vw; background: url(../images/vol1.png) no-repeat; background-size: contain; animation: arr  1s ease infinite;}
.vol::after{  position: absolute;right: -2vw;  bottom: 1.5vw; content: " ";  width: 2vw; height: 8.8vw;  background: url(../images/vol2.png) no-repeat; background-size: contain; animation: arr  1s ease infinite 0.5s;}
/*弹层视频播放*/
.video_pop{display: none;position:fixed;top: 0; left: 0; width:100vw;height:100vh;overflow: hidden;z-index:10000;background-color: rgba(0,0,0,0.8);}
.video_pop .playBox{position:absolute;top:15%;left: 5vw; width:90vw;height:auto; z-index:999;}
.video_pop .btn{display: block;position:absolute;bottom:-15vw; left:50%;width:10vw;height:10vw;margin-left: -5vw;}
.video_pop .btn a.close{cursor:pointer;display:block;width:10vw;height:10vw;overflow: hidden; font-size:10vw;color: #f1f1f1;line-height:10vw;text-align: center;transition: 1s ease; }
.video_pop .btn a.close:hover{ transform: rotate(360deg);}
img.expand-cover-img{width:1000px !important; }

 
.g-box1{clear: both;  width:100%;  overflow:hidden;  margin:0 auto; position: relative;}
.g-box1 img{display: block; width: 100%;height:auto;}
.g-box1 .listen{ position: absolute; right: 8vw; top: 13vw; display: block; width: 22vw;height:19vw;background: url(../images/listen.png) no-repeat; background-size: contain;}
.g-box1 .vol{ right: 23vw; top: 26vw;} 
.g-box1 .talk{ position: absolute; right: 20vw; top: 38vw; display: block; width: 24vw;height:23vw;background: url(../images/talk.png) no-repeat; background-size: contain;}
.g-box1 .flower{ position: absolute; right: 13vw; bottom: 12vw; display: block; width: 30vw;height:29vw;background: url(../images/flower.png) no-repeat; background-size: contain;}
.g-box1 .vbtn{ position: absolute; right: 24%; top: 21%; display: block; width: 5vw;height:4.8vw;background: url(../images/v.png) no-repeat; background-size: contain;animation: bigSmall 2s ease infinite ;}

.g-box2{clear: both;  width:100%;  overflow:hidden;  margin:0 auto; position: relative;}
.g-box2 img{display: block; width: 100%;height:auto;}
.g-box2 .listen{ position: absolute; left: 18vw; top: 18vw; display: block; width: 22vw;height:19vw;background: url(../images/listen.png) no-repeat; background-size: contain;}
.g-box2 .vol{ left: 11vw; top: 31vw;} 
.g-box2 .talk{ position: absolute; left: 9vw; top: 47vw; display: block; width: 24vw;height:23vw;background: url(../images/talk.png) no-repeat; background-size: contain;}
.g-box2 .flower{ position: absolute; left: 6vw; bottom: 1vw; display: block; width: 30vw;height:29vw;background: url(../images/flower.png) no-repeat; background-size: contain;}
.g-box2 .vbtn{ position: absolute; right: 24%; top: 21%; display: block; width: 5vw;height:4.8vw;background: url(../images/v.png) no-repeat; background-size: contain;animation: bigSmall 2s ease infinite ;}

.g-box3{clear: both;  width:100%;  overflow:hidden;  margin:0 auto; position: relative;}
.g-box3 img{display: block; width: 100%;height:auto;}
.g-box3 .listen{ position: absolute; right: 8vw; top: 18vw; display: block; width: 22vw;height:19vw;background: url(../images/listen.png) no-repeat; background-size: contain;}
.g-box3 .vol{ right: 22vw; top: 31vw;} 
.g-box3 .talk{ position: absolute; right: 16vw; top: 45vw; display: block; width: 24vw;height:23vw;background: url(../images/talk.png) no-repeat; background-size: contain;}
.g-box3 .flower{ position: absolute; right: 13vw; bottom: 12vw; display: block; width: 30vw;height:29vw;background: url(../images/flower.png) no-repeat; background-size: contain;}
.g-box3 .vbtn{ position: absolute; right: 24%; top: 21%; display: block; width: 5vw;height:4.8vw;background: url(../images/v.png) no-repeat; background-size: contain;animation: bigSmall 2s ease infinite ;}

.g-box4{clear: both;  width:100%;  overflow:hidden;  margin:0 auto; position: relative;}
.g-box4 img{display: block; width: 100%;height:auto;}
.g-box4 .listen{ position: absolute; left: 18vw; top: 33vw; display: block; width: 22vw;height:19vw;background: url(../images/listen.png) no-repeat; background-size: contain;}
.g-box4 .vol{ left: 11vw; top: 45vw;} 
.g-box4 .talk{ position: absolute; left: 9vw; top: 62vw; display: block; width: 24vw;height:23vw;background: url(../images/talk.png) no-repeat; background-size: contain;}
.g-box4 .flower{ position: absolute; left: 6vw; bottom: 10vw; display: block; width: 30vw;height:29vw;background: url(../images/flower.png) no-repeat; background-size: contain;}
.g-box4 .vbtn{ position: absolute; right: 24%; top: 21%; display: block; width: 5vw;height:4.8vw;background: url(../images/v.png) no-repeat; background-size: contain;animation: bigSmall 2s ease infinite ;}

.g-box5{clear: both;  width:100%;  overflow:hidden;  margin:0 auto; position: relative;}
.g-box5 img{display: block; width: 100%;height:auto;}
.g-box5 .listen{ position: absolute; right: 6vw; top: 32vw; display: block; width: 22vw;height:19vw;background: url(../images/listen.png) no-repeat; background-size: contain;}
.g-box5 .vol{ right: 20vw; top: 44vw;} 
.g-box5 .talk{ position: absolute; right: 16vw; top: 60vw; display: block; width: 24vw;height:23vw;background: url(../images/talk.png) no-repeat; background-size: contain;}
.g-box5 .flower{ position: absolute; right: 8vw; bottom: 8vw; display: block; width: 30vw;height:29vw;background: url(../images/flower.png) no-repeat; background-size: contain;}
.g-box5 .vbtn{ position: absolute; right: 24%; top: 21%; display: block; width: 5vw;height:4.8vw;background: url(../images/v.png) no-repeat; background-size: contain;animation: bigSmall 2s ease infinite ;}

.g-box6{clear: both;  width:100%;  overflow:hidden;  margin:0 auto; position: relative;}
.g-box6 img{display: block; width: 100%;height:auto;}
.g-box6 .listen{ position: absolute; left: 18vw; top: 40vw; display: block; width: 22vw;height:19vw;background: url(../images/listen.png) no-repeat; background-size: contain;}
.g-box6 .vol{ left: 11vw; top: 53vw;} 
.g-box6 .talk{ position: absolute; left: 9vw; top: 72vw; display: block; width: 24vw;height:23vw;background: url(../images/talk.png) no-repeat; background-size: contain;}
.g-box6 .flower{ position: absolute; left: 10vw; bottom: 30vw; display: block; width: 30vw;height:29vw;background: url(../images/flower.png) no-repeat; background-size: contain;}
.g-box6 .vbtn{ position: absolute; right: 24%; top: 21%; display: block; width: 5vw;height:4.8vw;background: url(../images/v.png) no-repeat; background-size: contain;animation: bigSmall 2s ease infinite ;}

.g-play{ display: none;width:100%;  height:auto;   margin:2rem auto 0 auto;   }
.g-play h2{position: relative;clear: both;  height:3rem;  overflow:hidden;}
.g-play .more {  position: absolute;right:2rem;bottom:1rem;width:4rem;  height:1.6rem; font-size:1rem; color:#fff; line-height:1.6rem; text-align:center; background: #c64f26;}
.g-play .cont{clear: both;  height:auto; margin: 0 10px 10px 10px;  padding:6px; background: rgba(255,255,255,0.6);}
.g-play .cont p{margin-top: 10px; font-size: 1.125rem;line-height:1.8rem;color: #000;text-align: center; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.g-play .vList{clear: both;  height:5rem; margin: 0 auto;}
.g-play .vList ul{display: flex; justify-content: center;}
.g-play .vList li{height: 2.5rem; margin:0 1rem; padding: 0 1rem; font-size: 1.225rem; color: #fff; line-height: 2.5rem;border-radius: 2rem; background: #939393; }
.g-play .vList li.current_play{ background: #30936f; }
.intro{width:84%;  height:auto;   margin:0 auto; }
.intro p{font-size: 1.225rem;line-height:2rem;color: #382a90;text-indent: 2.4rem;}

#certify {	position: relative;  height:100%;overflow: hidden;margin: 0.5rem auto}
#certify .swiper-container {margin-left:0;padding:0px 0 0 0 ;}
#certify .swiper-wrapper { display: flex;align-items: center;}
#certify .swiper-slide { height:auto;}
#certify .swiper-slide img{display:block;width:100%;height:100%;}
#certify .swiper-slide p { padding:3% 2%;text-align: center;color: #fff;font-size:1.225rem;margin: 0;background:#30936f;}
#certify .swiper-pagination {width: 100%;bottom: 20px;}
#certify .swiper-pagination-bullets .swiper-pagination-bullet {	margin: 0 5px;width: 10px;height: 10px;opacity: 1;background-color: #555;}
#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {background: #b40101;}
#certify .swiper-button-prev {left:2%;width:5%;height:100%;}
#certify .swiper-button-prev:hover {}
#certify .swiper-button-next {right:2%;	width: 5%;height: 100%;}
#certify .swiper-button-next:hover {}



.g-news{clear: both;  width:100%;  margin:0 auto; position: relative;}
.g-news h2{clear: both;  height:5rem;  overflow:hidden;position: relative;}
.g-news h2 a{position: absolute;left: 50%;top: 11rem;margin-left: -2.5rem; display: block;width: 5rem;height: 2rem; font-size: 1.125rem; font-weight: 200; color: #fff; text-align: center; line-height: 2rem;border-radius: 1rem; }
.g-news img{display:block; width:100%;margin: 0 auto; }
.g-news .cont{clear: both;  height:auto;  overflow:hidden; padding: 0 10px 20px 10px;}
.g-news .cont ul{display: flex;justify-content:space-between;flex-wrap: wrap;}
.g-news .cont li { width:48%;  height:auto;overflow:hidden;margin-bottom: 1rem; padding-bottom: 0.5rem; background: #fff;}
.g-news .cont li p {display: flex;justify-content: space-between; height: 3rem;  overflow: hidden;  font-size: 1.0rem;line-height:3rem;color: #382a90; text-overflow:ellipsis;white-space: nowrap;}
.g-news .cont li p span.tit{ color:#000;}
.g-news .cont li p span.price{ font-weight: bold;color:#2f936f;}
.g-news .cont li p.assist{position: relative;height:2.6rem;overflow: hidden; padding-left: 5.5rem; font-size: 1.2rem;color:#fff; line-height: 2.6rem;  background: #2f936f; cursor: pointer; display: block;}
.g-news .cont li p.assist::before{position: absolute;left: 3rem;top: 0.3rem; content: " "; display: block;width: 2rem;height:2rem; background: url(../images/shopping.png) center no-repeat; background-size: contain; }
.g-news .more{position: absolute;right: 1rem;bottom: 0; width: 6rem;height: 6rem;border-radius: 50%; font-size: 1.0rem; font-weight: bold;color:#fff; line-height: 6rem; text-align: center; background: #2f936f;}


.g-shopping{ position: relative;clear: both;  width:100%;  overflow:hidden;  margin:0 auto; }
.g-shopping h2{position: absolute;left: 10%; top: 3%; display: block; width: 80%;height:auto;}
.g-shopping img{display: block; width: 100%;height:auto;}
.g-shopping .arr1 { position: absolute; left: 50vw;  top: 16%;  width: 5vw; height: 7vw; animation: arr 1s linear infinite 0.9s;}
.g-shopping .arr2 { position: absolute; left: 53vw;  top: 16%;  width: 5vw; height: 7vw; animation: arr 1s linear infinite 0.6s;}
.g-shopping .arr3 { position: absolute; left: 56vw;  top: 16%;  width: 5vw; height: 7vw; animation: arr 1s linear infinite 0.3s;}
.g-shopping .arr4 { position: absolute; left: 59vw;  top: 16%;  width: 5vw; height: 7vw; animation: arr 1s linear infinite 0s;}
.g-shopping .info { position: absolute; left: 5%;   top: 20%;  width: 90vw; height: 30vw; padding: 1vw; border-radius: 2vw; background: url(../images/ad_t.png) 5% 50% no-repeat rgba(255,255,255,0.65); background-size: 15%; }
.g-shopping .myscroll {display: block;margin: 3vw 0 0 20vw;height:8rem; overflow: hidden;}
.g-shopping .info li{font-size: 1.0rem; line-height:2rem; color: #000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.g-shopping .info li img{display: none;}
.g-shopping .info li a{font-size: 1.8vh;  color: #000;}
.g-shopping .info li a:hover{ font-weight: bold; color: #30936f;}
.g-shopping .more{position: absolute;left: 4vw;bottom:2vw; width: 11vw;height: 4vw; font-size: 1.0rem;color:#fff; line-height: 4vw; text-align: center; background: #30936f;}

/*弹层视频播放*/
.ewm_pop{display: none;position:fixed;top: 0; left: 0; width:100vw;height:100vh;overflow: hidden;z-index:10000;background-color: rgba(0,0,0,0.8);}
.ewm_pop .wrap{position:absolute;top:15%;left: 25vw; width:50vw;height:auto; z-index:999;}
.ewm_pop .wrap img{display: block; width:100%;height:auto;}
.ewm_pop .btn{display: block;position:absolute;bottom:-15vw; left:50%;width:10vw;height:10vw;margin-left: -5vw;}
.ewm_pop .btn a.close{cursor:pointer;display:block;width:10vw;height:10vw;overflow: hidden; font-size:10vw;color: #f1f1f1;line-height:10vw;text-align: center;transition: 1s ease; }
.ewm_pop .btn a.close:hover{ transform: rotate(360deg);}


/*动态*/
.g-Nlist{clear: both;  width:100%;  height:auto;  overflow:hidden;  margin:0 auto;padding: 0 0 20px 0; }
.g-Nlist h2{position: relative;clear: both;  height:auto;  overflow:hidden;margin: 15px 0;}
.g-Nlist .more {  position: absolute;right:10px;bottom:1rem;width:4rem;  height:1.6rem; font-size:1rem; color:#fff; line-height:1.6rem; text-align:center; background: #c64f26;}
.g-Nlist img{display:block; width:100%;}.g-Nlist .cont{clear: both;  height:auto;  overflow:hidden; padding: 0 10px;}
.g-Nlist .cont li{clear: both;padding:0.5rem 0; list-style:none;line-height:1.8rem; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }
.g-Nlist .cont li a{font-size: 1.225rem;color: #fff; }
.g-Nlist .cont li::before{content: " · "; font-size: 2rem;color: #fff; }



/*pages*/

.pages{ clear:both; height:100%; margin:0 auto;padding:1rem 0 0 0;}
.pages p{font-size:1.225rem;COLOR:#333; line-height:2.5rem;text-align:center; }
.pages p A { display:inline-block;height:2.5rem; padding:0 1rem;font-size:1.225rem; COLOR:#fff; margin-left:5px;  background:#ccc;}
.pages p A:hover {COLOR:#558f64; TEXT-DECORATION: none}
.pages p A.current { COLOR:#fff;TEXT-DECORATION: none;background:#558f64;}
.pages p A.pre,.pages p A.next{font-size:1.225rem; line-height:2.5rem;}

.loadmore{clear: both;width: 35%; margin: 0 auto;padding: 8px;font-size: 1.225rem;color: #fff;letter-spacing: 0.2rem; border-radius: 2rem;border: 1px solid #ccc;background:rgba(0,0,0,0.5);}
.nomore{clear: both;margin: 0 auto;font-size: 1.225rem;color: #666;letter-spacing: 0.2rem; }


/*瀑布流结束*/
.clear{clear: both; height: 30px;}



.footer{  width: 100%; overflow: hidden; margin: 0 auto;}
.footer img{ width: 100%;  display: block;} 
 






































