.section1 {background: url(/image/1.jpg) 50%;}
.section2 {background: url(/image/index_bg2.jpg) 50%;}
.section3 {background: url(/image/3.jpg) 50%;}
.section4 {background: url(/image/index_bg2.jpg) 50%;}
.content{width: 100%; padding: 0 85px; position: relative; overflow: hidden;}
.content-l, .content-r{width: 50%; float: left; text-align: center;}
.content-l{margin-top: 30px;}
.introduce{ display: inline-block; text-align: left; line-height: 40px; }
.version{padding: 3px 15px; margin-left: 10px; font-size: 16px; border: 1px solid #fff; border-radius: 3px;}
.section1 .content-r{max-height: 0; overflow: hidden;}
.login-form{width: 360px; min-height: 360px; margin: auto; padding: 30px; color: #fff; text-align: center; border: 1px solid #efefef; background-color: rgba(255, 255, 255, 0.5); border-radius: 5px; box-shadow: 1px 2px 5px #fff;}
.login-form input{width: 100%; height: 50px; margin-bottom: 10px; padding-left: 46px; background-color: #fff; border-radius: 5px;}
.login-form .btn{width: 100%; height: 50px; line-height: 50px; padding: 0; margin: 25px 0;}
/*.login-form a{display: block; width: 50%; float: left; color: #fff;}*/
.login-form a:hover{color: #00bbee;}
.border-r1{border-right: 1px solid rgba(255, 255, 255, 0.8);}
.icon{background: url("../image/account.png")center no-repeat; background-position: 15px 50%; background-size: 16px;}
.icon.icon-pwd{background-image: url("../image/pwd.png");background-size: 18px;}
.login-title{font-size: 24px; margin-bottom: 30px;}
.marking-title{font-size: 48px; color: #00bbee; text-align: center; margin-bottom: 60px;}
.marking-title span{display: inline-block; margin: 0 10px; border-bottom: 5px solid #00bbee;}
.marking-title .title{position: relative; bottom: 40px; opacity: 0.5;}
.marking-title .text{font-size: 18px; margin-top: 10px; color: #333; position: relative; bottom: 20px; opacity: 0.5;}
.marking-title .text.color-fff{color: #fff;}
.marking-content{position: relative; width: 100%; text-align: center; color: #7f7f7f;}
.marking-item{display: inline-block; width: 280px; padding: 50px 30px 60px; margin: 0 20px; position: relative; top: 50px; opacity: 0; text-align: center; line-height: 30px; border: 1px solid #efefef; border-radius: 5px;}
.marking-item img{width: 30%; margin-bottom: 30px;}
.marking-item:hover{ box-shadow: 0 0 5px 3px rgba(221, 221, 221, 0.5);}
.role-content{margin: 0 auto; width: 800px; opacity: 0; position: relative; top: 50px; z-index: 9; color: #fff; text-align: center; padding: 60px; line-height: 30px;
    font-size: 22px; background-color: rgba(0, 0, 0, 0.5); transition: all linear 0.2s;}
.role-content:hover{background-color: rgba(0, 0, 0, 0.6);}
.user-content{margin-bottom: 90px;}
.user-item{display: inline-block; width: 450px; height: 270px; padding: 50px 40px; margin: 0 30px; text-align: left; font-size: 24px; line-height: 36px; color: #fff; background:#00bbee;
    position: relative; vertical-align: top; opacity: 0; background: -ms-linear-gradient(left, #26e49f, #00bbee); background:-webkit-linear-gradient(left, #26e49f, #00bbee); overflow: hidden;}
.user-item:hover{opacity: 1!important;}
.user-item p{font-size: 18px;}
.user-item img{width: 100%; transition: all 1s linear;}
.user-item img:hover{transform: scale(1.2);}
.user-img-wrap{padding: 0;}
.user-item:first-of-type{left: -50%;}
.user-item:nth-of-type(2){right: -50%;}
.user-content{text-align: center;}