* {
margin:0;
padding:0;
}
html {
height:100%;
}
.main {
width:50%;
margin:0 auto;
position:relative;
}
.box_lay {
position:absolute;
height:100%;
left:50%;
margin-left:-4.13rem;
}
.box_graph {
width:0;
height:0;
border:4rem solid transparent;
border-radius:50%;
cursor:pointer;
position:absolute;
}
.box_graph p {
color:#fff;
position:relative;
width:1.5rem;
word-break:break-all;
font-size:.6rem;
left:-2.5rem;
top:-.8rem;
}
.box_graph.st {
border-left-color:#8064A2;
transform:rotate(45deg);
}
.box_graph.st p {
transform:rotate(-45deg);
}
.box_graph.nd {
border-left-color:#5F5BAE;
transform:rotate(135deg);
left:.25rem;
}
.box_graph.nd p {
transform:rotate(-135deg);
}
.box_graph.rd {
border-left-color:#4BACC6;
transform:rotate(-45deg);
top:.25rem;
}
.box_graph.rd p {
transform:rotate(45deg);
}
.box_graph.fin {
border-left-color:#4691CC;
transform:rotate(-135deg);
left:.25rem;
top:.25rem;
}
.box_graph.fin p {
transform:rotate(135deg);
}
.box_desc {
position:absolute;
width:5rem;
border-radius:15px;
font-size:13px;
height:3.5rem;
padding:0;
z-index:-1;
overflow:hidden;
}
/* 左上、左下半圆详情 */
.box_dec.st .box_desc,.box_dec.rd .box_desc {
left:-5.5rem;
padding-right:2.5rem;
}
/* 左下、右下半圆详情 */
.box_dec.rd .box_desc,.box_dec.fin .box_desc {
top:5rem;
}
/* 右上、右下半圆详情 */
.box_dec.nd .box_desc,.box_dec.fin .box_desc {
left:5.5rem;
padding-left:2.5rem;
}
.box_dec.st .box_desc {
border:3px solid #8064A2;
}
.box_dec.rd .box_desc {
border:3px solid #4BACC6;
}
.box_dec.nd .box_desc {
border:3px solid #5F5BAE;
}
.box_dec.fin .box_desc {
border:3px solid #4691CC;
}
.box_desc .box_inner {
position:absolute;
left:0;
top:0;
right:-17px;
bottom:0;
overflow-x:hidden;
overflow-y:scroll;
padding:0 .15rem;
text-align:left;
}
.box_dec.fin p,.box_dec.nd p {
text-align:right;
}
.box_inner p {
padding:.15rem 2rem 0 0;
}
.half_t .box_child:last-child .box_inner p,.half_b .box_child:last-child .box_inner p {
padding:.15rem 0 0 2.5rem;
}