/*公共样式设定*/
header,nav,section,footer{display:block;}
body{width: 100%;overflow-x:hidden;}
body,ul,ol,dl,li,dt,dd,p,input,datalist,h1,h2,h3,h4{margin:0;padding:0;font-weight: normal;}
ol,ul,dl{list-style-type:none;}
a,input{text-decoration:none;color:inherit;outline:none;}
body,input,button{font: 14px;}
img{max-width:100%;}
/* 主体样式 */
@font-face {
  font-family: titleFont;
  src: url(../fonts/庞门正道标题体2.0增强版.TTF);
}
body {
  background: url(../images/bg-img.png) no-repeat center center fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
}
.box{
  width: 100%;
  min-height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  flex-flow:column wrap;
  align-items:center;
}
.box .title-font{font-family: titleFont;color: #fff;text-shadow: 0 4px 2px #1c3c97;letter-spacing: 4px;transform: scale(1,1.3);}
.box p:nth-child(1){ font-size:50px;margin-bottom: 10px;}
.box p:nth-child(2){color: #fff;font-size: 38px;}
.box .content{background: rgba(102, 162, 251, 0.1);box-shadow: 0 -3px 15px 7px #7eb6f6;width: 650px;height: 410px;margin: 0 auto;margin-top: 22px;border-radius: 5px 5px 0 0;}
.box .top{width: 100%;display: flex;justify-content: space-between;margin-bottom: 20px;}
.box .top div{
  width: 33.33%;
  height: 70px;
  color: #fff;
  line-height: 70px;
  text-align: center;
  cursor: pointer;
  font-size: 26px;
  font-weight: bold;
  display: inline-block;
  background-color: #66a2fb;
  border-right: 1px solid #3a81ff;
  position: relative;
}
.box .top div:nth-child(1){border-radius: 5px 0 0 0;}
.box .top div:nth-child(3){border-right: none;border-radius: 0 5px 0 0;}
.box .top div.active {color: #66a2fb;background-color: #fff;transition:all 1s ease;}
.box .top div.active:after{content:"";position:absolute;bottom:0;left:50%;border:15px solid transparent;border-top-color:#fff;border-bottom:0; margin:0 0 -15px -13px;}
/* 内容 */
.box .center{margin-top:32px;}
.box .center #card li.active {display: block;}
.box .center #card li {margin: 0 54px;background-color: #fff;display: none;padding: 24px 90px 0 90px;}
.box .center .login-con {width: 100%;height: 35px;border: 1px solid #c4c2c2;display: inline-flex;align-items: center;justify-content: flex-start;margin-bottom: 15px;}
.box .login-con>img {width: 20px;height: 22px;padding-left: 13px;}
.box .login-con .line{width: 1px;height: 20px;margin-right: 24px;}
.box .login-con>input {height: 30px;border: 0px;width: 80%;}
.box .login-con>input::-webkit-input-placeholder {color: #bcbcbc;font-size: 14px;}
.box .input-code::-webkit-input-placeholder {color: #bcbcbc;font-size: 14px;}
.box .code{display: flex;justify-content:space-between;}
.box .input-code {width: 50%;height: 35px;padding-left: 18px;border: 1px solid #c4c2c2;margin-bottom: 10px;}
.box .center .img-code{width: 138px !important; height: 35px;line-height: 35px;}
.box .login-bot {width: 100%;display: inline-flex;align-items: center;justify-content: space-between;}
.box .login-bot label{color: #666;font-size: 16px;cursor: pointer;}
.box .login-bot a{color: #4076ea;cursor: pointer;font-size: 16px;}
.box .login-bot input[type="checkbox"]{vertical-align:middle;margin-bottom:3px;margin-right: 7px;border-radius: 3px;min-height: 17px;min-width: 17px;}
.box .login-button {width: 100%;border: 0px;height: 40px;font-size: 20px;font-weight: bold;color: white;background-color: #66a2fb;margin: 10px 0 8px 0;outline: none;cursor: pointer;}
.box .active p {height: 30px;font-size: 16px; color: #dc2929;text-align: center;cursor: pointer;}
.box .footer{margin-top: 20px;}
.box .footer ul{display: flex;justify-content: center;align-items: center;flex-flow: column wrap;}
.box .footer li div{width: 400px; font-size: 20px;color: #fff;font-weight: bold; display: flex;justify-content: space-between;}
.box .footer li img{width: 87px;height: 33px; margin: 13px 0 7px 0;}
.box .footer li:nth-child(3){font-size: 14px; color: rgba(255, 255, 255, 0.8);margin-bottom: 17px;}