@charset "utf-8";

:root {
	--mtc: #12a3ff;
}

html {
	height:100%;
	overflow: hidden;
}

body {
	font-family:"Microsoft YaHei",微软雅黑;
	font-size:12px;
	margin: 0;
	overflow: hidden;
	height:100%;
	background: #88a457;
}

.waterMark{
	width: 800px;
	height: 300px;
	background-image: url("../../../imgs/waterMark.png");
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
	user-select: none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	position: fixed;
	z-index: 9999;
	left: calc( 50% - 400px );
	bottom: 100px;
}

#container {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	width:100%;
	overflow:hidden;
}

#loadinginfo {
	width:300px;
	height:40px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-20px 0 0 -150px;
	color:#FFF;
	border-radius:5px;
	background: rgba(23,35,52,.7);
	font-size:13px;
	font-weight:bold;
	text-align:center;
	line-height:38px;
}

.topbar{
	position: absolute;
	width: 100%;
	height: 60px;
	left: 0;
	top: -60px;
	transition: transform .5s;
	z-index: 99;
}

.topbar.show{
	transform: translateY(60px);
}

.topbar::before{
	content:"";
	display: block;
	position: absolute;
	width: 100%;
	height: 6px;
	background: rgba(0,0,0,0.5);
	left: 0;
	top: 0;
	z-index: 2;
}

.topbar::after{
	content:"";
	display: block;
	position: absolute;
	width: 100%;
	height: 2px;
	background: #12a3ff;
	left: 0;
	top: 0;
	z-index: 4;
}

.topbar .maintitle{
	background: rgba(0,0,0,0.6);
	height: 51px;
	position: absolute;
	padding-right: 9px;
}

.topbar .maintitle::after{
	content:"";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	border-right: 38px solid transparent;
	border-top: 51px solid rgba(0,0,0,0.6);
	top: 0;
	right: -38px;
	z-index: 3;
}

.topbar .maintitle .cwarp{
	position: relative;
	z-index: 5;
	color: #FFFFFF;
}

.topbar .maintitle .cwarp svg{
	fill:currentColor;
}






