.web {
    display: block;
}

body.noScroll {
    overflow: hidden;
}

.IsPC {
    display: block;
}

.IsMB {
    display: none !important;
}

.hide {
    display: none;
}

.ODYSSEY {
    color: #333;
    line-height: 1.6;
    font-family: "SourceHanSansCN-Regular", "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif, "Helvetica Neue", Verdana, Helvetica, Arial;
    min-width: 1200px;
    max-width: 1920px;
    margin: 0 auto;
}

.blackBg {
    background: url('../img/pageBg.jpg') repeat-y 0 0;
    background-size: 100% auto;
}

.ODYSSEY.blackBorder {
    border-bottom: 40px solid #000
}

.ODYSSEY a {
    color: #333;
}

.nav {
    clear: both;
    line-height: 70px;
    height: 70px;
    /* min-width: 1200px; */
    text-align: center;
    background-color: #000;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 600;
    margin: 0 auto;
    padding: 0 40px;
}

.nav:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.nav .logo {
    float: left;
    font-size: 0;
    margin-right: 20px;
}

.nav .logo a {
    display: block;
    width: 100%;
    line-height: 70px;
}

.nav .logo img {
    vertical-align: middle;
    display: inline-block;
    width: 2.27rem;
}

.nav .lists {
    position: absolute;
    white-space: nowrap;
    right: 1%;
    top: 0;
    height: 100%;
}

.nav .lists .item {
    display: inline-block;
    vertical-align: top;
    /* margin: 0 20px; */
    height: 100%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.nav .lists .item::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.nav .lists .item.on::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 20%;
    right: 0;
    z-index: 1;
    margin: auto;
    width: 100%;
    height: 4px;
    background: #fff;
}

.nav .lists .navLists {
    display: inline-block;
    height: 100%;
    vertical-align: top;
}

.nav .lists .navLists .navItem {
    display: inline-block;
    vertical-align: top;
    height: 100%;
    position: relative;
    padding: 0 20px;
    margin: 0 15px;
}

.nav .lists .navLists .navItem .itemLink {
    position: relative;
    cursor: pointer;
    color: #fff;
}

.nav .lists .brandIcon {
    height: 75%;
    display: inline-block;
    vertical-align: middle;
    padding: 0 15px 0 20px;
    cursor: pointer;
}

.nav .lists .navLists .navItem .itemLink::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.nav .lists .navLists .navItem .navdownList {
    position: absolute;
    display: none;
    left: -20%;
    width: 140%;
    top: 100%;
    background: rgba(206, 165, 88, 0.9);
    text-align: center;
    line-height: initial;
    border-bottom: 4px solid #000;
    padding: 5% 0;
}

.nav .lists .navLists .navItem .navdownList .downItem {
    color: #333;
    padding: 5% 0;
    margin: 0 5%;
    display: block;
    letter-spacing: 3px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3)
}

.nav .lists .navLists .navItem .navdownList .downItem:hover {
    color: #fff;
}

.nav .lists .navLists .navItem .navdownList .downItem:last-child {
    border-bottom: none
}

.nav .lists .navLists .navItem:hover .navdownList {
    display: block;
}

.nav .lists .navLists .navItem .navdownList:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-top: 9px solid #000;
}

/* .nav .lists .navLists .navItem:hover:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 3px;
    background: #cea558;
} */
.nav .lists .navLists .navItem:hover .itemLink {
    color: #cea558;
}

.nav .lists .navLists .navItem.active .itemLink {
    color: #cea558;
}

/* .nav .lists .navLists .navItem.active:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 3px;
    background: #cea558;
} */
.nav_blank {
    height: 70px;
}

.nav .brand {
    position: absolute;
    z-index: 100;
    right: 40px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.nav .brand img {
    vertical-align: middle;
    display: inline-block;
    max-width: 50px;
    width: 2%;
}

.nav .loginState {
    display: inline-block !important;
    color: #fff;
    cursor: pointer;
}

.grid {
    padding: 0 13.5%;
    position: relative;
    margin: 0 auto;
    z-index: 100;
}

.videoLayout {
    position: relative;
    padding: 0 0 5%;
}

.videoLayout {
    position: relative;
    padding: 3% 0 4%;
}

.videoLayout::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 60%;
    bottom: 0;
    background: #cea558;
}

.videoLayout .videoTit {
    text-align: center;
    color: #cea558;
}

.videoLayout .videoTxt {
    text-align: center;
    color: #000;
    line-height: 2;
}

.videoLayout .videoBox {
    position: relative;
    z-index: 3;
    width: 57%;
    margin: 1% auto 0;
}

.videoLayout .videoBox .videoCover {
    width: 100%;
}

.videoLayout .videoBox .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background: #000;
    opacity: 0.3;
}

.videoLayout .videoBox .playBtn {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    margin: auto;
    width: 6%;
    cursor: pointer;
}

.kv {
    text-align: center;
    overflow: hidden;
    position: relative;
}

.kvSwiper {
    position: relative;
    overflow: hidden;
}

.kvSwiper .kvImg {
    width: 100%;
}

.kvSwiper .surpriseBtn {
    position: absolute;
    left: 11%;
    top: 54%;
    width: 20%;
    height: 9%;
    z-index: 3;
}

.kvSwiper .familyBtn {
    position: absolute;
    right: 3%;
    top: 30%;
    width: 26%;
    z-index: 3;
}

.kvSwiper .familyBtn .btnImg {
    width: 100%;
}

.kvSwiper .familyPhotoBtn {
    position: absolute;
    right: 3%;
    top: 30%;
    width: 26%;
    z-index: 3;
}
.kvSwiper .photo_btn {
    display: inline-block;
    position: absolute;
    z-index: 100;
    left: 14%;
    bottom: 8%;
    width: 18%;
}
.kvSwiper .familyPhotoBtn .btnImg {
    width: 100%;
}

.kvSwiper .swiper-wrapper {
}

.kvSwiper .swiper-wrapper .swiper-slide {
    width: 100%;
    position: relative;
}

.kvSwiper .swiper-wrapper .swiper-slide img {
    width: 100%;
    vertical-align: top;
}

.kvSwiper .swiper-wrapper .swiper-slide .collage_btn {
    background: #231816;
    background-size: 100% 100%;
    text-align: center;
    color: #cea558;
    position: absolute;
    z-index: 100;
    top: 63%;
    left: 17%;
    padding: 0.5% 3.5%;
    letter-spacing: 4px;
}

.kvSwiper .swiper-wrapper .swiper-slide .tour_btn {
    background: #cea558;
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    position: absolute;
    z-index: 100;
    top: 41%;
    left: 15.1%;
    padding: 0.2% 3%;
    letter-spacing: 2px;
}

.kvSwiper .swiper-wrapper .swiper-slide .resell_btn {
    background: #fff;
    background-size: 100% 100%;
    text-align: center;
    color: #c09107;
    position: absolute;
    z-index: 100;
    bottom: 17%;
    left: 6.5%;
    /* box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 5px; */
    padding: 0.9% 3%;
    letter-spacing: 2px;
}

.kvSwiper .swiper-wrapper .swiper-slide .login_btn {
    background: #c09107;
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    position: absolute;
    z-index: 100;
    bottom: 44%;
    left: 11.5%;
    /* box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 5px; */
    padding: 0.2% 3%;
    letter-spacing: 2px;
}

.kvSwiper .swiper-wrapper .swiper-slide .follow_btn {
    background: #c09107;
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    position: absolute;
    z-index: 100;
    bottom: 25%;
    left: 15.6%;
    /* box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 5px; */
    padding: 0.2% 4%;
    letter-spacing: 2px;
}

.kvSwiper .swiper-wrapper .swiper-slide .fashion_btn {
    background: #c09107;
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    position: absolute;
    z-index: 100;
    top: 37%;
    left: 13.75%;
    /* box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 5px; */
    padding: 0.2% 2%;
    letter-spacing: 2px;
}

.kvSwiper .swiper-wrapper .swiper-slide .open_btn {
    background: #c09107;
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    position: absolute;
    z-index: 100;
    top: 22%;
    left: 13.5%;
    /* box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 5px; */
    padding: 0.2% 1%;
    letter-spacing: 2px;
}

.kvSwiper .swiper-wrapper .swiper-slide .fashion_btn2 {
    background: #c09107;
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    position: absolute;
    z-index: 100;
    top: 35%;
    left: 9.5%;
    /* box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 5px; */
    padding: 0.8% 2.75%;
    letter-spacing: 2px;
}

.kvSwiper .swiper-wrapper .swiper-slide .lifeWinBtn {
    background: #c09107;
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    position: absolute;
    z-index: 100;
    /* box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 5px; */
    top: 60%;
    left: 16.5%;
    padding: 0.2% 2%;
    letter-spacing: 4px;
}

.kvSwiper .swiper-wrapper .swiper-slide .lifeWinBtnL2 {
    background: #000;
    background-size: 100% 100%;
    text-align: center;
    color: #cea558;
    position: absolute;
    z-index: 100;
    /* box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 5px; */
    top: 60%;
    left: 16%;
    padding: 0.2% 2%;
    letter-spacing: 7px;
}

.kvSwiper .swiper-wrapper .swiper-slide .lifeWinBtnL3 {
    background: #231816;
    background-size: 100% 100%;
    text-align: center;
    color: #cea558;
    position: absolute;
    z-index: 100;
    /* box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 5px; */
    top: 63%;
    left: 16.5%;
    padding: 0.5% 4%;
    letter-spacing: 7px;
}

.kvSwiper .swiper-wrapper .swiper-slide .travelBtn {
    background: #cea558;
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    position: absolute;
    z-index: 100;
    /* box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 5px; */
    top: 51%;
    left: 5%;
    padding: 0.2% 2%;
    letter-spacing: 7px;
}

.kvSwiper .swiper-wrapper .swiper-slide .partake_btn {
    background: #000;
    background-size: 100% 100%;
    text-align: center;
    color: #cea558;
    position: absolute;
    z-index: 100;
    bottom: 38%;
    left: 16.5%;
    box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 5px;
    padding: 0.2% 2.5%;
    letter-spacing: 4px;
}

.kvSwiper .currencyArrow {
    position: absolute;
    width: 3%;
    height: 0;
    padding: 3% 0 0 0;
    border-radius: 100%;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}

.kvSwiper .swiperBtnPrev {
    background: url('../img/arrowWL.png') no-repeat center center;
    background-size: 80% auto;
    left: 1%;
}

.kvSwiper .swiperBtnNext {
    background: url('../img/arrowWR.png') no-repeat center center;
    background-size: 80% auto;
    right: 1%;
}

.kvSwiper .swiperWBtnPrev {
    background: url('../img/classroom/merge/arrowLW.png') no-repeat center center;
    background-size: 80% auto;
    left: 1%;
    border-radius: 0;
    width: 2%;
}

.kvSwiper .swiperWBtnNext {
    background: url('../img/classroom/merge/arrowRW.png') no-repeat center center;
    background-size: 80% auto;
    right: 1%;
    border-radius: 0;
    width: 2%;
}

.kvSwiper .pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2%;
    z-index: 3;
    text-align: center;
}

.kvSwiper .pagination .swiper-pagination-switch {
    padding: 0;
    width: 20px;
    height: 3px;
    background: #b8b9bd;
    transition: all 1s;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}

.kvSwiper .pagination .swiper-pagination-switch.swiper-active-switch {
    width: 40px;
    background: #cea558;
}

.kvSwiper .paginationW {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2%;
    z-index: 3;
    text-align: center;
}

.kvSwiper .paginationW .swiper-pagination-switch {
    padding: 0;
    width: 10px;
    height: 4px;
    background: #b5b5b5;
    transition: all 1s;
    display: inline-block;
    margin: 0 3px;
    cursor: pointer;
    border-radius: 4px;
}

.kvSwiper .paginationW .swiper-pagination-switch.swiper-active-switch {
    width: 60px;
    background: #fff;
}

.pageInterval {
    width: 100%;
}

.whiteCon {
    width: 91%;
    margin: 0 auto;
    background: url('../img/conBg.jpg') no-repeat 0 0;
    background-size: 100% 100%;
}

.expect {
    overflow: hidden;
    position: relative;
    padding: 2% 0;
    margin: 4% 0 0;
}

.expect .t {
    text-align: center;
    margin-bottom: 0.5%;
    color: #cea558;
    letter-spacing: .1em;
    font-weight: lighter;
}

.expect .t b {
    font-weight: 500;
}

.expect .p {
    margin-bottom: 3%;
    text-align: center;
    line-height: 1.8;
    color: #333;
    letter-spacing: .15em;
}

.expect .pic {
    text-align: center;
}

.expect .pic img {
    padding: 0 0 2%;
    background: url("../img/imgBg.png") no-repeat center 0;
    background-size: 96% 100%;
}

.gift {
    overflow: hidden;
    position: relative;
    padding: 4% 0 4%;
}

.gift .giftPrize {
    position: relative;
    padding: 0 13.5% 8%;
}

.gift .giftPrize::after {
    content: "";
    position: absolute;
    left: 13.5%;
    top: 55%;
    right: 13.5%;
    bottom: 10%;
    background: #b8b9bd;
}

.gift .giftPrize.resell::after {
    left: 0;
    right: 0;
    background: #171f36;
    bottom: 5%;
    top: 52%;
}

.gift .pic {
    float: left;
    width: 50%;
    text-align: center;
    margin: 0 5% 5%;
    position: relative;
    z-index: 2;
}

.gift .pic .videoCover {
}

.gift .pic .mask {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    z-index: 2;
    opacity: 0.3;
}

.gift .pic .videoPlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 10%;
    margin: auto;
    z-index: 4;
    cursor: pointer;
}

.gift .right {
    overflow: hidden;
    position: relative;
    z-index: 3;
}

.gift .t {
    color: #cea558;
    margin-top: 3%;
    font-weight: bold;
}

.gift .sub {
    padding: 0 0 2%;
    color: #cea558;
}

.gift .t b {
    font-weight: 500;
}

.gift .p {
    padding: 0 12% 10% 0;
    position: relative;
    line-height: 1.8;
}

.gift .checkLayout {
}

.gift .checkLayout .checkBtn {
    cursor: pointer;
    background: #cea558;
    text-align: center;
    color: #fff;
    padding: 0.75% 9%;
    display: inline-block;
}

.gift .checkLayout .checkBtn.black {
    color: #fff;
    background: #000;
}

.gift .checkLayout .checkBtn.whiteBtn {
    color: #cea558;
    background: #fff;
}

.gift .giftList {
    padding: 0 13.5%;
    position: relative;
    display: inline-block;
    width: 73%;
    vertical-align: top;
}

.gift .giftList .giftItem {
    float: left;
    width: 45%;
}

.gift .giftList .giftItem:last-child {
    float: right;
    width: 45%
}

.gift .giftList .giftItem .itemTit1 {
    text-align: center;
    color: #cea558;
    line-height: 50px;
}

.gift .giftList .giftItem .itemTit1.grayTxt {
    color: #b8b9bd;
}

.gift .giftList .giftItem .itemTit2 {
    text-align: center;
    color: #333;
    line-height: 50px;
}

.gift .giftList .giftItem .giftDes {
    margin: 3% 0 0 0;
    padding: 0 0 23%;
    position: relative;
}

.gift .giftList .giftItem .giftDes .giftBg {
    display: block;
    width: 85%;
    margin: 0 auto;
}

.gift .giftList .giftItem .giftDes .desCon {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 5%;
    z-index: 99;
}

.gift .giftList .giftItem .giftDes .desTips {
    text-align: center;
    color: #fff;
    line-height: 2;
}

.gift .giftList .giftItem .giftDes .desTips i {
    font-style: normal;
    color: #000;
}

.gift .giftList .giftItem .giftDes .checkLayout {
    text-align: center;
    margin: 4% 0 0;
}

.gift .giftList .giftItem .giftDes .checkLayout .checkBtn {
}

.gift .giftList .giftItem .giftDes .giftImg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.period {
    overflow: hidden;
    position: relative;
    padding: 2% 0 4%;
}

.period .fashionEntry {
    padding: 3% 0 0;
    position: relative;
    margin: 0 0 4%;
}

.period .fashionEntry::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 15%;
    background: #cea558;
}

.period .fashionEntry .fashionCon {
    position: relative;
    z-index: 8;
    display: inline-block;
    width: 73%;
    padding: 0 13.5%;
}

.period .fashionEntry .fashionCon .itemLeft {
    float: left;
    width: 63%;
    margin: 0 1% 0 0;
    position: relative;
}

.period .fashionEntry .fashionCon .itemLeft .lessonCover {
    width: 100%;
}

.period .fashionEntry .fashionCon .itemLeft .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: #000;
    opacity: 0;
}

.period .fashionEntry .fashionCon .itemLeft .playBtn {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    cursor: pointer;
    margin: auto;
    width: 12%;
}

.period .fashionEntry .fashionCon .itemLeft .leftImg1 {
    float: left;
    width: 48%;
    margin: 0 0 0 2%;
}

.period .fashionEntry .fashionCon .itemLeft .leftImg1 img {
    width: 100%;
    margin: 0 0 4%;
}

.period .fashionEntry .fashionCon .itemLeft .leftImg2 {
    float: left;
    width: 48%;
    margin: 4% 0 0 2%;
}

.period .fashionEntry .fashionCon .itemLeft .leftImg2 img {
    width: 100%;
    margin: 0 0 4%;
}

.period .fashionEntry .fashionCon .itemRight {
    padding: 4% 0 0 4%;
    float: left;
}

.period .fashionEntry .fashionCon .itemRight .lessonTit {
    font-weight: lighter;
    color: #000;
    letter-spacing: 2px;
    margin: 0 0 3%;
    line-height: 1;
}

.period .fashionEntry .fashionCon .itemRight .lessonTips {
    font-weight: lighter;
    color: #000;
    margin: 0 0 18%;
}

.period .fashionEntry .fashionCon .itemRight .lessonTxt {
    font-weight: lighter;
    color: #000;
    line-height: 2;
}

.period .fashionEntry .fashionCon .itemRight .lessonBtn {
    margin: 8% 0 0 0;
}

.period .fashionEntry .fashionCon .itemRight .lessonBtn .lessonLink {
    display: inline-block;
    background: #000;
    cursor: pointer;
    color: #fff;
    padding: 0 10%;
    line-height: 1.9;
}

.period:after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 0;
    padding: 3% 0 0 0;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #000000;
}

.period .codeModel {
    display: inline-block;
    width: 80%;
    vertical-align: top;
    margin: 0 10% 5%;
}

.period .codeModel .codeImg {
    float: left;
    width: 20%;
    margin: 0 5% 0 25%;
}

.period .codeModel .codeTips {
    float: left;
    width: 40%;
    margin: 5% 0 0 5%;
}

.period .codeModel .codeTips .tipsTxt {
}

/* .gift .p:after {
    content: "";
    display: inline-block;
    position: absolute;
    z-index: 1;
    left: 7%;
    border-bottom: #000 2px solid;
    width: 30%;
    height: 0;
    bottom: 0;
} */


.photo{
    padding: 2% 0 8%;
    background: url(../../../../../odyssey2024/0103/minisite/family-travel/img/previewhome_bg.jpg) no-repeat top center;
    background-size: 100% 100%;
    position: relative;
    margin-bottom: 3%;
}
.photo .t {
    position: relative;
    z-index: 3;
    color: #cea558;
    padding-top: 7%;
    font-weight: bold;
    margin-left: 10%;
    line-height: 1.2;
}

.photo .subs {
    position: relative;
    z-index: 3;
    color: #cea558;
    margin-bottom: 0.2rem;
    margin-left: 10%;
}

.photo .p {
    position: relative;
    z-index: 3;
    color: #000;
    margin-bottom: 3%;
    line-height: 2;
    margin-left: 10%;
}
.photo .bottom{
    position: relative;
    z-index: 3;
    margin-left: 10%;
} 
.photo .btn {
    display: inline-block;
    background: #cea558;
    cursor: pointer;
    color: #fff;
    padding: 0 30px;
    line-height: 2;
}

.photo .pic{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 15.5%;
    width: 21%;
}


.course {
    overflow: hidden;
    position: relative;
    padding: 3% 0 0;
}

.course .course_tit {
    text-align: center;
}

.course .course_sub {
    text-align: center;
    margin: 0 0 2%;
}

.course .lessonCon {
    margin: 0 auto 6%;
}

.course .lessonCon .lessonList {
    width: 100%;
}

.course .lessonCon .lessonList .lessonItem {
    width: 100%;
    position: relative;
    padding: 30% 0 0 0;
}

.course .lessonCon .lessonList .lessonItem .itemLeft {
    position: absolute;
    width: 90%;
    padding: 5% 0 7% 10%;
    left: 0;
    bottom: 0;
}

.course .lessonCon .lessonList .lessonItem .itemLeft::after {
    content: "";
    position: absolute;
    left: 0;
    top: 63%;
    right: 0;
    bottom: 0;
    background: #b8b9bd;
}

.course .lessonCon .lessonList .lessonItem .itemLeft .lessonTit {
    font-weight: bold;
    color: #cea558;
    letter-spacing: 2px;
    margin: 0 0 1%;
    line-height: 1;
    position: relative;
    z-index: 3;
}

.course .lessonCon .lessonList .lessonItem .itemLeft .lessonTit2 {
    color: #cea558;
    letter-spacing: 2px;
    margin: 0 0 2%;
    line-height: 1;
    position: relative;
    z-index: 3;
}

