html, body {
  height: 100%;
  line-height: 1;
  -webkit-user-select: none;  //禁止用户复制页面文本
  -webkit-touch-callout: none;
  -webkit-overflow-scrolling: touch;  //ios滚动效果
  -webkit-font-smoothing: antialiased;  //mac下字体
  -webkit-tap-highlight-color: rgba(242, 137, 76, .05); //a标签点击高亮效果
}

.farm-container {/* .最外围*/
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background:#ededed;
 /*  transition: all .6s;*/
}







.farm-head.ui-border-bottom-a:after{
  content:" ";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  height:1px;
  border-bottom:1px solid #bcbcbc;
  color:#f9f9f9;
  -webkit-transform-origin:0 100%;
          transform-origin:0 100%;
  -webkit-transform:scaleY(0.5);
          transform:scaleY(0.5);
  z-index:2;
}
.farm-center.ui-border-top-b:before{
  content:" ";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:1px;
  border-top:1px solid #f9f9f9;
  color:#d9d9d9;
  -webkit-transform-origin:0 0;
          transform-origin:0 0;
  -webkit-transform:scaleY(0.5);
          transform:scaleY(0.5);
  z-index:2;
}


.farm-foot {
  width: 100%;
  height:100px;
  position: absolute;
bottom:0;
 display:block;left:0;right:0;
  overflow: hidden;
  transition: all .4s;
}
.course-process-div{
position:absolute;left:0;bottom:20px;;right:0;display:block;
	     width: 100%;
    height: 80px;
  
 
	
}
.swiper-duan .slide-center {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
  
}
.grade_text_span{  display:inline-block;
    position: absolute;top:0;;
            left:50%;
            width:60px;
            height:25px;
            transform:translateX(-50%);}
.grade_icon_span{
	
	position: absolute;
            top:50%;
            left:50%;
            width:70px;
            height:70px;;
            transform:translate(-50%,-50%);
            text-align: center; 
          

	    z-index:3;}
.grade_icon{
	
	position: absolute;
            top:50%;
            left:50%;
            width:20px;
            height:12px;;
            transform:translate(-50%,-50%);
            text-align: center; 
            
	
}
    
