* {box-sizing: border-box; font-size: 12px; line-height: 20px; color: #666; padding: 0px; margin: 0px;}
a {text-decoration: none; color: #44a7e0;}
hr {border-bottom: 1px #ddd solid; border-top: none;}
.center{text-align: center;}
html, body{padding: 0; margin: 0; height: 100%;}
body{background: url(../images/bg01.jpg) no-repeat center; background-size: cover;}
.wrapper{height: 100%; position: relative; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.wrapper>.logo{background: url(../images/logo.png) no-repeat center; width: 190px; height: 60px; margin-bottom: 20px;}

.header{height: 80px; width: 100%; background-color: #fff; box-shadow: 0px 3px  5px rgba(0, 0, 0, 0.15); position: fixed;top:0; left: 0; z-index: 10;}
.header .logo{background: url(../images/logo2.png) no-repeat center; height: 80px; width: 200px; float: left; margin-left: 20px;}
.header .right{float: right; height: 80px; padding: 20px;}
.header .right .back{float: left; width: 40px; height: 40px; background: url(../images/home.png) no-repeat left center; margin-right: 20px; line-height: 40px; cursor: pointer;}
.header .right .set{float: left; line-height: 40px; background: url(../images/set.png) no-repeat left center; padding-left: 50px;margin-right: 20px; cursor: pointer;}
.header .right .logout{float: left; line-height: 40px; background: url(../images/logout.png) no-repeat left center; padding-left: 50px;margin-right: 10px; cursor: pointer;}

.main{width: 720px; height: 450px; background-color: #fff; overflow: hidden; border-radius: 7px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); display: flex;}
.main.high{height: 520px;}
.main.high .left.reg{ height: 520px;background: url(../images/bg07.jpg) no-repeat center;}
.main.high .left.find{ height: 520px;background: url(../images/bg08.jpg) no-repeat center;}
.main.high .left b{padding-top: 40px;}
.main .left{width: 360px; height: 450px; background: url(../images/bg02.jpg) no-repeat center;}
.main .left b{display: block; font-weight: normal; font-size: 24px; color: #ab9d69; text-align: center; line-height: 30px; padding-top: 20px;}
.main .left p{display: block; font-weight: normal; font-size: 14px; color: #ab9d69; text-align: center; line-height: 30px;}
.main .right{width: 360px;  padding: 20px 30px;}
.main .right b{display: block; font-weight: normal; font-size: 24px; text-align: center; line-height: 30px; padding: 10px 0 10px 0;}
.main .form {display: block;padding: 0px;}
.main .form input{border: 1px #f0c543 solid; padding: 0 10px 0 40px; border-radius: 5px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.15); width: 100%;line-height: 40px; margin: 20px 0 0 0; outline: none; background:#fdf9ec no-repeat 10px center; font-size: 14px;}
.main .form input::placeholder{color: #bbb;}
.main .form input.id{background-image: url(../images/icon11.png);}
.main .form i{font-style: normal; color: #f00; display: block; padding:0 5px;}
.main .form input.password{background-image: url(../images/icon12.png);}
.main .form input.phone{background-image: url(../images/icon18.png);}
.main .form p{position: relative; padding: 15px 0; text-align: left;}
.main .form p .find{float: right;}
.main .form button.login-btn{width: 100%; text-align: center; line-height: 40px; outline: none; border: none; background-color: #f0c543; border-radius: 5px; color: #fff; font-size: 16px;}
.main .form p.code{margin: 20px 0 0 0;  padding: 0px;}
.main .form p.code input{margin: 0px; width: 150px; background-image: url(../images/icon17.png);}
.main .form p.code a{float: right; height: 40px; cursor: pointer;}
.main .form p.code a img{width: 140px; height: 40px;}

.main .form p.code2{margin: 20px 0 0 0;  padding: 0px;}
.main .form p.code2 input{margin: 0px; width: 150px; background-image: url(../images/icon17.png);}
.main .form p.code2 button{float: right; height: 40px; cursor: pointer;width: 140px; background-color: #44a7e0; color: #fff; outline: none; border: none; border-radius: 5px; cursor: pointer;}
.main .form p.code2 button.fals{background-color: #bbb; cursor: default;}

.main2{width: 720px; height: 450px; background-color: #fff; overflow: hidden; border-radius: 7px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); display: flex;}

.channel{padding: 80px 100px 0 100px; display: flex; list-style: none; width: 100%; justify-content: space-around;}
.channel li{display: flex; width: 240px; margin: 0 10px; height: 360px; border-radius: 7px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); padding: 20px; background: no-repeat center center #fff; flex-direction: column; justify-content: space-between; justify-items: center;}
.channel li b{display: block; text-align: center; font-size: 24px; line-height: 30px; padding-bottom:200px; color: #ab9d69; font-weight: normal;}
.channel li span{display: block;text-align: center; font-size: 16px; line-height: 30px; color: #bbb; }
.channel li a{display: block; line-height: 40px; text-align: center; background-color: #44a7e0; border-radius: 5px; color: #fff; font-size: 14px;}
.channel li.yjc{background-image: url(../images/bg03.jpg);}
.channel li.yqy{background-image: url(../images/bg04.jpg);}
.channel li.ygz{background-image: url(../images/bg05.jpg);}
.channel li.yxd{background-image: url(../images/bg06.jpg);}

.footer{display: block; padding: 20px 0; text-align: center; color: #666; font-size: 12px;}