.hide2 { visibility: hidden; } body .layui-layer { background-color: transparent; box-shadow: none; border-radius: 0; } body .layui-layer.layui-layer-hui { background-color: #000; filter: alpha(opacity=60); background-color: rgba(0, 0, 0, .6); } body, html { line-height: 1.2; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体"; background-color: #16123C; } .main{ background-color: #16123C; width: 10rem; position: relative; font-size: 0; margin: 0 auto; overflow: hidden; padding-bottom: 0.666rem; } .rule{ background: url(../img/cn/rule.png) no-repeat; background-size: 100% 100%; width: 0.92rem; height: 1.093rem; position: fixed; right: 0.12rem; top: 6.386rem; z-index: 1000; } .mHead{ background: url(../img/cn/headbg.png) no-repeat; background-size: 100% 100%; width: 10rem; height: 7.866rem; position: relative; font-size: 0; margin: 0 auto; } .mCon{ position: relative; width: 100%; font-size: 0; } .mDetail{ position: relative; width: 100%; font-size: 0; margin: 0.506rem auto 0; padding-top: 0.48rem; } .mDetail:nth-child(1){ margin-top: 0; } .mListTop{ background: url(../img/bg_top.png) no-repeat; background-size: 9.2rem 2.173rem; width: 9.2rem; height: 1.9rem; font-size: 0; margin: 0 auto; position: relative; } .mListCenter{ background: url(../img/bg_center.png) no-repeat; background-size: 100% 100%; width: 9.2rem; min-height: 3.5rem; position: relative; margin: 0 auto; font-size: 0; } .mListBottom{ background: url(../img/bg_bottom.png) no-repeat; background-size: 9.2rem 1.72rem; background-position: bottom; width: 9.2rem; height: 1.72rem; position: relative; margin: -.05rem auto 0; font-size: 0; } .mDetailTitle{ background: url(../img/title_bg.png) no-repeat; background-size: 100% 100%; width: 5.44rem; height: 1.093rem; line-height: 1.093rem; font-size: 0.373rem; font-weight: bold; color: #FFF; text-shadow: 0 0 0.3em #f8acf0, 0 0 0.3em #f8acf0; text-align: center; top: 0; z-index: 10; } .mDetailOther{ font-size: 0.373rem; font-weight: bold; color: #FFF; text-shadow: 0 0 0.3em #27D7BD, 0 0 0.3em #27D7BD; position: absolute; top: 1.226rem; left: 0; width: 100%; text-align: center; z-index: 1; } .mDetailOther span{ font-weight: bold; font-size: .55rem; } .mBox{ position: relative; margin: 0 auto; font-size: 0; width: 100%; text-align: center; } .mBoxDetail{ width: 2.1rem; position: relative; text-align: center; display: inline-block; font-size: 0; vertical-align: top; } .mBoxDetailBg{ background: url(../img/box.png) no-repeat; background-size: 100% 100%; width: 1.813rem; height: 1.813rem; position: relative; margin: 0 auto; } .mBoxDetailBg img{ width: 80%; } .mBoxDetail p{ font-size: 0.346rem; color: #FFF; text-shadow: 0 0 0.2em #F671E6, 0 0 0.2em #F671E6; width: 100%; text-align: center; margin-top: 0.133rem; } .mLine{ width: 100%; height: 0.026rem; bottom: .1rem; } .mCharge{ position: absolute; left: 0.906rem; bottom: 0.746rem; font-size: 0.346rem; font-weight: bold; color:#FFF; text-shadow: 0 0 0.3em #f8acf0, 0 0 0.3em #f8acf0; } .mCharge font{ text-shadow: 0 0 0.3em #417d76, 0 0 0.3em #417d76; } .mCharge font.mNum{ font-size: 0.48rem; vertical-align: -.02rem; } .mBtn{ background: url(../img/btn1.png) no-repeat; background-size: 100% 100%; width: 3.546rem; height: 1.013rem; line-height: .95rem; position: absolute; bottom: 0.506rem; left: 5.426rem; text-align: center; font-size: 0.4rem; font-weight: bold; color:#FFF; text-shadow: 0 0 0.5em #F671E6, 0 0 0.5em #F671E6; } .mDetail2 .mBox{ width: 7.5rem; } .mDetail2.mDetail .mBoxDetail:nth-child(n+4){ margin-top: .133rem; } .mDetail2 .mBox{ padding-bottom: .8rem; } .mBtn2{ background: url(../img/btn2.png) no-repeat; background-size: 100% 100%; text-shadow: 0 0 0.5em #417d76, 0 0 0.5em #417d76; } .mBtn3{ background: url(../img/btn3.png) no-repeat; background-size: 100% 100%; text-shadow:none; } .ruleMasking{ width: 9.2rem; position: relative; margin: 0 auto; } .ruleMasking .mListTop{ height: 1.333rem; } .maskingCon{ padding-top: 0.48rem; position: relative; width: 100%; margin: 0 auto; overflow: hidden; } .closeMasking{ background: url(../img/close.png) no-repeat; background-size: 100% 100%; width: 0.906rem; height: 0.906rem; position: absolute; right: 0.4rem; top: 0.933rem; z-index: 20; } .ruleMaskBox{ position: relative; width: 8rem; font-size: 0; margin: 0 auto; } .ruleMaskInfo{ display:flex; justify-content:flex-start; align-items:flex-start; } .ruleMaskInfo1{ align-items:center; } .ruleMaskTitle{ font-size: 0.4rem; font-weight: bold; color:#FFF; text-shadow: 0 0 0.5em #23F88C, 0 0 0.5em #23F88C; min-width: 1.15rem; height: .5rem; line-height: .5rem; } .ruleMaskDesc{ font-size: 0.346rem; color:#FFF; text-shadow: 0 0 0.2em #F671E6, 0 0 0.2em #F671E6; } .ruleMaskInfo2 .ruleMaskDesc,.ruleMaskInfo3 .ruleMaskDesc{ vertical-align: middle; margin-top: .03rem; } .ruleMaskInfo2,.ruleMaskInfo3{ margin-top: 0.2rem; } .ruleMaskDesc p{ line-height: 1.4; } .noMasking,.yesMasking,.onlyMasking1,.onlyMasking2,.onlyMasking3,.successMasking,.successMasking2{ width: 9.2rem; position: relative; font-size: 0; margin: 0 auto; } .noMasking .closeMasking,.yesMasking .closeMasking{ top: .426rem; } .noMasking .mListCenter,.yesMasking .mListCenter,.onlyMasking1 .mListCenter,.onlyMasking2 .mListCenter,.onlyMasking3 .mListCenter{ min-height: 2.133rem; } .noMaskTitle { font-size: 0.346rem; color: #FFF; text-shadow: 0 0 0.2em #FF75ED, 0 0 0.2em #FF75ED; position: absolute; top: 1.773rem; left: 0; width: 100%; text-align: center; z-index: 20; } .noSubmit,.onlyMaskingBtn{ background: url(../img/btn2.png) no-repeat; background-size: 100% 100%; width: 3.546rem; height: 1.013rem; line-height: 1.013rem; bottom: 0.733rem; z-index: 20; color: #FFF; font-size: 0.4rem; font-weight: bold; text-align: center; text-shadow: 0 0 0.3em #417d76, 0 0 0.3em #417d76; } .yesT1, .yesT2 { font-size: 0.346rem; color: #FFF; text-shadow: 0 0 0.2em #F671E6, 0 0 0.2em #F671E6; position: absolute; top: 1.773rem; left: 0; width: 100%; text-align: center; z-index: 20; } .yesT2 { top: 2.4rem; } .line { position: absolute; left: 0; top: 3.533rem; width: 100%; height: 0.026rem; z-index: 20; } .yesBtn{ position: absolute; bottom: 0.733rem; left: 0.8rem; background: url(../img/btn1.png) no-repeat; background-size: 100% 100%; width: 3.546rem; height: 1.013rem; line-height: 1.013rem; z-index: 20; color: #FFF; font-size: 0.4rem; font-weight: bold; text-align: center; text-shadow: 0 0 0.3em #F671E6, 0 0 0.3em #F671E6; } .yesSubmit2{ background: url(../img/btn2.png) no-repeat; background-size: 100% 100%; text-shadow: 0 0 0.3em #417d76, 0 0 0.3em #417d76; left: auto; right: .8rem; } .onlyMasking1 .yesT1{ top: 2.133rem; } .onlyMasking1 .yesT2{ top: 2.733rem; } .onlyMasking1 .line,.onlyMasking2 .line{ top: 3.906rem; } .maskingConBox{ position: absolute; left: 0; top: .48rem; z-index: 20; width: 100%; height: 100%; } .only2MaskTitle{ font-size: 0.346rem; color: #FFF; text-shadow: 0 0 0.3em #5bf3ad, 0 0 0.3em #5bf3ad; position: absolute; top: .773rem; left: 0; width: 100%; text-align: center; } .only2Msg { font-size: 0.346rem; color: #FFF; text-shadow: 0 0 0.2em #F671E6, 0 0 0.2em #F671E6; position: absolute; top: 1.35rem; left: 0; width: 100%; text-align: center; } .onlyId, .onlyName { position: absolute; left: 3.44rem; top: 2.066rem; font-size: .346rem; color: #FFF; text-shadow: 0 0 0.3em #5bf3ad, 0 0 0.3em #5bf3ad; font-weight: bold; } .onlyId input { width: 3rem; margin-left: 0.266rem; text-shadow: none; color: #FFF; text-shadow: 0 0 0.2em #F671E6, 0 0 0.2em #F671E6; background-color: transparent; margin-top: -.05rem; } .onlyId input::-webkit-input-placeholder { color:#FFF; text-shadow: 0 0 0.2em #F671E6, 0 0 0.2em #F671E6; } .onlyId input:-ms-input-placeholder { color:#FFF; text-shadow: 0 0 0.2em #F671E6, 0 0 0.2em #F671E6; } .onlyId input:-moz-placeholder { color:#FFF; text-shadow: 0 0 0.2em #F671E6, 0 0 0.2em #F671E6; } .onlyId input::-moz-placeholder { color:#FFF; text-shadow: 0 0 0.2em #F671E6, 0 0 0.2em #F671E6; } .onlyName{ top: 2.666rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 4rem; } .onlyName span{ width: 2rem; color:#FFF; text-shadow:none; text-shadow: 0 0 0.2em #F671E6, 0 0 0.2em #F671E6; margin-left: 0.04rem; } .successMasking .mBox,.successMasking2 .mBox{ padding-top: 1.64rem; } .successMasking .mListCenter{ min-height: 4.913rem; } .successMasking .line{ top: 6rem; } .successMasking .onlyMaskingBtn{ bottom: 1rem; } .successMasking2 .mListCenter{ height: 6.78rem; } .successMasking2 .mBox{ width: 7.5rem; } .successMasking2 .line{ top: 8.6rem; } .successMasking2 .mBox .mBoxDetail:nth-child(n+4){ margin-top: 0.133rem; } .mHead p{ position: absolute; font-size: 0.32rem; color: #DAF8FF; top: 3.4rem; width: 100%; text-align: center; text-shadow: 0 1px 1px #364471; left: 0; } .mHead p:nth-child(2){ width: 62%; left: 20%; top: 4rem; color: #E3E4EA; text-shadow: none; } /*英文样式*/ .L_En .mHead{ background: url(../img/en/headbg.png) no-repeat; background-size: 100% 100%; width: 10rem; height: 8.88rem; } .L_En .rule{ background: url(../img/en/rule.png) no-repeat; background-size: 100% 100%; } .L_En .ruleMaskBox{ width: 8.25rem; margin: 0 0 0 .55rem; } .L_En .ruleMaskInfo3{ display: block; } .L_En .ruleMaskInfo2 .ruleMaskDesc{ margin-top: .05rem; } .L_En .ruleMasking .mListBottom{ height: 1.2rem; } .L_En .onlyMasking3 .yesT1{ width: 80%; left: 10%; } .L_En .onlyMasking1 .mDetailTitle,.L_En .onlyMasking2 .mDetailTitle,.L_En .onlyMasking3 .mDetailTitle{ font-size: .36rem; } .L_En .onlyMasking2 .only2MaskTitle{ width: 80%; left: 10%; } .L_En .onlyMasking2 .only2Msg{ top: 1.65rem; } .L_En .onlyMasking2 .onlyId{ top: 2.166rem; } .L_En .onlyMasking2 .onlyName{ top: 2.766rem; } .L_En .noMasking .noMaskTitle{ width: 70%; left: 15%; } /*阿语样式*/ .L_Ar{ direction: rtl; } .L_Ar .mHead{ background: url(../img/ar/headbg.png) no-repeat; background-size: 100% 100%; width: 10rem; height: 8.88rem; } .L_Ar .rule{ background: url(../img/ar/rule.png) no-repeat; background-size: 100% 100%; right: auto; left: .12rem; } .L_Ar .mCharge{ left: auto; right: .906rem; } .L_Ar .mBtn{ left: auto; right: 5.426rem; } .L_Ar .ruleMaskInfo3{ display: block; } .L_Ar .mHead p{ font-size: 0.373rem; color: #E3E4EA; } .L_Ar .closeMasking{ right: auto; left: .4rem; } .L_Ar .ruleMaskInfo2 .ruleMaskTitle{ min-width: .6rem; } .L_Ar .ruleMaskInfo2 .ruleMaskDesc{ direction: ltr; } .L_Ar .yesMasking .yesT1{ width: 60%; left: 20%; }