@media (max-width:1024px) {

	.topbar .maintitle .cwarp span {
		display: none;
	}

	.topbar .maintitle .cwarp span {
		display: none;
	}
	.topbar .maintitle::after{
		display: none;

	}

	.topbar .maintitle{
		width: 100vw;
		text-align: center;
		pointer-events: none;
		background: rgba(0,0,0,0.5);
		height: 45px;
		position: fixed;
		left: 0;
	}
	.topbar .maintitle .cwarp svg{
		width: 36px;
		height: 36px;
		margin: 6px 0 0 0;
	}
	.topbar .mainnav{
		transition: transform .3s;
	}


	.topbar .showbf{
		display: block;
		width: 60px;
		height: 49px;
		background: linear-gradient(to left,#12a3ff,#0369d2);
		position: absolute;
		left: 0;
		top: 2px;
		z-index: 6;
		color: #FFFFFF;
	}
	.topbar .showbf svg{
		fill: currentColor;
		width: 30px;
		height: 30px;
		position: absolute;
		right: 17px;
		top: 8px;
		display: block;
	}
	.topbar .showbf::after{
		content:"";
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		border-right: 26px solid transparent;
		border-top: 49px solid #12a3ff;
		top: 0;
		right: -26px;
		z-index: 6;
	}
	.topbar .showbf:hover{
		background: #52bcff;
	}
	.topbar .showbf:hover::after{
		border-top: 49px solid #52bcff;
	}


	.topbar .showmv{
		display: block;
		width: 60px;
		height: 49px;
		background: linear-gradient(to right,#12a3ff,#0369d2);
		position: absolute;
		right: 0;
		top: 2px;
		z-index: 6;
		color: #FFFFFF;
	}
	.topbar .showmv svg{
		fill: currentColor;
		width: 30px;
		height: 30px;
		position: absolute;
		right: 17px;
		top: 8px;
		display: block;
	}
	.topbar .showmv::after{
		content:"";
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		border-left: 26px solid transparent;
		border-top: 49px solid #12a3ff;
		top: 0;
		left: -26px;
		z-index: 6;
	}
	.topbar .showmv:hover{
		background: #52bcff;
	}
	.topbar .showmv:hover::after{
		border-top: 49px solid #52bcff;
	}
	.topbar .mainnav {
		width: 100px;
		top: 50px;
		right: -100px;
	}
	.topbar .mainnav li{
		display: block;
	}
	.topbar .fbtnwarp{
		display: none;
	}
	.topbar .mainnav.show {
		transform: translateX(-100px);
	}

	.selectbtn{
		top: 42px;
	}

	.datapanel{
		width: 100%;
		height: calc( 100vh - 130px );
		bottom: -100vh;
		position: absolute;
	}
	.datapanel.show{
		transform: translateY(-100vh);
	}

	.databtn{
		height: 40px;
		width: 120px;
		position: absolute;
		left: calc( 50% - 60px );
		bottom: 0;
		z-index: 32;
		color: #ffffff;
		cursor: pointer;
		transition: transform .2s;
	}

	.databtn svg{
		fill:currentColor;
		width: 21px;
		height: 25px;
		position: absolute;
		z-index: 3;
		left: 48px;
		top: 8px;
	}

	.databtn::before{
		content: "";
		display: block;
		width: 100vw;
		background: rgba(0,0,0,0.4);
		height: 4px;
		position: absolute;
		left: calc( 60px - 50vw );
		bottom: 0;
	}

	.databtn::after{
		content: "";
		display: block;
		border-right: 26px solid transparent;
		border-left: 26px solid transparent;
		border-bottom: 40px solid #12a3ff;
		height: 0;
		width: 66px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
	}

	.databtn:hover{
		color: #FFFFFF;
	}

	.databtn:hover::after{
		border-right: 36px solid #52bcff;
	}

	.databtn.hide{
		transform: translateY(40px);
	}

	.datapanel .dptitle .bbox {
		width: 56px;
		right: -82px;
	}

	.datapanel .dptitle .bbox span {
		display: none;
	}

	.datapanel .dptitle{
		width: calc( 100% - 81px );
		height: 38px;
		left: 0;
		top: 3px;
	}

	.datapanel .dptitle .closedp{
		display: block;
		width: 40px;
		height: 40px;
		color: #FFFFFF;
		position: absolute;
		right: -70px;
		top: 0;
		z-index: 44;
	}

	.datapanel .dptitle .closedp svg{
		fill: currentColor;
		width: 30px;
		height: 30px;
		margin: 3px 0 0 3px;
	}

	.selectbtn li {
		height: 34px;
		line-height: 32px;
	}

	.selectbtn li:nth-child(even){
		margin: -1px 0 0 0;
	}
	.selectbtn li:nth-child(odd){
		margin: -29px 0 0 75px;
	}
	.selectbtn li:nth-child(1){
		margin: 0 0 -11px -22px;
	}

	.selectbtn{
		left: -223px;
		width: 180px;
	}

	.selectbtn.show{
		transform: translateX(200px);
	}

	.selectbtn li::before{
		border-width: 0 6px 9px 0;
		width: 5px;
		right: -11px;
	}

	.selectbtn li::after{
		border-width: 23px 11px 0 0;
		right: -11px;
		top: 9px;
	}

	.selectbtn li span::before{
		border-width: 0 0 23px 12px;
		left: -12px;
	}

	.selectbtn li span::after{
		border-width:11px 0 0 6px;
		width: 6px;
		left: -12px;
		top: 23px;
	}

	.pppwarp{
		width: 100%;
		height: calc( 100% - 41px );
		top: 41px;
		left: 0;
		position: absolute;
		background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.4));
		-webkit-overflow-scrolling: touch;
		overflow: auto;
	}

	.dpwarp{
		width: 100%;
		height: 100%;
		border: 0;
	}

	.mvwarp{
		width: 100%;
		height: 600px;
		position: fixed;
		pointer-events: none;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.ddwarp{
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		overflow: auto;
		pointer-events: none;
	}


}
















@media (min-width:1025px) {
	.topbar{
		min-width: 1220px;
	}

	.topbar .maintitle .cwarp{
		background: linear-gradient(to right,#0369d2,#12a3ff);
		height: 48px;
	}
	.topbar .maintitle .cwarp span {
		display: inline-block;
		font-size: 20px;
		font-weight: bold;
		letter-spacing: 1px;
		margin-right: 6px;
	}
	.topbar .maintitle .cwarp::after{
		content:"";
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		border-right: 36px solid transparent;
		border-top: 48px solid #12a3ff;
		top: 0;
		right: -36px;
		z-index: 6;
	}
	.topbar .maintitle .cwarp svg{
		width: 30px;
		height: 30px;
		margin: 8px 4px -8px 10px;
	}
	.topbar .mainnav{
		display: block;
	}
	.topbar .showbf{
		display: none;
	}
	.topbar .showmv{
		display: none;
	}
	.selectbtn{
		display: block;
	}

	.topbar .mainnav{
		list-style: none;
		right: 37px;
		top: -2px;
		height: 60px;
		font-size: 0;
		white-space: nowrap;
	}
	.topbar .mainnav::before{
		content: "";
		display: block;
		position: absolute;
		background: rgba(0,0,0,0.4);
		width: 100%;
		height: 4px;
		left: 0;
		top: 4px;
		z-index: -1;
	}
	.topbar .mainnav li{
		display: inline-block;
	}

	.topbar .fbtnwarp{
		display: block;
	}

	.selectbtn{
		margin: -290px 0 0 0;
		top: 50%;
	}

	.databtn{
		height: 100px;
		width: 36px;
		position: absolute;
		right: 0;
		top: calc( 50% - 50px );
		z-index: 32;
		color: rgba(255,255,255,0.7);
		cursor: pointer;
		transition: transform .2s;
	}

	.databtn svg{
		fill:currentColor;
		width: 21px;
		height: 25px;
		position: absolute;
		z-index: 3;
		left: 8px;
		top: 32px;
	}

	.databtn::after{
		content: "";
		display: block;
		border-right: 36px solid rgba(0,0,0,0.3);
		border-top: 26px solid transparent;
		border-bottom: 26px solid transparent;
		height: 66px;
		width: 0;
		position: absolute;
		left: 0;
		top: -9px;
		z-index: 2;
	}

	.databtn:hover{
		color: #FFFFFF;
	}

	.databtn:hover::after{
		border-right: 36px solid #52bcff;
	}

	.databtn.hide{
		transform: translateX(40px);
	}

	.datapanel .dptitle .bbox span{
		display: inline-block;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		border: rgba(255,255,255,0.6) 1px solid;
		position: relative;
		margin: 9px 5px 0 5px;
		cursor: pointer;
	}

	.datapanel .dptitle .bbox span svg{
		width: 18px;
		height: 18px;
		position: absolute;
		left: 3px;
		top: 3px;
	}

	.datapanel .dptitle .bbox span:hover{
		border-color: #52bcff;
		background: #52bcff;
		color: #FFFFFF;
	}


	.datapanel .dptitle{
		width: calc( 100% - 103px );
		height: 38px;
		left: 5px;
		top: 3px;
	}

	.datapanel .dptitle .bbox{
		right: -98px;
	}

	.datapanel .dptitle .closedp{
		display: none;
	}

	.selectbtn li {
		height: 44px;
		line-height: 42px;
	}

	.selectbtn li:nth-child(even){
		margin: -23px 0 0 0;
	}
	.selectbtn li:nth-child(odd){
		margin: -17px 0 0 75px;
	}
	.selectbtn li:nth-child(1){
		margin: 0 0 11px -26px;
	}

	.selectbtn{
		left: -194px;
		width: 160px;
	}

	.selectbtn.show{
		transform: translateX(180px);
	}

	.selectbtn li::before{
		border-width: 0 9px 11px 0;
		width: 12px;
		right: -21px;
	}

	.selectbtn li::after{
		border-width: 33px 21px 0 0;
		right: -21px;
		top: 11px;
	}

	.selectbtn li span::before{
		border-width: 0 0 33px 21px;
		left: -21px;
	}

	.selectbtn li span::after{
		border-width:11px 0 0 9px;
		width: 12px;
		left: -21px;
		top: 33px;
	}


	.datapanel{
		display: block;
		width: 350px;
		right: -350px;
		height: calc( 80% - 30px );
		min-height: 620px;
		top: calc( 10% + 30px );

	}
	.datapanel.show{
		transform: translateX(-350px);
	}



	.pppwarp{
		position: absolute;
		left: 0;
		top: 41px;
		width: 100%;
		bottom: 0;
		height: calc( 100% - 41px );
		overflow: hidden;

		background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.4));

	}

	.dpwarp{
		width: 100%;
		height: 100%;
		border: 0;
		overflow: hidden;
	}

	.mvwarp{
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: fixed;
		pointer-events: none;
	}
	.ddwarp{
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		overflow: hidden;
		pointer-events: none;
	}


}










