/* glass毛玻璃效果 */
  .glass{
    /* background-image: url(/images/simon-lee-XX5RQgTuD8o-unsplash.jpg);
    background-repeat :no-repeat; #44516a63
    background-position: center; */
    border: 2px solid   #44516a48;
    background-color:rgba(137, 196, 28, 0.122)#e2def300;
    z-index: 1;
    backdrop-filter: blur(10px);
    border-radius: 30px 30px 0px 0px;
    padding: auto;
    /* margin-bottom: 10px; */
    
    
    /* background-color: #fff;*/
    box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.062);
}
/* 字体颜色变化 */
h2{
    color: rgba(0, 0, 0, 0.715);
}
h2:hover .c{
    color: rgba(165, 42, 42, 0.663);
}
h2:hover .a{
    color: rgba(95, 158, 160, 0.742);
}
.a:hover+ .b{
    color: rgba(128, 255, 0, 0.682);
} 
    body{
        min-height: 100%;
        max-height: 100vh;
        width: 100%;
        margin: 0px;
        background-image: url(../image/小屋.jpg);
        
         /* 固定背景图片不随鼠标滚动下滑 */
         background-attachment: fixed;
        /* background-position: center; */
        background-size: cover;
        /* background-size: 100vh 100vh; */
        flex-flow: column;
        align-items: center;
    }
    .center{
        margin-left: 5%;
    }
    /* 手机格式 */
    .shoujiMargin{
        border-radius: 3px;overflow: auto;
        margin-left: 5vh;
    }
    /* 电脑格式 */
    @media(min-width:600px){
        .center{
        justify-content: center;
        margin-left: 35%;
        
    }
    .marginLeft{
        margin-left: 10%;
    }
   
    }
    /* 版本说明 */
    .date{
    color: rgba(42, 138, 165, 0.742);
    margin: 8px;
    text-align: center;
    
} 
.footer{
    margin: 0 auto;
    margin-top: 3vh;
}
.flex-raw{
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* font: #38b2b2; */
}
.margin8{
    margin: 24px 8px;
    font-size: large;
    color: rgba(42, 138, 165, 0.742);
    font-family: 'Franklin Gothic Mediwum', 'Arial Narrow', Arial, sans-serif;
}
    /* 覆盖 */
    .overlay {
        height: 0%;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-image:url(../image/青麦.jpg);
        background-size: 100% 100%;
        
        /* background-color: rgba(0, 0, 0, 0.825);
        background-color: rgba(0, 0, 0, 0.244); */
        overflow-y: hidden;
        transition: 0.5s;
    }

    .overlay-content {
        position: relative;
        top: 10%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #38b2b2;
        display: block;
        transition: 0.3s;
    }

    .overlay a:hover, .overlay a:focus {
        color: #f1f1f1;
    }

    .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
    }

    @media screen and (max-height: 450px) {
    .overlay {overflow-y: auto;}
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
    }
    /* 弹窗 */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
    -webkit-animation-name: fadeIn; 
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

/* 弹窗内容 */
.modal-content {
    /* position: fixed; */
    bottom: 0;
    background-color: #fefefe;
    border-radius: 20px 20px 20px 20px;
    width: 80%;
    min-height: 30vh;
    margin-top: 20vh;
    margin-left: 5vh;
    align-self: center;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
}
@media(min-width:600px){
    .diannaomodal-content {
    /* position: fixed; */
    bottom: 0;
    background-color: #fefefe;
    border-radius: 20px 20px 20px 20px;
    width: 77%;
    min-height: 30vh;
    margin-top: 20vh;
    margin-left:10%;
    align-self: center;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
}


}
/* 关闭按钮 */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    min-height: 5vh;
    border-radius: 20px 20px 0px 0px;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    min-height: 5vh;
    background-color: #5cb85c;
    border-radius: 0px 0px 20px 20px;
    color: white;
}
@media(min-width:600px){
    .modal-footer {
    padding: 2px 16px;
    min-height: 7vh;
    align-self: flex-end;
    background-color: #5cb85c;
    border-radius: 0px 0px 20px 20px;
    color: white;
}

}

