/* 高清屏幕 width->1280px以上 */
@media screen and (min-width:1280px) {	
	body{
		background-color: rgba(241, 207, 121, 1.0);
		height: 100vh;
	}
	.top-bar{
		width: 100%;
		height:5vh;
		line-height: 50px;
		display: flex;
		flex-direction: row;
		background-color: rgba(241, 207, 121, 1.0);
		justify-content: space-between;
		
	}
	.sys-logo{
		height:70px;
		width: 70px;
		position: absolute;	
		left: 20px;
		top: 5px;
	}
	#subtitle{
		font-size: 1.3em;
		margin: 15px 100px;
	}
	.menu-body{
		background-color: rgba(243, 255, 162, 0.6);
		width: 150px;
		height: auto;
		z-index: 999;
		box-shadow: 0px 3px 9px dimgrey;
		position: absolute;
		top: 40px;
		padding: 0px 0px;
		display: none;
		border: solid 1px white;
	}
	.menu-body li{
		list-style: none;
		height: 25px;
		text-align: center;
		line-height: 25px;
		display: block;
		margin: 5px 0px;
	}
	.menu-body li:hover{
		background-color: rgba(170, 118, 54, 0.5);
	}
	.menu-body li a{
		color: #424242;
		text-decoration: none;
	}
	.user-bar{
		margin-top: auto;
		margin-bottom: auto;
		margin-right: 110px;
		height: 30px;
		line-height: 30px;
		color: firebrick;
		display: flex;
		flex-direction: row;
		position: relative;
	}
	#user-avatar{
		width: 30px;
		height: 30px;
		border-radius: 50%;
		display: inline-block;
		margin-right: 10px;
	}
	#user-name{
		display: inline-block;
		height: 30px;
		line-height: 30px;
		margin-right: 10px;
	}
	.main{
		width: 100%;
		height: 90vh;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		flex-wrap: wrap;
	}
	/* 左栏目 */
	.left_frame{
		width: 35%;
		background-color: rgba(241, 229, 158, 1.0);
		height: 95%;
		box-shadow: 0px 0px 8px slategray inset;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		position: relative;
	}
	.judge-result-banner{
		display: flex;
		flex-direction: column;
		height: 45%;
		width: 100%;
		margin-top: 20px;
	}
	/* 雷达容器 */
	.radar{
		width: auto;
		height:85%;
		margin: auto auto;
	}
	/* 雷达图 */
	#score{
		width:auto;
		height:100%;
	}
	.score_items{
		width: 100%;
		height: 20%;
		font-size: 1.1em;
		color: darkslategrey;
		text-align: center;
		display: flex;
		flex-direction: row;
		margin: 20px auto;
		justify-content: space-around;
		position: relative;
	}
	.score_item_block{
		width: auto;
		display: inline-block;
		background-color: transparent;
		border: none;
		border-radius: 0px;
		flex-direction: row;
		text-align: center;
		margin: 5px 0px;
	}
	.score_item{
		color: rgb(255, 85, 255);
		margin-right: 7px;
		display: inline-block;
	}
	.total-judge-div{
		position: absolute;
		right: 10px;
		top: -60px;
		font-size: 1.3em;
	}
	#judge{				
		color: red;
		font-size: 1.1em;
		text-shadow: 0px 0px 2px yellow;
		display: inline-block;
	}
	/* 录音操作面板 */
	.opration-banner{
		height: 25%;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	#sound-wave{
		width: 96%;
		height: 55%;
		margin-top: 5px;
		margin-left: auto;
		margin-right: auto;
	}
	#wave-canvas{
		width: 100%;
		height: 98%;
		background: rgba(253, 184, 127, 0.6);
		border-radius: 6px;
		border: solid 1px #E76F51;
	}
	.controll-banner{
		width: 96%;
		height: 35%;
		margin: 0px auto;
		border: solid 1px #E76F51;
		background-color: rgba(238, 141, 44,0.6);
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.btn-operate{
		display:inline-flex;
		width: 40px;
		height:40px;
		margin: auto;
		color: white;
		border: #E76F51 solid 1px;
		background:radial-gradient(rgba(254, 255, 187, 0.5),rgba(217, 217, 217, 0.5));
		justify-content: center;
		cursor: pointer;
	}
	.btn-operate:hover{
		background-color: rgba(172, 202, 128, 0.7);
		border: firebrick solid 1px;
	}
	.btn-record{
		width: 22px;
		height: 22px;
		margin: auto auto;
		border: white 1px solid;
		border-radius: 50%;
	}
	
	.btn-stop-record1{
		width: 22px;
		height: 22px;
		margin: auto auto;
		border-style: solid;
		border-width: 1px;
		background-color: transparent;
		display: inline-flex;
	}
	.btn-stop-record2{
		width: 14px;
		height: 14px;
		margin: auto auto;
		/* background-color: red; */
		border-radius: 50%;
	}
	.btn-play{
		width: 0px;
		height:0px;
		margin: auto auto;
		border-left: darkgreen 18px solid;
		border-right: transparent 0px solid;
		border-top: transparent 11px solid;
		border-bottom: transparent 11px solid;
	}
	.btn-pause-play1{
		width: 4px;
		height: 20px;
		margin: auto 1px;
		background-color: darkgreen;
	}
	.btn-pause-play2{
		width: 0px;
		height:0px;
		margin: auto 1px;
		border-left: darkgreen 16px solid;
		border-right: transparent 0px solid;
		border-top: transparent 10px solid;
		border-bottom: transparent 10px solid;
	}
	.btn-stop-play{
		width: 20px;
		height: 20px;
		margin: auto auto;
		border: darkgreen 1px solid;
		background-color: darkgreen;
	}
	#btn-upload{
		display: flexbox;
		flex-direction: column;
		justify-content: center;
		padding: 0 0;
		
	}
	.btn-upload1{
		width: 0px;
		height:0px;
		margin: 0 auto;
		border-left: transparent 16px solid;
		border-right: transparent 16px solid;
		border-top: transparent 0px solid;
		border-bottom: royalblue 16px solid;
	}
	.btn-upload2{
		width: 18px;
		height:6px;
		margin: 0 auto;
		background-color:royalblue;
	}
	#counttime{
		width:auto;
		height: 40px;
		line-height: 40px;
		font-size: 26px;
		letter-spacing: 3px;
		margin:auto auto;
		padding-left: 15px;
		padding-right: 15px;
		color:rgba(255, 255, 0, 0.8);
		border: lightgoldenrodyellow solid,1px;
		border-radius: 6px;
		background-color: #E76F51;
	}
	/*评分动画过程面板 */
	.judge{
		width: 100%;
		height: 30%;
		position: relative;
		top: 0%;
		left: 0%;
	}
	.msg{
		font-size: 2.5rem;
		color: orangered;
		text-shadow: 0px 0px 3px yellow;
		position: absolute;
		left: 60px;
		margin-top: 50px;
	}
	.judge_bar{
		width: 98%;
		height:100%;
	}
	a{
		text-decoration: none;
		display: block;
		margin: 0 auto;
	}
	/* 中间栏 */
	.middle_frame{
		width: 35%;
		height: 100%;
		background-color: rgba(241, 229, 158, 1.0);
		box-shadow: 0px 0px 8px slategray inset;
		background-image: url('./asset/bg3.png');
		display: flex;
		flex-direction: column;
		position: relative;
	}
	/* 个人中心面板 */
	.my-info-banner{
		width:90%;
		height: 250px;
		background-color: rgba(158, 119, 68, 0.6);
		left: 5%;
		top: 50%;
		margin-top: -125px;
		position: absolute;
		border: solid 1px white;
		display: none;
		position: relative;
	}
	.close-banner-btn{
		position: absolute;
		right: 5px;
		top: 5px;
		background-color: transparent;
		width: 25px;
		height: 25px;
		border: solid 1px white;
		color: white;
		text-align: center;
		line-height: 25px;
		font-size: 1.8em;
		cursor: pointer;
	}
	.close-banner-btn:hover{
		background-color: rgba(211, 218, 75, 0.5);
	}
	.info-banner-title{
		font-weight: bold;
		font-size: 1.2em;
		letter-spacing: 0.2em;
		color: white;
		height: 40px;
		line-height: 40px;
		padding-left: 20px;
		background-color: rgba(125, 81, 43, 0.6);
	}
	.my-info-banner-body{
		height: 210px;
	}
	.personal-baseinfo{
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.avatar-banner{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 30%;
		height: 210px;
		margin: auto auto;
		background-color: rgba(238, 141, 44,0.3);
		border-bottom: solid 1px white;
	}
	#avatar-in-banner{
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin: auto auto;
	}
	.baseinfo-item-eidt{
		color: #036865;
		cursor: pointer;
		text-align: center;
		width: fit-content;
		
	}
	.baseinfo-list-banner{
		width: 70%;
		height: 100%;
		display: inline-flex;
		flex-direction: column;
		list-style: none;
	}
	.baseinfo-list-banner li{
		display: flex;
		flex-direction: row;
		margin: 5px 20px;
		font-size: 1.2em;
		color: white;
	}
	.baseinfo-list-banner li label{
		color: #424242;
		
	}
	/* 所选诗词详情框 */
	.poem-detail{
		width: 90%;
		height: 90%;
		background-color: rgba(158, 119, 68, 0.6);
		margin:auto auto;
		visibility: hidden;
		display: flex;
		flex-direction: column;
		border: solid 2px white;
		position: relative;
	}
	.poem-text,
	.poem-title{
		margin-top: 30px;
		font-size:1.5em;
		font-weight: bolder;
		line-height:35px;
		color: rgb(212, 48, 15);
		text-align: center;
		text-shadow: 0px 0px 3px rgb(255, 255, 255);
		letter-spacing: 0.5em;
	}
	.poem-text{
		font-size:1.5em;
		color: black;
		font-weight: bold;
		line-height: 50px;
	}
	.poem-param{
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		height: 50px;
		line-height: 50px;
		font-size: 1.2em;
		justify-content: space-around;
		border-top: #ffffff solid 1px;
		border-bottom: #ffffff solid 1px;
	}
	.poem-lang,
	.poem-dynasty,
	.poem-author,
	.poem-yinger{
		color: #ffff7f;
		text-shadow:  0px 0px 3px rgb(25, 25, 25);
	}
	/* 诗词发布上传框 */
	.poemModal{
		width:90%;
		height: auto;
		left: 5%;
		top: 10%;
		position: absolute;
		border: solid 1px white;
		display: none;
	}
	.poem-dialog{
		background-color: rgba(158, 119, 68, 0.6)!important;
		height: 100%;
	}
	.poem-content{
		height: 100%;
	}
	.poem-body{
		height: auto!important;
		background-color: transparent!important;
		overflow: visible!important;
	}
	.poem-footer{
		height: auto!important;
		display: flex!important;
		padding: 5px 5px!important;
	}
	.poem-input-ts{
		color: red;
		font-size: 1em;
	}
	.poem-input-text,
	.poem-input{
		color: rgb(56, 19, 16);
		background-color: rgba(143, 112, 75, 0.4);
		width: 70%;
		height: 2em;
		line-height: 2em;
		border: solid 1px rgba(255, 255, 255, 0.7);
		display: inline-block;
		font-size: 1em;
		color: white;
	}
	.poem-input-text{
		height:140px;
		width: 90%;
		display: inline-block;
		margin: 0px auto;
		font-size: 1em;
		line-height: 1.5em;
	}
	.poem-input-text:focus,
	.poem-input:focus{
		border: solid 1px rgba(255, 38, 41, 0.7);
		outline-style: none;
	}
	.poem-text-label{
		display: inline-block;
	}
	.poem-publish-item,
	.poem-publish-item-2{
		width: 90%;
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
		font-size: 16px;
		color: lightyellow;
	}
	.poem-publish-item-2{
		display: flex;
		flex-direction: column;
	}
	/* 诗词播放器 */
	.player-banner{
		border: solid 1px rgba(243, 255, 162, 0.7);	
		width: 100%;
		height: 50px;
		margin: 30px auto;
		display: flex;
		flex-direction: row;
	}
	audio{
		width: 100%;
		height: 45px;
		margin: auto auto;
	}
	/* 控制面板 */
	audio::-webkit-media-controls-panel{	
		height: 45px;
		background-color: rgba(197, 175, 65, 0.7);
	}
	/* 右栏目 */
	.right_frame{
		width: 28%;
		height: 100%;
		background-color: rgba(241, 229, 158, 0.6);
		background-image: url('asset/right-bgimg.png');
		background-size: cover;
		border: solid 1px rgba(143, 112, 75, 1.0);
		position: relative;
	}
	.frame-title{
		font-size: 2em;
		text-align: center;
		margin: 10px;
		height: 3%;
	}
	.esc-logo{
		position: absolute;
		top: 10px;
		right: 15px;
		width: 48px;
		height: 48px;
		text-align: center;
		padding: 0px 0px;
		line-height: 50px;
		border-radius: 50%;
		background-color: rgba(255, 255,255,0.6);
		box-shadow: 0px 0px 10px #4f4f4f;
		cursor: pointer;
		visibility: hidden;
	}
	.esc-logo:hover{
		background-color: rgba(255, 255,255,0.8);
	}
	.esc-logo img{
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}
	.poem_list{
		font-size: 1em;
		line-height: 30px;
		margin-top: 30px;
		height: 85%;
		padding: 0 5px;
		overflow: hidden;
	}
	.works_li{
		height: 6.6%;
		line-height: 6.6%;
		list-style-type: none;
		font-size: 1.1em;
		display: inline-flex;
		flex-direction: row;
		cursor: pointer;
		padding: 8px 0px;
		width: 96%;
		border-bottom: dotted 1px seagreen;
	}
	.works_li:hover{
		background-color: rgba(225, 138, 38, 0.5);
		border-radius: 2px;
	}
	
	.works_list_index{
		font-size: 0.7em;
		display: inline-block;
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		border-radius: 50%;
		background-color: green;
		color: white;
		margin:auto 6px;
	}
	.works_list_title{
		height: 20px;
		line-height: 20px;
		display: inline-block;
		margin: auto 4px;
		color: green;
		width: fit-content;
	}
	.works_list_author{
		height: 20px;
		line-height: 20px;
		display: inline-block;
		margin:auto 4px;
		color: #036865;
		font-size: 0.7em;
	}
	.works_lang,
	.works_major,
	.works_date{
		height: 20px;
		line-height: 20px;
		padding: 0px 10px;
		margin-top: auto;
		margin-bottom: auto;
		margin-left: 5px;
		display: inline-block;
		font-size: 0.7em;
		color: white;
		background-color: rgba(85, 170, 127, 0.7);
		border-radius: 5px;
	}
	.works_date{
		display: none;
	}
	.works_lang{
		background-color: rgba(238, 84, 53, 0.6);
	}
	.works_major{
		background-color: rgba(41, 145, 39, 0.6);
	}
	.page-bar{
		width: 100%;
		height:6%;
		position: absolute;
		bottom: 10px;
		display: flex;
		flex-direction: row;
		border-top: solid 1px lightgoldenrodyellow;
		border-bottom: solid 1px lightgoldenrodyellow;
	}
	.page-list-select{
		font-size: 1em;
		line-height: 2em;
		height: 2.3em;
		width: 50px;
		background-color: rgba(255, 85, 0, 0.2);
		border: solid 1px white;
		margin-left: 5px;
		color: firebrick;
	}
	.page-list-select option:checked{
		background-color: rgba(202, 51, 31, 0.7);
	}
	.page-list-select:focus{
		outline: none;
	}
	.login-item{
		width: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 15px;
	}
	.input-ts{
		color: red;
		display: inline-block;
	}
	
	.btn-ok:hover
	{
		background-color: #e7a97f;
	}
	.btn-ok,
	.btn-cancle{
		width: auto;
		height: 30px;
		line-height: 30px;
		padding-left: 30px;
		padding-right: 30px;
		padding-top: 0px;
		background-color: burlywood;
		border: solid 1px #733728;
		margin:auto auto;
	}
	.btn-cancle{
		background-color: #c3c3c3;
	}
	.btn-cancle:hover{
		background-color: #a8a8a8;
	}
	.login-input{
		color: rgb(56, 19, 16);
		background-color: rgba(143, 112, 75, 0.4);
		width: 300px;
		height: 30px;
		line-height: 30px;
		border: solid 1px rgba(170, 118, 54, 0.7);
		display: inline-block;
	}
	.login-input:focus{
		border: solid 1px rgba(250, 250, 157, 1);
		outline-style: none;
	}
	.alert-icon{
		width: 30px;
		height: 30px;
		display: inline-block;
		background-color: #ffff7f;
		border: #E76F51 solid 1px;
		border-radius: 5px;
		margin: auto 15px;
	}
	.alert-type{
		width: 26px;
		height: 30px;
		line-height: 30px;
		font-size: 2em;
		font-weight: bold;
		color: red;
		text-align: center;
		margin: auto auto;
	}
	.alert-msg{
		height: 26px;
		line-height: 26px;
		display: inline-block;
		font-size: 1.2em;
	}
	.footer-bar{
		width: 100%;
		height: 40px;
		display: flex;	
	}
	.footer-info{
		height: 30px;
		line-height: 30px;
		width: fit-content;
		margin: auto auto;
		flex-direction: row;
	}
	.footer-info-item{
		width: fit-content;
		margin: 0px 20px;
		display: inline-block;
	}
	.footer-bar a{
		text-decoration: none;
		color: black;
	}
	.footer-bar a:hover{
		color: #733728;
	}
}