/*index*/
html,
body {
    position: relative;
    background: #492dc8;
    min-height: 100%;
   
}

body {
    background: url(../images/public/bg.jpg) 0 0 no-repeat;
    background-size: 6.4rem auto;
    padding-top: 1.95rem;
    width:6.4rem;
    margin:0 auto;

}

footer {
    background: url(../images/public/footer.png) 0 0 no-repeat;
    background-size: cover;
    width: 3.85rem;
    height: 2.96rem;
    margin-top:-1.12rem;


}

.top,
.logo {
    position: absolute;
}

.top {
    width: 3.32rem;
    height: 1.41rem;
    right: 0rem;
    top: 0rem;
}

.logo {
    width: 4.49rem;
    left: 50%;
    top: 1.32rem;
    transform: translateX(-50%);

}

.content {
    background: url(../images/public/slice.png) 0 3.48rem no-repeat;
    background-size: 0.8rem 5.19rem;
    width: 6.4rem;
}

.itemList {
    background: url(../images/utter/routeBg.png) center top no-repeat;
    background-size: 5.42rem 11.88rem;
    position: relative;
    width: 5.42rem;
    height: 11.88rem;
    margin: 0 auto;
    margin-top: 1.75rem;

}

.title {
    width: 3.59rem;
    height: 0.93rem;
    margin: 0 auto;
    display: block;
}

.slice {
    width: 0.8rem;
    height: 5.19rem;
    position: absolute;
}

.item {
    width: 2.35rem;
    height: 2.07rem;
    position: absolute;

}

.itemBox img {
    width: 2.35rem;
}


.p1 {
    top: -1.46rem;
    left: 0.3rem;
}

.p2 {
    top: -0.23rem;
    right: -0.3rem;
}

.p3 {
    top: 1.13rem;
    left: 0.3rem;
}

.p4 {
    top: 2.7rem;
    right: -0.3rem;
}
.p5 {
    top: 4.05rem;
    left: 0.3rem;
}

.p6 {
    top: 5.64rem;
    right: -0.3rem;
}
.p7 {
    top:6.8rem;
    left: 0.3rem;
}

.p8 {
    top: 8.23rem;
    right: -0.3rem;
}
.p9 {
    top: 11.44rem;
    right: 0rem;
}
.p9 img{
	width:1.81rem;
	height:0.6rem;
}


.layer {
    border-radius: 0.1rem;
    width:5.54rem;   
    position: absolute;
    
    
    /*transform:translateX(-50%)!important;*/
    display:none;
    z-index:3;

}
.p1 .layer{
 top:-0.3rem;
 left:-0.35rem;
}
.p2 .layer{
 top:-0.86rem;
 right:0.25rem;
}
.p3 .layer{
 top:-0.93rem;
 left:-0.35rem;
}
.p4 .layer{
 top:-0.92rem;
 right:0.25rem;
}
.p5 .layer{
 top:-0.08rem;
 left:-0.35rem;
}
.p6 .layer{
 top:-1.13rem;
 right:0.25rem;
}
.p7 .layer{
 top:-2.31rem;
 left:-0.35rem;
}
.p8 .layer{
 top:-3.92rem;
 right:0.25rem;
}
.layerBox {
    width:5.54rem;
    position: relative;
}
.layerBox img{
	width:5.54rem;
}
.close,.more{
	position: absolute;
}
.close{
	width:0.66rem;
	height:0.66rem;
	border-radius: 50%;
	background:url(../images/utter/close.png) 0 0 no-repeat;
	background-size:cover;
	display:block;
	    top: 0.68rem; right:-0.15rem;

}
                            
.more{
	width:1.31rem;
	height:0.32rem;
	background:url(../images/utter/more.png) 0 0 no-repeat;
	background-size:cover;
	display:block;
	bottom:0.4rem;
	right:0.5rem;
}
.buttonWrap {
    width: 4.88rem;
    height: 0.6rem;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    margin-top: -0.3rem;
        z-index: 2;
    position: relative;

}

.return,
.next,
.return img,
.next img {
    width: 1.81rem;
    height: 0.6rem;
    display: block;

}