.login-body{width:100vw; height:100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 900px;background: url(../image/login-bg.png) no-repeat;background-size: cover;}
/* 背景动画 */
.login_background{position:absolute;left:0;right:0;height:100vh;top:0;overflow:hidden;opacity:1;}
.shape-01{position:absolute;top:11%;right:42%;-webkit-animation:animationFramesTwo 13s linear infinite;animation:animationFramesTwo 13s linear infinite}
.shape-02{position:absolute;top:27%;left:17%;-webkit-animation:animationFramesFour 25s linear infinite alternate;animation:animationFramesFour 25s linear infinite alternate}
.shape-03{position:absolute;top:30%;left:50%;-webkit-animation:animationFramesThree 35s linear infinite alternate;animation:animationFramesThree 35s linear infinite alternate}
.shape-04{position:absolute;top:40%;right:23%;-webkit-animation:animationFramesFour 20s linear infinite alternate;animation:animationFramesFour 20s linear infinite alternate}
.shape-05{position:absolute;bottom:62%;right:28%;-webkit-animation:animationFramesOne 15s linear infinite;animation:animationFramesOne 15s linear infinite}
.shape-06{position:absolute;bottom:73%;left:38%;-webkit-animation:animationFramesFour 20s linear infinite alternate;animation:animationFramesFour 20s linear infinite alternate}
.shape-07{position:absolute;left:14%;bottom:15%;-webkit-animation:animationFramesOne 17s linear infinite;animation:animationFramesOne 17s linear infinite}
.shape-08{position:absolute;left:14%;top:60%;-webkit-animation:animationFramesOne 20s linear infinite alternate;animation:animationFramesOne 20s linear infinite alternate}
.shape-09{position:absolute;top:22%;left:41%;-webkit-animation:animationFramesOne 15s linear infinite;animation:animationFramesOne 15s linear infinite}
.shape-10{position:absolute;top:8%;right:6%;-webkit-animation:animationFramesOne 15s linear infinite;animation:animationFramesOne 15s linear infinite}
.shape-11{position:absolute;top:10%;right:8%;-webkit-animation:animationFramesOne 12s linear infinite;animation:animationFramesOne 12s linear infinite}
@keyframes animationFramesOne{0%{transform:translate(0) rotate(0deg)}
    20%{transform:translate(73px,-1px) rotate(36deg)}
    40%{transform:translate(141px,72px) rotate(72deg)}
    60%{transform:translate(83px,122px) rotate(108deg)}
    80%{transform:translate(-40px,72px) rotate(144deg)}
    to{transform:translate(0) rotate(0deg)}
}@-webkit-keyframes animationFramesOne{0%{-webkit-transform:translate(0) rotate(0deg)}
     20%{-webkit-transform:translate(73px,-1px) rotate(36deg)}
     40%{-webkit-transform:translate(141px,72px) rotate(72deg)}
     60%{-webkit-transform:translate(83px,122px) rotate(108deg)}
     80%{-webkit-transform:translate(-40px,72px) rotate(144deg)}
     to{-webkit-transform:translate(0) rotate(0deg)}
 }@keyframes animationFramesTwo{0%{transform:translate(0) rotate(0deg) scale(1)}
      20%{transform:translate(73px,-1px) rotate(36deg) scale(.9)}
      40%{transform:translate(141px,72px) rotate(72deg) scale(1)}
      60%{transform:translate(83px,122px) rotate(108deg) scale(1.2)}
      80%{transform:translate(-40px,72px) rotate(144deg) scale(1.1)}
      to{transform:translate(0) rotate(0deg) scale(1)}
  }@-webkit-keyframes animationFramesTwo{0%{-webkit-transform:translate(0) rotate(0deg) scale(1)}
       20%{-webkit-transform:translate(73px,-1px) rotate(36deg) scale(.9)}
       40%{-webkit-transform:translate(141px,72px) rotate(72deg) scale(1)}
       60%{-webkit-transform:translate(83px,122px) rotate(108deg) scale(1.2)}
       80%{-webkit-transform:translate(-40px,72px) rotate(144deg) scale(1.1)}
       to{-webkit-transform:translate(0) rotate(0deg) scale(1)}
   }@keyframes animationFramesThree{0%{transform:translate(165px,-179px)}
        to{transform:translate(-346px,617px)}
    }@-webkit-keyframes animationFramesThree{0%{-webkit-transform:translate(165px,-179px)}
         to{-webkit-transform:translate(-346px,617px)}
     }@keyframes animationFramesFour{0%{transform:translate(-300px,151px) rotate(0deg)}
          to{transform:translate(251px,-200px) rotate(180deg)}
      }@-webkit-keyframes animationFramesFour{0%{-webkit-transform:translate(-300px,151px) rotate(0deg)}
           to{-webkit-transform:translate(251px,-200px) rotate(180deg)}
       }
@media screen and (max-width:1199.98px){
    .hot-search{min-width:1164px}
}
@media screen and (max-width:575.98px){
    .shape-10{right:12%;width:100px}
    .shape-11{right:14%;width:100px}
    .comment-list .children .comment_body,.comment-list .children .comment-respond{margin-left:1.875rem}
}
@-webkit-keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
    100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}
}@keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
     100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}
 }

/* 主模块 */
.login-box{width: 900px; height: 400px; display: flex; box-shadow: 0 1px 18px 0 rgba(0,0,0,.018); border-radius: 6px; overflow: hidden; z-index: 1;}
/* 轮播图 */
.login-box .carousel{width: 500px; height: 100%; background: #009688;}
/* 登录框 */
.login-box .center{width: 400px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #FFFFFF;}
.login-box .center .logo{width: 130px; height: 24px; }
.login-box .center .logo img{max-width: 100%; max-height: 100%;}
.login-box .center .form{width:330px; display: flex; flex-direction: column;}
.login-box .center .form li{width:100%; display: flex; align-items: center; position: relative;}
.login-box .center .form li.input{height: 46px; margin-top: 20px; position: relative;}
.login-box .center .form li.input input{height:100%;border:#E3E8F0 1px solid;border-radius: 4px; padding-left: 30px!important; box-sizing: border-box;}
.login-box .center .form li.input input::-webkit-input-placeholder {color: #C5C8CE}
.login-box .center .form li.input i{width: 20px; height: 20px; font-size: 19px; position: absolute; left: 8px; top: 12px;}
.login-box .center .form li.input .layui-btn{width: 100%; height: 44px;border-radius: 4px;}
.login-box .center .form li.input .captcha{width: 100px; height: 44px; position: absolute; right: 1px; top: 1px;}
.login-box .center .form li.input .captcha img{width: 100%; height: 100%; border-radius: 4px;}
.login-box .center .form li.attach{margin-top: 20px; height:18px; display: flex; align-items: center; justify-content: space-between;}
.login-box .center .form li.attach .layui-form-checked[lay-skin=primary] i {border-color: #009688!important;background-color: #009688;}
.login-box .center .form li.attach .layui-form-checkbox[lay-skin=primary] span {color: #b9bed1;background-color: #FFFFFF;}
.login-box .center .form li.attach .layui-form-checkbox[lay-skin=primary]:hover i {border-color: #009688;color: #fff;}
.login-box .center .form li.attach p{line-height: 14px;color: #b9bed1;cursor: pointer;}
.login-box .center .form li.attach p:hover{color: #009688;}
/* 版权信息 */
.login-cop{margin-top: 20px;height: 90px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.login-cop p{height: 13px; line-height: 13px; font-size: 13px; display: flex;}