html {
    background-color: #000;
    background-repeat: repeat-x;
    background-position: 0 2px;
    background-image: url(../img/art/bg.png);
    background-image:-webkit-image-set(
        url(../img/art/bg.png) 1x,
        url(../img/art/bg@2x.png) 2x
    );
}
.art-s1,
.art-s2,
.art-s3,
.art-s4 {
    position: relative;
    background-size:auto 100%;
}
.art-s1 .inner,
.art-s2 .inner,
.art-s3 .inner,
.art-s4 .inner {
    width: 1000px;
    position: relative;
    margin: auto;
}
.art-s1 {
    height: 902px;
    background-repeat:no-repeat;
    background-position:center 0;
    background-image:url(../img/art/s1.jpg);
    background-image:-webkit-image-set(
      url(../img/art/s1.jpg) 1x,
        url(../img/art/s1@2x.jpg) 2x
    );
}
.art-s2 {
    height: 1352px;
    background-repeat:no-repeat;
    background-position:center 0;
    background-image:url(../img/art/s2.jpg);
    background-image:-webkit-image-set(
      url(../img/art/s2.jpg) 1x,
        url(../img/art/s2@2x.jpg) 2x
    );
}
.art-s2 .selectflower {
    display: block;
    position: absolute;
    left: 500px;
    top: 901px;
    width: 204px;
    height: 62px;
}
.art-s2 #flower {
    position: absolute;
    left: -126px;
    top: 776px;
    width: 655px;
    height: 471px;
    background-repeat:no-repeat;
    background-position:center 0;
}
.art-s2 #flower.f1 {
    background-image:url(../img/art/01.png);
    background-image:-webkit-image-set(
      url(../img/art/01.png) 1x,
        url(../img/art/01@2x.png) 2x
    );
}
.art-s2 #flower.f2 {
    background-image:url(../img/art/02.png);
    background-image:-webkit-image-set(
      url(../img/art/02.png) 1x,
        url(../img/art/02@2x.png) 2x
    );
}
.art-s2 #flower.f3 {
    background-image:url(../img/art/03.png);
    background-image:-webkit-image-set(
      url(../img/art/03.png) 1x,
        url(../img/art/03@2x.png) 2x
    );
}
.art-s2 #flower.f4 {
    background-image:url(../img/art/04.png);
    background-image:-webkit-image-set(
      url(../img/art/04.png) 1x,
        url(../img/art/04@2x.png) 2x
    );
}
.art-s2 #flower.f5 {
    background-image:url(../img/art/05.png);
    background-image:-webkit-image-set(
      url(../img/art/05.png) 1x,
        url(../img/art/05@2x.png) 2x
    );
}
.art-s3 {
    height: 1866px;
    background-repeat:no-repeat;
    background-position:center 0;
    background-image:url(../img/art/s3.jpg);
    background-image:-webkit-image-set(
      url(../img/art/s3.jpg) 1x,
        url(../img/art/s3@2x.jpg) 2x
    );
}
.art-s3 .mod-taici {
    position: absolute;
    left: 144px;
    top: 190px;
    width: 712px;
}
.art-s3 .mod-taici .taici li {
    margin-bottom: 12px;
    height: 60px;
    line-height: 60px;
    border: 4px #fff solid;
    text-align: center;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
}
.art-s3 .mod-taici .taici li input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    height: 60px;
    line-height: 60px;
    background: none;
    text-align: center;
    font-size: 22px;
    color: #fff;
    outline: none;
}
.art-s3 .mod-taici .taici li.active {
    color: #3fb7df;
    background: #fff;
}
.art-s3 .mod-taici .taici li.active input {
    color: #3fb7df;
}
.art-s3 .submit  {
    position: relative;
    text-align: center;
}
.art-s3 .btn-ok {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: 204px;
    height: 61px;
    background: url(../img/art/btn_ok.png) no-repeat 0 0;
    background-image:-webkit-image-set(
      url(../img/art/btn_ok.png) 1x,
        url(../img/art/btn_ok@2x.png) 2x
    );
}
.art-s3 .submit .to {
    width: 180px;
    margin: 0;
    padding: 0;
    border: 0;
    height: 60px;
    line-height: 60px;
    background: none;
    text-align: center;
    border-bottom: 4px #fff solid;
    font-size: 22px;
    color: #fff;
    outline: none;
}
.art-s4 {
    height: 1786px;
    background-repeat:no-repeat;
    background-position:center 0;
    background-image:url(../img/art/s4.png);
    background-image:-webkit-image-set(
      url(../img/art/s4.png) 1x,
        url(../img/art/s4@2x.png) 2x
    );
}
#btnSharePos {
    position: absolute;
    left: 323px;
    top: 500px;
}
.art-s4 .btn-share {
    display: block;
    width: 350px;
    height: 105px;
    position: absolute;
    left: 323px;
    top: 850px;
}
.art-s4 .img2code {
    position: absolute;
    left: 423px;
    top: 1361px;
    display: block;
    width: 148px;
    height: 148px;
    background: url(../img/art/2dcode.png) no-repeat 0 0;
    background-image:-webkit-image-set(
      url(../img/art/2dcode.png) 1x,
        url(../img/art/2dcode@2x.png) 2x
    );
}

.dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index:30001;
    margin: -325px 0 0 -385px;
    width: 791px;
    height: 650px;
}
.dialog img {
    display: block;
    width: 791px;
    height: 518px;
}
.dialog .close {
    position: absolute;
    right: -21px;
    top: -21px;
    width: 42px;
    height: 42px;
    background: url(../img/art/bg_close.png) no-repeat 0 0;
    background-image:-webkit-image-set(
      url(../img/art/bg_close.png) 1x,
        url(../img/art/bg_close@2x.png) 2x
    );
    cursor: pointer;
}
.dialog .share-bootbar {
    width: 791px;
    height: 132px;
    background: url(../img/art/bt_share.png) no-repeat 0 0;
    background-image:-webkit-image-set(
      url(../img/art/bt_share.png) 1x,
        url(../img/art/bt_share@2x.png) 2x
    );
    cursor: pointer;
}
.dialog .weibo {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 36px;
    height: 29px;
    background: url(../img/art/ico_weibo.png) no-repeat 0 0;
    background-image:-webkit-image-set(
      url(../img/art/ico_weibo.png) 1x,
        url(../img/art/ico_weibo@2x.png) 2x
    );
}
#mask {
    background: #000;
    opacity: .8;
    filter: alpha(opacity=80);
}