* { margin: 0; padding: 0; } body { /*background: #f5e0d0;*/ background-image: url(../images/首頁底圖.png); font-family: 'Open Sans',sans-serif; display: flex; justify-content: center; padding-top: 5%; } #login { /*width: 400px; height: 500px;*/ display: flex; align-items: center; justify-content: center; /*margin-top: 5%; position: absolute;*/ /*固定在網頁上不隨卷軸移動,若要隨卷軸移動用absolute*/ /*top: 50%; left: 50%; margin-top: -300px; margin-left: -225px;*/ box-shadow: 10px 10px 15px rgba(0,0,0,0.7); background: #ffffff; /*背景顏色*/ padding: 10px 20px; transition: opacity 1s; /*border: groove; border-color: rgba(0,0,0,0.7);*/ border-radius: 10px; /*圓角*/ flex-direction: column; /*width: max-content;*/ /*width: 20vw;*/ width:300px; height: max-content; min-width: max-content; min-height: max-content; } #login h1 { /*background: #f0f0f0;*/ padding: 20px 0; font-size: 34px; text-align: center; font-weight: 100; color: #000000; } #login h2 { font-size: 14px; font-weight: 900; text-align: center; color: #9d9fa8; } .box { /*form*/ /*padding: 5% 5%;*/ margin: 0 auto; width: 100%; } .box > div:not(div:nth-last-child(1)) > div { display: flex; justify-content: center; } .asimg { align-self: center; } input[type="password"], input[type="text"] { width: 90%; /*width: 80%;*/ background: #fff; margin-bottom: 1vh; border: 1px solid #ccc; border-radius: 10px; /*圓角*/ /*padding: 1vw;*/ padding: 10px; font-family: 'Open Sans',sans-serif; /*font-size: 95%;*/ font-size: 16px; color: #555; } input[type="submit"] { align-self: center; /*width: 100%;*/ width: 70%; background: #243949; border: solid 0.1px #243949; border-radius: 10px; /*圓角*/ /*padding: 1vw;*/ padding: 10px; margin-top: 10px; font-family: 'Open Sans',sans-serif; /*font-size: 95%;*/ font-size: 16px; color: #ffffff; cursor: pointer; /*transition: .2s linear .2s;*/ /*-webkit-transition: .2s linear .2s;*/ } /*input[type="submit"]:hover { width: 90%; background: #d4aa87; color: #524239; border-color: #524239; transition: .2s linear .2s; -webkit-transition: .2s linear .2s; }*/ .labErr { display: block; text-align: center; font-size: 14px; line-height: 16px; color: red; } .asgoogle { display: flex; justify-content: center; margin-top: 5%; } #loginG { width: 400px; height: 550px; display: flex; align-items: center; justify-content: center; margin-top: 5%; position: absolute; /*固定在網頁上不隨卷軸移動,若要隨卷軸移動用absolute*/ /*top: 50%; left: 50%; margin-top: -300px; margin-left: -225px;*/ box-shadow: 10px 10px 15px rgba(0,0,0,0.7); background: #ffffff; /*背景顏色*/ padding: 10px 20px; transition: opacity 1s; /*border: groove;*/ /*border-color: #241001;*/ border-radius: 10px; /*圓角*/ } #loginG h1 { /*background: #f0f0f0;*/ padding: 20px 0; font-size: 34px; font-weight: 100; text-align: center; color: #000000; /*text-shadow: 0.07em 0.07em #bab7b5;*/ } #loginG h2 { font-size: 14px; font-weight: 900; text-align: center; color: #9d9fa8; } .textG { display: block; margin-top: 5%; text-align: center; font-size: 14px; line-height: 16px; color: black; } .divG { display: flex; align-items: center; justify-content: center; margin-bottom: 1%; } .GmailPic { width: 50px; height: 50px; } /* 手機板手動放大 */ /* @media screen and (max-device-width: 780px) { #login { width: 800px; height: 1120px; top: 30%; left: 28%; } #login h1 { font-size: 68px; } form { width: 720px; } input[type="password"], input[type="text"] { width: 80%; padding: 6%; padding-top: 4%; padding-bottom: 4%; font-size: 250%; } input[type="submit"] { width: 90%; padding: 5%; margin-top: 10px; font-size: 200%; } } */ .btn_ValidCode { border: none; cursor: pointer; text-decoration-line: underline; margin-bottom: 1vh; background-color: transparent; } #div_ValidCode{ display:flex; justify-content:center; } .LoginLimit { text-align: left; margin-left: 10px; line-height: initial; }