* {box-sizing: border-box;}
body {font-family: 'Montserrat', sans-serif;background: #f6f5f7;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;margin: -20px 0 50px;background:linear-gradient(rgba(22, 186, 170,0.2), rgba(22, 186, 170, 0.6)), url('http://oss.ywx.cc/images/bg.jpg'); overflow: hidden;background-repeat: no-repeat;background-size: cover;min-height: 100vh;}
h1 {font-weight: bold;margin: 0;}
p {font-size: 14px;line-height: 20px;letter-spacing: .5px;margin: 20px 0 30px;}
span {font-size: 12px;}
a {color: #333;font-size: 14px;text-decoration: none;margin: 15px 0;}
.dowebok {background: #fff;border-radius: 10px;box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);position: relative;overflow: hidden;width: 768px;max-width: 100%;min-height: 480px;}
.form-container form {background: #fff;display: flex;flex-direction: column;padding:  0 50px;height: 100%;justify-content: center;align-items: center;text-align: center;}
.social-container {margin: 20px 0;}
.social-container a {border: 1px solid #ddd;border-radius: 50%;display: inline-flex;justify-content: center;align-items: center;margin: 0 5px;height: 40px;width: 40px;}
.social-container a:hover {background-color: #eee;}
.form-container {position: absolute;top: 0;height: 100%;transition: all .6s ease-in-out;}
.sign-in-container {left: 0;width: 50%;z-index: 2;}
.sign-up-container {left: 0;width: 50%;z-index: 1;opacity: 0;}
.overlay-container {position: absolute;top: 0;left: 50%;width: 50%;height: 100%;overflow: hidden;transition: transform .6s ease-in-out;z-index: 100;}
.overlay {background: #ff416c;background: linear-gradient(to right, rgba(22, 186, 170), rgb(1, 109, 99)) no-repeat 0 0 / cover;color: #fff;position: relative;left: -100%;height: 100%;width: 200%;transform: translateY(0);transition: transform .6s ease-in-out;}
.overlay-panel {position: absolute;top: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 0 40px;height: 100%;width: 50%;text-align: center;transform: translateY(0);transition: transform .6s ease-in-out;}
.overlay-right {right: 0;transform: translateY(0);}
.overlay-left {transform: translateY(-20%);}
.dowebok.right-panel-active .sign-in-container {transform: translateY(100%);}
.dowebok.right-panel-active .overlay-container {transform: translateX(-100%);}
.dowebok.right-panel-active .sign-up-container {transform: translateX(100%);opacity: 1;z-index: 5;}
.dowebok.right-panel-active .overlay {transform: translateX(50%);}
.dowebok.right-panel-active .overlay-left {transform: translateY(0);}
.dowebok.right-panel-active .overlay-right {transform: translateY(20%);}
.login-captcha{height: 34px;max-width: 50%;position: absolute;right: 2px;top: 2px;}
.layui-btn{padding: 0 50px;}