.swiper-duan .div-grade:after {
    content: '';
    width: 85%;
    height: 1px;
    background: #535353;
    position: absolute; /* top:33%;*/
    /* right:-140%;*/
    right: 8%;
    top: 50%; /* margin-top:-0.5px;*/
    z-index: 2;
}
.farm-center {
	width:100%;
	height:100%;
	padding-bottom:100px;
     padding-top:40px;
     position:relative;
}
.farm-main-out {
	transition:all .5s;
	width:10000%;
	margin:0 auto;
	height:100%;
	
}
.farm-main-step{
	transition:all .5s;
	pointer-events:none;
	cursor:default;
	width:1%;
	float:left;
	position:relative;
	padding:0 .35rem;
	box-sizing:border-box;
	height:100%;
	
	
}
.farm-main-step.active{	pointer-events:auto}
/*中间主体*/
.duan-content {
  width: 100%;
   height:100%;
 
 position:relative;
 }
 .duan_div{position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;font-size:0;
            -webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
            
            }
 .course-title-div{height:50px;width:100%;position:absolute;left:0;top:0px;}
 .course-content{
	  margin:0 80px;
  height:100%;
  overflow: hidden;

	
}        
 .grade_process{position:relative;} 
 .grade_show{position: absolute;
            
            width:100%;
            width:100px;
            height:100px;
            border-radius:50%;
          
           
          top:0;
            left:0;
            bottom:0;
            right:0;
            text-align: center; z-index:88;
            opacity: 0;
	        color:#222;
	        font-size:24px;
	        margin: auto;
	        -webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(-70deg);
	-moz-transform: rotateY(-70deg);
	-ms-transform: rotateY(-70deg);
	transform: rotateY(-70deg);
	

	
            } 
             .grade_score_text{display:block;line-height:30px;text-align:center;font-size:30px;padding-top:15px;cursor:pointer;font-style:italic;font-weight:600;} 
             .grade_score_icon{display:block;line-height:25px;text-align:center;font-size:25px;cursor:pointer} 
   .grade_show_icon{display:block;line-height:45px;text-align:center;font-size:45px;padding-top:20px;cursor:pointer}  
   .grade_show_text{display:block;line-height:20px;text-align:center;font-size:12px;cursor:pointer}       
   .grade_finish{ border:1px solid #f96c27}  
    .grade_do{ background:#f96c27; 
  border:1px solid #f96c27;}
 .circle-button{width:60px;height:60px;border:2px solid #2c2c2c;line-height:60px;;border-radius:50%;display:inline-block;position:relative;background:#fff;}
/*other*/
.choose-view i{line-height:50px;font-size:24px;}
.course_list{padding:0 10px;}

.course_list_name{border-radius:10px;line-height:40px;border:1px solid #535353;font-size:18px;cursor:pointer;background:#fff;}
.course_list_name i{line-height:40px;font-size:24px;}
.course_list_name_on{background:#535353;color:#fafafa;}
.itemlist.active{background:#f96c27;
		border:1px solid #f96c27!important;
		color:#fff;
		}
.course-view-left.active{transition:all 1s;}
.course-view-right{display:none;;height:100%;}
.course-view-right.active{display:block;transition:all 1s;}

 .menu-course {margin:10px;background;#fafafa;text-align:center;display:block;position:relative;display:block;padding:5px;}
.menu-course span,.menu-course i{}
.menu-course span{display:inline-block;}
.menu-course-col{display:none;z-index:5;}
.menu-course-col.active{display:block;}
.eat-content{font-size:11px;}
/*process */
#level-process>svg{width:32px;height:32px;overflow:hidden;}
#level-process .circle-progress-value {
	stroke-width:4px;
	stroke: #f96c27;
}
#level-process .circle-progress-circle {
	stroke-width: 4px;
	stroke:#535353;
}
#level-process .circle-progress-text {
	fill:#b5d986;
}
#grade-process>svg{width:120px;height:120px;overflow:hidden;}
#grade-process .circle-progress-value {
	stroke-width:5px;
	stroke: #f96c27;
	stroke-dasharray: 4 1;
}
#grade-process .circle-progress-circle {
	stroke-width:5px;
	stroke: #fff;
}
#grade-process .circle-progress-text {
	font-weight: bold;
	fill: hsl(180, 80%, 47%);
}
#chick-process>svg,#seed-process>svg,#fish-process>svg{width:62px;height:62px;overflow:hidden;}
#fish-process .circle-progress-value {
	stroke-width: 6px;
	stroke: #009ac5;
}
#fish-process .circle-progress-circle {
	stroke-width: 6px;
	stroke:#a4e3ff;
}
#fish-process .circle-progress-text {
	fill:#50b3cf;
}
.color-border-fish{border:2px solid #009ac5;color:#009ac5;}



#seed-process .circle-progress-value {
	stroke-width: 6px;
	stroke: #328f39;
}
#seed-process .circle-progress-circle {
	stroke-width: 6px;
	stroke:#b5d986;
}
#seed-process .circle-progress-text {
	fill:#b5d986;
}
.color-border-seed{border:2px solid #b5d986;color:#b5d986;}




#chick-process .circle-progress-value {
	stroke-width: 6px;
	stroke: hsl(39, 100%, 50%);
}
#chick-process .circle-progress-circle {
	stroke-width: 6px;
	stroke: hsl(39, 100%, 85%);
}
#chick-process .circle-progress-text {
	fill: hsl(39, 100%, 50%);
}
.color-border-chick{border:2px solid #f96c27;color:#f96c27;}

.food-on{widtH:50px;height:50px;z-index:5;display:inline-block;background:transparent;}
.food-on img{width:40px;height:40px;margin:5px;}
.food-make-img img{width:28px;height:28px;display:inline;margin-top:1px;}


.logo_show{position: absolute; width:29px;height:29px; border-radius:50%; top:0;left:0;  bottom:0;right:0;text-align: center; z-index:88;margin:auto;overflow:hidden;} 
  
.farm-text-large{font-size:30px;font-weight:700;line-height:50px;}
.farm-text-middle{font-size:20px;font-weight:700;line-height:40px;}
.farm-text-normal{font-size:16px;font-weight:400;line-height:30px;}
.farm-text-small{font-size:12px;font-weight:400;line-height:20px;}
.mask {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    position: fixed;
    overflow: hidden;
    z-index: 700;
    top: 0;
    left: 0;
}
.lottery-alert {
    max-width: 400px;
    text-align: center;
    z-index: 10000;
    border-radius: 10px;
    background: #fff;
    padding: 17px;
    position: fixed;
    left: 30px;
    right: 30px;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
}

.lottery-alert p {
    color: #666;
    font-size: 16px;
    padding-top: 5px;
}

.pop-money {
    top: 0;
    left: 15px;
    text-shadow: 0 1px orange, 1px 0 orange, -1px 0 orange, 0 -1px orange;
    font-size: 12px;
    opacity: 1;
    width:80px;
    color: yellow;
    z-index: 9999;
    text-align: center;
    position: absolute;
    transform: translate(-25%, -100%);
    animation: fadeOut 2000ms ease-out;
}

@keyframes fadeOut {
    0% {
        transform: translate(-25%, 0);
    }
    100% {
        transform: translate(-25%, -100%);
    }
} 
  
/*加载*/
.loading{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f3f4f6;;
  z-index: 999999;
}
.loading .pic{
  position:relative;
   top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center; 
            min-height:5rem;
  
}
/*food list*/
.farm_shop_grid{padding:10px 5px 20px 5px;}
.shop_desc{font-size:12px;line-height:20px;padding:10px;}



.ui-btn_chick{
   background-color:hsl(39, 100%, 50%);

}
.food-view_seed{background:#b5d986;border:1px solid #328f39;}

.ui-btn_seed{
   background-color:#328f39;

}
.food-view_fish{background:#a4e3ff;border:1px solid #009ac5;}

.ui-btn_fish{
   background-color:#009ac5;

}

.circle-auto {
        margin: 10px auto;
        width: 80%;
        height: 0;
        padding-top: 80%;

        border-radius: 100%;
        border: 1px solid #000;
        box-sizing: border-box;

        position: relative;
    }
    .circle-auto .layout {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-align: center;
    }
    .circle-auto .layout.middle:before {
        display: inline-block;
        vertical-align: middle;

        content: '';
        height: 100%;
        width: 0;
        overflow: hidden;
    }
    .circle-auto .layout.middle div:first-child {
        display: inline-block;
        vertical-align: middle;
        padding:7px;
    }
 .food-view{position:relative;}
.food-view_chick{background:hsl(39, 100%, 85%);border:1px solid hsl(39, 100%, 50%);}
.food_lock{background:#ddd;border:1px solid #222;}
.coupon_lock{background:#ddd;}

.food-view .div-img img{max-width:100%;height:auto;}
.food-view .div-lock{width:100%;height:auto;}

.food-text{text-align:center;color:#222;line-height:25px;font-size:12px;}


.coupon-view {border-radius:5px;margin:10px;text-align:center;display:block;position:relative;padding:10px;border:1px solid hsl(39, 100%, 50%);}
.coupon-view_chick{background:hsl(39, 100%, 85%);}
.coupon-view .span-img{display:inline-block;padding:10px;border-radius:50%;background:hsl(39, 100%, 50%);}
.coupon-view .span-img img{max-width:100%;height:auto;}
.coupon-view .span-text{;display:inline-block;text-align:center;width:100%;color:#222;line-height:30px;}
/*do_course*/
.prepare_anima{
           
            position: absolute;
           font-weight:700;
            opacity: 0;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            animation: change 3s;
            -moz-animation: change 3s ;    
            -webkit-animation: change 3s ;    
            -o-animation: change 3s;
            animation-fill-mode:forwards;
            animation-iteration-count:1;


            -webkit-animation-fill-mode:forwards;
             -webkit-animation-iteration-count:1;

           
        }
.prepare_delay{
	
	top:60%;
	animation-delay:1.5s;
-webkit-animation-delay:1.5s; /* Safari 和 Chrome */
}        
       @keyframes change{  
     0%   {font-size:5px;opacity:0}
     40%   {font-size:70px;opacity:1}
   
		100% {font-size:80px;opacity:0}  
		} 
#time-process>svg{width:70px;height:70px;overflow:hidden;padding-top:5px;}	
#num-process>svg{width:70px;height:70px;overflow:hidden;padding-top:5px;}		
.time_div{
           width:80px;
           height:80px;
           font-size:0;
           
            text-align: center;   position:relative; display:inline-block;      }
 .time_text{font-size:36px;font-weight:600;line-height:60px;}           
 #time-process .circle-progress-value {
	stroke-width: 12px;
	stroke: #f96c27;

}
#time-process .circle-progress-circle {
	stroke-width: 10px;
	stroke: #eee;;
}
#time-process .circle-progress-text {
	font-weight: bold;
	font-size:0;
	fill: hsl(180, 80%, 47%);
}
 #num-process .circle-progress-value {
	stroke-width: 12px;
	stroke: #f96c27;

}
#num-process .circle-progress-circle {
	stroke-width: 10px;
	stroke: #eee;;
}
#num-process .circle-progress-text {
	font-weight: bold;
	font-size:0;
	fill: hsl(180, 80%, 47%);
}

.time_process{z-index:3;padding-top:2.5px;}
 .time_show{position: absolute;
            
          
            width:60px;
            height:60px;;
            border-radius:50%;
          
           
          left: 50%;
            top: 50%;
            background:#535353;
            transform: translate(-50%, -50%);
                        text-align: center; z-index:99;
         
	        color:yellow;
	        font-size:24px;
	        margin: auto;
	      text-align:center;
	        	

	
            }           
  .course_time_end{line-height:60px;font-size:16px;color:#f00;text-align:center;}