.course .lessonCon .lessonList .lessonItem .itemLeft .lessonTips {
    font-weight: lighter;
    color: #333;
    line-height: 1.6;
    position: relative;
    z-index: 3;
    letter-spacing: 2px;
}

.course .lessonCon .lessonList .lessonItem .itemLeft .lessonBtn {
    position: relative;
    z-index: 3;
    margin: 3% 0 0%;
}

.course .lessonCon .lessonList .lessonItem .itemLeft .lessonBtn .lessonLink {
    display: inline-block;
    background: #fff;
    cursor: pointer;
    color: #cea558;
    padding: 0 30px;
    line-height: 2;
}

.course .lessonCon .lessonList .lessonItem .itemRight {
    position: absolute;
    right: 0;
    top: 0;
    width: 48%;
    margin: 0 1% 0 0;
}

.course .lessonCon .lessonList .lessonItem .itemRight .lessonCover {
    width: 100%;
}

.course .lessonCon .lessonList .lessonItem .itemRight .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: #000;
    opacity: 0.3;
}

.course .lessonCon .lessonList .lessonItem .itemRight .playBtn {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    cursor: pointer;
    margin: auto;
    width: 12%;
}

.course .lessonCon .lessonList .lessonItem .in {
    background-color: #cea558;
    background: url(../img/course_bg.png) no-repeat bottom -17% center #cea558;
    background-size: 100%;
    position: relative;
    padding: 7.8% 40% 10% 6%;
}

.course .lessonCon .lessonList .lessonItem.reverse .itemLeft {
    padding: 3% 0 5% 55%;
    width: 45%;
}

.course .lessonCon .lessonList .lessonItem.reverse .itemLeft .lessonBtn {
    margin: 6% 0 0;
}

.course .lessonCon .lessonList .lessonItem.reverse .itemRight {
    margin: 0 0 0 1%;
    left: 0;
}

.course .lessonCon .lessonList .lessonItem.reverse .itemLeft::after {
    top: 70%;
}

.course .tabList {
    position: absolute;
    left: 13.5%;
    top: 100%;
    right: 13.5%;
}

.course .tabList .tabItem {
    display: inline-block;
    vertical-align: top;
    margin: 0 1% 0 0;
    color: #9b9b9b;
    background: #b8b9bd;
    line-height: 1.3;
    padding: 0 0.5%;
    cursor: pointer;
    transition: all 1s;
}

.course .tabList .tabItem.active {
    color: #fff;
    background: #cea558;
    padding: 0 0.5% 1%;
    margin: -2.75% 1% 0 0;
}

.course .pic {
    text-align: center;
    position: absolute;
    z-index: 100;
    bottom: 6%;
    right: 2%;
    width: 33%;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
}

.course .t {
    margin-bottom: 1%;
    color: #fff;
    font-weight: lighter;
}

.course .t b {
    font-weight: 500;
}

.course .p {
    padding: 0 6% 9% 0;
    position: relative;
    color: #fff;
}

.course .p:after {
    content: "";
    display: inline-block;
    position: absolute;
    z-index: 1;
    left: 0%;
    border-bottom: #fff 2px solid;
    width: 24%;
    height: 0;
    bottom: 0;
}

.course.family .lessonCon .lessonList .lessonItem {
    padding: 37% 0 0 0;
}

.course.family .lessonCon .lessonList .lessonItem .itemLeft::after {
    background: url("../img/photostudio/bgImg1.jpg") no-repeat center center;
    background-size: 100% 100%;
}

.fashion {
    overflow: hidden;
    position: relative;
    padding: 1.5% 0;
}

.fashion:before {
    content: "";
    display: inline-block;
    width: 57%;
    height: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    margin: auto;
    background: url(../img/fashion_bg.png) no-repeat top left;
    background-size: 100%;
}

.fashion:after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 5%;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: #000;
}

.fashion .t {
    margin-bottom: 2%;
    margin-left: 7%;
}

.fashion .t img {
    width: 42%;
}

.fashion .in {
    margin-bottom: 7.9%;
    text-align: center;
    position: relative;
}

.fashion .in:after {
    content: "";
    background: #cea558;
    left: 13.5%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}

.fashion .lists {
    position: relative;
    z-index: 100;
}

.fashion .lists:after {
    content: "";
    clear: both;
    width: 100%;
    height: 0;
    overflow: hidden;
    display: block;
}

.fashion .lists .item {
    float: left;
    width: 21%;
    text-align: center;
}

.fashion .lists .item.big {
    width: 37%;
    position: relative;
    padding: 4% 0 0 0;
}

.fashion .lists .item.big img {
    position: absolute;
    left: 0;
    top: 0;
}

.fashion .lists .item img {
    transition: all 0.4s ease;
    transform-origin: center top;
}

.fashion .lists .item:first-child img {
    transform-origin: left top;
}

.fashion .lists .item:last-child img {
    transform-origin: right top;
}

.fashion .lists .item:hover img {
    transform: scale(1.3);
}

.fashion .p {
    position: relative;
    z-index: 90;
    color: #000;
    padding: 1% 0;
    text-align: right;
}

.summary {
    display: inline-block;
    width: 78%;
    position: relative;
    vertical-align: top;
    padding: 5% 11% 9%;
}

.summary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 20%;
    background: #b8b9bd;
}

.summary::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 3% 0 0 0;
    background: #000;
}

.summary .summaryLeft {
    position: relative;
    z-index: 3;
    float: left;
    width: 60%;
}

.summary .summaryLeft .summarySwiper {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 6% 0 8%;
}

.summary .summaryLeft .summarySwiper .swiper-wrapper {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.summary .summaryLeft .summarySwiper .swiper-wrapper .swiper-slide {
}

.summary .summaryLeft .summarySwiper .swiper-wrapper .swiper-slide img {
    width: 100%;
}

.summary .summaryLeft .summarySwiper .currencyArrow {
    position: absolute;
    width: 6%;
    height: 0;
    padding: 6% 0 0 0;
    border-radius: 100%;
    top: 50%;
    cursor: pointer;
}

.summary .summaryLeft .summarySwiper .currencyArrow.swiperBtnPrev {
    background: url('../img/arrowWL.png') no-repeat center center;
    background-size: 50% auto;
    left: 3%;
}

.summary .summaryLeft .summarySwiper .currencyArrow.swiperBtnNext {
    background: url('../img/arrowWR.png') no-repeat center center;
    background-size: 50% auto;
    right: 3%;
}

.summary .summaryLeft .summarySwiper .pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2%;
    z-index: 3;
    text-align: center;
}

.summary .summaryLeft .summarySwiper .pagination .swiper-pagination-switch {
    padding: 0;
    height: 3px;
    width: 20px;
    background: #b8b9bd;
    transition: all 1s;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}

.summary .summaryLeft .summarySwiper .pagination .swiper-pagination-switch.swiper-active-switch {
    width: 40px;
    background: #cea558;
}

.summary .summaryLeft .operaLayout {
    text-align: center;
}

.summary .summaryLeft .operaLayout .operaBtn {
    display: inline-block;
    width: 34%;
    margin: 0 2%;
    text-align: center;
    background: #cea558;
    color: #fff;
    cursor: pointer;
    line-height: 1.8;
}

.summary .summaryRight {
    float: right;
    width: 32%;
}

.summary .summaryRight .model {
    margin: 0 0 5%;
}

.summary .summaryRight .model .modelTxt {
    color: #333;
    line-height: 2;
}

.do {
    position: relative;
    width: 72%;
    padding: 5% 14%;
    display: inline-block;
    vertical-align: top;
}

.do::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 53%;
    height: 70%;
    background: #b8b9bd;
}

.do:after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 5%;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: #000;
}

.do.follow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 61%;
    height: 60%;
    background: #b8b9bd;
}

.do.follow:after {
    display: none;
}

.do .do_des {
    position: relative;
    z-index: 4;
    float: left;
    width: 30%;
    padding: 4% 0 0 4%;
}

.do .do_des.rightCon {
    float: right;
    padding: 1% 0 0 4%;
}

.do .do_des .lessonEn {
    font-weight: lighter;
    line-height: 1;
}

.do .do_des .lessonZh {
    margin: 0 0 5%;
}

.do .do_des.rightCon .lessonZh {
    line-height: 1.4;
}

.do .do_des .desTxt {
    line-height: 2;
    font-weight: lighter;
}

.do .do_des .lessonBtn {
    margin: 10% 0 0;
}

.do .do_des .lessonBtn .lessonLink {
    line-height: 2;
    text-align: center;
    display: inline-block;
    background: #cea558;
    color: #fff;
    width: 60%;
    cursor: pointer;
}

.do .do_pic {
    position: relative;
    z-index: 4;
    float: right;
    width: 61.4%;
}

.do .do_pic::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #cea558;
    margin: 0 1% 1% 0;
}

.do .do_pic.leftCon {
    float: left;
}

.do .do_pic.leftCon::before {
    display: none;
}

.do .do_pic .doPicImg {
    width: 100%;
    position: relative;
    z-index: 3;
}

.insideNav {
    height: 50px;
    position: relative;
    z-index: 99;
    margin: -1px 0 0 0;
}

.insideNav .navList {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    padding: 0 0 0 13%;
}

.insideNav .navList.fixedNav {
    position: fixed;
    z-index: 55;
    top: 70px;
    bottom: auto;
    height: 50px;
    z-index: 99;
}

.insideNav .navList .navItem {
    display: inline-block;
    line-height: 50px;
    vertical-align: top;
    font-size: 18px;
    color: #9b9b9b;
    margin: 0 3% 0 0;
    cursor: pointer;
}

.insideNav .navList .navItem.active {
    background: #cea558;
    color: #fff;
    margin: 1% 3% 0 0;
    line-height: 40px;
    padding: 10px 1% 0;
}

.lifeFamily {
    position: relative;
    z-index: 4
}

.lifeFamily .introduce {
    position: relative;
    padding: 7% 0 11% 53%;
}

.lifeFamily .introduce::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: #b8b9bd;
    width: 37%;
    padding: 18% 0 0 0;
}

.lifeFamily .introduce .introduceImg {
    position: absolute;
    width: 35%;
    z-index: 3;
    left: 14%;
    top: 0;
    margin: 3% 0 0 0;
}

.lifeFamily .introduce .introduceTit {
    color: #cea558;
}

.lifeFamily .introduce .introduceTxt {
    color: #333;
}

.lifeFamily .lessonVideo {
    position: relative;
    background: #cea558;
    padding: 4.5% 0 6.5% 16%;
    margin: 7% 0 0 0;
}

.lifeFamily .lessonVideo .videoDes {
}

.lifeFamily .lessonVideo .videoDes .videoTit {
    color: #fff;
    font-weight: lighter;
    letter-spacing: 5px;
}

.lifeFamily .lessonVideo .videoDes .videoTit .num {
    font-style: inherit;
}

.lifeFamily .lessonVideo .videoDes .videoTxt {
    color: #fff;
}

.lifeFamily .lessonVideo .videoDes .line {
    height: 3px;
    width: 10%;
    background: #fff;
    margin: 5% 0 0 0;
}

.lifeFamily .lessonVideo .videoLayout {
    position: absolute;
    width: 45%;
    padding: 25.3% 0 0 0;
    right: 13.5%;
    bottom: 25%;
}

.lifeFamily .lessonVideo .videoLayout .lessonCover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.lifeFamily .lessonVideo .videoLayout .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0;
    z-index: 2;
}

.lifeFamily .lessonVideo .videoLayout .playBtn {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    cursor: pointer;
    margin: auto;
    width: 12%;
}

.lifeProcess {
    position: relative;
}

.lifeProcess .processBg {
    position: absolute;
    left: 2%;
    top: -15%;
    width: 5%;
    max-width: 103px;
}

.lifeProcess .processTit {
    text-align: center;
    color: #cea558;
    font-weight: bold;
    margin: 2% 0 1%;
    letter-spacing: 3px;
}

.lifeProcess .processTxt {
    text-align: center;
    color: #333;
    font-weight: lighter;
    line-height: 1.8;
}

.lifeProcess .processMain {
    display: inline-block;
    width: 72%;
    margin: 2% 14% 5%;
}

.lifeProcess .processMain .processImg {
    float: left;
    width: 45%;
}

.lifeProcess .processMain .processDes {
    float: right;
    width: 53%;
}

.lifeProcess .processMain .processDes .desCon {
    padding: 1.5% 0.5%;
    border-top: 1px solid #b8b9bd;
    border-bottom: 1px solid #b8b9bd;
    margin: 0 0 2%;
}

.lifeProcess .processMain .processDes .desCon .step {
    line-height: 1.7;
}

.lifeProcess .processMain .processDes .desCon .step span {
}

.lifeProcess .processMain .processDes .desCon .step .oColor {
    color: #cea558;
    font-style: inherit;
}

.lifeProcess .processMain .processDes .tipsTxt {
    color: #666666;
}

.lifeProcess .processMain .processDes .operaBtn {
    margin: 3% 0 0 0;
}

