@charset "utf-8";
/* CSS Document */
body{background: #f1f1f1;}
.main{     width: 750px;
    margin: 0 auto;
    background: #FFFFFF !important;}
.inTop{
    width: 100%; height: 900px; background: #323c46;
}
.inTitle{    font-size: 40px;padding: 0 0 0 20px;
    line-height:200px; width: 94%;}
.inTitleBlack{float: left;}
.inTitle>.a{text-align: center; color: #FFFFFF;}

.inMe{
width: 100%; margin-top: 60px; height: 300px;
}
.inMe ul li{width: 33%; height: 105px; text-align: center; float: left; margin-top: 14px;}
.inMe ul li img{ width: 55px; height: 55px; margin: 0 auto; }
.inMe ul li p{ min-width: 100px; height: 40px; margin: 0 auto; font-size: 28px; }

.muscle {
    position: relative;
    width: 460px;
    height: 460px;
    border-radius: 100px;
    background-color: #323c46;
    z-index: 10;
}
.fat {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background-color: #ffbb4f;
    top: 9px;
    left: 239px;
    z-index: 9;
}
.other  {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background-color: #ff6260;
    top: 9px;
    left: 469px;
    z-index: 8;
}
.pre {
    position: relative;
    width: 400px;
    height: 400px;
    border-radius: 200px;
    background-color: #fff;
    top: -430px;
    left: 30px;
    z-index: 11;
}
.sx1{
    position: absolute;
    width: 460px;
    height: 460px;
    transform: rotate(45deg);
    clip: rect(0px,230px,460px,0px); /*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
    border-radius: 230px;
    background-color: #ff7b69;
}
.sx2{
    position: absolute;
    width: 460px;
    height: 460px;
    transform: rotate(135deg);
    clip: rect(0px,230px,230px,0px);
    border-radius: 230px;
    background-color: #40cea9;
}

.sx3{
    position: absolute;
    width: 460px;
    height: 460px;
    transform: rotate(225deg);
    clip: rect(0px,230px,230px,0px); /*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
    border-radius: 230px;
    background-color: #0090ff;
}
.sx4{
    position: absolute;
    width: 460px;
    height: 460px;
    transform: rotate(315deg);
    clip: rect(0px,230px,230px,0px);
    border-radius: 230px;
    background-color: #ffc005;
}
.sx-chose{
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 250px;
}

.muscle-sx3{
    position: absolute;
    width: 200px;
    height: 200px;
    transform: rotate(30deg);
    clip: rect(0px,200px,200px,100px);
    border-radius: 100px;
    background-color: #7ec2f3;
}
.fat-sx3{
    position: absolute;
    width: 200px;
    height: 200px;
    transform: rotate(30deg);
    clip: rect(0px,200px,200px,100px);
    border-radius: 100px;
    background-color: #ffbb4f;
}
.other-sx3{
    position: absolute;
    width: 200px;
    height: 200px;
    transform: rotate(30deg);
    clip: rect(0px,200px,200px,100px);
    border-radius: 100px;
    background-color: #ff6260;
}