/* 添加动画 */
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0} 
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}
/* 密码 */
.form1{
   
    width: 40vh; display:none ;margin-left: 5vh;
    flex-direction: row;
     align-content:center;justify-content: center;
}
.input1{
    border-radius: 3px 3px 3px 3px; 
    width: 20vh;
}
@media(min-width:600px){
    .form1{
        width: 78%;
        margin-left: 10%;
        align-content:center;
        justify-content: center;
    }
    .input1{
    border-radius: 3px 3px 3px 3px; 
    width: 80%;
}

        
    }
    /* *{
    border: 3px solid red;
} */
#grad1 {
    height: 200px;
	background-color: red; /* 浏览器不支持时显示 */
    background-image: linear-gradient(#e6c4c4, #7e83b8);
}
/* 点赞动画 转圈*/
.loader {
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 3px solid #00fffb;
  border-right: 3px solid green;
  border-bottom: 3px solid rgb(225, 113, 8);
  border-left: 3px solid rgb(215, 227, 46);
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} */
/* 按压效果，按钮 */
.button {
  display: inline-block;
  padding: 5px 10px;
  font-size: 6px;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
/* 点赞框 */
.dianzan{
 
            background-image: url(); 
            /* background-attachment: fixed; */
            /* background-size: 60px 60px; 
           
            background-position-x: center;
            background-position-y: center; */

            background-size: cover;
            border-radius: 30px 30px 30px 30px;
            
            flex-direction: row; 
            /* border: 1px solid red; */
            /* align-self: flex-end; */
            margin-left: 12vh; 
            width: 6vh; height: 6vh; 
}
@media(min-width:600px){
    .dianzan{
 
            background-image: url(); 
            /* background-attachment: fixed; */
            /* background-size: 60px 60px; 

            background-position-x: center;
            background-position-y: center; */

            background-size: cover;
            border-radius: 30px 30px 30px 30px;
            
            flex-direction: row; 
            /* border: 1px solid red; */
            /* align-self: flex-end; */
           
            margin-left: 80%; 
            width: 6vh; height: 6vh; 
            }
    

}

/* 点赞累加器 */
.center1 {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align-last:center ;
    font-size: 18px;
	margin-top:-9px;
    font-size: smaller;
    
}
/* .bottomright {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
} */
/* 课表倒计时框 */
.daojishi{
        display: flex; 
        margin-top:10px;
       

        align-items:center ;justify-items:
         center; width: 40vh; 
}
.class1{
    border-radius: 0px 0px 30px 30px ;
     width:40.6vh;
}
@media(min-width:600px){
    .daojishi{
        display: flex; 
        margin-top:10px;
        /* border-image: url(./image/gugua.jpg); */
        
        
        align-items:center ;justify-items: center; width: 86%; 
}
    .class1{
        border-radius: 0px 0px 30px 30px ;
        width:86.2%;
    }
}
/* *{
    border: 3px solid red;
} */
/* 动画 */
.donghua{
    position:relative;
	animation:myfirst 4s linear 2s infinite alternate;
	/* Firefox: */
	-moz-animation:myfirst 6s linear 2s infinite alternate;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 10s linear 2s infinite alternate;
	/* Opera: */
	-o-animation:myfirst 8s linear 2s infinite alternate;
}
@keyframes myfirst
{
	0%   { left:0px; top:0px;}
	25%  { left:-240px; top:0px;}
	50%  {left:80px; top:260px;}
	75%  {left:80px; top:80px;}
	100% {left:-80px; top:180px; }
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   { left:0px; top:0px;}
	25%  { left:-240px; top:0px;}
	50%  {left:80px; top:-60px;}
	75%  { left:400px; top:80px;}
	100% {left:280px; top:-80px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   { left:0px; top:0px;}
	25%  { left:-240px; top:0px;}
	50%  {left:80px; top:-60px;}
	75%  { left:400px; top:80px;}
	100% {left:-80px; top:-80px;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   { left:0px; top:0px;}
	25%  { left:-240px; top:0px;}
	50%  {left:80px; top:-160px;}
	75%  { left:400px; top:80px;}
	100% {left:-80px; top:-80px;}
}