@charset "UTF-8";
/* CSS Document */
*{margin: 0px;padding: 0px;}
body{margin: 0px auto; font-family:Helvetica;width:100%;background:#f9f9f9; color: #333; max-width: 750px}
div,table,td{margin: 0px;padding: 0px;}
ul,li,dl{list-style:none}
img, a img,textarea{border: 0;}
.clearfix:after{display:block;height:0;clear:both;visibility:hidden}
* html .clearfix{height:1%}
*+html .clearfix{min-height:1%}
a{text-decoration:none; color:#333}
a:focus{outline: none;}
input,textarea{font-family: Arial;outline: none;}
input,input[type="submit"], input[type="reset"], input[type="button"], button ,div{-webkit-appearance: none;}
img,a img{border:0}
a,button,input,textarea,label,li,em,b,div,li,i,div{-webkit-tap-highlight-color:rgba(255,0,0,0); font-style: normal;}
input:-moz-placeholder,textarea:-moz-placeholder{color: #888;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color: #888;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color: #888;}
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"] ,textarea{-webkit-appearance: none;
-moz-appearance: none; /* mobile firefox too! */}
/*滚动条设置开始*/
::-webkit-scrollbar/*整体部分*/{width:2px;height:10px;}
::-webkit-scrollbar-track/*滑动轨道*/{-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 0px;background: #fff;}
::-webkit-scrollbar-thumb/*滑块*/{border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2);}
::-webkit-scrollbar-thumb:hover/*滑块效果*/{border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
background: rgba(0,0,0,0);}


.bg01{ width: 100%; min-height: 100vh; background: #ddf5fc }
.top_img01{ width: 100%; display: block; position: fixed; top: 0; left: 0 ;z-index: 0; max-width: 750px; left: 50%; transform: translate(-50%,0) }
.bottom_img01{ width: 100%; display: block; position: fixed; bottom: -10%; z-index: 0 ; max-width: 750px;left: 50%; transform: translate(-50%,0)   }
.bottom_img02{ width: 100%; display: block; position: fixed; bottom: 0; z-index: 0 ; max-width: 750px;left: 50%; transform: translate(-50%,0)   }




.index_main{ position: relative; z-index: 2 ; padding-bottom:calc( env(safe-area-inset-bottom) + 5.4rem)   }
.logo{ width: 28.15%;  display: block;  padding:5% 0 5% 11% ; padding-bottom: calc(2vh + 1rem)}
.title01{  width: 50.84%; display: block;  margin: 0 auto 1.5rem; margin-bottom: calc(3vh + 7rem)}


.index_ul01,.index_ul01.add { width: 75%;  margin: 0 auto;display: flex;justify-content: space-between;}
.index_ul01{ margin:0.625rem auto;}
.index_ul01 li,.index_ul01.add li{ width: 45%; background: rgba(255,255,255,.9); border-radius: 15px;
display: flex;align-items: center;justify-content: center;flex-direction: column; height: 4.6rem; overflow: hidden;border: 1px solid #d2d2d2;box-shadow: 0 0 15px #37a0dd63; }
.index_ul01 li a,.index_ul01.add li a{ width: 100%; display: block;display: flex;align-items: center;justify-content: center;flex-direction: column;
height: 5.6rem}


.index_ul01.add li{ width:100%; display: flex;flex-direction: row;}
.index_ul01 li img,.index_ul01.add li img{ width:2.2rem; display: inline-block; }
.index_ul01.add li img{ width:2.4rem;}

.index_ul01 li p{ font-size: 0.9rem; color: #228da3 ; text-align: center; padding-top: 5px}
.index_ul01.add li p{ font-size: 0.9rem; color: #228da3 ; text-align: center; padding-left: 5px ;padding-top: 0}


.bottom_nav .van-tabbar--fixed{ width: 91.33%; left: 50%; transform: translate(-50%,0) ; border-radius: 1rem;
bottom: calc(env(safe-area-inset-bottom) + 0.8rem) ;z-index: 10!important; box-shadow: 0 1px 3px rgba(0,0,0,.1)  }
.bottom_nav .van-tabbar{ height: 3.84rem; max-width: 700px}
.bottom_nav  .van-tabbar-item{ font-size: 0.75rem}
.bottom_nav .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{border-width: 0; }


.bottom_nav01 .van-tabbar--fixed{ width: 100%; left: 50%; transform: translate(-50%,0) ; border-radius:0;
z-index: 10!important ; box-shadow: 0 1px 3px rgba(0,0,0,.1) }
.bottom_nav01 .van-tabbar{ height: 3.84rem; max-width: 750px; padding-bottom:calc(env(safe-area-inset-bottom)) }
.bottom_nav01  .van-tabbar-item{ font-size: 0.75rem}
.bottom_nav01 .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{border-width: 0; }




.title02{  width:76.26%; display: block;  margin: 0 auto; padding-bottom: calc(2vh + 0.5rem); padding-top:  calc(2vh + 1rem)}
.yckj_ul01{ width: 88%; margin: 0 auto; display: flex;flex-wrap:wrap}

.yckj_ul01 li{ display: flex; flex:0 0 46%; text-align: center; font-size: 0.9rem; color: #555;
background: rgba(255,255,255,.9); border-radius: 15px; margin:0.5rem 2%; height: 5.18rem; box-shadow: 0 1px 20px rgba(0,0,0,.1);
align-items: center;justify-content: center;}
.yckj_ul01 li a{  display: flex; align-items: center;justify-content: center; width: 100% ;height: 5.18rem; }

.yckj_ul01 li img{ width:2.28rem; display: inline-block; }
.yckj_ul01 li h4{ font-size: 1rem; color: #333 ;   font-weight: normal;}
.yckj_ul01 li p{ font-size: 0.7rem; color: #999 ; }

.yckj_ul01 .yckj_ul01_r{ width: 4rem ;  text-align: left; padding-left: 3%}

.yckj_ul02{width: 88%; margin: 0 auto; }
.yckj_ul02 li{ display: flex; flex:0 0 46%; text-align: center; font-size: 0.9rem; color: #555;
background: rgba(255,255,255,.9); border-radius: 15px; margin:0.5rem 2%; height: 5.18rem; box-shadow: 0 1px 20px rgba(0,0,0,.1);
align-items: center;justify-content: center;height: 5.18rem;}
.yckj_ul02 li a{ display: flex;align-items: center;justify-content: center; width: 100%}
.yckj_ul02 li em{ display: block; flex:1 ; border-right: 1px solid #e0f4f7 ; text-align: right; padding-right: 8%}
.yckj_ul02 li em img{ width: 3.21rem}
.yckj_ul02 li .yckj_ul02_r{flex:1 ; text-align: left ; padding-left: 8% }
.yckj_ul02 li h4{ font-size: 1rem; color: #333 ;  font-weight: normal;}
.yckj_ul02 li p{ font-size: 0.7rem; color: #999 ; }



.yskj_ul01{ width: 86%; margin: 0 auto; display: flex;flex-wrap:wrap}
.yskj_ul01 li{ display: flex; flex:0 0 44%; text-align: center; font-size: 0.9rem; color: #555;
background: rgba(255,255,255,.9); border-radius: 15px; margin:0.5rem 3%; height: 8.28rem; box-shadow: 0 1px 20px rgba(0,0,0,.1);
align-items: center;justify-content: center;}
.yskj_ul01 li img{ display: block; height: 6.6rem}

.yskj_ul02{width: 86%; margin: 0 auto; }
.yskj_ul02 li{ display: flex;  text-align: center; font-size: 0.9rem; color: #555; background: rgba(255,255,255,.9);
  border-radius: 15px; margin:0.5rem 3%; height: 8.28rem; box-shadow: 0 1px 20px rgba(0,0,0,.1);align-items: center;justify-content: center;
 overflow: hidden;}
.yskj_ul02 li em{ text-align: right;  display: flex ;align-items: center;justify-content: center; width: 47%}
.yskj_ul02 li em img{  height: 6.6rem ;display: block;}
.yskj_ul02 li .yskj_ul02_r{flex:1 ; text-align: left ; padding-left:5% }
.yskj_ul02 li .yskj_ul02_r img{ height: 5.625rem}

.yskj_ul01 li a,.yskj_ul02 li a{ width: 100%; display: block;display: flex;align-items: center;justify-content: center;height: 8.28rem; }


.yxkj_ul01{width: 86%; margin: 0 auto; }
.yxkj_ul01 li{ display: flex; text-align: center; font-size: 0.9rem; color: #555; background: rgba(255,255,255,.9);
  border-radius: 15px; margin:0.6rem 3%; height: 6.875rem; box-shadow: 0 1px 20px rgba(0,0,0,.1);align-items: center;justify-content: center;
 overflow: hidden;}
.yxkj_ul01 li em{ text-align: right;  display: flex ;align-items: center;justify-content: center; width: 47%}
.yxkj_ul01 li em img{  height: 5.8rem ;display: block;}
.yxkj_ul01 li .yskj_ul02_r{flex:1 ; text-align: left ; padding-left:5% }
.yxkj_ul01 li .yskj_ul02_r img{ height: 5.15rem}
.yxkj_ul01 li a{width: 100%; display: block;display: flex;align-items: center;justify-content: center; height: 6.875rem;}


.small_title{width: 63.8%;display: block; margin: 0 auto;padding-bottom: calc(2vh + 0.5rem);padding-top: calc(2vh + 1rem);}
.small_title .title_img{ width: 100%; display: block;}
.small_title .small_title_btn{ width: 54%; margin: 0 auto; display: block; margin-top: -10%}

.small_title_btn01{ width: 38%; margin: 0 auto; display: block; position: absolute;  left: 50%; transform: translate(-50%, -50%);
 top: 0%}
.small_title_btn01 img{display: block; width: 100%}


.news01,.news02{ width: 90%; margin: 0 auto;}
.news01 dl,.news02 dl{ background: rgba(255,255,255,.9); border-radius: 10px ; box-shadow: 0 1px 20px rgba(0,0,0,.1); display: flex;
 padding:0.8rem ;box-shadow: 0 1px 20px rgba(0,0,0,.1); height:5.4rem; margin: 0.8rem 0}
.news01 dl dt,.news02 dl dt{ flex:1; display: flex;flex-direction: column;justify-content: space-between;}
.news01 dl dt h1,.news02 dl dt h1{ font-weight: normal; color: #333; font-size:0.975rem;overflow:hidden;   text-overflow:ellipsis;white-space:normal!important;
  display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-all;line-height: 1.3rem}

.news01 dl dt p,.news02 dl dt p{color: #666; font-size:0.751rem ;padding-bottom:0.8rem; line-height: 1rem}
.news01 dl dt p em,.news02 dl dt p em{border-left: 1px solid #666;border-right: 1px solid #666; padding: 0 5px; display: inline-block; margin-right: 5px}
.news01 dl dd,.news02 dl dd{  margin-left: 0.5rem ;overflow: hidden; width: 6.9375rem; height: 5.375rem; background: #06c;display: inline-flex; align-items: center;}
.news01 dl dd img,.news02 dl dd img{ display: block;  object-fit: cover; width: 100%; height: 100%}

.news02{background: rgba(255,255,255,.9);  box-shadow: 0 1px 20px rgba(0,0,0,.1);
border-radius: 10px ; box-shadow: 0 1px 20px rgba(0,0,0,.1); padding-top: 5%; position: relative; }
.news02_title{ }
.news02 dl{ box-shadow: none; border-bottom: 1px solid #eee; border-radius: 0; background: none }
.news02 dl:last-child{border: none}



.news03{ width: 90%; margin: 0 auto;}
.news03 dl{ background: rgba(255,255,255,.9); border-radius: 10px;  box-shadow: 0 1px 20px rgba(0,0,0,.1); height:50.13vw; margin: 0.8rem 0;
 overflow: hidden; max-height: 375px; position: relative;}
.news03 dl dt{height:50.13vw; max-height: 375px}
.news03 dl dt img{display: block;object-fit: cover; width: 100%; height: 100%}
.news03 dl dd{color: #fff; position: absolute; bottom: 0; background: rgba(0,0,0,.3);
  width: 100%; padding:0.4rem 0.8rem; box-sizing: border-box; }
.news03 dl dd h1{ font-weight: normal;font-size: 0.925rem;overflow:hidden;text-overflow:ellipsis;white-space:normal!important;
  display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-all;line-height: 1.25rem}
.news03 dl dd time{font-size: 0.75rem; display: block; text-align: right; line-height: 0.9rem}



.notice{width: 90%; margin: 0 auto; background: #fff; border-radius:5px; box-shadow: 0 1px 20px rgba(0,0,0,.1); display: flex;
 height: 3.4375rem; overflow: hidden;}
.notice em{ width:3.4375rem ; background: #2188a2;display: inline-flex;align-items: center;justify-content: center; }
.notice em img{display: block; width:60%}
.notice label{ display: flex; flex:1 ; margin-right: 0.5rem ;    overflow: hidden;}
.notice .my-swipe{ height: 3.4375rem; overflow: hidden; width: 100%;}
.notice .my-swipe .van-swipe-item{ display: flex;flex-direction: column; font-size: 0.8rem ;justify-content: center;  height: 3.4375rem; overflow: hidden}
.notice .my-swipe .van-swipe-item .item{ display: flex;    align-items: center;line-height: 1.2rem }
.notice .my-swipe .van-swipe-item .item i{ background: #269da7; width:3px; height: 3px; border-radius: 4px;
 margin: 0 0.4rem}
.notice .my-swipe .van-swipe-item .item span{ display: block; flex:1 ;overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;}




.videoList{ width: 90%; margin: 0 auto;}
.videoList dl{ background:#fff; border-radius: 15px;  box-shadow: 0 1px 10px rgba(0,0,0,.1);  margin: 0.8rem 0;
 overflow: hidden; position: relative;}
.videoList dl dt{height:48vw; max-height: 360px; position: relative;}
.videoList dl dt span{ background: rgba(0,0,0,.4); position: absolute; width: 3.4rem; height: 3.4rem; left: 50%; top: 50%;
  transform: translate(-50%, -50%); border-radius: 2rem;display: inline-flex;    align-items: center;
    justify-content: center;}
.videoList dl dt img{display: block;object-fit: cover; width: 100%; height: 100%}
.videoList dl dd{color: #070707;width: 100%; padding:0.6rem 0.8rem; box-sizing: border-box; font-size: 1rem;
 text-align: center; }

.swipeBanner{ width: 100%; height: 37vw; margin: 0.4rem 0 1rem; max-height: 282px;}
.swipeBanner .van-swipe-item{box-sizing: border-box; font-size: 0.78rem; color: #fff;}
.swipeBanner .van-swipe-item .item{position: relative; margin-left:5%; box-sizing: border-box; max-height: 282px; border-radius: 10px; overflow: hidden;
 box-shadow: 0 1px 10px rgba(0,0,0,.1); }
.swipeBanner .van-swipe-item .item img{ display: block; width: 100%; height: 100%;object-fit: cover;}
.swipeBanner .van-swipe-item .item p{ position: absolute; background: rgba(0,0,0,.5); padding:0.4rem 0.6rem; bottom: 0; left: 0;
overflow:hidden;   text-overflow:ellipsis;white-space:normal !important;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;
word-break:break-all;line-height: 1.1rem}

.small_title_new{ width: 63.8%; margin:1rem auto 0.5rem}
.small_title_new img{ display: block; width: 54%; margin: 0 auto}


.news_kc{ width: 90%; margin: 0 auto;background: rgba(255,255,255,1); border-radius: 10px ; box-shadow: 0 1px 20px rgba(0,0,0,.1); }
.news_kc dl{ display: flex;padding:0.8rem 0; border-bottom: 1px solid #eee; margin: 0 0.8rem}
.news_kc dl dt{ flex:1; display: flex;flex-direction: column;justify-content: space-between;}
.news_kc dl dt h1{ font-weight: normal; color: #333; font-size:0.975rem;overflow:hidden;   text-overflow:ellipsis;white-space:normal!important;
  display:-webkit-box;-webkit-line-clamp:1; -webkit-box-orient:vertical; word-break:break-all;line-height: 1.4rem}
.news_kc dl dt p{color: #666; font-size:0.75rem ;line-height: 1rem ; padding-top: 3px}
.news_kc dl dt p em{border-left: 1px solid #666;border-right: 1px solid #666; padding: 0 5px; display: inline-block; margin-right: 5px}

/*学起来*/
.news_xue{width: 90%; margin: 0 auto;background: rgba(255,255,255,1); border-radius: 10px ; box-shadow: 0 1px 20px rgba(0,0,0,.1);
 padding: 0.5rem 0}
.news_xue dl{ display: flex;margin: 0 0.8rem ;}
.news_xue dl dt{ width: 7.3125rem; height: 5.125rem ; border-radius: 10px; overflow: hidden;padding: 0.7rem 0; overflow: hidden;}
.news_xue dl dt img{display: block; width: 100%; height: 100% ;object-fit: cover;border-radius: 10px; }

.news_xue dl dd{flex:1; display: flex;flex-direction: column; border-left: 1px solid #ededed; margin-left: 0.8rem; padding-left:0.8rem;
padding-top: 1rem }

.news_xue dl dd h1{color: #333; font-size:1rem; line-height: 1.4rem; position: relative;  }
.news_xue dl dd h1:before{ content: "" ; position: absolute; width: 0.8rem; height: 0.8rem; background: #269da7; border: 2px solid rgba(255,255,255,.8);
 border-radius: 1rem ;box-sizing: border-box;
 left: -1.2rem; top: 50%;transform: translate(0, -50%);}

.news_xue dl dd p{color: #666; font-size:0.75rem ;line-height: 1rem ; margin-top: 3px; overflow: hidden;
 text-overflow:ellipsis;white-space:normal!important;
  display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-all;}


.titlecon{  width: 90%; margin: 0 auto; padding: 1.2rem 0}
.titlecon .title{font-size: 1.15rem; color: #333; padding-bottom: 0.5rem}
.titlecon p{font-size: 0.85rem;}
.titlecon p span{ color: #666;  padding-right:8px}
.titlecon p time{ color: #999}

.article{  width: 90%; margin: 0.3rem auto 1rem; }
.article p{font-size: 0.95rem; color: #555; line-height: 1.3rem; padding:5px 0}
.article img{ display: block; max-width: 100% !important; height: auto !important;}




.van-popup{ width:84%; background: none!important ; max-height: 100vh;     overflow: initial;}
.videoCon{  width: 100%; overflow: hidden;}
.layer-close{ position:absolute; left: 50%; bottom: -2rem ;transform: translate(-50%, 0);}



/*庭院推荐*/
.from_img{ width: 100%; }
.from_img img{ display: block;}

.from_con{width: 90%; margin: 0 auto;background: #fff;  box-shadow: 0 1px 20px rgba(0,0,0,.1);
border-radius: 10px ; box-shadow: 0 1px 20px rgba(0,0,0,.1); padding-top: 5%; position: relative;margin-top: -22%; padding-bottom: 10px }

.from_con ul{ margin: 0 1rem; font-size: 0.925rem}
.from_con ul li{ display: flex; padding: 8px 0 ;align-items: center;}
.from_con ul li span{ width: 5rem; color: #333}
.from_con ul li label{ flex:1; display: block;}
.from_con ul li label input,.from_con ul li label textarea{background: #f7f7f7; border-radius: 5px; border: none; width: 100%; display: block;
padding:0.5rem 0.5rem ;box-sizing: border-box; font-size: 0.925rem}
.from_con ul li label textarea{ }

.from_con ul li label .upimg{ width: 100% ;display: flex;}
.from_con ul li label .upimg dl{ width: 3.6rem; height:3.6rem; margin-right: 0.5rem; border: 1px solid #eee; background: #fafafa}
.from_con ul li label .upimg dl dt{ width: 100%; height: 100%; display: flex;align-items: center;justify-content: center;flex-direction: column;}
.from_con ul li label .upimg dl dt img{ display: block; width: 100% ;height: 100%}
.from_con ul li label .upimg dl dt p{ font-size: 0.7rem; color: #999; text-align: center; padding-top: 0.1rem}

.from_btn{ background-image: linear-gradient(#37e7b9, #1c749d); height:2.6rem; color: #fff; width: 60%;
 margin: 1rem auto; border-radius:2rem; display: flex; align-items: center;justify-content: center; font-size: 1.1rem}



/*加载动画*/
.loaders{width: 100%; box-sizing: border-box; height: 100%; position: fixed; top: 0; display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; background:rgba(0,0,0,.8);z-index: 1000}
.loaders .loader{box-sizing: border-box; display: flex; display: -webkit-flex; flex: 0 1 auto;flex-direction: column;flex-grow: 1;flex-shrink: 0;flex-basis: 25%; width: 25%;align-items: center;justify-content: center;}
.loader-inner{}
@-webkit-keyframes ball-spin-fade-loader{50%{opacity: 0.3; -webkit-transform: scale(0.4);transform: scale(0.4);} 100%{opacity: 1;-webkit-transform: scale(1); transform: scale(1);} }
@keyframes ball-spin-fade-loader{50%{opacity: 0.3;-webkit-transform: scale(0.4); transform: scale(0.4);} 100%{opacity: 1;-webkit-transform: scale(1); transform: scale(1);} }
.ball-spin-fade-loader{position: relative; top: -10px;left: -10px;}
.ball-spin-fade-loader > div:nth-child(1){top: 25px;left: 0;-webkit-animation: ball-spin-fade-loader 1s -0.96s infinite linear; animation: ball-spin-fade-loader 1s -0.96s infinite linear;}
.ball-spin-fade-loader > div:nth-child(2){top: 17.04545px;left: 17.04545px;-webkit-animation: ball-spin-fade-loader 1s -0.84s infinite linear;animation: ball-spin-fade-loader 1s -0.84s infinite linear;}
.ball-spin-fade-loader > div:nth-child(3){top: 0; left: 25px;-webkit-animation: ball-spin-fade-loader 1s -0.72s infinite linear; animation: ball-spin-fade-loader 1s -0.72s infinite linear;}
.ball-spin-fade-loader > div:nth-child(4){top: -17.04545px;left: 17.04545px;-webkit-animation: ball-spin-fade-loader 1s -0.6s infinite linear; animation: ball-spin-fade-loader 1s -0.6s infinite linear;}
.ball-spin-fade-loader > div:nth-child(5){top: -25px; left: 0; -webkit-animation: ball-spin-fade-loader 1s -0.48s infinite linear; animation: ball-spin-fade-loader 1s -0.48s infinite linear;}
.ball-spin-fade-loader > div:nth-child(6){top: -17.04545px;left: -17.04545px;-webkit-animation: ball-spin-fade-loader 1s -0.36s infinite linear;animation: ball-spin-fade-loader 1s -0.36s infinite linear;}
.ball-spin-fade-loader > div:nth-child(7){top: 0; left: -25px; -webkit-animation: ball-spin-fade-loader 1s -0.24s infinite linear; animation: ball-spin-fade-loader 1s -0.24s infinite linear;}
.ball-spin-fade-loader > div:nth-child(8){top: 17.04545px;left: -17.04545px;-webkit-animation: ball-spin-fade-loader 1s -0.12s infinite linear; animation: ball-spin-fade-loader 1s -0.12s infinite linear;}
.ball-spin-fade-loader > div{background-color: #fff; width: 15px;height: 15px; border-radius: 100%;margin: 2px;-webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute;}



.mountain{ width: 100%; display: block;width: 100%;display: block;position: fixed;top: 15%; left: 0; z-index:-1; max-width: 750px;left: 50%;transform: translate(-50%,0);}
.mountain img{ display: block; width:300%; position: absolute; right: 0;
    animation: mountain_left 35s linear infinite alternate;-webkit-animation: mountain_left 35s linear infinite alternate;}

@-webkit-keyframes mountain_left{
    0%{right:0}
    100%{right:-200%}
}


.float-menu{position: fixed;width: 50px;height: 50px;border-radius: 50%;display: flex;align-items: center;
    justify-content: center;overflow: visible;right: 30px;bottom: 30px;box-shadow: 0 0 10px rgba(0,0,0,0.1); z-index: 100;}
.float-menu-ctn{position: relative;min-width: 320px;min-height: 320px;background-color: white;box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 50%;display: flex;align-items: center;justify-content: center;transform: scale(0);transition: all .3s;}
.float-menu-item{position: absolute;width: 70px;display: flex;flex-direction: column;align-items: center;gap: 4px;
    color: #666;;text-decoration: none;font-size: 13px;}
.float-menu-item.on{color: #0ab27a;}
.float-menu-item>img{width: 30px;height: 30px;}
.float-menu-btn{background: #fff;border-radius: 50%;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 1;
    display: flex;align-items: center;justify-content: center;transition: all .3s;}
.float-menu.on .float-menu-ctn{transform: scale(1);}
.float-menu.on .float-menu-btn{transform: rotate(135deg);}
.float-menu-btn::before, .float-menu-btn::after{position: absolute;content: '';display: block;background-color: #888;
    width: 25px;height: 3px;}
.float-menu-btn::after{transform: rotate(90deg);}