.lifeProcess .processMain .processDes .operaBtn .login_btn {
    width: 30%;
    line-height: 1.8;
    text-align: center;
    color: #fff;
    background: #cea558;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}

.lifePrize {
    width: 72%;
    margin: 0 14% 5%;
    position: relative;
}

.lifePrize .prizeDes {
    position: absolute;
    left: 0;
    right: 60%;
    margin: 10% 0 0 0;
}

.lifePrize .prizeDes .prizeTit {
    font-weight: bold;
    color: #cea558;
    margin: 0 0 8%;
}

.lifePrize .prizeDes .prizeTxt {
    color: #333333;
    line-height: 2;
    letter-spacing: 2px;
}

.lifePrize .prizeDes .prizeTxt i {
    color: #cea558;
    font-style: inherit;
}

.lifePrize .prizeDes .prizeTips {
    margin: 5% 0 0 0;
}

.lifePrize .prizeImg {
    width: 48.5%;
    margin: 0 0 12% 45%;
    position: relative;
    padding: 0 0 15%;
}

.lifePrize .prizeImg .img {
    width: 50%;
    position: relative;
    z-index: 5;
}

.lifePrize .prizeImg .carImg {
    position: absolute;
    width: 58%;
    right: 0;
    top: 30%;
    z-index: 3
}

.lifePrize .prizeImg::before {
    content: "";
    position: absolute;
    left: 0;
    right: 25%;
    top: 15%;
    height: 40%;
    margin: auto;
    background-color: #b8b9bd;
}

.lifePrize .prizeImg::after {
    content: "";
    position: absolute;
    left: 30%;
    right: 0;
    bottom: 0;
    top: 0;
    height: 40%;
    margin: auto;
    background-color: #cea558;
}

.lifeRank {
    width: 72%;
    padding: 5% 14% 3%;
    position: relative;
}

.lifeRank .processBg {
    position: absolute;
    left: 2%;
    top: -15%;
    width: 5%;
    max-width: 103px;
}

.lifeRank .rankTit {
    text-align: center;
    font-weight: bold;
    color: #cea558;
    margin: 0 0 5%;
}

.lifeRank .rankTit span {
    font-weight: normal;
}

.lifeRank .rankTit i {
    font-style: normal;
    font-weight: normal;
}

.lifeRank .rankContent {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.lifeRank .rankContent .rankImg {
    float: left;
    width: 47%;
}

.lifeRank .rankContent .rankLayout {
    float: right;
    width: 45%;
}

.lifeRank .rankContent .rankLayout .rankDes {
    line-height: 1.8;
    margin: 4% 0 5%;
}

.lifeRank .rankContent .rankLayout .rankDes .desTxt {
    font-weight: lighter;
}

.lifeRank .rankContent .rankLayout .rankDes .desTxt i {
    font-style: normal;
    color: #cea558;
    font-weight: normal;
}

.lifeRank .rankContent .rankLayout .checkBtn {
    background: #cea558;
    color: #fff;
    padding: 1.5% 10%;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}

.lifeSpring {
    position: relative;
    z-index: 3;
    padding: 0 0 2%;
}

.lifeSpring.hideLife {
    display: none;
}

.lifeSpring:after {
    content: "";
    position: absolute;
    height: 30%;
    right: 0;
    bottom: -10%;
    left: 0;
    background: #cea558;
}

.lifeSpring .upload-box {
    width: 72%;
    margin: 4% auto 0;
    background: #b8b9bd;
    position: relative;
    z-index: 3;
}

.lifeSpring .upload-box .upClose {
    position: absolute;
    right: 0;
    top: 0;
    width: 3%;
    max-width: 60px;
    cursor: pointer;
    margin: 1% 1% 0 0;
}

.lifeSpring .upload-box .uploadTit {
    background: #186391;
    position: absolute;
    color: #fff;
    left: 0;
    right: 0;
    line-height: 60px;
    text-align: center;
    width: 20%;
    margin: -30px auto 0;
}

.lifeSpring .upload-box .upload-form {
    padding: 8% 18.5% 5%;
}

.lifeSpring .upload-box .upload-form .form-row {
    display: flex;
    width: 100%;
    vertical-align: top;
    margin: 0 0 4%;
}

.lifeSpring .upload-box .upload-form .form-row.minInterval {
    margin: 0 0 3%;
}

.lifeSpring .upload-box .upload-form .form-row .form-label {
    float: left;
    position: relative;
    width: 20%;
    padding: 0 5% 0 0;
    display: flex;
    align-items: center;
    height: 40px;
}

.lifeSpring .upload-box .upload-form .form-row .form-label .labelName {
    width: 100%;
    text-align: justify;
    text-align-last: justify;
    color: #000;
}

.lifeSpring .upload-box .upload-form .form-row .form-label .labelStop {
    position: absolute;
    right: 2%;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 30px;
    line-height: 30px;
}

.lifeSpring .upload-box .upload-form .form-row .form-play {
    float: left;
    width: 80%;
    position: relative;
    line-height: 40px;
}

.lifeSpring .upload-box .upload-form .form-row .areaModel {
    margin: 0 0 2%;
}

.lifeSpring .upload-box .upload-form .form-row .areaModel .areaInput1 {
    width: 19%;
    padding: 1% 2%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #7f7f7f;
}

.lifeSpring .upload-box .upload-form .form-row .areaModel .areaInput2 {
    width: 19%;
    padding: 1% 2%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #7f7f7f;
}

.lifeSpring .upload-box .upload-form .form-row .areaModel .areaInput3 {
    width: 19%;
    padding: 1% 2%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #7f7f7f;
}

.lifeSpring .upload-box .upload-form .form-row .areaModel .areaLabel {
    color: #000;
    margin: 0 2% 0 0;
    display: inline-block;
    vertical-align: top;
    height: 30px;
    line-height: 30px;
    padding: 1% 0;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .input-text {
    width: 92%;
    padding: 1% 2%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #7f7f7f;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .uploadSelectSmall {
    width: 25%;
    margin: 0 1% 0 0;
    padding: 1% 2%;
    height: 40px;
    /* line-height: 30px; */
    /* float: left; */
    background: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: #fff url(../img/downIcon.png) no-repeat right 0.5rem center;
    background-size: auto 25%;
    border: 1px solid #7f7f7f;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .uploadSelectHalf {
    width: 41%;
    margin: 0 1% 0 0;
    padding: 1% 2%;
    height: 40px;
    /* line-height: 30px; */
    /* float: left; */
    background: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: #fff url(../img/downIcon.png) no-repeat right 0.5rem center;
    background-size: auto 25%;
    border: 1px solid #7f7f7f;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .uploadShop {
    width: 0;
    height: 0;
    overflow: hidden !important;
    opacity: 0;
    position: absolute;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .uploadContainer {
    width: 0;
    height: 0;
    display: inline-block;
    overflow: hidden;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .form-radio {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .form-radio.maxInterval {
    /* margin: 1.5% 0 0 0; */
}

.lifeSpring .upload-box .upload-form .form-row .form-play .form-radio .radioItem {
    cursor: pointer;
    float: left;
    margin: 0 5% 0 0;
    line-height: 40px;
    display: flex;
    align-items: center;
    align-content: center;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .form-radio .radioItem .radioLabel {
    display: inline-block;
    vertical-align: top;
    margin: 0 5px 0 0;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .form-radio .radioItem i {
    width: 15px;
    height: 15px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    position: relative;
    line-height: normal;
    padding: 0;
    margin: 0;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .form-radio .radioItem.actRadio i:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-color: #cea558;
    height: 70%;
    width: 70%;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .input-area {
    width: 92%;
    padding: 1% 2%;
    min-height: 90px;
    margin: 2% 0 0 0;
    border: 1px solid #7f7f7f;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .area-tips {
    position: absolute;
    right: 7%;
    bottom: 10%;
    color: #000;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .styleLine {
    margin: 1% 0 0 0;
    line-height: 30px;
    letter-spacing: -0.03rem;
    color: #000;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .styleLine .styleItem {
    display: inline-block;
    vertical-align: top;
    margin: 0 0 0 1%;
    padding: 0 2%;
    border: 1px solid #000;
    border-radius: 30px;
    cursor: pointer;
    color: #000;
    line-height: 30px;
    letter-spacing: 0;
    white-space: nowrap;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .styleLine .styleItem.actItem {
    color: #fff;
    background: #cea558;
    border: 1px solid #cea558;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 2.5% 0 0;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox {
    float: left;
    position: relative;
    width: 31%;
    padding: 20% 0 0 0;
    margin: 0 2% 2% 0;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .loadingEffect {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: #f5f5f5;
    border: 1px solid #999;
    display: none;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .loadIcon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 25%;
    -webkit-transform: rotate(360deg);
    animation: rotate 1s linear infinite;
    -moz-animation: rotate 1s linear infinite;
    -webkit-animation: rotate 1s linear infinite;
    -o-animation: rotate 1s linear infinite;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox.uploadLoading .loadingEffect {
    display: inline-block;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox.hide {
    display: none;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox.hide {
    display: none;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .uploadTipsBox {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    background: #f5f5f5;
    border: 1px solid #999;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .uploadTipsBox .tipsCon {
    display: inline-block;
    width: 90%;
    position: relative;
    vertical-align: middle;
    text-align: center;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .uploadTipsBox .tipsCon .picImg {
    width: 25%;
    margin: 0 0 5%;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .uploadTipsBox .tipsCon .addImg {
    width: 25%;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .uploadTipsBox .tipsCon .uploadTxt {
    color: #ababab;
    line-height: 1.2;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .upload-file-btn {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    opacity: 0;
    z-index: 3;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .videoModel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .videoModel .videoCover {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    vertical-align: top;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .videoModel .mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #000;
    opacity: 0.4;
    z-index: 2;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .videoModel .videoPlayBtn {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 25%;
    cursor: pointer;
    z-index: 3;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .videoModel .closeIcon {
    position: absolute;
    right: 0;
    top: 0;
    width: 16%;
    margin: 2%;
    cursor: pointer;
    z-index: 4;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .imgModel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .imgModel .imgCover {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #999;
    vertical-align: top;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .imgModel .enlargeBtn {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 20%;
    cursor: pointer;
    z-index: 3;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload .fileBox .imgModel .closeIcon {
    position: absolute;
    right: 0;
    top: 0;
    width: 16%;
    margin: 2%;
    cursor: pointer;
    z-index: 4;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload.hideupload {
    display: none;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload.vertical {
    margin: 2% 0 1%;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileUpload.vertical .fileBox {
    width: 20%;
    padding: 30% 0 0 0;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .fileTips {
    color: #000;
    margin: 0 0 0 -1.5%;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .askTxt {
    color: #000;
    margin: 2% 0 0 0;
    font-weight: lighter;
    line-height: 1.75;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .askTxt.redFont {
    color: #c00;
}

.lifeSpring .upload-box .upload-form .form-row .form-play .askTxt .redFont {
    color: #c00;
    font-weight: bold;
}

.lifeSpring .upload-box .upload-form .form-agree {
    position: relative;
    padding: 0 0 0 23px;
    margin: 0 0 5%;
}

.lifeSpring .upload-box .upload-form .form-agree .agreeCheck {
    position: absolute;
    left: 0;
    top: 9%;
    height: 0;
    padding: 14px 0 0 0;
    width: 14px;
    border: 1px solid #707070;
    cursor: pointer;
}

.lifeSpring .upload-box .upload-form .form-agree .agreeCheck.checked::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 60%;
    height: 60%;
    background-color: #cea558;
}

.lifeSpring .upload-box .upload-form .form-agree .agreeTxt {
    line-height: 1.75;
    color: #000;
}

.lifeSpring .upload-box .upload-form .form-agree .agreeTxt a {
    color: #6699cc;
    text-decoration: underline;
}

.lifeSpring .upload-box .upload-form .uploadSubmit {
    margin: auto;
    text-align: center;
    width: 39%;
}

.lifeSpring .upload-box .upload-form .uploadSubmit .uploadSubmitBtn {
    display: inline-block;
    vertical-align: top;
    background: #186391;
    color: #fff;
    width: 85%;
    cursor: pointer;
    line-height: 1.8;
    font-weight: lighter;
}

.lifeSpring.springL2 .upload-box .uploadTit {
    background: #000
}

.lifeSpring.springL2 .upload-box .upload-form .uploadSubmit .uploadSubmitBtn {
    background: #cea558
}

.lifeShow {
    position: relative;
    margin: 4% 0 0 0;
    z-index: 3;
}

.lifeShow:after {
    content: "";
    position: absolute;
    background: #cea558;
    left: 0;
    right: 0;
    top: 30px;
    bottom: 0;
}

.lifeShow .titleCon {
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 2;
    margin: 0 auto 2%;
    width: 15%;
    background: #186391;
    line-height: 60px;
}

.lifeShow .titleCon.black {
    background: #000;
    color: #fff;
}

.lifeShow .workType {
    text-align: center;
    position: relative;
    z-index: 3;
    margin: 0 0 2%;
}

.lifeShow .workType .typeItem {
    display: inline-block;
    border: 1px solid #fff;
    line-height: 2;
    color: #fff;
    width: 8%;
    cursor: pointer;
}

.lifeShow .workType .typeItem.active {
    background-color: #fff;
    color: #cea558;
}

.lifeShow .workModel {
    position: relative;
    z-index: 3;
}

.lifeShow .workModel .workTabModel {
    text-align: center;
    margin: 1% 34% 2%;
    width: 30%;
    border: 1px solid #fff;
    display: inline-block;
}

.lifeShow .workModel .workTabModel .tabItem {
    float: left;
    width: 33.3333%;
    box-sizing: border-box;
    padding: 1% 0;
    cursor: pointer;
    color: #fff;
}

.lifeShow .workModel .workTabModel .tabItem+.tabItem {
    border-left: 1px solid #fff;
}

.lifeShow .workModel .workTabModel .tabItem.active {
    background: #fff;
    color: #cea558;
}

.lifeShow .uploadBtn {
    position: absolute;
    color: #fff;
    width: 15%;
    top: 0;
    left: 0;
    right: 0;
    margin: -5% auto 0;
    cursor: pointer;
}

.lifeShow .uploadBtn .upIcon {
    width: 100%;
}

.lifeShow .workModel .workNav {
    margin: 0 0 1%;
    background-size: auto 0.2rem;
}

.lifeShow .workModel .workNav .workNavTab {
    display: inline-block;
    width: 72%;
    margin: 0 14%;
    box-sizing: border-box;
    vertical-align: bottom;
    overflow: hidden;
}

.lifeShow .workModel .workNav .workNavTab .navItem {
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin: 0 4px;
    background: #a5b0c1;
    text-align: center;
    vertical-align: bottom;
    padding: 5px 1%;
    height: 30px;
}

.lifeShow .workModel .workNav .workNavTab .navItem .itemIcon {
    height: 80%;
    display: inline-block;
    vertical-align: middle;
}

.lifeShow .workModel .workNav .workNavTab .navItem .workTit {
    display: inline-block;
    vertical-align: middle;
}

.lifeShow .workModel .workNav .workNavTab .navItem .workTit .itemName {
    font-size: 18px;
    color: #fff;
    letter-spacing: 0.05rem;
}

.lifeShow .workModel .workNav .workNavTab .navItem .workTit .subTit {
    font-size: 10px;
    color: #fff;
    font-family: Arial;
    display: none;
    line-height: 1;
}

.lifeShow .workModel .workNav .workNavTab .navItem.active {
    background: #2157ca;
    height: 40px;
}

.lifeShow .workModel .workNav .workNavTab .navItem.active .itemIcon {
    height: 90%;
}

.lifeShow .workModel .workNav .workNavTab .navItem.active .workTit .itemName {
    font-size: 21px;
    line-height: 1;
    margin: 0 0 4px;
}

.lifeShow .workModel .workNav .workNavTab .navItem.active .workTit .subTit {
    display: block;
}

/* .lifeShow .workModel .workNav .workNavTab {
    display: inline-block;
    width: 60%;
    margin: 0 20%;
    border: 1px solid #000;
    box-sizing: border-box;
    vertical-align: bottom;
    overflow: hidden;
}

.lifeShow .workModel .workNav .workNavTab .navItem {
    float: left;
    width: 33.33%;
    height: 0;
    padding: 10% 0 0 0;
    position: relative;
    cursor: pointer;
    font-size: 0.26rem;
}

.lifeShow .workModel .workNav .workNavTab .navItem:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1px;
    background: #000;
    transform: skewX(-23deg);
}

.lifeShow .workModel .workNav .workNavTab .navItem:last-child:after {
    display: none
}

.lifeShow .workModel .workNav .workNavTab .navItem .itemName {
    color: #666;
    display: inline-block;
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 0.6rem;
    line-height: 0.6rem;
    z-index: 3;
}

.lifeShow .workModel .workNav .workNavTab .navItem.active .itemName {
    color: #fff;
}

.lifeShow .workModel .workNav .workNavTab .navItem.active:before {
    content: "";
    position: absolute;
    background: #000;
    transform: skewX(-23deg);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.lifeShow .workModel .workNav .workNavTab .navItem.active .ltBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 40%;
    height: 100%;
    background-color: #000;
}

.lifeShow .workModel .workNav .workNavTab .navItem.active .rbBg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40%;
    height: 100%;
    background-color: #000;
} */
.lifeShow .workModel .searchModel {
    text-align: center;
    width: 20%;
    position: absolute;
    right: 14%;
    top: 20px;
}

.lifeShow .workModel .searchModel .searchBox {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    width: 93%;
}

.lifeShow .workModel .searchModel .searchBox .searchLine {
    float: left;
    width: 68%;
    vertical-align: top;
    position: relative;
    border: 1px solid #fff;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
}

.lifeShow .workModel .searchModel .searchBox .searchLine .searchInput {
    outline: none;
    padding: 0 5%;
    height: 30px;
    width: 90%;
    vertical-align: top;
    border: none;
    background: transparent;
    color: #fff;
}

.lifeShow .workModel .searchModel .searchBox .searchLine .searchInput::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #fff;
}

.lifeShow .workModel .searchModel .searchBox .searchLine .searchInput::-moz-placeholder {
    /* Firefox 19+ */
    color: #fff;
}

.lifeShow .workModel .searchModel .searchBox .searchLine .searchInput:-ms-input-placeholder {
    /* IE 10+ */
    color: #fff;
}

.lifeShow .workModel .searchModel .searchBox .searchLine .searchInput:-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
}

.lifeShow .workModel .searchModel .searchBox .searchBtn {
    float: left;
    height: 30px;
    line-height: 30px;
    vertical-align: top;
    text-align: center;
    width: 25%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    color: #cea558;
    padding: 0 0 0 5%;
}

.lifeShow .workModel .searchModel .searchBox .searchBtn i {
    font-style: normal;
    position: relative;
    z-index: 2;
}

.lifeShow .workModel .searchModel .searchBox .searchBtn .searchIcon {
    vertical-align: middle;
    width: 25%;
    max-width: 16px;
    margin: -5% 0 0 5%;
    position: relative;
    z-index: 2;
}

.lifeShow .workModel .searchModel .searchBox .searchBtn:before {
    content: "";
    position: absolute;
    background: #fff;
    top: 0;
    left: 11%;
    right: -10%;
    bottom: 0;
    z-index: 0;
}

.lifeShow .works_nodata {
    display: none;
    font-size: 20px;
    color: #fff;
    padding: 10% 0;
    text-align: center;
}

.lifeShow .works-list {
    display: inline-block;
    width: 72%;
    vertical-align: top;
    margin: 0 14% 2%;
}

.lifeShow .works-list li {
    /*float: left;*/
    display: inline-block;
    vertical-align: top;
    width: 29.3%;
    margin: 0 1% 3%;
    position: relative;
    background: #fff;
    padding: 1%;
    box-shadow: 3px 0 8px #d9d9d9;
}

.lifeShow .works-list li .works-tops {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 35%;
    padding: 35% 0 0 0;
    background: url("../img/numBg.png") no-repeat center center;
    background-size: 100% 100%;
}

.lifeShow .works-list li .works-tops span {
    color: #fff;
    transform: rotate(-45deg);
    position: absolute;
    left: 17%;
    top: 31%;
    letter-spacing: 1px;
}

.lifeShow .works-list li .works-topsmall {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 25%;
    padding: 25% 0 0 0;
    background: url("../img/numBg.png") no-repeat center center;
    background-size: 100% 100%;
}

.lifeShow .works-list li .works-topsmall span {
    color: #fff;
    transform: rotate(-45deg);
    position: absolute;
    left: 15%;
    top: 31%;
    letter-spacing: 1px;
}

.lifeShow .works-list li .works_list_swiper {
}

.lifeShow .works-list li .works_list_swiper .swiper-wrapper {
    width: 100%;
}

.lifeShow .works-list li .works_list_swiper .swiper-slide {
    width: 100%;
}

.lifeShow .works-list li .works_list_swiper .swiper-slide .works-togetherImg {
    width: 100%;
    position: relative;
    margin: 0 0 3%;
    height: 0;
    padding: 56.5% 0 0 0;
    overflow: hidden;
}

.lifeShow .works-list li .works_list_swiper .swiper-slide .works-togetherImg .works-together-pic {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.lifeShow .works-list li .works-top-mode {
    width: 100%;
    position: relative;
    margin: 0 0 3%;
    height: 0;
    padding: 56.5% 0 0 0;
    overflow: hidden;
    cursor: pointer;
}

.lifeShow .works-list li .works-top-mode .works-pic {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.lifeShow .works-list li .works-top-enlarge {
    width: 100%;
    position: relative;
    margin: 0 0 3%;
    height: 0;
    padding: 56.5% 0 0 0;
    overflow: hidden;
    cursor: pointer;
}

.lifeShow .works-list li .works-top-enlarge .works-pic {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.lifeShow .works-list li .works-top-mode .talent_mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.lifeShow .works-list li .works-top-mode .talent_mask i {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 15%;
    height: 0;
    padding: 15% 0 0 0;
    background: url("../img/play.png") no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
}

.lifeShow .works-list li .works-swiperTab {
    text-align: center;
    margin: 0 0 5%;
}

.lifeShow .works-list li .works-swiperTab .works_swiper_btn {
    display: inline-block;
    position: relative;
    width: 7%;
    padding: 7% 0 0 0;
    background: #cea558;
    margin: 0 2%;
    cursor: pointer;
    vertical-align: top;
}

.lifeShow .works-list li .works-swiperTab .works_swiper_btn .arrowIcon {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 60%;
    z-index: 3;
    margin: auto;
}

.lifeShow .works-list li .works-swiperTab .works_swiper_btn.swiper-button-prev {
}

.lifeShow .works-list li .works-swiperTab .works_swiper_btn.swiper-button-next {
}

.lifeShow .works-list li .works-swiperTab .works_swiper_btn.swiper-button-disabled {
    opacity: 0;
    cursor: default;
}

.lifeShow .works-list li .works-infos {
}

.lifeShow .works-list li .works-infos .infos-row {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.lifeShow .works-list li .works-infos .infos-row .works-label {
    width: 30%;
    color: #000;
    padding: 0 5% 0 0;
    position: relative;
    float: left;
    display: block;
    text-align: justify;
    text-align-last: justify;
    line-height: 1.75;
}

.lifeShow .works-list li .works-infos .infos-row .works-label .colon {
    position: absolute;
    font-style: normal;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    line-height: 20px;
    height: 20px;
}

.lifeShow .works-list li .works-infos .infos-row .works-txt {
    width: 65%;
    color: #333;
    word-wrap: break-word;
    overflow: hidden;
    float: left;
    line-height: 1.75;
}

.lifeShow .works-list li .works-infos .infos-row .minHeight {
    min-height: 65px;
}

.lifeShow .works-list li .works-infos .works-data {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 2% 0 0 0;
}

.lifeShow .works-list li .works-infos .works-data .data-like {
    float: left;
    color: #999;
    padding: 0 3% 0 0;
    display: flex;
    align-items: center;
    align-content: center;
}

.lifeShow .works-list li .works-infos .works-data .data-like i {
    display: inline-block;
    vertical-align: top;
    margin: 0 0.1rem 0 0;
    width: 15px;
    height: 13px;
    background: url("../img/like.png") no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
}

.lifeShow .works-list li .works-infos .works-data .data-like span {
    /* font-size: 0.26rem; */
}

.lifeShow .works-list li .works-infos .works-data .data-pl {
    float: right;
    line-height: 0.55rem;
    color: #999;
    height: 0.55rem;
    cursor: pointer;
    display: flex;
    align-content: center;
    align-items: center;
}

.lifeShow .works-list li .works-infos .works-data .data-pl i {
    display: inline-block;
    vertical-align: top;
    margin: 0 0.1rem 0 0;
    height: 0.4rem;
    width: 0.4rem;
    background: url(../img/pl.png) no-repeat center center;
    background-size: 100% 100%;
}

.lifeShow .works-list li .works-infos .works-data .data-pl span {
    font-size: 0.26rem;
}

.lifeShow .works-list.dense li {
    width: 18%;
    margin: 0 0.5% 1%;
    padding: 0.5%;
}

.lifeShow .works-list.dense li .works-tops {
}

.lifeShow .works-list.dense li .works-tops span {
}

.lifeShow .works-list.dense li .works-top-mode {
    padding: 150% 0 0 0;
}

.lifeShow .works-list.dense li .works-top-mode .works-pic {
    bottom: auto;
}

.lifeShow .works-list.dense li .works-infos .infos-row.minHeight {
    height: 60px;
}

.lifeShow .works-list.dense li .works-infos .works-data {
    display: flex;
    justify-content: flex-end;
}

.lifeShow .works-list li .works-infos .works-data .data-share {
    float: left;
    width: 17px;
    cursor: pointer;
}

.lifeShow .works-list li .works-infos .works-data .data-shareCon {
    float: left;
    cursor: pointer;
    color: #072740;
}

.lifeShow .works-list li .works-infos .works-data .data-shareCon .data-share {
    display: inline-block;
    vertical-align: middle;
    margin: -2px 5px 0 0;
    float: none;
    width: 17px;
}

.lifeShow .works-list.dense li .works-infos .works-data .data-like {
    /* position: absolute; */
    /* top: 0; */
    /* right: 0; */
    margin: 0;
    /* width: 20px; */
    /* flex-wrap: wrap; */
    /* text-align: center; */
    padding: 0;
    /* color: #333; */
}

.lifeShow .works-list.dense li .works-infos .works-data .data-like span {
    display: block;
    color: #999;
}

.lifeShow .works-list.dense li .works-infos .works-data .data-like i {
    background: url("../img/unpack/like.png") no-repeat center center;
    background-size: 100%;
    margin: 0 4px 0 0;
}

.lifeShow .works-list.dense li .works-infos .works-data .data-like i.on {
    background: url("../img/unpack/liked.png") no-repeat center center;
    background-size: 100%;
}

.lifeShow .works-list#L2Work li .works-infos .works-data .data-like i.on {
    background: url("../img/unpack/liked.png") no-repeat center center;
    background-size: 100%;
}

.lifeShow .works-list#L2Work li .works-infos .works-data .data-like {
    float: right;
}

.lifeShow .works-pages {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
}

.lifeShow .works-pages .page_btns {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    /* background: #000; */
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    border-radius: 5px;
}

.lifeShow .works-pages .page_btns.pages-prev {
    background-image: url("../img/leftW.png");
    background-size: auto 50%;
}

.lifeShow .works-pages .page_btns.pages-next {
    background-image: url("../img/rightW.png");
    background-size: auto 50%;
}

.lifeShow .works-pages .page_group {
    display: flex;
    margin: 0 15px;
    flex-shrink: 0;
    flex-grow: 0;
    white-space: nowrap;
}

.lifeShow .works-pages .page_group .pages-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    line-height: 30px;
    border-radius: 5px;
    color: #fff;
    margin: 0 5px;
    cursor: pointer;
    flex-grow: 0;
    flex-shrink: 0;
}

.lifeShow .works-pages .page_group .pages-slh {
    height: 30px;
    width: 30px;
    line-height: 30px;
    color: #fff;
    letter-spacing: 5px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
}

.lifeShow .works-pages .page_group .pages-btn.active {
    background: transparent;
    color: #000;
    background: #fff;
}

.lifeShow.lifeShowL2 {
    margin: 0;
}

.lifeShow.lifeShowL2:after {
    top: 0;
}

.lifeShow.lifeShowL2 .titleCon {
    color: #000;
    background: transparent;
    font-weight: bold;
    padding: 3% 0 0;
    margin: 0 auto 1%;
}

.lifeShow.lifeShowL2 .uploadBtn {
    margin: -1.5% auto 0;
    z-index: 3;
}

.lifeShow.lifeShowL2 .uploadBtn .upIcon {
}

.lifeShow.lifeShowL2.blueTone .titleCon {
    color: #fff;
}

.ruleModel.ruleModelL2.blueTone .step span {
    background-color: #072740;
}

.ruleModel.ruleModelL2.blueTone .titleLine {
    background: url("../img/travel/titBg.png") no-repeat center center;
    background-size: auto 100%;
}

.ruleModel.blueTone .arrowD {
    width: 20px;
}

.lifeShow.blueTone:after {
    background-color: #072740;
}

.lifeShow.blueTone .works-list li {
    box-shadow: none;
}

.lifeShow.blueTone .workModel {
    padding: 5% 0 0 0;
}

.lifeShow.blueTone .workModel .searchModel .searchBox .searchBtn {
    color: #fff;
}

.lifeShow.blueTone .workModel .searchModel .searchBox .searchBtn:before {
    background: #cfa75d;
}

.ruleL2 .ruleBtn.blueTone .checkBtn {
    background: #072740;
    padding: 0.2% 3%;
    letter-spacing: 3px;
}

.ruleL2 .giftTit.blueTone {
    color: #072740;
}

.reviewL2 .reviewCon.blueTone::before {
    background-color: #072740;
}

.noticeL2 .titleCon.blueTone, .reviewL2 .titleCon.blueTone {
    color: #072740;
}

.lifeSpring.blueTone::after {
    background: #072740
}

.lifeSpring.springL2.blueTone .upload-box .uploadTit {
    background: #072740
}

.lifeSpring.springL2.blueTone .upload-box .upload-form .uploadSubmit .uploadSubmitBtn {
    background: #072740;
}

.lifeSpring.blueTone .upload-box .upload-form .form-agree .agreeCheck.checked::after {
    background-color: #072740;
}

.lifeNotice {
    padding: 0 0 3%;
    position: relative;
}

.lifeNotice::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3% 0 0 0;
    background: #000;
}

.lifeNotice .noticeTit {
    text-align: center;
    color: #cea558;
    padding: 2% 0;
    font-weight: bold;
}

.lifeNotice .noticeOne {
    display: inline-block;
    width: 72%;
    margin: 0 14%;
    vertical-align: top;
}

.lifeNotice .noticeOne .imgLeft {
    position: relative;
    float: left;
    width: 44.5%;
    margin: 0 0 0 6%;
}

.lifeNotice .noticeOne .imgLeft::before {
    content: "";
    position: absolute;
    background: #cea558;
    width: 30%;
    padding: 30% 0 0 0;
    bottom: 0;
    left: 0;
    margin: -7%;
}

.lifeNotice .noticeOne .imgLeft img {
    width: 100%;
    position: relative;
    z-index: 3;
}

.lifeNotice .noticeOne .desRight {
    float: right;
    width: 45%;
    margin: 5% 0 0 0;
}

.lifeNotice .noticeOne .desRight .desTit {
    color: #cea558;
    font-weight: lighter;
    letter-spacing: 9px;
    line-height: 1;
    margin-bottom: 2%;
}

.lifeNotice .noticeOne .desRight .desTit i {
    font-style: inherit;
}

.lifeNotice .noticeOne .desRight .desTxt {
    letter-spacing: 2px;
}

.lifeNotice .noticeTwo {
    display: inline-block;
    width: 72%;
    margin: -3% 14% 0;
    position: relative;
    z-index: 5;
}

.lifeNotice .noticeTwo .desLeft {
    float: left;
    width: 45%;
    text-align: right;
    margin: 10% 0 0 0;
}

.lifeNotice .noticeTwo .desLeft .desTit {
    color: #cea558;
    font-weight: lighter;
    letter-spacing: 9px;
    line-height: 1;
    margin-bottom: 2%;
}

.lifeNotice .noticeTwo .desLeft .desTit i {
    font-style: inherit;
}

.lifeNotice .noticeTwo .desLeft .desTxt {
    letter-spacing: 2px;
}

.lifeNotice .noticeTwo .imgRight {
    position: relative;
    float: right;
    width: 44.5%;
    margin: 0 7% 0 0;
}

.lifeNotice .noticeTwo .imgRight::before {
    content: "";
    position: absolute;
    background: #d4d5d7;
    width: 30%;
    padding: 30% 0 0 0;
    top: 0;
    right: 0;
    margin: -7%;
}

.lifeNotice .noticeTwo .imgRight img {
    position: relative;
    z-index: 2;
}

.lifeNotice .tipsTxt {
    padding: 5% 0;
    text-align: center;
    color: #cea558;
}

#rule_prop, #award_prop, #drive_prop, #login_prop, #register_prop, #invite_prop, #success_prop, #guess_result, #guess_prop, #agreement_prop1, #agreement_prop2, #agreement_prop3, #agreement_prop4, #agreement_prop5, #agreement_prop6, #poster_prop {
    display: none;
}

.level {
    padding: 4% 13.5%;
    width: 73%;
}

.level .levelCon {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.level .levelCon .levelDes {
    float: left;
    width: 39%;
    margin: 14% 0 0 1%;
}

.level .levelCon .levelDes .desTit {
    color: #c09107;
    line-height: 1.2;
    letter-spacing: 2px;
}

.level .levelCon .levelDes .tipsCon {
    margin: 7% 0 0 0;
}

.level .levelCon .levelDes .tipsCon p {
    color: #000;
    line-height: 2;
}

.level .levelCon .levelImg {
    float: left;
    width: 60%;
}

.level .levelCon .levelImg .img1 {
    float: left;
    width: 100%;
    margin: 0 0 2%;
}

.level .levelCon .levelImg .img2 {
    float: left;
    width: 49%;
    margin: 0 2% 0 0;
}

.level .levelCon .levelImg .img3 {
    float: left;
    width: 49%;
}

.taste {
    display: inline-block;
    padding: 3% 13.5% 4%;
    width: 73%;
    position: relative;
}

.taste .tasteCon {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.taste .tasteCon .tasteImg {
    float: left;
    width: 52%;
}

.taste .tasteCon .tasteDes {
    float: right;
    width: 40%;
    margin: 20% 4% 0 0;
}

.taste .tasteCon .tasteDes .desTit {
    color: #c09107;
    line-height: 1.2;
}

.taste .tasteCon .tasteDes .dessub {
    color: #333;
}

.taste .tasteCon .tasteDes .tipsCon {
    margin: 5% 0 0 0;
}

.taste .tasteCon .tasteDes .tipsCon p {
    line-height: 2;
}

.taste::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 57%;
    background: #b8b9bd;
}

.taste .tasteVideo {
    float: left;
    width: 55%;
    position: relative;
    z-index: 2;
}

.taste .tasteVideo .videoCover {
    width: 100%;
}

.taste .tasteVideo .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background: #000;
    opacity: 0.4;
}

.taste .tasteVideo .playBtn {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    margin: auto;
    width: 10%;
    cursor: pointer;
}

.taste .introduce {
    float: right;
    width: 42%;
    position: relative;
    z-index: 2;
    margin: 4% 0 0 0;
}

.taste .introduce .introduceTit {
    color: #000;
    line-height: 1.3;
}

.taste .introduce .introduceCon {
    margin: 6% 0 0 0;
}

.taste .introduce .introduceCon .contxt {
    color: #000;
}

.footLayout {
    padding: 1% 13.5% 1%;
    width: 73%;
    background-color: #000;
}

.footLayout .logoImg {
    width: 40%;
}

.gray_bg {
    position: fixed;
    z-index: 601;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.8);
}

.propbox {
    overflow: hidden;
    background: #fff;
    width: 65%;
    max-width: 1100px;
    min-width: 640px;
    position: fixed;
    z-index: 602;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    margin: auto;
    max-height: 90%;
    overflow: auto;
}

.propbox:after {
    content: "";
    display: inline-block;
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    background-color: #b8b9bd;
    height: 15px;
}

.propbox.heightTop:after {
    height: 40px;
}

.propbox .close {
    content: "";
    display: inline-block;
    z-index: 10;
    position: absolute;
    right: 0;
    top: 0;
    width: 12%;
}

.propbox .joinBtn {
    display: none;
}

.propbox .joinBtn .btn {
    line-height: initial;
    width: 200px;
    padding: 1.5% 0;
    margin: 3% auto 0;
    letter-spacing: 3px;
}

.propbox .awardIn {
    width: 90%;
    margin: 0 auto;
    padding: 4% 0 4%;
}

.propbox .awardIn .t {
    margin-bottom: 0;
    font-weight: bold;
    line-height: 1.6;
}

.propbox .awardIn .t2 {
    text-align: center;
    margin-bottom: 0.3rem;
}

.propbox .awardIn .t .licon {
    width: 0.37rem;
    margin-right: 0.2rem;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.propbox .awardIn .t .ricon {
    width: 0.37rem;
    margin-left: 0.2rem;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.propbox .awardIn .awardTab {
    text-align: center;
    margin: 1% 25% 2%;
    width: 50%;
    border: 1px solid #b8b9bd;
    display: inline-block;
}

.propbox .awardIn .awardTab .tabItem {
    float: left;
    width: 33.3333%;
    box-sizing: border-box;
    padding: 1% 0;
    cursor: pointer;
}

.propbox .awardIn .awardTab .tabItem+.tabItem {
    border-left: 1px solid #b8b9bd;
}

.propbox .awardIn .awardTab .tabItem.active {
    background: #cea558;
    color: #fff;
}

.propbox .awardIn .blindboxListTab {
    margin: 2% 0 3%;
    text-align: center;
}

.propbox .awardIn .blindboxListTab .tabItem {
    box-sizing: content-box;
    height: 0.6rem;
    line-height: 0.6rem;
    display: inline-block;
    vertical-align: top;
    margin: 0 0.1rem;
    font-size: 0.22rem;
    color: #818181;
    border: 1px solid #818181;
    padding: 0 0.3rem;
    cursor: pointer;
}

.propbox .awardIn .blindboxListTab .tabItem.active {
    border: none;
    color: #000;
    background: url("../img/blindbox/tabBg.jpg") no-repeat center center;
    background-size: 100% 100%;
}

.propbox .awardIn .tipsTxt {
    text-align: left;
    color: #7f7f7f;
    margin: 1% 0 0;
    letter-spacing: 1px;
}

.propbox .awardCon {
    display: none;
}

.propbox .awardCon.show {
    display: block;
}

.propbox .awardList {
    border-top: 1px solid #393842;
    border-left: 1px solid #393842;
}

.propbox .awardList .listHeader {
    background-color: #cea558;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.propbox .awardList .listHeader .tdCon {
    color: #fff;
    box-sizing: border-box;
    float: left;
    text-align: center;
    border-right: 1px solid #393842;
    border-bottom: 1px solid #393842;
    line-height: 2;
}

.propbox .awardList .listHeader .tdCon.tdW1 {
    width: 20%;
}

.propbox .awardList .listHeader .tdCon.tdW2 {
    width: 25%;
}

.propbox .awardList .listHeader .tdCon.tdW3 {
    width: 25%;
}

.propbox .awardList .listHeader .tdCon.tdW4 {
    width: 30%;
}

.propbox .awardList .listHeader .tdCon.tdW5 {
    width: 50%;
}

.propbox .awardList .listTabel {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    position: relative;
}

.propbox .awardList .listTabel .tabelCon {
    box-sizing: border-box;
    border-bottom: 1px solid #393842;
}

.propbox .awardList .listTabel .tabelCon .tabelLine {
    color: #333;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    /* border-right: 1px solid #393842; */
}

.propbox .awardList .listTabel .tabelCon.oLayout {
    position: relative;
    border-bottom: 3px solid #cea558;
}

.propbox .awardList .listTabel .tabelCon:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 1px;
    background: #393842;
}

.propbox .awardList .listTabel .tabelCon.oLayout:after {
    content: "";
    position: absolute;
}

.propbox .awardList .listTabel .tabelCon.oLayout .tabelLine {
    color: #cea558;
}

.propbox .awardList .listTabel .tabelCon .tabelLine .tdCon {
    box-sizing: border-box;
    float: left;
    text-align: center;
    border-right: 1px solid #393842;
    border-bottom: 1px solid #393842;
    line-height: 3;
    padding: 5px 0;
}

.propbox .awardList .listTabel .tabelCon .tabelLine:last-child .tdCon {
    border-bottom: none;
}

.propbox .awardList .listTabel .tabelCon .tabelLine .tdCon.tdW1 {
    width: 20%;
}

.propbox .awardList .listTabel .tabelCon .tabelLine .tdCon.tdW2 {
    width: 25%;
}

.propbox .awardList .listTabel .tabelCon .tabelLine .tdCon.tdW3 {
    width: 25%;
}

.propbox .awardList .listTabel .tabelCon .tabelLine .tdCon.tdW5 {
    width: 50%;
}

.propbox .awardList .listTabel .giftCon {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 30%;
    text-align: center;
    height: 30px;
    line-height: 1.3;
    padding: 11% 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.propbox .awardList .listTabel .giftCon.con2 {
    padding: 18% 0 0 0;
}

.propbox .awardList .listTabel .giftCon .giftImg1 {
    width: 50%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
}

.propbox .awardList .listTabel .giftCon .giftImg2 {
    width: 80%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
}

.propbox .awardList .listTabel .giftCon .giftName {
    color: #333;
    padding: 10px 0;
}

.propbox .awardList .listTabel .giftCon .giftName.oColor {
    color: #cea558;
}

.propbox .awardIn.blueCon .t {
    color: #186391
}

.propbox .awardIn.blueCon .t.oColor {
    color: #cea558
}

.propbox .awardList .listTabel .giftTop {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 20%;
    text-align: center;
    height: 30px;
    line-height: 30px;
}

.propbox .awardList .listTabel .giftTop .giftTit {
    color: #333;
}

.propbox .awardList .listTabel .giftTop .giftTit.blueTxt {
    color: #186391;
}

.propbox .awardList .listTabel .giftTop .giftTit.oFont {
    color: #cea558;
}

.propbox .awardIn.blueCon .awardList .listHeader {
    background: #186391;
}

.propbox .awardIn.blueCon .awardList .listHeader.obg {
    background: #cea558;
}

.propbox .awardIn .awardList .listModel {
}

.propbox .awardIn .awardList .listModel .listContent {
}

.propbox .awardIn .awardList .listModel .listContent.listHide {
    display: none;
}

.propbox .awardIn .listPageNav {
    text-align: center;
    padding: 2% 0;
}

.propbox .awardIn .listPageNav .pagePrev {
    height: 15px;
    display: inline-block;
    vertical-align: top;
    margin: 7px 20px 0 0;
    cursor: pointer;
}

.propbox .awardIn .listPageNav .pageItem {
    color: #333;
    line-height: 30px;
    height: 30px;
    margin: 0 10px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}

.propbox .awardIn .listPageNav .pageItem.active {
    color: #fff;
    background-color: #186391;
    border-radius: 3px;
    padding: 0 8px;
}

.propbox .awardIn .listPageNav.blackStyle .pageItem.active {
    background-color: #000000;
}

.propbox .awardIn .listPageNav .pageNext {
    height: 15px;
    display: inline-block;
    vertical-align: top;
    margin: 7px 0 0 20px;
    cursor: pointer;
}

.propbox .awardIn.blueCon .listTabel .giftCon .giftName {
    color: #186391;
}

.propbox .awardIn.blueCon .listTabel .giftCon .giftName.oColor {
    color: #cea558;
}

.propbox .awardIn.blueCon .awardList .listTabel .giftCon {
    padding: 0;
}

.propbox .awardIn.blueCon .awardList .listTabel .giftCon.twoline {
    height: 65px;
}

.propbox .awardIn.blueCon .awardList .listTabel .tabelCon .tabelLine .blueTxt {
    color: #186391
}

.propbox .awardIn.blueCon .awardList .listTabel .tabelCon .tabelLine.height1 .tdCon {
    padding: 10px 0;
}

.propbox .awardIn.blueCon .awardList .listTabel .tabelCon .tabelLine .tdCon.tdW1 {
    border-bottom: none;
}

.propbox .awardIn.blueCon .awardList .listTabel .tabelCon .tabelLine.height2 .tdCon {
    padding: 15px 0;
}

.propbox .awardIn .awardCon.blueCon .awardList .listTabel .giftCon {
    padding: 0;
}

.propbox .awardIn .awardCon.blueCon .awardList .listTabel .giftCon.twoline {
    height: 65px;
}

.propbox .awardIn .awardCon.blueCon .awardList .listTabel .tabelCon .tabelLine.height1 .tdCon {
    padding: 10px 0;
}

.propbox .awardIn .awardCon.blueCon .awardList .listTabel .tabelCon .tabelLine .tdCon.tdW1 {
    border-bottom: none;
}

.propbox .awardIn .awardCon.blueCon .awardList .listTabel .tabelCon .tabelLine.height2 .tdCon {
    padding: 15px 0;
}

.propbox .awardList .listTabel .tabelCon.bLayout {
    position: relative;
    border-bottom: 3px solid #186391;
}

.propbox .awardList .listTabel .tabelCon.oLayout {
    position: relative;
    border-bottom: 3px solid #cea558;
}

.propbox .awardList .listTabel .tabelCon.inLayout {
    position: relative;
    border-bottom: 2px solid #333;
}

.propbox .in {
    max-width: 600px;
    width: 90%;
    margin: 0 auto;
    padding: 4% 0 4%;
}

.propbox .in2 {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 4% 10% 4%;
    overflow: auto;
    max-height: 90vh;
}

.propbox .t {
    margin-bottom: 2%;
    text-align: center;
    color: #cea558;
}

.propbox .agreement {
}

.propbox .agreement .conTit {
    line-height: 2;
    font-weight: bold;
    margin: 0 0 1%;
}

.propbox .agreement .conTxt {
    line-height: 1.8;
}

.propbox .agreement .conSub {
    line-height: 1.8;
    margin: 0 0 0 3%;
}

.propbox .tipsTxt {
    line-height: 2;
    text-align: center;
}

.propbox .lists {
    margin-bottom: 6%;
}

.propbox .item {
    padding: 10px;
    border-bottom: #999 1px solid;
    line-height: 50px;
    overflow: hidden;
    position: relative;
}

.propbox .text {
    width: 100%;
    line-height: 50px;
    height: 50px;
    border: none;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    color: #333;
}

.propbox .text2 {
    width: 50%;
}

.propbox .code {
    width: 130px;
    height: 40px;
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 15px;
    cursor: pointer;
}

.propbox .getmsg {
    line-height: 50px;
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 10px;
    padding: 0 15px;
    background-color: #000;
    color: #fff;
    text-align: center;
    display: inline-block;
}

.propbox .item .select::-ms-expand {
    display: none;
}

.propbox .item .select {
    width: 45%;
    line-height: 50px;
    height: 50px;
    background: none;
    border: none;
    outline: none;
    float: left;
    background: url(../img/select.png) no-repeat scroll right center transparent;
    background-size: 18px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    color: #333;
}

.propbox .item .select1 {
    float: right;
}

.propbox .item .select2 {
    width: 100%;
}

.propbox .ps {
    margin-bottom: 4%;
}

.propbox .ps .checkbox {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    border: #d2d2d2 1px solid;
    background: #f6f6f6;
    border-radius: 3px;
    font-size: 0;
    line-height: 16px;
    margin-right: 5px;
    vertical-align: middle;
    top: -2px;
}

.propbox .ps .checkbox input {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0;
    cursor: pointer;
}

.propbox .ps .checkbox.on {
    background: url(../img/checkbox.png) no-repeat center center;
    background-size: 14px;
}

.propbox .ps a {
    color: #2957da;
}

.propbox .right-value-text {
    color: #999;
    margin-top: 2%;
}

.propbox .btn {
    width: 250px;
    background: #cea558;
    color: #fff;
    display: block;
    margin: 0 auto;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}

.propbox .gologin, .propbox .goregister {
    position: absolute;
    z-index: 10;
    color: #cea558;
    border-bottom: #cea558 1px solid;
    position: absolute;
    z-index: 10;
    bottom: 2%;
    right: 2%;
}

.propbox2 {
    overflow: hidden;
    background: #fff;
    width: 90%;
    max-width: 1000px;
    position: fixed;
    z-index: 99999;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    max-height: 90%;
    margin: auto;
}

.propbox2 .close {
    content: "";
    display: inline-block;
    z-index: 10;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}

.propbox2 .centerIframe {
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.upackSuccess {
    padding: 5% 0;
}

.upackSuccess .t {
    text-align: center;
    color: #186391;
}

.upackSuccess .tipsTxt {
    text-align: center;
    color: #333;
}

.upackSuccess .close {
    position: initial;
    display: block;
    text-align: center;
    background: #186391;
    color: #fff;
    margin: 3% auto 0;
    padding: 1% 0;
    width: 20%;
}

#iframePopup {
    display: none;
}

.ODYSSEY .float {
    position: fixed;
    z-index: 600;
    right: 0;
    bottom: 10%;
    width: 50px;
    display: none;
}

.ODYSSEY .float_detail, .ODYSSEY .float_drive {
    width: 100%;
    background-color: #333;
    line-height: 1.3;
    text-align: center;
    color: #fff;
    padding: 12px 0;
    word-wrap: break-word;
    display: block;
}

.ODYSSEY .float_detail:before, .ODYSSEY .float_drive:before {
    content: "";
    display: block;
    margin: 0 auto 10px;
    width: 22px;
    height: 22px;
}

.ODYSSEY .float_top {
    background-color: #cea558;
    color: #fff;
    display: block;
    margin: 10px 0 0 0;
    text-align: center;
    padding: 5px 0 0 0;
}

.ODYSSEY .float_top .arrowTop {
    display: block;
    width: 40%;
    margin: 0 auto;
}

.ODYSSEY .float_detail {
    margin-bottom: 10px;
}

.ODYSSEY .float_detail:before {
    background: url("../img/more_icon.png") no-repeat top left;
    background-size: 100%;
}

.ODYSSEY .float_drive:before {
    background: url("../img/drive_icon.png") no-repeat top left;
    background-size: 100%;
}

.p1-pop {
    display: none
}

.p1-fullVideo {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000
}

.p1-fullVideo>video {
    height: 100%
}

.pop-close {
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: url("../img/close.png") no-repeat center center;
    background-size: 100%;
    background: none\9;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/close.png', sizingMethod='scale');
    cursor: pointer;
}

.vjs-control-bar {
    position: absolute;
    left: 0;
    height: 25px;
    width: 100%
}

.vjs-play-control {
    -webkit-background-size: 80% 80%;
    background-size: 80%;
    color: transparent
}

.video-js {
    height: 100% !important;
    width: auto !important;
    position: relative !important
}

.vjs-icon-replay:before {
    line-height: .36rem !important
}

.popupBox {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    background: rgba(0, 0, 0, 0.6);
    display: none;
}

.popupBox .propbox {
    position: absolute;
    width: 60%;
    max-height: 95%;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    margin: auto;
    overflow: auto;
}

.popupBox .propbox .close {
    width: 10%;
}

.popupBox .propbox .popupContent {
    padding: 5%;
}

.popupBox .propbox .popupContent .ruleTit {
    display: inline-block;
    padding: 0 3%;
    line-height: 1.7;
    background: #cea558;
    color: #fff;
    letter-spacing: 1px;
    margin: 0 0 10px;
}

.popupBox .propbox .popupContent .ruleTit2 {
    display: inline-block;
    width: 94%;
    padding: 0 3%;
    line-height: 1rem;
    color: #cea558;
    letter-spacing: 1px;
    margin: 0 0 10px;
    text-align: center;
}

.popupBox .propbox .popupContent .ruleTit2 .licon {
    width: 0.37rem;
    margin: 0.25rem 0.1rem 0 0;
    display: inline-block;
    vertical-align: top;
}

.popupBox .propbox .popupContent .ruleTit2 .ricon {
    width: 0.37rem;
    margin: 0.25rem 0 0 0.1rem;
    display: inline-block;
    vertical-align: top;
}

.popupBox .propbox .popupContent .desLayout {
    padding: 0 0 0 4%;
    margin: 0 0 20px;
}

.popupBox .propbox .popupContent .desLayout .ruleTxt {
    color: #333;
    line-height: 1.7;
    letter-spacing: 2px;
    text-align: justify;
}

.popupBox .propbox .popupContent .desLayout .ruleTxt .noIcon {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.22rem;
    color: #fff;
    border-radius: 100%;
    width: 0.27rem;
    padding: 0 0 0 0.03rem;
    height: 0.3rem;
    line-height: 0.28rem;
    text-align: center;
    font-style: normal;
    background: #c09107;
    margin: 0 0.1rem 0 0;
}

.popupBox .propbox .popupContent .desLayout .ruleTxt.center {
    text-align: center;
}

.popupBox .propbox .popupContent .tipsTxt {
    text-align: left;
    color: #cea558;
    letter-spacing: 2px;
}

.popupBox .propbox .popupContent .tipsTxt.black {
    color: #000;
}

.popupBox .propbox .popupContent .titleLine {
    text-align: center;
    line-height: 1.8;
    margin: 0 0 2%;
    background: url("../img/L2/titBg.png") no-repeat center center;
    background-size: auto 100%;
    color: #fff;
}

.popupBox .propbox .popupContent .ruleYXTit {
    margin: 0 0 1%;
}

.popupBox .propbox .popupContent .ruleYXTit span {
    background: #b8b9bd;
    color: #fff;
    display: inline-block;
    padding: 0 2%;
    line-height: 1.4;
}

.popupBox .propbox .popupContent .ruleYXTxt {
    color: #333;
}

.popupBox .propbox .popupContent .ruleYXTxt.redFont {
    color: #cc0000;
}

.popupBox .propbox .popupContent .ruleYXTips {
    color: #666;
}

.popupBox .propbox .popupContent .ruleYXregister {
    text-align: center;
    margin: 2% 0 0 0;
}

.popupBox .propbox .popupContent .ruleYXregister .resYXBtn {
    display: inline-block;
    cursor: pointer;
    background-color: #cea558;
    color: #fff;
    padding: 5px 5%;
}

.ruleModel {
    padding: 5% 3% 2%;
    overflow: hidden;
}

.ruleModel .titleLine {
    text-align: center;
    line-height: 2;
    margin: 0 0 2%;
    background: url("../img/unpack/titBg.png") no-repeat center center;
    background-size: auto 100%;
    color: #fff;
}

.ruleModel .step {
    text-align: center;
}

.ruleModel .step span {
    display: inline-block;
    background-color: #0a5785;
    color: #fff;
    padding: 0 20px;
    border-radius: 40px;
}

.ruleModel .desTxt {
    text-align: center;
    color: #333;
    font-weight: lighter;
    line-height: 2;
    margin: 1% 0;
}

.ruleModel .desTxt i {
    color: #0a5785;
    font-weight: normal;
    font-style: normal;
}

.ruleModel .line {
    display: block;
    padding: 1% 0 0;
    margin: 0 auto 3%;
    width: 70%;
}

.ruleModel .arrowD {
    display: block;
    margin: 0 auto 2%;
    width: 28px;
}

.ruleModel .desTime {
    text-align: center;
    color: #333;
    font-weight: lighter;
    line-height: 2;
}

.ruleModel .desTime.textLeft {
    text-align: left;
    padding: 0 10%;
}

.ruleModel .grayBg {
    background-color: #b8b9bd;
    margin: 0 -5% -3%;
    padding: 2% 5% 2%;
}

.ruleModel .scoreModel {
    padding: 0 3%;
}

.ruleModel .scoreModel .scoreItem {
    margin: 0 0 4%;
}

.ruleModel .scoreModel .scoreItem .scoreType {
    margin: 0 0 2%;
}

.ruleModel .scoreModel .scoreItem .scoreType .typeTit {
    font-weight: bold;
    display: inline-block;
    color: #fff;
    background-color: #cea558;
    padding: 0 3%;
    border-radius: 5px;
    line-height: 1.8;
}

.ruleModel .scoreModel .scoreItem .scoreTips {
    margin: 0 0 1%;
    color: #333;
}

.ruleModel .scoreModel .scoreItem .scoreTips .dot {
    font-style: inherit;
    color: #cea558;
}

.ruleModel .scoreModel .scoreItem .scoreTips sub {
    vertical-align: middle;
}

.ruleModel .scoreModel .scoreItem .scoreTips .oFont {
    color: #cea558;
}

.ruleModel .scoreModel .scoreItem .scoreTips .interval1 {
    display: inline-block;
    height: 1px;
    vertical-align: middle;
    width: 10.5%;
    margin: 0 2%;
}

.ruleModel .scoreModel .scoreItem .scoreTips .interval2 {
    display: inline-block;
    height: 1px;
    vertical-align: middle;
    width: 10%;
    margin: 0 2%;
}

.ruleModel .scoreModel .scoreItem .scoreTips .hr1 {
    display: inline-block;
    height: 1px;
    vertical-align: middle;
    background: #999;
    width: 35%;
    margin: 0 2%;
}

.ruleModel .scoreModel .scoreItem .scoreTips .hr2 {
    display: inline-block;
    height: 1px;
    vertical-align: middle;
    background: #999;
    width: 29%;
    margin: 0 2%;
}

.ruleModel .scoreModel .scoreItem .scoreTips .hr3 {
    display: inline-block;
    height: 1px;
    vertical-align: middle;
    background: #999;
    width: 20.5%;
    margin: 0 2%;
}

.ruleModel .scoreModel .scoreItem .scoreTips .hr4 {
    display: inline-block;
    height: 1px;
    vertical-align: middle;
    background: #999;
    width: 29%;
    margin: 0 2%;
}

.ruleModel .scoreModel .scoreItem .likeScore {
    display: inline-block;
    width: 100%;
}

.ruleModel .scoreModel .scoreItem .likeScore .likeScoreL {
    float: left;
    width: 49%;
    border-right: 1px solid #999;
}

.ruleModel .scoreModel .scoreItem .likeScore .likeScoreR {
    float: right;
    width: 49%;
}

.ruleModel .scoreModel .scoreItem .likeScore .likeTit {
    position: relative;
}

.ruleModel .scoreModel .scoreItem .likeScore .dot {
    font-style: inherit;
    color: #cea558;
}

.ruleModel .scoreModel .scoreItem .likeScore .oFont {
    color: #cea558;
}

.ruleModel .scoreModel .scoreItem .likeScore .likeTxt {
    padding: 0 0 0 37%;
}

.ruleModel .scoreModel .scoreItem .likeScore .likeTips {
    position: absolute;
    left: 0;
    top: 105%;
}

.ruleModel .scoreModel .scoreItem .likeScore .likeInterval1 {
    display: inline-block;
    height: 1px;
    width: 19%;
}

.ruleModel .scoreModel .scoreItem .likeScore .likeInterval2 {
    display: inline-block;
    height: 1px;
    width: 12%;
}

.ruleModel .scoreModel .scoreItem .likeScore .likeInterval3 {
    display: inline-block;
    height: 1px;
    width: 12%;
}

.ruleModel .scoreModel .scoreItem .likeScore .likeInterval4 {
    display: inline-block;
    height: 1px;
    width: 37%;
}

.ruleModel .scoreModel .scoreItem .likeScore .likeInterval5 {
    display: inline-block;
    height: 1px;
    width: 41%;
}

.ruleModel .tipsTxt {
    font-weight: lighter;
    color: #666;
    text-align: left;
    line-height: 1.5;
}

.ruleModel .grayBg .tipsTxt {
    color: #333
}

.ruleModel .titleLine {
    background: url("../img/unpack/titBg.png") no-repeat center center;
    background-size: auto 100%;
}

.ruleModel.ruleModelL2 .titleLine {
    background: url("../img/L2/titBg.png") no-repeat center center;
    background-size: auto 100%;
}

.ruleModel.ruleModelL2 .desTxt i {
    color: #cc0000;
}

.ruleModel.ruleModelL2 .desTxt span {
    color: #cea558;
}

.ruleModel.ruleModelL2 .step span {
    background-color: #cea558;
}

.ruleModelL2 .ruleTabLine {
    position: absolute;
    left: 0;
    top: 0;
    width: 60%;
    z-index: 9;
    overflow-x: hidden;
}

.ruleModelL2 .ruleTabLine .ruleTabItem {
    position: relative;
    vertical-align: top;
    display: inline-block;
    padding: 0 4% 0 3%;
    cursor: pointer;
    line-height: 40px;
    margin: 0 2.3% 0 0;
}

.ruleModelL2 .ruleTabLine .ruleTabItem i {
    position: relative;
    z-index: 3;
    font-style: inherit;
    color: #fff;
}

.ruleModelL2 .ruleTabLine .ruleTabItem::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10%;
    width: 110%;
    background: #000;
    transform: skewX(25deg);
}

.ruleModelL2 .ruleTabLine .ruleTabItem.active {
    margin: 2% 0.8% 0 0;
}

.ruleModelL2 .ruleTabLine .ruleTabItem.active::before {
    background: #cea558;
}

.ruleModelL2 .stepModel {
    padding: 0 10% 2% 11%;
}

.ruleModelL2 .stepModel .stepTit {
    color: #c99b45;
    margin: 0 3% 0 0;
}

.ruleModelL2 .stepModel .stepCon {
    color: #c99b45;
}

.ruleModelL2 .stepModel .stepTips {
    color: #000;
    line-height: 2;
}

.ruleModelL2 .stepModel .stepTips .dot {
    color: #cea558;
    font-style: inherit;
    margin: -1% 4px 0 0;
    display: inline-block;
    vertical-align: middle;
}

.ruleModelL2 .stepModel .stepTips.light {
    font-weight: lighter;
    color: #333;
}

.ruleModelL2 .ruleConItem {
    padding: 5% 0 0;
}

.ruleModelL2 .ruleConItem.hide {
    display: none;
}

.ruleModel .mechanism {
    background: #ebebeb;
    border-radius: 7px;
    overflow: hidden;
    margin: 0 0 4%;
}

.ruleModel .mechanism .mechanismCon {
    padding: 3% 3% 2%;
}

.ruleModel .mechanism .mechanismCon .conModel {
}

.ruleModel .mechanism .mechanismCon .conModel .modelTit {
    background: url("../img/travel/ruleTitBg.png") no-repeat center left;
    background-size: auto 100%;
    color: #fff;
    padding: 0 0 0 2%;
    letter-spacing: 3px;
    margin: 0 0 2%;
}

.ruleModel .mechanism .mechanismCon .conModel .standard {
    display: inline-block;
    width: 96%;
    vertical-align: top;
    padding: 0 0 0 3%;
    margin: 0 0 3%;
}

.ruleModel .mechanism .mechanismCon .conModel .standard .itemCon {
    float: left;
    width: 50%;
    margin: 0 0 1%;
}

.ruleModel .mechanism .mechanismCon .conModel .standard .itemCon span {
    display: inline-block;
    width: 50%;
    text-align: center;
}

.ruleModel .mechanism .mechanismCon .conModel .standard .itemCon i {
    color: #c00;
    font-style: inherit;
    margin: 0 0 0 5%;
}

.ruleModel .mechanism .mechanismCon .conModel .judge {
    padding: 0 0 0 3%;
}

.ruleModel .mechanism .mechanismCon .conModel .judge p {
    line-height: 2;
}

.ruleModel .mechanism .tipsTxt {
    background: #b8b9bd;
    padding: 2px 0 2px 2%;
}

.rule {
    padding: 5% 13.5% 0;
}

.rule .ruleLayout {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.rule .ruleLayout .ruleCon {
    float: left;
    margin: 2% 0 0 8%;
    width: 41%;
}

.rule .ruleLayout .ruleCon .conTit {
    color: #186391;
    line-height: 1;
    margin: 0 0 3%;
}

.rule .ruleLayout .ruleCon .conDes {
    margin: 0 0 5%;
}

.rule .ruleLayout .ruleCon .conDes .desTxt {
    line-height: 2;
}

.rule .ruleLayout .ruleCon .ruleBtn {
}

.rule .ruleLayout .ruleCon .ruleBtn .checkBtn {
    display: inline-block;
    color: #fff;
    background-color: #186391;
    line-height: 2;
    padding: 0 3%;
    cursor: pointer;
}

.rule .ruleLayout .ruleCode {
    float: right;
    width: 42%;
    position: relative;
}

.rule .ruleLayout .ruleCode .codeImg {
    width: 54%;
}

.rule .ruleLayout .ruleCode .codeTips {
    position: absolute;
    width: 32%;
    left: 59%;
    top: 39%;
}

.rule .ruleLayout .ruleCode .codeTips .tipsBg {
    width: 100%;
    vertical-align: top;
}

.rule .ruleLayout .ruleCode .codeTips .tipsTxt {
    position: absolute;
    top: 2%;
    left: 5%;
    bottom: 0;
    right: 0;
    text-align: center;
    color: #fff;
}

.prize {
    padding: 0 0 4%;
}

.prize .titleDes {
    margin: 0 0 3%;
}

.prize .titleDes .titLine {
    color: #186391;
    text-align: center;
}

.prize .titleDes .subTit {
    color: #333;
    text-align: center;
}

.prize .prizeList {
    display: inline-block;
    width: 100%;
}

.prize .prizeList .prizeL {
    float: left;
    width: 31%;
    position: relative;
}

.prize .prizeList .prizeL .prizeImg {
    width: 99%;
}

.prize .prizeList .prizeL .prizeDes {
    position: absolute;
    z-index: 3;
    bottom: 0;
    color: #fff;
    text-align: center;
    width: 100%;
    margin: 0 0 4%;
    padding: 3% 0 0 0;
    border-top: 1px solid #fff;
}

.prize .prizeList .prizeL .prizeDes .prizeTit {
}

.prize .prizeList .prizeL .prizeDes .prizeTxt {
    font-weight: lighter;
}

.prize .prizeList .prizeR {
    float: right;
    width: 69%;
    margin: 3.1% 0 0 0;
}

.prize .prizeList .prizeR .prizeItem {
    float: left;
    width: 50%;
    padding: 36% 0 0 0;
    height: 0;
    position: relative;
}

.prize .prizeList .prizeR .prizeItem .prizeImg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 96%;
    margin: auto;
}

.prize .prizeList .prizeR .prizeItem .prizeDes {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    color: #fff;
    margin: 0 0 2% 7%;
}

.prize .prizeList .prizeR .prizeItem .prizeDes .prizeTit {
}

.prize .prizeList .prizeR .prizeItem .prizeDes .prizeTxt {
    font-weight: lighter;
}

.prize .prizeList .prizeR .prizeItem .prizeDes.des1 {
}

.prize .prizeList .prizeR .prizeItem .prizeDes.des2 {
}

.prize .prizeList .prizeR .prizeItem .prizeDes.des3 {
}

.prize .prizeList .prizeR .prizeItem .prizeDes.des4 {
}

.prize .prizeResult {
    padding: 2% 0 0;
}

.prize .prizeResult .resultTit {
    font-weight: bold;
    color: #cea558;
    text-align: center;
    margin: 0 0 5px;
}

.prize .prizeResult .resultTxt {
    text-align: center;
    font-weight: lighter;
    line-height: 2;
}

.prize .prizeResult .resultTxt.blueTxt {
    color: #186391;
    font-weight: normal;
}

.prize .prizeResult .resultBtn {
    text-align: center;
    padding: 2% 0 0;
}

.prize .prizeResult .resultBtn .checkBtn {
    display: inline-block;
    background: #cea558;
    color: #fff;
    padding: 5px 5%;
    letter-spacing: 2px;
    cursor: pointer;
}

.ruleL2 {
    padding: 0 0 6%;
}

.ruleL2.noMargin {
    padding: 0;
}

.ruleL2 .life_L2_giftKv {
    position: relative;
    padding: 0 13.5%;
}

.ruleL2 .life_L2_giftKv.awardsGift {
    padding: 0;
}

.ruleL2 .life_L2_giftKv::after {
    content: "";
    position: absolute;
    width: 100%;
    padding: 20% 0 0;
    background: #dbdcde;
    bottom: -6%;
    left: 0;
}

.ruleL2 .life_L2_giftKv.awardsGift::after {
    padding: 45% 0 0;
    background: #dbdcde;
    bottom: 0;
    left: 0;
}

.ruleL2 .life_L2_giftKv.tourGift {
    padding: 3% 13.5% 0;
}

.ruleL2 .life_L2_giftKv.tourGift::after {
    padding: 30% 0 0 0;
}

.ruleL2 .life_L2_giftKv .desTourTxt {
    color: #072740;
    text-align: center;
    line-height: 1.4;
}

.ruleL2 .life_L2_giftKv .desTourTit {
    color: #072740;
    font-weight: bold;
    text-align: center;
    margin: 0 0 5%;
}

.ruleL2 .life_L2_giftKv .videoLayer {
    position: relative;
    z-index: 3;
    margin: 0 0 3%;
}

.ruleL2 .life_L2_giftKv .videoLayer .kvImg {
    width: 100%;
    vertical-align: top;
}

.ruleL2 .life_L2_giftKv .videoLayer .mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #000;
    opacity: 0.4;
    z-index: 2;
}

.ruleL2 .life_L2_giftKv .videoLayer .giftVideoPlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 6%;
    cursor: pointer;
    z-index: 2;
}

.ruleL2 .life_L2_giftKv .videoLayer .videoPlayBtn {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 6%;
    cursor: pointer;
    z-index: 2;
}

/* .ruleL2 .life_L2_giftKv .giftDes {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 3;
}

.ruleL2 .life_L2_giftKv:hover .giftDes {
    display: block!important;
}

.ruleL2 .life_L2_giftKv .giftDes .desBg {
    width: 100%;
}

.ruleL2 .life_L2_giftKv .giftDes .desCon {
    position: absolute;
    left: 0;
    right: 0;
    top: 19%;
    text-align: center;
}

.ruleL2 .life_L2_giftKv .giftDes .desCon .desTit {
    color: #cea558;
    margin: 0 0 0.5%;
}

.ruleL2 .life_L2_giftKv .giftDes .desCon .desTxt {
    color: #fff;
} */
.ruleL2 .life_L2_giftKv .desTit {
    color: #cea558;
    text-align: center;
    padding: 2% 0 1%;
}

.ruleL2 .life_L2_giftKv .desTxt {
    color: #333;
    text-align: center;
    position: relative;
    z-index: 3;
    line-height: 2;
}

.ruleL2 .life_L2_giftKv.tourGift .desTxt {
    line-height: 1.4;
}

.ruleL2 .awardsSwiper {
    overflow: hidden;
    position: relative;
    margin: 0 0 2%;
    z-index: 33;
}

.ruleL2 .awardsSwiper .swiper-wrapper {
}

.ruleL2 .awardsSwiper .swiper-wrapper .swiper-slide {
    width: 100%;
    position: relative;
}

.ruleL2 .awardsSwiper .swiper-wrapper .swiper-slide .videoLayer {
    margin: 1% 13.5% 0;
}

.ruleL2 .awardsSwiper .swiper-wrapper .swiper-slide .videoLayer .kvImg {
}

.ruleL2 .awardsSwiper .swiper-wrapper .swiper-slide .videoLayer .mask {
}

.ruleL2 .awardsSwiper .swiper-wrapper .swiper-slide .videoLayer .videoPlayBtn {
}

.ruleL2 .awardsSwiper .swiper-wrapper .swiper-slide .giftImg {
    width: 73%;
    padding: 0 13.5%;
}

.ruleL2 .awardsSwiper .swiper-wrapper .swiper-slide .giftBtn {
    margin: 3% 0 2%;
}

.ruleL2 .awardsSwiper .swiper-wrapper .swiper-slide .giftBtn .checkBtn {
}

.ruleL2 .awardsSwiper .currencyArrow {
    position: absolute;
    width: 2%;
    height: 0;
    padding: 10% 0 0 0;
    top: -15%;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}

.ruleL2 .awardsSwiper .swiperBtnPrev {
    background: #cea558 url('../img/classroom/merge/arrowLW.png') no-repeat center center;
    background-size: 40% auto;
    left: 6%;
}

.ruleL2 .awardsSwiper .swiperBtnNext {
    background: #cea558 url('../img/classroom/merge/arrowRW.png') no-repeat center center;
    background-size: 40% auto;
    right: 6%;
}

.ruleL2 .awardsSwiper .pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7%;
    z-index: 3;
    text-align: center;
}

.ruleL2 .awardsSwiper .pagination .swiper-pagination-switch {
    padding: 0;
    width: 20px;
    height: 3px;
    border-radius: 3px;
    background: #b5b5b5;
    transition: all 1s;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}

.ruleL2 .awardsSwiper .pagination .swiper-pagination-switch.swiper-active-switch {
    width: 40px;
    background: #000;
}

.ruleL2 .ruleBtn {
    text-align: center;
    margin: 2% 0 3%;
    position: relative;
    z-index: 3;
}

.ruleL2 .ruleBtn .checkBtn {
    display: inline-block;
    background: #cea558;
    color: #fff;
    padding: 0 2%;
    line-height: 2;
    cursor: pointer;
}

.ruleL2 .giftTit {
    text-align: center;
    font-weight: bold;
    color: #cea558;
    line-height: 2;
}

.ruleL2 .giftTit.oFont {
    color: #cea558;
}

.ruleL2 .giftSub {
    text-align: center;
    color: #333;
    line-height: 2;
}

.ruleL2 .giftBtn {
    text-align: center;
    margin: 2% 0 3%;
}

.ruleL2 .giftBtn .checkBtn {
    cursor: pointer;
    background: #cea558;
    text-align: center;
    color: #fff;
    padding: 0.5% 5%;
    display: inline-block;
}

.ruleL2 .prizeCon {
    position: relative;
    /* width: 77%; */
    margin: 0 auto;
}

.ruleL2 .prizeCon .prizeImgBg {
    width: 100%;
}

.ruleL2 .prizeCon .desCon1 {
    position: absolute;
    z-index: 3;
    top: 18%;
    left: 28%;
}

.ruleL2 .prizeCon .desCon2 {
    position: absolute;
    z-index: 3;
    top: 43%;
    left: 11%;
    text-align: right;
}

.ruleL2 .prizeCon .desCon3 {
    position: absolute;
    z-index: 3;
    top: 43%;
    left: 28%;
}

.ruleL2 .prizeCon .desTit {
    color: #fff;
    font-weight: lighter;
    line-height: 1.2;
}

.ruleL2 .prizeCon .desTxt {
    color: #fff;
}

.ruleL2 .prizeCon .prizeName1 {
    position: absolute;
    color: #072740;
    width: 20px;
    right: 1.9%;
    top: 43%;
    line-height: 1.1;
}

.ruleL2 .prizeCon .desItem1 {
    position: absolute;
    top: 4%;
    left: 4%;
    text-align: right;
}

.ruleL2 .prizeCon .desItem2 {
    position: absolute;
    top: 26%;
    right: 7%;
    text-align: right;
}

.ruleL2 .prizeCon .desItem3 {
    position: absolute;
    bottom: 35%;
    left: 17%;
    text-align: right;
}

.ruleL2 .prizeCon .itemTit {
    background: url("../img/travel/txtBg.png") no-repeat bottom right;
    background-size: auto 32%;
    font-weight: lighter;
    color: #072740;
    line-height: 1.3;
    padding: 0 10px 0 0;
    margin: 0 0 10px;
}

.ruleL2 .prizeCon .itemSub {
    color: #072740;
    line-height: 1.2;
}

.ruleL2 .prizeCon .itemDes {
    margin: 20px 0 0 0;
}

.ruleL2 .prizeCon .itemDes p {
    color: #072740;
}

.ruleL2 .prizeCon .prizeDes {
    position: absolute;
    width: 100%;
    left: 0;
    top: 3%;
}

.ruleL2 .prizeCon .prizeDes .desTxt {
    text-align: center;
    color: #fff;
    left: 0;
    top: 5%;
}

.ruleL2 .prizeCon .prizeModel {
    position: absolute;
    width: 100%;
    left: 0;
}

.ruleL2 .prizeCon .prizeModel .modelTit1 {
    text-align: center;
    font-weight: lighter;
    color: #fff;
    line-height: 1.4;
}

.ruleL2 .prizeCon .prizeModel .modelTit2 {
    text-align: center;
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 1%;
}

.ruleL2 .prizeCon .prizeModel .tipsTxt {
    text-align: center;
    font-weight: lighter;
    color: #fff;
}

.ruleL2 .prizeCon .prizeModel.model1 {
    top: 27%;
}

.ruleL2 .prizeCon .prizeModel.model2 {
    top: 67%;
}

.ruleL2 .prizeCon .prizeModel.model3 {
    top: 89%;
}

.ruleL2 .giftList {
    padding: 0 13.5%;
    position: relative;
}

.ruleL2 .giftList::before {
    content: "";
    position: absolute;
    width: 13.5%;
    margin: 5.2% 0 0 0;
    padding: 7% 0 0 0;
    background: #cea558;
    left: 0;
    top: 0;
}

.ruleL2 .giftList::after {
    content: "";
    position: absolute;
    width: 13.5%;
    padding: 5% 0 0 0;
    background: #878586;
    right: 0;
    bottom: 0;
}

.ruleL2 .giftList.giftL3::after {
    background: #cea558;
}

.ruleL2 .giftList .listCon {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.ruleL2 .giftList .listCon .listItem {
    position: relative;
    float: left;
    width: 25%;
}

.ruleL2 .giftList .listCon .listItem .giftImg {
    width: 100%;
}

.ruleL2 .giftList .listCon .listItem .giftDes1 {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    bottom: 0;
    border-left: 1px solid #868686;
    border-right: 1px solid #868686;
    border-bottom: 1px solid #868686;
    width: 100%;
    padding: 10% 0 9% 0;
}

.ruleL2 .giftList .listCon .listItem .giftDes2 {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    border-top: 1px solid #cea558;
    border-left: 1px solid #cea558;
    border-right: 1px solid #cea558;
    width: 100%;
    margin: 28.5% 0 0 0;
    padding: 10% 0 14%;
}

.ruleL2 .giftList .listCon .listItem .giftDes3 {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    bottom: 0;
    border-left: 1px solid #868686;
    border-right: 1px solid #868686;
    border-bottom: 1px solid #868686;
    width: 100%;
    padding: 10% 0 9% 0;
}

.ruleL2 .giftList .listCon .listItem .giftDes4 {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    border-top: 1px solid #cea558;
    border-left: 1px solid #cea558;
    border-right: 1px solid #cea558;
    width: 100%;
    margin: 28.5% 0 0 0;
    padding: 10% 0 14%;
}

.ruleL2 .giftList .listCon .listItem .giftDes5 {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    bottom: 0;
    border-left: 1px solid #a1a1a1;
    border-right: 1px solid #a1a1a1;
    border-bottom: 1px solid #a1a1a1;
    width: 100%;
    padding: 12% 0 7% 0;
}

.ruleL2 .giftList .listCon .listItem .giftDes6 {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    border-top: 1px solid #a1a1a1;
    border-left: 1px solid #a1a1a1;
    border-right: 1px solid #a1a1a1;
    width: 100%;
    margin: 28.5% 0 0 0;
    padding: 1% 0 14%;
}

.ruleL2 .giftList .listCon .listItem .giftDes7 {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    bottom: 0;
    border-left: 1px solid #cea558;
    border-right: 1px solid #cea558;
    border-bottom: 1px solid #cea558;
    width: 100%;
    padding: 10% 0 10% 0;
}

.ruleL2 .giftList .listCon .listItem .giftDes8 {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    border-top: 1px solid #a1a1a1;
    border-left: 1px solid #a1a1a1;
    border-right: 1px solid #a1a1a1;
    width: 100%;
    margin: 28.5% 0 0 0;
    padding: 9% 0 16%;
}

.ruleL2 .giftList .listCon .listItem .desTit {
    color: #cea558;
    font-weight: bold;
    text-align: center;
}

.ruleL2 .giftList .listCon .listItem .desTxt {
    text-align: center;
    color: #333;
}

.ruleL2 .guessLayer {
    display: inline-block;
    width: 73%;
    vertical-align: top;
    padding: 5% 13.5% 0;
}

.ruleL2 .guessLayer .guessImg {
    float: left;
    width: 60%;
}

.ruleL2 .guessLayer .guessCon {
    float: left;
    width: 40%;
    text-align: center;
}

.ruleL2 .guessLayer .guessCon .conTit {
    color: #cea558;
    margin: 2% 0 3%;
}

.ruleL2 .guessLayer .guessCon .conText {
    color: #333;
}

.ruleL2 .guessLayer .guessCon .guessNum {
    padding: 6% 0 2%;
}

.ruleL2 .guessLayer .guessCon .guessNum .guessNumInput {
    width: 50%;
    text-align: center;
    border: none;
    background: #e0e0e0;
    color: #333;
    line-height: 3;
}

.ruleL2 .guessLayer .guessCon .conTips {
    color: #999;
}

.ruleL2 .guessLayer .guessCon .guessBtn {
    padding: 5% 0 2%;
}

.ruleL2 .guessLayer .guessCon .guessBtn .submitBtn {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 1% 11%;
    cursor: pointer;
}

.ruleL2 .guessLayer .guessCon .guessCheck {
}

.ruleL2 .guessLayer .guessCon .guessCheck .checkBtn {
    display: inline-block;
    color: #cea558;
    border-bottom: 1px solid #cea558;
    line-height: 1.5;
    cursor: pointer;
}

.noticeL2 {
    padding: 3% 13.5%;
    position: relative;
}

.noticeL2 .titleCon {
    color: #cea558;
    font-weight: bold;
    text-align: center;
    margin: 0 0 2%;
}

.noticeL2 .noticeCon {
    position: relative;
}

.noticeL2 .noticeCon::before {
    content: "";
    position: absolute;
    background-color: #d4d5d7;
    width: 20%;
    padding: 20% 0 0 0;
    top: 0;
    right: 0;
    margin: -2% -2% 0 0;
}

.noticeL2 .noticeCon .noticeKv {
    position: relative;
    z-index: 3;
}

.noticeL2 .noticeCon .content {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
    margin: 20% 0 0 0;
    width: 36.5%;
}

.noticeL2 .noticeCon .content .title {
    color: #fff;
}

.noticeL2 .noticeCon .content .title i {
    font-style: normal;
}

.noticeL2 .noticeCon .content .text {
    color: #fff;
}

.reviewL2 {
    padding: 3% 13.5% 2.2%;
    position: relative;
}

.reviewL2 .titleCon {
    color: #cea558;
    font-weight: bold;
    text-align: center;
    margin: 0 0 2%;
}

.reviewL2 .reviewCon {
    position: relative;
}

.reviewL2 .reviewCon::before {
    content: "";
    position: absolute;
    background-color: #cea558;
    width: 31%;
    padding: 15% 0 0 0;
    bottom: 0;
    left: 0;
    margin: 0 0 -3% -20%;
}

.reviewL2 .reviewCon .reviewKv {
    position: relative;
    z-index: 3;
}

.reviewL2 .reviewCon .content {
    position: absolute;
    left: 2%;
    top: 0;
    z-index: 3;
    margin: 23% 0 0 0;
    width: 40%;
}

.reviewL2 .reviewCon .content .title {
    color: #fff;
    line-height: 1.2;
}

.reviewL2 .reviewCon .content .title i {
    font-style: normal;
}

.reviewL2 .reviewCon .content .text {
    color: #fff;
    margin: 0 0 7%;
}

.reviewL2 .reviewCon .content .checkL1But {
    background: #000;
    color: #fff;
    padding: 2% 5%;
    cursor: pointer;
}

.reviewL3 {
    padding: 3% 13.5% 2.2%;
    position: relative;
}

.reviewL3 .titleCon {
    color: #cea558;
    font-weight: bold;
    text-align: center;
    margin: 0 0 2%;
}

.reviewL3 .reviewCon {
    position: relative;
}

.reviewL3 .reviewCon::before {
    content: "";
    position: absolute;
    background-color: #d4d5d7;
    width: 17%;
    padding: 17% 0 0 0;
    top: 0;
    right: 0;
    margin: -3% -3% 0 0;
}

.reviewL3 .reviewCon .reviewKv {
    position: relative;
    z-index: 3;
}

.reviewL3 .reviewCon .content {
    position: absolute;
    left: 2%;
    top: 0;
    z-index: 3;
    margin: 23% 0 0 0;
    width: 40%;
}

.reviewL3 .reviewCon .content .title {
    color: #fff;
    line-height: 1.2;
}

.reviewL3 .reviewCon .content .title i {
    font-style: normal;
}

.reviewL3 .reviewCon .content .text {
    color: #fff;
    margin: 0 0 7%;
}

.reviewL3 .reviewCon .content .checkL1But {
    background: #000;
    color: #fff;
    padding: 2% 5%;
    cursor: pointer;
}

.noticeL3 {
    padding: 3% 13.5%;
    position: relative;
}

.noticeL3 .titleCon {
    color: #cea558;
    font-weight: bold;
    text-align: center;
    margin: 0 0 2%;
}

.noticeL3 .noticeCon {
    position: relative;
}

.noticeL3 .noticeCon::before {
    content: "";
    position: absolute;
    background-color: #cea558;
    width: 31%;
    padding: 15% 0 0 0;
    bottom: 0;
    left: 0;
    margin: 0 0 -3% -20%;
}

.noticeL3 .noticeCon .noticeKv {
    position: relative;
    z-index: 3;
}

.noticeL3 .noticeCon .content {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
    margin: 20% 0 0 0;
    width: 36.5%;
}

.noticeL3 .noticeCon .content .title {
    color: #fff;
}

.noticeL3 .noticeCon .content .title i {
    font-style: normal;
}

.noticeL3 .noticeCon .content .text {
    color: #fff;
    margin: 0 0 7%;
}

.noticeL3 .noticeCon .content .checkL1But {
    background: #000;
    color: #fff;
    padding: 2% 5%;
    cursor: pointer;
}

@media screen and (max-width: 1600px) {
    .nav {
        height: 54px;
        line-height: 54px;
        padding: 0 30px;
    }

    .nav .logo a {
        line-height: 54px;
    }

    .nav .lists {
        /* right: 10px; */
    }

    .nav .lists .item {
        /* margin: 0 20px; */
    }

    .nav .brand {
        right: 30%;
    }

    .nav_blank {
        height: 54px;
    }

    .insideNav .navList.fixedNav {
        top: 54px;
    }
}

input::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #999;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #999;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #999;
}

input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #999;
}

input::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #999;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    border-radius: 0;
    background-color: #999997;
}

::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: #999997;
}

::-webkit-scrollbar-thumb {
    width: 5px;
    height: 5px;
    border-radius: 0;
    background-color: #333;
}

.graphProp {
    position: fixed;
    z-index: 999;
    left: -999999999px;
    top: 0;
    width: 100%;
    height: 100%;
}

.graphProp .enlargeBigSwiper {
    position: absolute;
    z-index: 501;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
    width: 90%;
    height: 40%;
    margin: auto;
    box-sizing: border-box;
}

.graphProp .enlargeBigSwiper .swiper-slide {
    padding: 0 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

.graphProp .enlargeBigSwiper img {
    max-height: 100%;
    max-width: 100%;
    border: #fff 5px solid;
}

.graphProp .gray-bg {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    z-index: 500;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.graphProp .prev, .graphProp .next {
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    width: 3%;
    height: 1rem;
    max-width: 20px;
}

.graphProp .prev {
    background: url("../img/prev.png") center left no-repeat;
    background-size: 100% auto;
    left: 0;
}

.graphProp .next {
    background: url("../img/next.png") center left no-repeat;
    background-size: 100% auto;
    right: 0;
}

.graphProp .bottom {
    text-align: center;
    font-size: 0.36rem;
    color: #fff;
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
}

.graphProp.show {
    left: 0;
}

.graphProp .swiper-button-disabled {
    display: none;
}

.modal-box {
    width: 100%;
    height: 100%;
    position: fixed;
    left: -10000000px;
    top: 0;
    z-index: 999;
}

.modal-box.show {
    left: 0;
}

.modal-back {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-login {
    width: 30%;
    background-color: white;
}

.modal-con {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
}

.modal-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 5%;
    margin: 2%;
    cursor: pointer;
}

.modal-details-box {
    width: 70%;
    /* padding: 35% 0 0 0; */
    height: 0;
}

.modal-details-box .modal-close {
    z-index: 100;
    margin: -5% 5px 0 0;
    width: 4%;
}

.modal-details-box .modal-details-con {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding-right: 5px;
    overflow: auto;
}

.modal-details-box .modal-details-con::-webkit-scrollbar {
    width: 0.15rem;
}

.modal-details-box .modal-details-con::-webkit-scrollbar-track {
    background: #FFFFFF;
    border-radius: 0.15rem;
}

.modal-details-box .modal-details-con::-webkit-scrollbar-thumb {
    background: #45536C;
    border-radius: 0.15rem;
}

.modal-details-box .modal-details-con .modal-details-main {
    background: #fff;
    padding: 2%;
}

.modal-details-box .modal-details-con .modal-details-main .talent_video {
    position: relative;
}

.modal-details-box .modal-details-con .modal-details-main .talent_video .videoLayer {
    width: 100%;
}

.modal-details-box .modal-details-con .modal-details-main .talent_video .talent_pic {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.modal-details-box .modal-details-con .modal-details-main .talent_video .talent_pic img {
    width: 100%;
    height: 100%;
}

.modal-details-box .modal-details-con .modal-details-main .talent_video .talent_mask {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.modal-details-box .modal-details-con .modal-details-main .talent_video .talent_mask img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 13%;
    cursor: pointer;
}

.modal-details-box .modal-details-con .modal-details-main .details-swiper-box {
}

.modal-details-box .modal-details-con .modal-details-main .details-swiper-box .swiper-container {
}

.modal-details-box .modal-details-con .modal-details-main .details-swiper-box .swiper-container .swiper-wrapper {
}

.modal-details-box .modal-details-con .modal-details-main .details-swiper-box .swiper-container .swiper-wrapper .swiper-slide {
}

.modal-details-box .modal-details-con .modal-details-main .details-swiper-box .swiper-container .swiper-wrapper .swiper-slide .flex_img {
    text-align: center;
}

.modal-details-box .modal-details-con .modal-details-main .details-swiper-box .swiper-container .swiper-wrapper .swiper-slide .flex_img .swiper-car {
    width: 100%;
}

.modal-details-box .modal-details-con .modal-details-main .details-swiper-box .swiper-container .swiper-wrapper .swiper-slide .flex_img.vertical {
    height: 100%;
}

.modal-details-box .modal-details-con .modal-details-main .details-swiper-box .swiper-container .swiper-wrapper .swiper-slide .flex_img.vertical .swiper-car {
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

.modal-details-box .modal-details-con .modal-details-main .details-swiper-box .swiper-container .details_swiper_btn {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    width: 8%;
    padding: 5% 0 0 0;
}

.modal-details-box .modal-details-con .modal-details-main .details-swiper-box .swiper-container .details_swiper_btn.swiper-button-next {
    background-size: 100% auto;
    background: url("../img/rightArrow.png") no-repeat center center;
    right: 1%;
}

.modal-details-box .modal-details-con .modal-details-main .details-swiper-box .swiper-container .details_swiper_btn.swiper-button-prev {
    background-size: 100% auto;
    background: url("../img/leftArrow.png") no-repeat center center;
    left: 1%;
}

.modal-details-box .modal-details-con .modal-details-main .details-swiper-box .swiper-container .details_swiper_btn.swiper-button-disabled {
    display: none;
}

.modal-details-box .modal-details-con .modal-details-main .details-info {
    margin: 2% 0 0 0;
}

.modal-details-box .modal-details-con .modal-details-main .details-info .info-one-row {
    line-height: 22px;
    margin: 0 0 2%;
}

.modal-details-box .modal-details-con .modal-details-main .details-info .info-one-row .details-info-txt {
    display: inline-block;
    width: 49%;
    vertical-align: top;
    line-height: 1.5;
}

.modal-details-box .modal-details-con .modal-details-main .details-info .info-one-row .details-info-txt span {
}

.modal-details-box .modal-details-con .modal-details-main .details-info .info-one-row .details-info-txt .details_nickname {
    font-weight: normal;
}

.modal-details-box .modal-details-con .modal-details-main .details-info .info-one-row .details-info-txt .details_title {
    font-weight: normal;
}

.modal-details-box .modal-details-con .modal-details-main .details-info .info-one-row .details-info-desc {
    word-break: break-all;
}

.modal-details-box .modal-details-con .modal-details-main .details-info .info-one-row .details-info-desc .details_desc, .modal-details-box .modal-details-con .modal-details-main .details-info .info-one-row .details-info-desc .details_nickname, .modal-details-box .modal-details-con .modal-details-main .details-info .info-one-row .details-info-desc .details_title {
    font-weight: normal;
}

.modal-details-box .modal-details-con .modal-details-main .details-data {
    display: inline-block;
    width: 100%;
}

.modal-details-box .modal-details-con .modal-details-main .details-data .data-like {
    float: right;
    color: #999;
    padding: 0 0 2% 0;
    display: flex;
    align-items: center;
    align-content: center;
}

.modal-details-box .modal-details-con .modal-details-main .details-data .data-like i {
    display: inline-block;
    vertical-align: top;
    margin: 0 0.1rem 0 0;
    width: 15px;
    height: 13px;
    background: url("../img/like.png") no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
}

.modal-details-box .modal-details-con .modal-details-main .details-data .data-like i.on {
    background: url("../img/unpack/liked.png") no-repeat center center;
    background-size: 100%;
}

.modal-details-box .modal-details-con .modal-details-main .details-placeholder {
    margin: 2% 0 5%;
}

.modal-details-box .modal-details-con .modal-details-main .details-placeholder .details-placeholder-input {
    height: 30px;
    line-height: 30px;
    border: 1px solid #adadad;
    padding: 0 2%;
    width: 81%;
    vertical-align: top;
}

.modal-details-box .modal-details-con .modal-details-main .details-placeholder .details-placeholder-btn {
    float: right;
    width: 13%;
    background: #75849c;
    text-align: center;
    color: #fff;
    line-height: 32px;
    cursor: pointer;
    vertical-align: top;
}

.modal-details-box .modal-details-con .modal-details-main .person-list {
}

.modal-details-box .modal-details-con .modal-details-main .person-list li {
    position: relative;
    line-height: 26px;
    margin: 0 0 3%;
}

.modal-details-box .modal-details-con .modal-details-main .person-list li .person-pic {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 8%;
    max-width: 26px;
}

.modal-details-box .modal-details-con .modal-details-main .person-list li .person-txt {
    padding: 0 0 0 11%;
}

.modal-title {
    background: url("../img/btn.png") no-repeat left center;
    background-size: 100% 100%;
    color: #FFFFFF;
    font-family: SourceHanSansCN-Bold;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    font-style: italic;
    margin: -5% 0 0 0;
    white-space: nowrap;
    padding: 1% 5%;
}

.login-main {
    padding-left: 5%;
    padding-top: 9%;
    box-sizing: border-box;
}

.login-row {
    display: flex;
    align-items: center;
    margin-bottom: 2%;
    white-space: nowrap;
}

.login-label {
    color: #45536C;
    font-family: SourceHanSansCN-Regular;
    width: 20%;
    line-height: 30px;
    margin: 0 0 2%;
}

.login-name {
    width: 3.21rem;
}

.login-right {
    display: flex;
    align-items: center;
    width: 80%;
}

.login-right input {
    background: #FFFFFF;
    border: 1px solid #ABABAB;
    box-sizing: border-box;
    padding: 0 5%;
    height: 35px;
    font-family: SourceHanSansCN-Light;
    width: 80%;
}

.login-right input::-webkit-input-placeholder {
    color: #999999;
}

.login-right .login-yzm {
    width: 45%;
    margin-right: 5%;
}

.login-right .login-yzm-pic {
    width: 30%;
    height: 32px;
}

.login-yzm-pic img {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.login-hq {
    width: 30%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #45536C;
    color: #FFFFFF;
    border-radius: .03rem;
    cursor: pointer;
}

.login-hq-gry {
    background-color: #cecece;
    color: #9f9e9e;
}

.login-form-btn {
    width: 30%;
    line-height: 1.75;
    background: url("../img/btn.png") no-repeat left top;
    background-size: 100% 100%;
    color: #FFFFFF;
    font-family: SourceHanSansCN-Bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    cursor: pointer;
    margin: 5% auto;
}

.posterprop {
    width: 520px;
    min-width: auto;
    max-height: inherit;
    overflow: hidden;
    position: absolute;
    transform: translate(0, 0);
    background-color: #fff;
}

.posterprop.loading::after {
    content: "";
    display: inline-block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: url(../img/travel/loading.gif) rgba(0, 0, 0, 0.6) no-repeat center center;
    background-size: 80px;
    position: absolute;
    z-index: 11;
    height: auto;
}

.posterprop .close {
    background: none;
    border: none;
    border-radius: 0;
    width: 35px;
    top: 5px;
    right: 5px;
    left: auto;
}

.posterprop .close img {
    width: 100%
}

.posterprop .out {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 9;
    overflow: hidden;
}

.posterprop .out .posterBg {
    width: 100%;
}

.posterprop .out .posterCon {
    position: absolute;
    top: 21%;
    left: 14%;
    right: 14%;
}

.posterprop .out .posterCon .conImg {
    display: block;
    max-width: 100%;
    max-height: 255px;
    margin: 0 auto 5%;
}

.posterprop .out .posterCon .comTit {
    color: #555;
    margin: 0 0 1%;
    font-size: 36px;
}

.posterprop .out .posterCon .comTxt {
    color: #333;
    line-height: 1.8;
    font-size: 15px;
}

.posterprop .out .posterName {
    position: absolute;
    left: 14%;
    top: 74.5%;
    font-size: 20px;
}

.posterprop .out .codeImg {
    position: absolute;
    right: 14%;
    top: 70%;
    width: 135px;
    text-align: center;
}

.posterprop .out .codeImg .codeTips {
    color: #81919d;
    text-align: left;
    font-size: 14px;
    margin: 0 0 5px;
}

.posterprop .out .codeImg .codePic {
    width: 90%;
    margin: 0 auto 6px;
}

.posterprop .out .codeImg .codePic canvas, .posterprop .out .codeImg .codePic img {
    width: 90px;
    height: 90px;
    background-color: #fff;
    margin: 0 auto;
    padding: 5px;
}

.posterprop .out .codeImg .codeDes {
    text-align: center;
    font-size: 13px;
}

.posterprop .down {
    position: absolute;
    left: 30%;
    bottom: 5%;
    z-index: 9;
    display: block;
    width: 40%;
    line-height: 35px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #cea558;
    color: #fff;
    text-align: center;
    letter-spacing: 0.3em;
    cursor: pointer;
}

.posterprop .down.loading::after {
    content: "";
    display: inline-block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: url(../img/travel/loading.gif) rgba(0, 0, 0, 0.8) no-repeat center center;
    background-size: auto 80%;
    position: absolute;
    z-index: 1;
}

.travelTable {
    border-top: 1px solid #393842;
    border-left: 1px solid #393842;
    box-sizing: border-box;
    margin: 0 0 5%;
}

.travelTable .tableTop {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    background: #186391;
}

.travelTable .tableTop .thLine {
    text-align: center;
    float: left;
    width: 33.33%;
    padding: 8px 0;
    border-right: 1px solid #393842;
    border-bottom: 1px solid #393842;
    box-sizing: border-box;
    color: #fff;
}

.travelTable .tableCon {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.travelTable .tableCon .tdLine {
    text-align: center;
    float: left;
    width: 33.33%;
    padding: 8px 0;
    border-right: 1px solid #393842;
    border-bottom: 1px solid #393842;
    box-sizing: border-box;
}

.travelNature {
}

.travelNature .natureTit {
    margin: 3% 0 2%;
    text-align: center;
}

.travelNature .natureTit .tipsTit {
    color: #072740;
    font-weight: lighter;
}

.travelNature .natureMain {
}

.travelNature .natureMain .nature_swiper {
    width: 73%;
    margin: 0 auto 4%;
}

.travelNature .natureMain .nature_swiper .swiper-wrapper {
}

.travelNature .natureMain .nature_swiper .swiper-wrapper .swiper-slide {
}

.travelNature .natureMain .nature_swiper .swiper-wrapper .swiper-slide .natureVideo {
    margin: 0 auto;
    width: 90%;
    position: relative;
}

.travelNature .natureMain .nature_swiper .swiper-wrapper .swiper-slide .natureVideo .videoImg {
    width: 100%;
}

.travelNature .natureMain .nature_swiper .swiper-wrapper .swiper-slide .natureVideo .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000;
    z-index: 2;
    opacity: 0.3;
}

.travelNature .natureMain .nature_swiper .swiper-wrapper .swiper-slide .natureVideo .videoPlayBtn {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 7%;
    cursor: pointer;
}

.travelNature .natureMain .nature_swiper .nature_swiper_btn {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2.5%;
    z-index: 3;
    cursor: pointer;
}

.travelNature .natureMain .nature_swiper .nature_swiper_btn.swiper-button-prev {
    background: url("../img/travel/arrowLB.png") no-repeat center center;
    left: 0%;
    background-size: 100% auto;
}

.travelNature .natureMain .nature_swiper .nature_swiper_btn.swiper-button-next {
    background: url("../img/travel/arrowRB.png") no-repeat center center;
    right: 0;
    background-size: 100% auto;
}

.travelNature .natureMain .nature_swiper .nature_swiper_btn.swiper-button-disabled {
    display: none;
}

.travelTime {
}

.travelTime .timeTit {
    margin: 0 0 3%;
    text-align: center;
}

.travelTime .timeTit .tipsTit {
    color: #072740;
    font-weight: lighter;
}

.travelTime .timeTips {
    text-align: center;
    margin: 0 0 2%;
}

.travelTime .timeTips .tipsItem {
    display: inline-block;
    vertical-align: top;
    margin: 0 3%;
}

.travelTime .timeTips .tipsItem .tipsTit {
    color: #072740;
    font-weight: bold;
    display: block;
}

.travelTime .timeTips .tipsItem .tipsTxt {
    color: #072740;
    font-weight: lighter;
    display: block;
}

.travelTime .travelTimeBox {
    width: 68%;
    max-width: 1300px;
    margin: 0 auto 3%
}

.travelTime .travelTimeBox ul {
}

.travelTime .travelTimeBox ul li {
}

.travelTime .travelTimeBox ul li a {
}

.travelTime .travelTimeBox ul li a img {
    width: 100%;
}

.poster-main {
    width: 90%;
    /* height: 565px; */
    position: relative;
    margin: 30px auto
}

.poster-main a, .poster-main img {
    display: block
}

.poster-main .poster-list {
    width: 1000px;
    height: 565px
}

.poster-main .poster-list .poster-item {
    width: 100%;
    height: 565px;
    position: absolute;
    left: 0;
    top: 0
}

.travelTime .timeDes {
    margin: 0 0 3%;
    text-align: center;
}

.travelTime .timeDes .desTit {
    font-weight: bold;
    margin: 0 0 1%;
}

.travelTime .timeDes .desTxt {
    font-weight: lighter;
}

.blindBoxTips {
    position: relative;
}

.blindBoxTips .tipsVal {
    position: absolute;
    top: 0.3rem;
    right: 0;
    width: 100%;
    text-align: center;
}

.blindBoxTips .tipsVal .tipsTit {
    font-size: 0.44rem;
    color: #cea558;
    line-height: 1.4;
}

.blindBoxTips .tipsVal .tipsTxt {
    font-size: 0.3rem;
    color: #fff;
    margin: 0.3rem 0 0.1rem;
}

.blindBoxTips .tipsVal .tipsTime {
    font-size: 0.26rem;
    color: #fff;
}

.blindBoxCon {
    width: 91%;
    margin: 0 auto;
    background: url('../img/blindbox/pageBg.jpg') repeat-y 0 0;
    background-size: 100% auto;
}

.blindBoxCon .codeLayout {
    text-align: center;
    margin: -1rem 0 0 0;
    padding: 0 0 5%;
}

.blindBoxCon .codeLayout .codeBox {
    display: inline-block;
    vertical-align: top;
    width: 16.45%;
    margin: 0 0 0.2rem;
    position: relative;
}

.blindBoxCon .codeLayout .codeBox .boxImg {
    width: 100%;
}

.blindBoxCon .codeLayout .codeBox .codeImg {
    position: absolute;
    width: 81%;
    left: 0;
    top: 16.2%;
    right: 0;
    margin: auto;
}

.blindBoxCon .codeLayout .codeTips {
    font-size: 0.3rem;
    color: #000;
}

.boxGeneralTit {
    width: 40%;
    height: 1.16rem;
    margin: 0 auto 3%;
    background: url(../img/blindbox/titleBg.png) no-repeat 0 0;
    background-size: 100% 100%;
    text-align: center;
}

.boxGeneralTit .licon {
    width: 0.37rem;
    margin: 0.25rem 0.1rem 0 0;
    display: inline-block;
    vertical-align: top;
}

.boxGeneralTit .titleName {
    display: inline-block;
    font-size: 0.44rem;
    color: #cea558;
    line-height: 0.95rem;
    vertical-align: top;
    font-style: inherit;
}

.boxGeneralTit .ricon {
    width: 0.37rem;
    margin: 0.25rem 0 0 0.1rem;
    display: inline-block;
    vertical-align: top;
}

.boxGeneralbtn {
    display: inline-block;
    width: 19%;
    margin: 0 41%;
    background: url("../img/blindbox/btnBg.png") no-repeat 0 0;
    background-size: 100% 100%;
    text-align: center;
    font-size: 0.24rem;
    color: #373737;
    line-height: 0.55rem;
    cursor: pointer;
}

.giftInventory {
    text-align: left;
    padding: 8% 0 6%;
}

.giftInventory .inventoryList {
    display: inline-block;
    vertical-align: top;
    width: 78%;
    margin: 0 11% 5%;
}

.giftInventory .inventoryList .mysterious {
    float: left;
    width: 39%;
    position: relative;
    margin: 2.5% 0 0 0;
}

.giftInventory .inventoryList .mysterious .prizeImg {
    width: 100%;
}

.giftInventory .inventoryList .mysterious .prizeDes {
    position: absolute;
    top: 30%;
    left: 5%;
}

.giftInventory .inventoryList .mysterious .prizeDes .desTit {
    font-size: 0.35rem;
    font-weight: bold;
    color: #d1ac67;
    margin: 0 0 1%;
}

.giftInventory .inventoryList .mysterious .prizeDes .desTxt {
    font-size: 0.27rem;
    color: #d1ac67;
}

.giftInventory .inventoryList .ordinary {
    float: right;
    width: 56%;
}

.giftInventory .inventoryList .ordinary .ordinaryItem {
    float: left;
    width: 46%;
    margin: 0 0 4% 4%;
    padding: 25% 0 0 0;
    position: relative;
}

.giftInventory .inventoryList .ordinary .ordinaryItem .prizeImg {
    position: absolute;
    width: 100%;
    bottom: 0;
    right: 0;
}

.giftInventory .inventoryList .ordinary .ordinaryItem .prizeDes {
    position: absolute;
    z-index: 2;
    top: 44%;
    left: 6%;
}

.giftInventory .inventoryList .ordinary .ordinaryItem .prizeDes .desTit {
    font-size: 0.21rem;
    font-weight: bold;
    color: #fff;
    margin: 0 0 5%;
}

.giftInventory .inventoryList .ordinary .ordinaryItem .prizeDes .desTit.marginTop {
    margin: 10% 0 5%;
}

.giftInventory .inventoryList .ordinary .ordinaryItem .prizeDes .desTxt {
    font-size: 0.19rem;
    color: #fff;
    line-height: 1.4;
}

.giftInventory .inventoryList .ordinary .ordinaryItem .prizeDes .desTxt.small {
    font-size: 0.15rem;
}

.blindbox_details {
    text-align: left;
    padding: 0 0 5%;
}

.blindbox_details .detaileTips {
    text-align: center;
    margin: 0 0 5%;
}

.blindbox_details .detaileTips .tipsTxt {
    font-size: 0.26rem;
    color: #000;
    line-height: 2;
}

.blindbox_details .processList {
    display: inline-block;
    width: 80%;
    margin: 0 10% 5%;
}

.blindbox_details .processList .processItem {
    float: left;
    width: 22.5%;
    margin: 0 1%;
    position: relative;
    border: 2px solid #000;
    text-align: center;
}

.blindbox_details .processList .processItem .iconImg {
    position: absolute;
    width: 0.6rem;
    top: -0.35rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 3;
}

.blindbox_details .processList .processItem::before {
    content: "";
    background: #e0e0e0;
    position: absolute;
    width: 1rem;
    height: 0.2rem;
    top: -0.1rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
}

.blindbox_details .processList .processItem .processName {
}

.blindbox_details .processList .processItem .processName .lineIcon {
    display: inline-block;
    vertical-align: top;
    width: 0.43rem;
    margin: 0.58rem 0 0 0;
}

.blindbox_details .processList .processItem .processName .nameCon {
    display: inline-block;
    vertical-align: top;
    line-height: 1rem;
    font-size: 0.3rem;
    margin: 0.15rem 0.12rem 0;
    font-style: inherit;
}

.photoDetails {
    position: relative;
}

.photoDetails .bgImg {
    width: 100%;
}

.photoDetails .detailsCon {
    /* position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3; */
}

.photoDetails .detailsCon .describe {
    text-align: center;
    margin: 0.55rem 0;
}

.photoDetails .detailsCon .describe .desTxt {
    font-size: 0.3rem;
    line-height: 1.75;
    color: #000;
}

.photoDetails .detailsCon .describe .desTxt.orangeFont {
    color: #cea558;
}

.photoDetails .detailsCon .family_like {
}

.photoDetails .detailsCon .family_like .likeCon {
    position: relative;
}

.photoDetails .detailsCon .family_like .likeCon .bgImg {
    width: 100%;
}

.photoDetails .detailsCon .family_like .likeCon .likeMain {
    position: absolute;
    left: 10%;
    top: 0;
    right: 10%;
}

.photoDetails .detailsCon .family_like .likeCon .likeMain .agreementTitle {
    position: relative;
    margin: 5% auto 4%;
    width: 6.5rem;
    height: 1.1rem;
}

.photoDetails .detailsCon .family_like .likeCon .likeMain .agreementTitle .titleBg {
    width: 100%;
    height: 100%;
}

.photoDetails .detailsCon .family_like .likeCon .likeMain .agreementTitle .logoImg {
    position: absolute;
    left: 0;
    right: 0;
    top: -0.15rem;
    margin: 0 auto;
    width: 4rem;
}

.photoDetails .detailsCon .family_like .likeCon .likeMain .agreementTitle .titleCon {
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
    bottom: 0;
    font-size: 0.4rem;
    line-height: 0.46rem;
    height: 0.46rem;
    color: #000;
    font-weight: bold;
    margin: auto;
    text-align: center;
    letter-spacing: 0.05rem;
}

.photoDetails .detailsCon .family_like .likeCon .likeImg {
    float: left;
    width: 52%;
    margin: 0 2% 0 1%;
    position: relative;
}

.photoDetails .detailsCon .family_like .likeCon .likeImg .photoImg {
    width: 100%;
}

.photoDetails .detailsCon .family_like .likeCon .likeImg .jionLink {
    position: absolute;
}

.photoDetails .detailsCon .family_like .likeCon .likeRule {
    float: right;
    width: 33%;
    margin: 0 10% 0 0;
}

.photoDetails .detailsCon .family_like .likeCon .likeRule .ruleOperate {
    position: relative;
    height: 0.75rem;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    margin: 15% 0 15%;
}

.photoDetails .detailsCon .family_like .likeCon .likeRule .ruleOperate::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 15%;
    height: 2px;
    background: #000;
}

.photoDetails .detailsCon .family_like .likeCon .likeRule .ruleOperate::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 15%;
    height: 2px;
    background: #000;
}

.photoDetails .detailsCon .family_like .likeCon .likeRule .ruleOperate .title {
    position: absolute;
    left: 0;
    top: -0.22rem;
    right: 0;
    margin: auto;
    text-align: center;
    font-size: 0.34rem;
    line-height: 0.44rem;
    color: #000;
    font-weight: bold;
}

.photoDetails .detailsCon .family_like .likeCon .likeRule .ruleOperate .ruleCheckBtn {
    position: absolute;
    left: 0;
    bottom: -0.25rem;
    right: 0;
    margin: auto;
    text-align: center;
    font-size: 0.24rem;
    line-height: 0.5rem;
    letter-spacing: 0.01rem;
    background: #000;
    color: #fff;
    width: 64%;
    cursor: pointer;
}

.photoDetails .detailsCon .family_like .likeCon .likeRule .codeLayout {
    position: relative;
    margin: auto;
    width: 75%;
}

.photoDetails .detailsCon .family_like .likeCon .likeRule .codeLayout .codeBg {
    width: 100%;
}

.photoDetails .detailsCon .family_like .likeCon .likeRule .codeLayout .codeCon {
    position: absolute;
    left: 14%;
    right: 13%;
    top: 10%;
}

.photoDetails .detailsCon .family_like .likeCon .likeRule .codeLayout .codeCon .codeImg {
    width: 98%;
    margin: 0 1%;
}

.photoDetails .detailsCon .family_like .likeCon .likeRule .codeLayout .codeCon .codeDes {
    text-align: center;
    font-size: 0.2rem;
    color: #000;
    line-height: 1;
}

.photoDetails .detailsCon .family_like .likeCon .likeDes {
    float: left;
    width: 100%;
    text-align: center;
    margin: 2% 0 0;
}

.photoDetails .detailsCon .family_like .likeCon .likeDes .desTxt {
    font-size: 0.3rem;
    line-height: 1.75;
}

.photoDetails .detailsCon .family_like .likeCon .likeDes .likeCheckBtn {
    background: url(../img/blindbox/btnBg.png) no-repeat 0 0;
    background-size: 100% 100%;
    color: #000;
    text-align: center;
    font-size: 0.25rem;
    width: 20%;
    margin: 1% auto 0;
    padding: 0.1rem 0;
    cursor: pointer;
}

.photoDetails .detailsCon .family_like .likeGift {
    position: relative;
}

.photoDetails .detailsCon .family_like .likeGift .bgImg {
    width: 100%;
}

.photoDetails .detailsCon .family_like .likeGift .giftMain {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
}

.photoDetails .detailsCon .family_like .likeGift .giftTitle {
    position: relative;
    margin: 6% auto 5%;
    width: 27%;
}

.photoDetails .detailsCon .family_like .likeGift .giftTitle .titleBg {
    width: 100%;
}

.photoDetails .detailsCon .family_like .likeGift .giftTitle .logoImg {
    position: absolute;
    left: 0;
    right: 0;
    top: -0.1rem;
    margin: 0 auto;
    width: 64%;
}

.photoDetails .detailsCon .family_like .likeGift .giftTitle .titleCon {
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
    bottom: 0;
    font-size: 0.44rem;
    line-height: 0.44rem;
    height: 0.44rem;
    color: #000;
    font-weight: bold;
    margin: auto;
    text-align: center;
}

.photoDetails .detailsCon .family_like .likeGift .giftTips {
    margin: 0 10% 3%;
    display: inline-block;
    width: 80%;
    vertical-align: top;
}

.photoDetails .detailsCon .family_like .likeGift .giftTips .tipsItem {
    font-size: 0.22rem;
    color: #000;
    float: left;
    width: 25%;
    position: relative;
    text-align: center;
}

.photoDetails .detailsCon .family_like .likeGift .giftTips .tipsItem .bigFont {
    font-size: 0.28rem;
    font-weight: bold;
    margin: 0 0.1rem 0 0;
}

.photoDetails .detailsCon .family_like .likeGift .giftTips .tipsItem .tipsCon {
    display: inline-block;
}

.photoDetails .detailsCon .family_like .likeGift .giftTips .tipsItem .separate {
    position: absolute;
    font-style: italic;
    top: 0;
    right: 0;
    bottom: 0;
    height: 0.22rem;
    line-height: 0.22rem;
    margin: auto;
}

.photoDetails .detailsCon .family_like .likeGift .giftList {
    margin: 0 10% 5%;
    display: inline-block;
    width: 80%;
}

.photoDetails .detailsCon .family_like .likeGift .giftList .giftItem {
    float: left;
    width: 25%;
}

.photoDetails .detailsCon .family_like .likeGift .giftList .giftItem .itemCon {
    margin: 0 10%;
    position: relative;
}

.photoDetails .detailsCon .family_like .likeGift .giftList .giftItem .itemCon .giftBg {
    width: 100%;
}

.photoDetails .detailsCon .family_like .likeGift .giftList .giftItem .itemCon .giftImg {
    position: absolute;
    left: 5%;
    top: 13%;
    width: 90%;
}

.photoDetails .detailsCon .family_like .likeGift .giftList .giftItem .itemCon .giftSub {
    position: absolute;
    right: 5%;
    bottom: 7%;
    width: 35%;
}

.photoDetails .detailsCon .family_like .likeGift .giftList .giftItem .itemCon .giftTit {
    position: absolute;
    font-size: 0.2rem;
    left: 5%;
    bottom: 13%;
}

.photoDetails .detailsCon .family_like .likeGift .giftList .giftItem .itemCon.item1 {
    transform: rotate(3deg);
    margin: 15% 10% 0;
}

.photoDetails .detailsCon .family_like .likeGift .giftList .giftItem .itemCon.item2 {
    transform: rotate(-3deg);
}

.photoDetails .detailsCon .family_like .likeGift .giftList .giftItem .itemCon.item3 {
    transform: rotate(3deg);
    margin: 20% 10% 0;
}

.photoDetails .detailsCon .family_like .likeGift .giftList .giftItem .itemCon.item4 {
    transform: rotate(-3deg);
}

.workShow {
    background-color: #252525;
    position: relative;
    z-index: 2;
    padding: 0 0 3%;
}

.workShow .workTitle {
    width: 18%;
    margin: -3% 41% 3%;
    display: inline-block;
    position: relative;
    vertical-align: top;
}

.workShow .workTitle .titleBg {
    width: 100%;
}

.workShow .workTitle .titleCon {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    line-height: 0.44rem;
    height: 0.44rem;
    text-align: center;
    font-size: 0.44rem;
}

.workShow .familyWork {
}

.workShow .familyWork .searchBox {
    text-align: right;
    margin: 0 10% 2%;
}

.workShow .familyWork .searchBox .seachInput {
    line-height: 0.41rem;
    background: transparent;
    border: 1px solid #fff;
    outline: none;
    margin: 0 0.2rem 0 0;
    padding: 0 0.1rem;
    font-size: 0.22rem;
    color: #fff;
    width: 20%;
}

.workShow .familyWork .searchBox .searchBtn {
    display: inline-block;
    vertical-align: top;
    line-height: 0.41rem;
    height: 0.41rem;
    background: #fff;
    padding: 0 0.1rem;
    font-size: 0.2rem;
    color: #cea558;
    cursor: pointer;
}

.workShow .familyWork .searchBox .searchBtn .seachIcon {
    height: 0.21rem;
    vertical-align: top;
    display: inline-block;
    margin: 0.1rem 0 0 0.05rem;
}

.workShow .familyWork .workShowList {
}

.workShow .familyWork .workShowList .works_nodata {
    display: none;
    font-size: 20px;
    color: #fff;
    padding: 10% 0;
    text-align: center;
}

.workShow .familyWork .workShowList .workShowListCon {
    margin: 0 7% 2%;
    display: inline-block;
    width: 86%;
    vertical-align: top;
}

.workShow .familyWork .workShowList .workShowListCon .listItem {
    float: left;
    width: 18%;
    margin: 0 1% 2%;
    background: #d0d0d0;
    padding: 0 0 1%;
    border-radius: 0.075rem;
    overflow: hidden;
    min-height: 7rem;
}

.workShow .familyWork .workShowList .workShowListCon .listItem .itemCon {
}

.workShow .familyWork .workShowList .workShowListCon .listItem .itemCon .photoImg {
    margin: 0 0 2%;
    width: 100%;
}

.workShow .familyWork .workShowList .workShowListCon .listItem .itemCon .desCon {
    padding: 0 5%;
}

.workShow .familyWork .workShowList .workShowListCon .listItem .itemCon .desCon .conLine {
    font-size: 0.18rem;
    display: inline-block;
    width: 100%;
    margin: 2% 0 0 0;
}

.workShow .familyWork .workShowList .workShowListCon .listItem .itemCon .desCon .conLine .conTit {
    float: left;
    width: 35%;
}

.workShow .familyWork .workShowList .workShowListCon .listItem .itemCon .desCon .conLine .conTxt {
    float: right;
    width: 60%;
    padding: 0 5% 0 0;
}

.workShow .familyWork .workShowList .workShowListCon .listItem .itemCon .desCon .conLine .conTxt.oneLine {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workShow .familyWork .workShowList .workShowListCon .listItem .itemCon .desCon .conLine .conTxt.threeLine {
    overflow: auto;
    height: 1.15rem;
    text-align: justify;
}

.workShow .familyWork .workShowList .works-pages {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 3%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
}

.workShow .familyWork .workShowList .works-pages .page_btns {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    /* background: #000; */
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    border-radius: 5px;
}

.workShow .familyWork .workShowList .works-pages .page_btns.pages-prev {
    background-image: url("../img/leftW.png");
    background-size: auto 50%;
}

.workShow .familyWork .workShowList .works-pages .page_btns.pages-next {
    background-image: url("../img/rightW.png");
    background-size: auto 50%;
}

.workShow .familyWork .workShowList .works-pages .page_group {
    display: flex;
    margin: 0 15px;
    flex-shrink: 0;
    flex-grow: 0;
    white-space: nowrap;
}

.workShow .familyWork .workShowList .works-pages .page_group .pages-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    line-height: 30px;
    border-radius: 5px;
    color: #fff;
    margin: 0 5px;
    cursor: pointer;
    flex-grow: 0;
    flex-shrink: 0;
}

.workShow .familyWork .workShowList .works-pages .page_group .pages-slh {
    height: 30px;
    width: 30px;
    line-height: 30px;
    color: #fff;
    letter-spacing: 5px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
}

.workShow .familyWork .workShowList .works-pages .page_group .pages-btn.active {
    background: transparent;
    color: #000;
    background: #fff;
}

.workShow .statement {
    text-align: right;
    margin: 0 9% 2%;
}

.workShow .statement span {
    font-size: 0.28rem;
    color: #888;
    border-bottom: 2px solid #888;
    padding: 0 0 0.05rem;
    cursor: pointer;
}

.family_agreement {
    position: relative;
    padding: 27.5% 0 0 0;
}

.family_agreement .conBg {
    width: 100%;
}

.family_agreement .agreementCon {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

.family_agreement .agreementCon .agreementTitle {
    position: relative;
    margin: 6% auto 3%;
    width: 35%;
}

.family_agreement .agreementCon .agreementTitle .titleBg {
    width: 100%;
}

.family_agreement .agreementCon .agreementTitle .logoImg {
    position: absolute;
    left: 0;
    right: 0;
    top: -0.1rem;
    margin: 0 auto;
    width: 64%;
}

.family_agreement .agreementCon .agreementTitle .titleCon {
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
    bottom: 0;
    font-size: 0.46rem;
    line-height: 0.46rem;
    height: 0.46rem;
    color: #000;
    font-weight: bold;
    margin: auto;
    text-align: center;
}

.family_agreement .agreementCon .agreementOperate {
    display: inline-block;
    width: 60%;
    vertical-align: top;
    margin: 0 20%;
}

.family_agreement .agreementCon .agreementOperate .operateCheck {
    text-align: center;
    float: left;
    width: 50%;
}

.family_agreement .agreementCon .agreementOperate .operateCheck .title {
    font-size: 0.36rem;
    color: #000;
    font-weight: bold;
    margin: 0 0 3%;
}

.family_agreement .agreementCon .agreementOperate .operateCheck .checkBtn {
    text-align: center;
    font-size: 0.24rem;
    line-height: 0.5rem;
    letter-spacing: 0.01rem;
    background: #000;
    color: #fff;
    width: 60%;
    cursor: pointer;
    margin: 0 auto;
}

.familyRulePopup {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: none;
}

.familyRulePopup .mask {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
}

.familyRulePopup .ruleCon {
    position: absolute;
    width: 60%;
    padding: 4% 1% 0;
    background-color: #fff;
    left: 20%;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 0.1rem;
    z-index: 3;
}

.familyRulePopup .ruleCon .closeBtn {
    position: absolute;
    right: 0;
    top: 0;
    border-top-right-radius: 0.1rem;
    cursor: pointer;
    width: 10%;
}

.familyRulePopup .ruleCon .ruleMain {
    overflow: auto;
    padding: 0% 2%;
}

.familyRulePopup .ruleCon .ruleMain .modelCon {
    margin: 2% 0 4%;
    border: 2px solid #000;
    padding: 4% 2% 2%;
    position: relative;
}

.familyRulePopup .ruleCon .ruleMain .modelCon.hide {
    display: none;
}

.familyRulePopup .ruleCon .ruleMain .modelCon.noBorder {
    border: 0;
}

.familyRulePopup .ruleCon .ruleMain .modelCon .modelTit {
    position: absolute;
    font-size: 0.4rem;
    left: 0;
    right: 0;
    top: -0.2rem;
    line-height: 0.4rem;
    height: 0.4rem;
    margin: 0 auto;
    background: #fff;
    width: 30%;
    text-align: center;
}

.familyRulePopup .ruleCon .ruleMain .modelCon .modelTxt {
    font-size: 0.24rem;
    line-height: 1.8;
    margin: 0 0 1%;
}

.familyRulePopup .ruleCon .ruleMain .modelCon .modelTips {
    font-size: 0.18rem;
    color: #444;
}

.familyRulePopup .ruleCon .ruleMain .modelCon .fontCenter {
    text-align: center
}

.familyRulePopup .ruleCon .ruleMain .modelCon .modelTxt .ruleNo {
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    background: #cea558;
    border-radius: 100%;
    text-align: center;
    line-height: 0.28rem;
    color: #fff;
    vertical-align: middle;
    font-style: initial;
    margin: 0 0.1rem 0 0;
    font-size: 0.2rem;
}

.familyRulePopup .ruleCon .ruleMain .modelCon .modelTxt .orangeFont {
    color: #cea558;
}

.familyRulePopup .ruleCon .western {
    font-size: 11pt;
}

.familyRulePopup .ruleCon .ruleTab {
    text-align: center;
    padding: 0.2rem 0;
}

.familyRulePopup .ruleCon .ruleTab .tabItem {
    font-size: 0.2rem;
    color: #cea558;
    padding: 0 0 0.05rem;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    margin: 0 0.1rem;
}

.familyRulePopup .ruleCon .ruleTab .tabItem:hover {
    border-bottom: 1px solid #cea558;
}

.familyRulePopup .ruleCon .ruleTab .tabItem.active {
    border-bottom: 1px solid #cea558;
}

.quickReport {
}

.quickReport .reportTopCon {
    padding: 4% 0 6%;
    background: #fcfbfc;
}

.quickReport .reportTopCon .conTopTit {
    text-align: center;
    position: relative;
    margin: 0 0 3%;
}

.quickReport .reportTopCon .conTopTit .titBgImg {
    width: 28%;
    display: inline-block;
    vertical-align: top;
}

.quickReport .reportTopCon .conTopTit .titTxt {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.44rem;
    color: #c8a165;
    bottom: 0;
}

.quickReport .reportTopCon .conDes {
    margin: 0 11%;
}

.quickReport .reportTopCon .conDes .desTxt {
    font-size: 0.3rem;
    color: #333;
    line-height: 1.8;
    font-weight: lighter;
    letter-spacing: 0.03rem;
    text-align: justify;
    text-align-last: justify;
    white-space: nowrap;
}

.quickReport .reportTopCon .conDes .desTxt:last-child {
    text-align: left;
    text-align-last: left;
}

.fullSwiper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.fullSwiper .swiperArrowL{
    position: absolute;
    width: 3%;
    left: 2%;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    min-width:0.45rem;
}
.fullSwiper .swiperArrowR{
    position: absolute;
    width: 3%;
    right: 2%;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    min-width:0.45rem;
}
.fullSwiper .swiper-wrapper {
    margin: 0 0 2%;
    overflow: hidden;
}

.fullSwiper .swiper-wrapper .swiper-slide {
    position: relative;
}

.fullSwiper .swiper-wrapper .swiper-slide .conImg {
    width: 100%;
}

.fullSwiper .swiper-wrapper .swiper-slide .videoCon{
    width: 100%
}
.fullSwiper .swiper-wrapper .swiper-slide .desCon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4%;
}

.fullSwiper .swiper-wrapper .swiper-slide .desCon .desTit {
    text-align: center;
    font-size: 0.44rem;
    color: #fff;
    line-height: 1;
    margin: 0 0 1%;
}

.fullSwiper .swiper-wrapper .swiper-slide .desCon .desTxt {
    text-align: center;
    font-size: 0.3rem;
    color: #fff;
}

.fullSwiper .pageLayout {
    text-align: center;
}

.fullSwiper .pageLayout.rightLayout {
    text-align: right;
}

.fullSwiper .pageLayout .arrowL {
    display: inline-block;
    vertical-align: middle;
    width: 0.85rem;
}

.fullSwiper .pageLayout .pageNum {
    display: inline-block;
    vertical-align: top;
    font-size: 0.2rem;
    color: #666666;
    margin: -0.01rem 0 0;
}

.fullSwiper .pageLayout .pageNum .nowNum {
    font-style: normal;
    margin: 0 0.1rem;
}

.fullSwiper .pageLayout .pageNum .total {
    font-style: normal;
    margin: 0 0.05rem;
}

.fullSwiper .pageLayout .arrowR {
    display: inline-block;
    vertical-align: middle;
    width: 0.85rem;
}

.reportSwiperCon {
    background: #fff;
    padding: 5% 11%;
}

.reportDesCon {
    padding: 5% 11%;
    position: relative;
    overflow: hidden;
}

.reportDesCon.grayBg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 25%;
    background: #fcfbfc;
}

.reportDesCon .floatL {
    float: left;
}

.reportDesCon .floatR {
    float: right;
}

.reportDesCon .desConTxt {
    position: relative;
    z-index: 2;
    width: 40%;
    margin: 4% 0 0;
}

.reportDesCon .desConTxt .desTit {
    font-size: 0.38rem;
    font-weight: bold;
    color: #c8a167;
    line-height: 1.5;
    margin: 0 0 0.3rem;
    letter-spacing: 0.03rem;
}

.reportDesCon .desConTxt .desTxt {
    font-size: 0.24rem;
    color: #444;
    letter-spacing: 0.015rem;
    white-space: nowrap;
    font-weight: lighter;
    line-height: 1.5;
}

.reportDesCon .desConTxt .desTxt .boldFont {
    font-weight: bold;
}

.reportDesCon .desConTxt .desTxt sup {
    font-size: 0.15rem;
}

.reportDesCon .desConImg {
    position: relative;
    z-index: 2;
    width: 52%;
}

.reportDesCon .desConImg img {
    width: 100%;
}

.reportDesTxt {
    padding: 0 0 3%;
    position: relative;
}

.reportDesTxt::before {
    content: "";
    position: absolute;
    top: -1.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fcfbfc;
}

.reportDesTxt .title {
    text-align: center;
    font-size: 0.38rem;
    font-weight: bold;
    color: #c8a167;
    line-height: 1.5;
    margin: 0 0 0.3rem;
    letter-spacing: 0.03rem;
    position: relative;
    z-index: 2;
}

.reportDesTxt .text {
    text-align: center;
    font-size: 0.24rem;
    color: #444;
    letter-spacing: 0.015rem;
    white-space: nowrap;
    font-weight: lighter;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}

.reportWhy {
    overflow: hidden;
    padding: 0 11% 5%;
    position: relative;
}

.reportWhy::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fcfbfc;
}

.reportWhy .whySwiper {
    position: relative;
    z-index: 2;
    float: left;
    width: 57%;
}

.reportWhy .whyRight {
    position: relative;
    z-index: 2;
    float: right;
    width: 35%;
    margin: 4% 0 0;
}

.reportWhy .whyRight .whyTitle {
    position: relative;
    padding: 0 0 0.5rem;
    margin: 0 0 15%;
}

.reportWhy .whyRight .whyTitle .txtImg {
    width: 32%;
}

.reportWhy .whyRight .whyTitle .icon {
    position: absolute;
    top: -0.6rem;
    width: 25%;
}

.reportWhy .whyRight .whyTitle .titTxt {
    font-size: 0.36rem;
    color: #c5a163;
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
}

.reportWhy .whyRight .whyList {
    display: none;
}
.reportWhy .whyRight .whyList.show {
    display: block;
}

.reportWhy .whyRight .whyList .listTit {
    font-size: 0.3rem;
    color: #333;
    position: relative;
    padding: 0 0 0 0.175rem;
    font-weight: bold;
}

.reportWhy .whyRight .whyList .listTit::before {
    content: "";
    position: absolute;
    left: 0;
    top: 35%;
    bottom: 25%;
    width: 2px;
    background: #333;
}

.reportWhy .whyRight .whyList .listItem {
    font-size: 0.24rem;
    color: #333;
}

.resellHonor {
}

.resellHonor .honorDes {
    position: relative;
}

.resellHonor .honorDes .bgImg {
    width: 100%;
}

.resellHonor .honorDes .desContent {
    position: absolute;
    left: 0;
    right: 0;
    top: 25%;
}

.resellHonor .honorDes .desContent .conTit {
    position: relative;
    margin: 0 0 3%;
    text-align: center;
}

.resellHonor .honorDes .desContent .conTit .titBgImg {
    width: 36%;
}

.resellHonor .honorDes .desContent .conTit .titTxt {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.38rem;
    color: #c8a165;
    bottom: 0;
}

.resellHonor .honorDes .desContent .conTxt {
    text-align: center;
    font-size: 0.24rem;
    color: #333;
    font-weight: lighter;
    line-height: 2;
}

.imgTxtCon {
    background-color: #fcfbfc;
    padding: 5% 0 4%;
}

.imgTxtCon .conItem {
    display: inline-block;
    width: 100%;
}

.imgTxtCon .conItem .conImg {
    float: left;
    width: 52%;
}

.imgTxtCon .conItem .conTxt {
    float: left;
    width: 48%
}

.imgTxtCon .conItem.panTop .conImg {
    border-left: 0.2rem solid #fff;
    border-top: 0.2rem solid #fff;
    box-sizing: border-box;
    width: 55%;
}

.imgTxtCon .conItem .conTxt .text {
    margin: 20% 17% 0;
    font-size: 0.24rem;
    color: #333;
    white-space: nowrap;
}

.imgTxtCon .conItem.panTop {
    margin: -1rem 0 0 0;
}

.imgTxtCon .conItem.panTop .conTxt {
    width: 45%;
}

.imgTxtCon .conItem.panTop .conTxt .text {
    margin: 30% 17% 0;
}

.imgTxtCon .imgTxtDes {
    text-align: center;
    margin: 4% 0 0;
    font-size: 0.3rem;
    color: #333333;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}