.view { height: calc(100% - 85px) !important; } .login { width: 100%; height: 100% !important; background-image: url("../images/slider2.jpg"); background-size: cover; background-repeat: no-repeat; position: relative; } .login .login_box { width: 477px; position: absolute; height: 557px; top: 0; bottom: 0; right: 0; left: 0; margin: auto; padding: 30px 50px; background-color: rgba(255, 255, 255, 0.9); overflow: hidden; } .top_image{ text-align: center; } .top_image img{ width:305px; } .login .login_box .top_icon { width: 100%; float: left; text-align: center; } .login .login_box .top_icon img { width: 60px; margin-bottom: 10px; } .login .login_box .sub { font-size: 20px; } .login .login_box h1 { color: #333; margin-bottom: 20px; font-size: 24px; } .login .login_box h1 span { font-size: 24px; } .login .login_box h1 .primary_color { font-weight: bold; } .login .login_box h3 { color: #666; font-weight: 400; font-size: 18px; } .login .login_box .info { width: 30px; position: absolute; top: 15px; margin: 0; right: 15px; background-color: transparent; } .login .login_box .info img { width: 100%; } .login .login_box .info .info_box { background-color: #fff; width: auto; position: absolute; top: 40px; width: 200px; right: -48px; z-index: 999; padding: 15px; box-shadow: 0 0 2px 2px #ccc; border-radius: 3px; } .login .login_box .info .info_box::before { width: 10px; height: 10px; position: absolute; content: ""; background-color: #fff; top: -5px; right: 58px; transform: rotate(45deg); } .login:before { position: absolute; width: 100%; content: ""; height: 100%; background-color: rgba(70, 70, 70, 0.5); top: 0; left: 0; } .info_point { font-size: 12px; color: #666; } @media screen and (max-width: 550px) { .login { height: calc(100% - 53px); } .login .login_box { width: 90%; } .login .login_box .top_icon img { width: 50px; } .login .login_box h1 span { font-size: 18px; } }