qianduo/games_h5/css/crossword.css

body {
    width: 100%;
    height: 100%;
    background: #FB4605;
}
.header {
    background-size: 100% 100%;
    padding-top: .81rem;
    position: relative;

    width: 100%;
    height: 3.08rem;
    background-image: url(../img/pict1.png?v=1.1.1);
}
.pict {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: .03rem;
    position: absolute;
    top: 1.54rem;
    left: 1.11rem;
}
.target {
    width: 100%;
    height: 1.16rem;
    display: flex;
    align-items:center;
    position: relative;
    background-size: 100% 100%;

    margin: auto;
    padding: .29rem 0 .2rem;
}
.notice {
    width: 100%;
    height: .35rem;
    line-height: .29rem;
    text-align: center;
    color: #FFEF98;
    background-image: url("../img/title1.png");
    background-size: 100% 100%;
}
.rule {
    top: .7rem;
}
.target ul {
    width: 3.08rem;
    margin: 0 auto;
    margin-top: -.035rem;
    display: flex;
    align-items: center;
}
.target li {
    font-family: PingFang-SC-Heavy;
    font-weight: bold;
    font-size: .4rem;
    float: left;
    margin-left: .1rem;
    width: .65rem;
    height: .65rem;
    text-align: center;
    line-height: .6rem;
    border: 2px solid transparent;
    border-radius: .03rem;
    color: #D59212;
    font-weight: bold;
    width: .67rem;
    height: .67rem;
    line-height: .67rem;
    margin-top: .01rem;
    margin-left: .08rem;
}
.target .blackColor {
    border: 5px solid #ffffff;
}
.content {
    height: 2.6rem;
    background-image: url(../img/content1.png);
    background-size: 100% 100%;
}
.options {
    width: 100%;
    height: 1.8rem;
    background-size: 100% 100%;
}
.options ul {
    margin: auto;
    width: 3.25rem;
    padding: 0 .07rem;
    overflow: hidden;
    margin-top: .12rem;
}
.options li {
    text-align: center;
    color: #D59212;
    font-size: .2rem;
    font-weight: bold;

    float: left;
    width: .49rem;
    height: .48rem;
    line-height: .36rem;
    margin-left: .112rem;
    margin-top: 0;
    margin-bottom: .1rem;
    border: .04rem solid transparent;
}
.banner {
    width: 100%;
    height: 1.51rem;
    background-image: url("../img/other.png");
    background-size: 100% 100%;
}
.active li {
    width: .47rem;
    left: .44rem;
    top: 4.7rem;
    height: .4rem;
    line-height: .41rem;
    text-align: center;
    color: #FEC853;
    font-size: .2rem;
    position: absolute;
    opacity: 0;
    z-index: 0;
}

.active :nth-child(2) {
    left: 1.04rem;
}
.active :nth-child(3) {
    left: 1.65rem;
}
.active :nth-child(4) {
    left: 2.25rem;
}
.active :nth-child(5) {
    left: 2.85rem;
}
.active :nth-child(6) {
    top: 5.28rem;
}
.active :nth-child(7) {
    top: 5.28rem;
    left: 1.04rem;
}
.active :nth-child(8) {
    top: 5.28rem;
    left: 1.65rem;
}
.active :nth-child(9) {
    top: 5.28rem;
    left: 2.25rem;
}
.active :nth-child(10) {
    top: 5.28rem;
    left: 2.85rem;
}
.active .move {
    width: .65rem;
    height: .65rem;
    line-height: .65rem;
    font-size: .4rem;
    font-weight: bold;
    opacity: .5;
    top: 3.65rem;
    opacity: 1;
    transition: all .6s linear;
}
.mask {
    z-index: 2;
}
.options .flick {
    color: #986503;
}