.topbar .mainnav{
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 6;
	pointer-events: auto;
}



.topbar .mainnav li{
	display: inline-block;
	width: 100px;
	height: 60px;
	margin: 0 5px 0 0;
	color: rgba(255,255,255,0.6);
	text-align: center;
	position: relative;
	cursor: pointer;
}

.topbar .mainnav li svg{
	width: 30px;
	height: 30px;
	fill: currentColor;
	margin: 7px 0 0 0;
}

.topbar .mainnav li span{
	font-size: 12px;
	font-weight: bold;
	display: block;
	width: 100%;
	position: relative;
}


.topbar .mainnav li.active span::after{
	content:"";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #ffffff;
	top: -37px;
	left: 42px;
	display: none;
}


.topbar .mainnav li .bk{
	position: absolute;
	background: linear-gradient(rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.3) 77%);
	width: 82px;
	height: 56px;
	right: 0;
	bottom: 0;
	z-index: -1;
}

.topbar .mainnav li .bk::before{
	content:"";
	display: block;
	position: absolute;
	width: 18px;
	height: 43px;
	left: -18px;
	top: 0;
	background: linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.3));;
}

.topbar .mainnav li .bk::after{
	content:"";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-top: 13px solid rgba(0,0,0,0.3);
	bottom: 0;
	left: -18px;
}

