body { background: #FFF url('images/index_bg.jpg') no-repeat center center; background-size: 100% 100%; font-family: -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; max-width:750px; min-height:100vh; margin: 0 auto; background-color: #F3F3F3; color: #333; }
.container {width:100%; max-width:750px; margin:0 auto; background-color: rgba(255,255,255,0.75); padding: 15px; box-sizing: border-box; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
h1, h2, h3 { color: #333; padding:0; margin: 0;}
label { display: block; margin-bottom: 15px; font-weight: bold; }
ul,li{list-style: none; margin:0 auto; padding: 0;}
p{padding: 0; margin:0 auto;}
input[type="text"], input[type="password"], select {width: 100%; padding: 10px; margin-bottom: 5px; border: 1px solid #AAA; border-radius: 4px;	box-sizing: border-box; background: #FFF;}
button {width:100%; background-image: linear-gradient(to right, #49C7A8, #41AAE9); color: white; padding: 15px 5px; border: none; border-radius: 4px; cursor: pointer; font-size: 18px; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
button:hover { background-color: #0056b3; }
button:disabled { background-color: #ccc; }
.error-message { color: red; margin-bottom: 15px; margin:5px 0 10px auto;}
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; font-size:12px; text-align: center;}
th { background-color: #41AAE9; color: white; }
#timer { font-size: 1.2em; font-weight: bold; margin-bottom: 15px; }
#userInfo { margin-bottom: 10px; font-style: italic; }

.index_body{width:100%; height:100vh; position: relative;}
.pages_w1{width: 90%; margin: 0 auto;}
.pages_w2{width: 100%; margin: 0 auto;}
.pages_w3{width: 50%; margin: 0 auto;}
.pages_bottom{position: absolute; left:0; bottom:0;}

.pages_w1 img,.pages_w2 img,.pages_w3 img{display: block;}
.pages_w2 > p{padding: 5px 0;}

.index_hd h1{padding: 20px 0 30px 0;}
.index_hd h1 img{margin: 0 auto;}

.index_data_btns{padding: 35px 0 25px 0;}
.index_data_btns ul{width:100%; margin:0;}
.index_data_btns ul li{width:100%; box-sizing: border-box; padding:10px 0;}
.index_data_btns ul li button{width:100%;}

.new_btn {padding: 10px 15px 15px 15px; border: none;border-radius: 10px;font-size: 24px;cursor: pointer;background-image: linear-gradient(to right, #49C7A8, #41AAE9);color: #FFF;text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);transition: all 0.3s ease; box-sizing:border-box; font-weight:bold; letter-spacing:1px;}
.new_btn:hover {background-image: linear-gradient(to right, #41AAE9, #49C7A8);box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);transform: translateY(-2px);}
.new_btn:active {transform: translateY(1px);box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}

#userVerifyForm{}
#userVerifyForm > div{padding: 0 0 10px 0;}
#userVerifyForm > div > p{font-size: 13px; line-height: 1.456; padding:10px 0 1px 0;}
#userVerifyForm > div > p > strong{color:orange;}
#userVerifyForm > button{margin: 5px auto 10px auto;}

#userInfo,#timer{background: rgba(255,255,255,0.85); border-radius: 5px; box-sizing: border-box; padding: 10px 5px; font-size: 12px; text-align: center;}
#timer{font-size: 14px;}

.options-container > div{padding: 1px 0 5px 0;}

.question-block{padding:5px 0;}
.question-block > h3{font-size: 14px; color:#1680BE; padding: 5px 0 0 0;}
.question-block > p{font-size: 16px; padding: 5px 0 9px 0;}
.question-block >.options {margin:5px auto 10px auto;}
.question-block >.options > div{background: rgba(255,255,255,0.85); border:1px solid #FFF; padding: 7px 10px; border-radius: 3px; box-sizing: border-box; margin-bottom: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.question-block >.options > div > label{margin: 1px 0; display: block; font-weight: normal; font-size: 14px;}

#leaveCountMessage{color:red; margin:15px auto; text-align: center;}
.container > h3{display: block; text-align: center; font-weight: normal;}