.test_form { width: 600px; height: 470px; border-radius: 11px; background: #FFFFFF; margin: 0 auto; margin-top: 100px; } .test_head { width: 100%; height: 50px; position: relative; border-bottom: 1px solid #ECF1F2; } .test_head .test_menu_close { top: 13px; left: 24px; position: absolute; width: 24px; height: 24px; cursor: pointer; } .test_content { padding: 0px 30px; } .test_upload { width: 100%; height: 160px; background: rgba(136, 136, 136, 0.01); border: 1px dashed #D2D2D2; border-radius: 15px; margin: auto 0; } .test_upload div { text-align: center; } .test_upload_btn { width: 100px; height: 36px; line-height: 36px; text-align: center; border-radius: 100px; background: #0091E9; font-size: 15px; color: #FFFFFF; letter-spacing: 0.3px; font-weight: 500; font-style: normal; font-family: PingFang SC; cursor: pointer; margin: 0 auto; margin-top: 12px; } .test_upload_txt { font-family: PingFang SC; font-style: normal; font-weight: 500; font-size: 18px; line-height: 25px; text-align: center; letter-spacing: 0.3px; color: #000000; margin-top: 37px; } .test_upload_note { margin-top: 5px; font-family: PingFang SC; font-style: normal; font-weight: normal; font-size: 12px; line-height: 17px; /* identical to box height */ text-align: center; letter-spacing: 0.3px; opacity: 0.5; } .test_tweet { width: 110px; height: 44px; line-height: 44px; text-align: center; background: #C4C4C4; border-radius: 100px; color: #FFFFFF; font-family: PingFang SC; font-style: normal; font-weight: 500; font-size: 17px; letter-spacing: 0.3px; cursor: pointer; float: right; margin-top: 27px; } .test_link { border-bottom: 1px solid #ECF1F2; height: 32px; margin-top: 22px; } .test_link input { outline-style: none; border: 0px; width: 100%; height: 20px; } .test_type { width: 100%; height: 106px; } .test_type textarea { resize: none; border: 0px; outline-style: none; width: 100%; margin-top: 25px; height: 70px; font-family: PingFang SC; font-style: normal; font-weight: normal; font-size: 17px; line-height: 24px; /* identical to box height */ letter-spacing: 0.3px; } .test_upload_error { font-family: PingFang SC; font-style: normal; font-weight: normal; font-size: 12px; line-height: 17px; /* identical to box height */ text-align: center; letter-spacing: 0.3px; color: #FF0000; margin-top: 7px; } .test_player_close { position: absolute; right: -12px; top: -12px; width: 24px; height: 24px; cursor: pointer; } .test_card { width: 380px; height: 100px; border: 1px solid #EDEDED; box-sizing: border-box; border-radius: 15px; position: relative; display: flex; justify-content: center; align-items: center; } .test_progress_area { width: 336px; height: 20px; display: flex; align-items: center; justify-content: space-between; } .test_progress_area span { font-family: PingFang SC; font-style: normal; font-weight: normal; font-size: 14px; line-height: 20px; /* identical to box height */ letter-spacing: 0.3px; color: #000000; } .test_progress_back { width: 290px; height: 6px; background: #ECF1F2; position: relative; } .test_progress_detail{ position: absolute; background: #0091E9; left: 0; top: 0; height: 6px; width: 0px; } .test_progress_point,.test_list_progress_point{ position:absolute; width: 8px; height: 8px; background: #0091E9; left: 116px; top: 40px; z-index: 11; border-radius: 50%; } .test_progress_time,.test_list_progress_time{ position:absolute; width: 230px; height: 2px; left: 120px; top: 43px; background: #ECF1F2; } .test_start_time,.test_list_start_time{ position: absolute; left: 120px; top: 56px; color: #88939A; } .test_end_time,.test_list_end_time{ position: absolute; right: 30px; top: 56px; color: #88939A; } .test_list_player_state,.test_player_state{ top: 20px; height: 60px; width: 60px; left: 25px; position: absolute; cursor: pointer; }