body, html{ height: 100%; background-repeat: no-repeat; } .main{ margin-top: 70px; } h1.title { font-size: 50px; font-family: 'Passion One', cursive; font-weight: 400; } hr{ width: 10%; /*color: #fff;*/ } .form-group{ margin-bottom: 15px; } label{ margin-bottom: 15px; } input, input::-webkit-input-placeholder { font-size: 11px; padding-top: 3px; } .main-login{ /*background-color: #fff;*/ /* shadows and rounded borders */ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .main-center{ margin-top: 30px; margin: 0 auto; max-width: 330px; padding: 40px 40px; } .login-button{ margin-top: 5px; } .login-register{ font-size: 11px; text-align: center; } .col-form-label{ text-align:center; } .terms{ max-height: 200px; overflow-y: auto; } .terms pre{ width:100%; white-space: pre-wrap; /* Since CSS 2.1 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } .vertical-center { min-height: 100%; /* Fallback for browsers do NOT support vh unit */ min-height: 100vh; /* These two lines are counted as one :-) */ display: flex; align-items: center; } #btn_kakao_login{ cursor: pointer; height:46px; width:116px; background-color: transparent; color:transparent; border:0; background-size: 100%; /* To fill the dimensions of container (button), or */ background-repeat: no-repeat; background-position: bottom center; margin-top:5px; background-image:url('../oauth_kakao/kakao_login_join.png'); } #btn_kakao_login:hover { background-image:url('../oauth_kakao/kakao_login_join_ov.png'); } #bottom_box{ position:fixed; bottom:0; width:100%; left:0; } #bottom_box .container{ text-align:center; }