.createRole {
    position: absolute;
    left: -1.65rem;
    top: -3.7rem;
    width: 10.8rem;
    height: 22.47rem;
    background: url("../img/clothes/create_hairstyle_bg.jpg") 0 0 no-repeat;
    background-size: 100%;
    box-sizing: border-box;
    padding-top: 2rem;
    transform: scale(0.695);
}

.createRole-title {
    width: 3.48rem;
    height: 0.81rem;
    position: absolute;
    background: url("../img/clothes/clothes_title.png") 0 0 no-repeat;
    background-size: 100%;
    top: 1rem;
    left: 0.8rem;
    transform: scale(1.5);
}

.createRole-close {
    width: 1.74rem;
    height:1.74rem;
    position: absolute;
    background: url("../img/clothes/clothes_return.png") 0 0 no-repeat;
    background-size: 100%;
    top: 0.8rem;
    right: 0.5rem;
    transform: scale(1.5);
}

.createRole .selectSection {
    position: absolute;
    left: 0;
    top: 2.2rem;
    width: 100%;
    height: 8rem;
    z-index: 18;
}

.createRole .selectSection .decorate {
    position: absolute;
    width: 7.53rem;
    height: 0.4rem;
    background: url("https://res.zulong.com/cms/mystyle/house/img/decorate.png") 0 0 no-repeat;
    background-size: 100%;
    left: 1.635rem;
    bottom: 0rem;
}

.createRole .selectSection span {
    position: absolute;
    width: 2.8rem;
    height: 2.8rem;
}

.createRole .selectSection .hairstyle {
    left: 0.14rem;
    top: 0;
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_hairstyle.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .selectSection .hairstyle.active {
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_hairstyle1.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .selectSection .appearance {
    left: 0.14rem;
    top: 2.6rem;
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_appearance.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .selectSection .appearance.active {
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_appearance1.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .selectSection .skin {
    left: 0.14rem;
    top: 5.2rem;
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_skin.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .selectSection .skin.active {
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_skin1.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .selectSection .decoration {
    right: 0.14rem;
    top: 1.26rem;
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_ornaments.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .selectSection .decoration.active {
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_ornaments1.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .selectSection .clothes {
    right: 0.14rem;
    top: 4rem;
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_clothes.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .selectSection .clothes.active {
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_clothes1.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .appearanceSection {
    width: 9.7rem;
    height: 2rem;
    margin-left: 0.55rem;
    margin-top: 0.2rem;
}

.createRole .appearanceSection .eyes,
.createRole .appearanceSection .mouth {
    float: left;
    width: 1.93rem;
    height: 1.73rem;
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_eys1.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .appearanceSection .eyes.active,
.createRole .appearanceSection .mouth.active {
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_eys.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .appearanceSection .mouth {
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_mouth.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .appearanceSection .mouth.active {
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_mouth1.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .appearanceSection .eyesColor {
    float: right;
    width: 1.93rem;
    height: 1.73rem;
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_pupil1.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .appearanceSection .eyesColor.active {
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_pupil.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .hairstyleSection {
    width: 9.7rem;
    height: 2rem;
    margin-left: 0.55rem;
    margin-top: 0.2rem;
}

.createRole .hairstyleSection .hair,
.createRole .hairstyleSection .bangs {
    float: left;
    width: 1.93rem;
    height: 1.73rem;
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_antecedent.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .hairstyleSection .hair.active,
.createRole .hairstyleSection .bangs.active {
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_antecedent1.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .hairstyleSection .bangs {
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_latecomer.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .hairstyleSection .bangs.active {
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_latecomer1.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .hairstyleSection .hairColor {
    float: right;
    width: 1.93rem;
    height: 1.73rem;
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_color.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .hairstyleSection .hairColor.active {
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_color1.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .diy {
    position: absolute;
    width: 7.31rem;
    height: 4.84rem;
    border: 0.12rem solid #cecac9;
    overflow: auto;
    top: 12em;
    left: 0.8rem;
    background: #cecac9;
}

.createRole .diy span {
    float: left;
    width: 2.36rem;
    height: 2.36rem;
    background: #fff;
    border-radius: 0.1rem;
    margin-bottom: 0.04rem;
    box-sizing: border-box;
}

.createRole .diy span img {
    width: 100%;
    height: 100%;
    user-select: none;
}

.createRole .diy span.dn {
    display: none;
}

.createRole .diy span:nth-child(3n-1) {
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

.createRole .diy span.active {
    background: url("https://res.zulong.com/cms/mystyle/house/img/create_box.png") center center no-repeat !important;
    background-size: 102% 102% !important;
}

.createRole .selectColor {
    position: absolute;
    width: 0.8rem;
    height: 4.5rem;
    top: 12em;
    right: 1rem;
    flex-direction: row;
    align-content: center;
    justify-content: space-around;
}

.createRole .selectColor span {
    display: block;
    border-radius: 50%;
    width: 0.66rem;
    height: 0.66rem;
    display: flex;
    justify-content: center;
    align-content: center;
    border: 1px solid #000;
    margin-bottom: 0.2rem;
    box-shadow: inset 0 0 0px #fff;
}

.createRole .selectColor span.active {
    border: 1px solid #f3a6b4;
    box-shadow: 0 0 4px #f3a6b4;
}

.createRole .diyBtn {
    width: 7.96rem;
    height: 1.8rem;
    position: absolute;
    left: 1.38rem;
    top: 17.6rem;
    transform: scale(1.3);
}

.createRole .diyBtn .reset {
    float: right;
    width: 2.88rem;
    height: 2.07rem;
    background: url("../img/clothes/clothes_btn2.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .diyBtn .submit {
    float: left;
    width: 5.08rem;
    height: 2.07rem;
    background: url("../img/clothes/clothes_btn1.png") 0 0 no-repeat;
    background-size: 100%;
}

.createRole .character {
    margin: 0 auto;
}

.role {
    position: relative;
    box-sizing: border-box;
}

.role .roleSection {
    width: 100%;
    height: 100%;
}

.role .roleSection .part {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
}

.role .roleSection .body {
    z-index: 9;
}

.role .roleSection .eyes {
    z-index: 13;
}

.role .roleSection .bangs {
    z-index: 12;
}

.role .roleSection .hair {
    z-index: 8;
}

.role .roleSection .clothes {
    z-index: 10;
}

.role .roleSection .decoration {
    z-index: 14;
}