body { background: #92AEC9; margin-top: 40px; } .wraping { background:white; border: 2px solid #A1A3A8; border-radius: 10px; width: 800px; margin:0 auto; padding: 10px; margin-bottom: 25px; font-family:'Microsoft JhengHei'; } .time { margin-bottom: 20px; } .header img { margin-left:180px; width: 450px; height: 71px; } hr { width: 750px; border:1px solid #A1A3A8 ; } h1 { color: #51789c; text-align: center; } .content .H_datetime { height: 22px; margin-bottom: 15px; } .content h2 { margin-left: 30px; color: #ec5656; font-size: 20px; margin-bottom: 30px; } .content p { margin-left: 30px; font-size: 16px; } .content h3 { margin-left: 30px; color: #60728a; font-size: 20px; } .info_hbd { height: 22px; } .content .warn { color: #ec5656; } .content .btn { margin-top: 50px; margin-bottom: 30px; margin-left: 200px; margin-right: 180px; } .btn .btn_send{ background: #ec5656; border: 1px solid white; font-size: 16px; border-radius: 8px; color:white; width: 150px; height: 45px; } .btn .btn_reset{ margin-left: 80px; background: #60728a; font-size: 16px; border: 1px solid white; border-radius: 8px; color:white; width: 150px; height: 45px; } .footer { background-color: #92AEC9 ; text-align: center; padding-top: 1px; font-family:'Microsoft JhengHei'; } .footer span { font-size: 16px; } .footer h3{ color: white; font-size: 18px; } .footer hr { width: 1200px; border:1px solid white ; } .footer p { color: white; } .footer a { color: white; } /* 適用螢幕寬度小於480px的裝置(當螢幕小於480px時)*/ @media screen and (max-width:480px){ body { background: #92AEC9; margin-top: 40px; width: 480px; } .wraping { background:white; border: 2px solid #A1A3A8; border-radius: 10px; width: 400px; padding: 10px; font-family:'Microsoft JhengHei'; } .time { margin-bottom: 20px; } .header img { margin-left:5px; width: 400px; height: 63px; } hr { width: 350px; border:1px solid #A1A3A8 ; } h1 { color: #51789c; text-align: center; } .content .H_datetime { height: 22px; margin-bottom: 15px; } .content h2 { margin-left: 30px; color: #ec5656; font-size: 20px; margin-bottom: 30px; } .content p { margin-left: 30px; font-size: 16px; } .content h3 { margin-left: 30px; color: #60728a; font-size: 20px; } .info_hbd { height: 22px; } .content .warn { color: #ec5656; } .content .btn { margin-top: 50px; margin-bottom: 30px; margin-left: 25px; margin-right: 35px; } .btn .btn_send{ background: #ec5656; border: 1px solid white; font-size: 16px; border-radius: 8px; color:white; width: 150px; height: 45px; } .btn .btn_reset{ margin-left: 20px; background: #60728a; font-size: 16px; border: 1px solid white; border-radius: 8px; color:white; width: 150px; height: 45px; } .footer { background-color: #92AEC9 ; text-align: center; padding-top: 1px; font-family:'Microsoft JhengHei'; } .footer span { font-size: 16px; } .footer h3{ color: white; font-size: 18px; } .footer hr { width: 450px; border:1px solid white ; } .footer p { color: white; } .footer a { color: white; } }