.entry{display:flex;justify-content:space-between;align-items:center;width:100%;height:600px;background:#f6f7f8;box-shadow:none;border-radius:0;overflow:hidden;margin: 0 auto;} .entry-form{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;padding:20px} .entry-form form{width:95%;} .entry-form .form-title{font-size:35px;font-weight:700;color:#181818} .entry-form .form-intro{color:#666;font-size:16px;margin:10px 0 30px 0} .entry-form .form-input{position:relative;display:flex;flex-direction:column;margin-top:10px} .entry-form .invalid-feedback{padding-left:20px} .entry-form .form-input>i{width:30px;position:absolute;top:7px;left:15px;font-size:22px;font-weight:300;color:#ddd} .entry-form .form-input>img{border-radius:0 22px 22px 0;padding:0;width:120px;height:44px;cursor:pointer;position:absolute;top:1px;right:1px;border-left:1px solid #eee} .entry-form .form-input>input{width:100%;height:46px;padding-left:50px;border:1px solid #ddd;border-radius:50px;font-size:16px;transition:linear .2s} .entry-form .form-input>input:focus{outline:0;border:1px solid var(--ace-color-main)} .entry-form .forgotten{margin-top:5px;text-align:right} .entry-form .form-switch{margin-top:5px;display:flex;align-items:flex-start;} .entry-form .form-check-input{margin-right:10px} .entry-form .form-check-label b{font-weight:400} .entry-form .form-button{display:flex;width:100%;height:50px;border-radius:25px;padding:10px 20px;box-sizing:border-box;justify-content:center;font-size:18px;font-weight:500;align-items:center;transition:linear .2s;color:#fff;border:1px solid var(--ace-color-main);margin-top:15px;background:#5138ee} .entry-form .form-button:hover{box-shadow:0 0 4px 0 #ddd;background:#1f0098} .entry-form .switch-button{display:flex;justify-content:center;align-items:center;width:100%;height:50px;border:1px solid #ddd;border-radius:25px;padding:12px 20px;font-size:16px;margin-top:15px;margin-bottom:15px} .entry-form .switch-button:hover{box-shadow:0 0 4px 0 #ddd} .entry-form .switch-button a{margin:0 15px} .entry-side{display:none;width:380px;height:100%;overflow:hidden;box-shadow:none;border-radius:0;background-color:#131673;background-image:url(../image/texture.png),radial-gradient(150% 100% at 50% 30%,#6132b8 0,#131673 100%);background-image:url(../image/texture.png),-webkit-radial-gradient(50% 30%,150% 100%,#6132b8 0,#131673 100%);background-repeat:repeat,no-repeat;background-size:80px,auto;background-position:top center,center;background-blend-mode:overlay,normal;padding-top:60px;padding-left:60px;position:relative} .entry-side>.side-logo{width:100%;height:35px;line-height:35px;cursor:pointer} .entry-side>.side-logo>img{width:auto;height:35px;overflow:hidden} .entry-side>.side-slogan{white-space:nowrap;color:#fff;margin-top:50px} .entry-side>.side-slogan>p:first-child{line-height:1.5;font-size:24px;font-weight:600} .entry-side>.side-slogan>p:last-child{font-size:18px;margin-top:5px} .entry-side>.side-card{position:absolute;bottom:90px;left:65px;width:250px;height:144px} .entry-side>.side-card img{width:90px;height:144px;position:absolute;left:calc(50% - 45px);user-select:none;transform-origin:50% 125%;bottom:0} .entry-side>.side-card .card-1{transform:rotate(-30deg);z-index:1} .entry-side>.side-card .card-2{transform:rotate(-15deg);z-index:2} .entry-side>.side-card .card-3{transform:rotate(0);z-index:3} .entry-side>.side-card .card-4{transform:rotate(15deg);z-index:2} .entry-side>.side-card .card-5{transform:rotate(30deg);z-index:1} @media (min-width:768px){ .entry-form form{width:90%;} .entry-form .form-input{margin-top:15px;} } @media (min-width:992px){ .entry{width:960px;background:#fff;} .entry-form{width:580px;overflow:hidden} .entry-form form{width:80%;} .entry-form .form-input{margin-top:20px;} .entry-side{display:block} } .vertical-center { display: flex;align-items: center;justify-content: center;min-height: calc(100vh - 155px);} .entry { border-radius: 10px;box-shadow: none;overflow: hidden;} .entry-form { padding: 20px;} .entry-side { box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f9f9f9;} @media (min-width: 992px) { header { display: none;} .entry { box-shadow: 10px 10px 10px #d1d9e6;} }