.topbar .mainnav li.active, .topbar .mainnav li:hover{
	color: #FFFFFF;
}

.topbar .mainnav li:hover .bk{
	background: #52bcff;
}

.topbar .mainnav li:hover .bk::before{
	background: #52bcff;
}

.topbar .mainnav li:hover .bk::after{
	border-top: 13px solid #52bcff;
}

.topbar .mainnav li.active .bk{
	background: linear-gradient(#12a3ff 0%,#0369d2 77%);
}

.topbar .mainnav li.active .bk::before{
	background: linear-gradient(#12a3ff,#0369d2);
}

.topbar .mainnav li.active .bk::after{
	border-top: 13px solid #0369d2;
}


.topbar .mainnav li.disable{
	color: rgba(255,255,255,0.3);
	cursor: auto;
	user-select: none;
}


.topbar .mainnav li.disable .bk{
	background: rgba(88,88,88,0.3);
}

.topbar .mainnav li.disable .bk::before{
	background: rgba(88,88,88,0.3);
}

.topbar .mainnav li.disable .bk::after{
	border-top: 13px solid rgba(88,88,88,0.3);
}


.topbar .mainnav li .cm{
	position: absolute;
	width: 0;
	height: 0;
	border-top: 30px solid red;
	border-left: 30px solid transparent;
	right: 0;
	top: 4px;
	font-size: 12px;
	font-weight: bold;
	line-height: 0;
	color: #FFFFFF;
}

.topbar .mainnav li .cm span{
	display: block;
	position: absolute;
	left: -20px;
	top: -30px;
	width: 20px;
	height: 16px;
	line-height: 16px;
	letter-spacing: -2px;
}

.topbar .fbtnwarp{
	width: 37px;
	height: 53px;
	position: absolute;
	right: 0;
	top: 5px;
	background: linear-gradient(rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.3) 77%);
	z-index: 22;
}

.topbar .fbtnwarp span{
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: rgba(255,255,255,0.6) 1px solid;
	position: relative;
	margin: 12px 0 0 6px;
	cursor: pointer;
	color: rgba(255,255,255,0.6);
}

.topbar .fbtnwarp span svg{
	fill: currentColor;
	position: absolute;
	left: 3px;
	top: 3px;
	width: 18px;
	height: 18px;
}

.topbar .fbtnwarp span:hover{
	border-color: #52bcff;
	background: #52bcff;
	color: #FFFFFF;
}


.selectbtn{
	list-style: none;
	position: absolute;
	transition: transform .5s;
	z-index: 99;
}


.selectbtn li {
	width: 55px;
	font-size: 15px;
	font-weight: bold;
	color: rgba(255,255,255,0.6);
	text-align: center;
	user-select: none;
	cursor: pointer;
	position: relative;
	font-style: italic;
}

.selectbtn li span {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.selectbtn li::before{
	content:"";
	display: block;
	border-style: solid;
	height: 0;
	position: absolute;
	z-index: 6;
	top: 0;
}

.selectbtn li::after{
	content:"";
	display: block;
	border-style: solid;
	height: 0;
	width: 0;
	position: absolute;
	z-index: 6;
}

.selectbtn li span::before{
	content:"";
	display: block;
	border-style: solid;
	height: 0;
	width: 0;
	position: absolute;
	z-index: 6;
	top: 0;
}

.selectbtn li span::after{
	content:"";
	display: block;
	border-style: solid;
	height: 0;
	position: absolute;
	z-index: 6;
}

.selectbtn li:nth-child(even){
	background: rgba(0,0,0,0.7);
	z-index: 6;
}
.selectbtn li:nth-child(odd){
	background: rgba(0,0,0,0.5);
	z-index: 5;
}

.selectbtn li:nth-child(even)::before{
	border-color: transparent transparent rgba(0,0,0,0.7) transparent;
}
.selectbtn li:nth-child(even)::after{
	border-color: rgba(0,0,0,0.7) transparent transparent transparent;
}
.selectbtn li:nth-child(even) span::before{
	border-color: transparent transparent rgba(0,0,0,0.7) transparent;
}
.selectbtn li:nth-child(even) span::after{
	border-color: rgba(0,0,0,0.7) transparent transparent transparent;
}

.selectbtn li:nth-child(odd)::before{
	border-color: transparent transparent rgba(0,0,0,0.5) transparent;
}
.selectbtn li:nth-child(odd)::after{
	border-color: rgba(0,0,0,0.5) transparent transparent transparent;
}
.selectbtn li:nth-child(odd) span::before{
	border-color: transparent transparent rgba(0,0,0,0.5) transparent;
}
.selectbtn li:nth-child(odd) span::after{
	border-color: rgba(0,0,0,0.5) transparent transparent transparent;
}

.selectbtn li:nth-child(1){
	background: rgba(0,0,0,0.5);
	height: 55px;
	width: 139px;
	z-index: 4;
	font-size: 17px;
	line-height: 47px;
}


.selectbtn li:nth-child(1)::before{
	content:"";
	display: block;
	border-style: solid;
	border-width: 0 12px 16px 0;
	height: 0;
	width: 14px;
	position: absolute;
	z-index: 6;
	right: -26px;
	top: 0;
}

.selectbtn li:nth-child(1)::after{
	content:"";
	display: block;
	border-style: solid;
	border-width: 39px 26px 0 0;
	height: 0;
	width: 0;
	position: absolute;
	z-index: 6;
	right: -26px;
	top: 16px;
}

.selectbtn li.active, .selectbtn li:hover{
	color: #FFFFFF;
}
.selectbtn li.active span, .selectbtn li:hover span{
	text-decoration: underline;
}
.selectbtn li:nth-child(1).active, .selectbtn li:nth-child(1):hover{
	text-decoration: underline;
}
.selectbtn li:hover{
	background: #52bcff;
}
.selectbtn li:hover::before{
	border-color: transparent transparent #52bcff transparent;
}
.selectbtn li:hover::after{
	border-color: #52bcff transparent transparent transparent;
}
.selectbtn li:hover span::before{
	border-color: transparent transparent #52bcff transparent;
}
.selectbtn li:hover span::after{
	border-color: #52bcff transparent transparent transparent;
}
.selectbtn li.active{
	background: #12a3ff;
}
.selectbtn li:nth-child(1).active{
	background: linear-gradient(to right,#0369d2,#12a3ff);
}
.selectbtn li.active::before{
	border-color: transparent transparent #12a3ff transparent;
}
.selectbtn li.active::after{
	border-color: #12a3ff transparent transparent transparent;
}
.selectbtn li.active span::before{
	border-color: transparent transparent #12a3ff transparent;
}
.selectbtn li.active span::after{
	border-color: #12a3ff transparent transparent transparent;
}

.selectbtn li .cm{
	position: absolute;
	width: 0;
	height: 0;
	border-top: 25px solid red;
	border-left: 25px solid transparent;
	top: 0;
	right: -12px;
	z-index: 22;
}

.selectbtn li .cm::before{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-top: 11px solid transparent;
	border-left: 9px solid red;
	border-bottom: 14px solid transparent;
	z-index: 23;
	top: -25px;
}

.selectbtn li .cm small{
	position: absolute;
	width: 20px;
	height: 20px;
	line-height: 18px;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	top: -25px;
	left: -15px;
	z-index: 24;
	font-style: normal;
	letter-spacing: -2px;
}



.datapanel{
	position: absolute;
	transition: transform .5s cubic-bezier(.4,0,.2,1);
	pointer-events: auto;
}

.datapanel svg{
	fill: currentColor;
}

.datapanel .dptitle{
	background: linear-gradient(to right,#0369d2,#12a3ff);
	position: absolute;
}

.datapanel .dptitle::before{
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	border-right: 19px solid transparent;
	border-top: 38px solid #12a3ff;
	top: 0;
	right: -19px;
	z-index: 6;
}

.datapanel .dptitle .tbox{
	font-weight: bold;
	font-size: 17px;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	left: 12px;
	top: 8px;
	line-height: 16px;
	font-style: italic;
}

.datapanel .dptitle .tbox svg{
	width: 20px;
	height: 20px;
	margin: 0 0 -3px 0;
	display: none;
}

.datapanel .dptitle .bbox{
	background: rgba(0,0,0,0.7);
	height: 41px;
	position: absolute;
	top: -3px;
	z-index: 3;
	color: rgba(255,255,255,0.6);
	font-size: 0;
	padding: 0 5px 0 0;
}

.datapanel .dptitle .bbox::before{
	content:"";
	display: block;
	border-style: solid;
	border-width: 0 0 41px 21px;
	height: 0;
	width: 0;
	position: absolute;
	left: -21px;
	top: 0;
	border-color: transparent transparent rgba(0,0,0,0.7) transparent;

}

.dchosen{
	width: 72px;
	height: 72px;
	position: absolute;
	border: #12a3ff solid 4px;
	border-radius: 50%;
	pointer-events:none;
}

.dchosen::before{
	content: "";
	display: block;
	position: absolute;
	width: 58px;
	height: 58px;
	left: 0;
	top: 0;
	border-radius: 50%;
	border: rgba(18,163,255,0.3) solid 7px;
	pointer-events:none;
}