*{
    margin: 0;
    padding: 0;
}
.cavs{
    z-index:1;
    position: fixed;
    width:100%;
    margin-left: 20px;
    margin-right: 20px;
	height:100vh;
}

html,body{
    width: 100%;
    height: 100%;
    background: url("../images/bg1.jpg") no-repeat;
    background-size: 100% 100%;

}



.loginmain{
    background: rgba(0, 0, 0, 0.5);
    width: 540px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 100px 40px 40px 40px;
    box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
    z-index: 9;
}
.login-title{
    color: #D3D7F7;
    height: 60px;
    font-size:20px;
    text-align: center;
    margin-top: -20px;
}
.login-con{
    height: 208px;
    position: absolute;
    left: 0;
    width: 80%;
    margin:0 10%;
}
.login-user{
    position: relative;
}
.icon{
    position: absolute;
    z-index: 1;
    left: 36px;
    top: 8px;
    opacity: 1;
}
.login-con input{
    width: calc(100% - 130px);
    margin-top: -2px;
    background: rgba(57, 61, 82, 0);
    left: 0;
    padding: 10px 65px;
    border-top: 2px solid rgba(57, 61, 82, 0);
    border-bottom: 2px solid rgba(57, 61, 82, 0);
    border-right: none;
    border-left: none;
    outline: none;
    font-family: 'Gudea', sans-serif;
    box-shadow: none;
    color: #61BFFF;
}

.login-pwd, .login-yan{
    position: relative;
}
/*
.login-pwd .icon{
    position: absolute;
    z-index: 1;
    left: 36px;
    top: 8px;
    opacity: .5;
}*/
.login-btn{
    width: 80%;
    margin: 5% auto 0;
    position: relative;
}
.login-btn input{
    border-radius: 3px;
    background: transparent;
    border: 2px solid #4FA1D9;
    color: #4FA1D9;
    text-transform: uppercase;
    font-size: 11px;
    cursor: pointer;
    margin: auto;
    width: 47%;
    transition-property: background,color;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
}
.login-btn input:hover{
    color: white !important;
    background: #4FA1D9;
    cursor: pointer;
    -webkit-transition-property: background,color;
    transition-property: background,color;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
}
.zhuce{
    color: #fff !important;
    background: #4FA1D9 !important;
    }
	
.hyBoxbg{ position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:88; background:rgba(0,0,0,0.5); display:none;}
.hyBox{
	width: 718px;
	height:auto;
	margin: 0 auto;
	background:url(../images/lightbg.png) center no-repeat; background-size:cover; border-radius:20px;
	position:absolute;
	top: 50%;
	left: 50%;
	z-index: 99999999999999999;
	transform: translate(-50%,-50%); box-sizing:border-box; padding:10px;
}

.yhu{ display: flex;  align-items: center;justify-content: space-between; margin-bottom:10px}
.yhu01{display: flex;  align-items: center;}
.yhu01 img{ width:26px; height:26px; border-radius:50%; margin-right:10px}
.yhu01 span{ font-size:12px; color:#00000080;}

.yhy02{display: flex;  align-items: center;}
.yhy02 a{ font-size:14px; color:#8c560b; margin-left:10px;  text-decoration:none; display:block;}
.yhy02 a:hover{ color:#663c00}
.yhy02 a img{ width:18px;}

.hyBox-l{ float:left; display:block; width:70%; background:#fff; border-radius:10px; box-sizing:border-box; padding:10px;}
.hyBox-l .mySwiper01{ }
.hyBox-l .mySwiper01 .lpx{ border-radius:10px; text-align:center; background:#f7f7f7; height:197px; display: flex; justify-content: center; align-items: center;  flex-direction: column; position:relative;}
.hyBox-l .mySwiper01 .lpx span{ font-size:14px; color:#000; display:block;}
.hyBox-l .mySwiper01 .lpx h2{ font-size:28xp; color:#8c560b; display: flex; justify-content: center;  align-items: flex-end; margin-top:20px;}
.hyBox-l .mySwiper01 .lpx em{ font-size:14px; margin-left:4px; color:#00000080;     text-decoration: line-through;  margin-top:20px; font-weight:normal; font-style:normal;}
.hyBox-l .mySwiper01 .lpx strong{ font-size:14px; color:#8c560b; display:block; margin-top:20px;font-weight:normal; }
.hyBox-l .on .lpx{ background:#fbf3e7; border:1px solid #f4a629}
.hyBox-l .swiper-button-next, .hyBox-l .swiper-button-prev{  width:30px; height:30px; border-radius:50%;   box-shadow: 0px 0px 15px #ccc; }
.hyBox-l .swiper-button-next:after, .hyBox-l .swiper-button-prev:after{font-size:14px; color:#666;}



.hyBox-l>i{ font-size:12px; color:#00000080; line-height:30px; font-style:normal; display: flex; align-items: center;
flex-wrap: wrap; }
.hyBox-l>i img{ height:12px; width:12px}
.yx{ margin-top:2%; border-radius:10px; background:#f7f7f7; box-sizing:border-box; padding:5px;}
.yx h2{ font-size:12px; display:block; color:#000; margin-bottom:10px}
.yx a{font-size:14px;border: 2px solid #8c560b;margin-right:10px;text-decoration:none;height:35px;display:inline-flex;justify-content: center;align-items: center;border-radius: 5px;width: 24%;}
.yx a img{max-width: 100%;max-height: 100%;padding: 0;margin: 0;box-sizing: border-box;vertical-align: bottom;}

.yx01{ display: flex;  align-items: center;}


.hyBox-r{ float:right; display:block; width:27%; text-align:center} 
.hyBox-r h1{}
.hyBox-r i{ display: inline-flex; justify-content: center;  align-items: center; background:linear-gradient(90deg,#ff8852,#ff373c); color:#fff; font-size:14px; margin-top:20px; border-radius:4px; padding:5px 8px; font-style:normal;}
.hyBox-r i em{ font-style:normal; margin-left:10px}
.hyBox-r i img{ width:18px;filter: brightness(0%) contrast(200%) invert(100%) opacity(100%); }
.hyBox-r .wen{ width:160px; height:160px; border:1px solid #f3a233; border-radius:5px; overflow:hidden; background:#fff; margin:10px auto 0;}
.hyBox-r .wen img{ width:100%; height:100%;} 

.zhife{ text-align:center; height:16px; margin:10px auto; display:block;}
.zhife a{ height:100%}
.zhife a img{ height:100%; margin:0px auto; display:block;}
.yyxd{ font-size:12px; color:#8c560b; display:block; text-align:center;text-decoration: none;}

@media only screen and (max-width: 980px) {
	.loginmain{width: 80%;/* height:auto; */padding: 10% 5%;}
	.login-btn input{padding: 10px 10px;}
	
	.hyBox{ width:90%}
	.hyBox-l{ width:100%}
	.hyBox-r{ width:100%}
	.hyBox-r .wen{ width:60px; height:60px;}
	.hyBox-l .mySwiper01 .lpx{ height:130px}
	}